序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:
1、What is design?
2、What to learn?
3、How to design?
总结起来就是:2W1H。
由于文章篇幅较长,所以分成3篇来介绍,分别是:
Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)
/************************** 文章华丽开场*******************************/
1. what is design?
为了更直观解释什么是设计,首先来看一组图:
从上面的图中你可以看出,在生活中你所看到的种种物品,都和设计密切相关。我们每天都在和设计接触,设计存在我们生活的每一个角落,大到一架飞机,小到一颗细小的针,都离不开设计。
设计就是为了传达一定目的而创造、组织、布置事物,设计师就是要让所有的东西相互适合。所谓设计,就是找到一个能够改善现状的途径。
1)Good design is innovative.
创新:创新的可能性永远无穷尽;
2)Good design makes a product useful.
可用性:不仅指功能上,还有心理和审美方面;
3)Good design is aesthetic.
美观:美感也是产品可用性的重要组成部分,只有精心设计的产品才值得每天相处;
4)Good design makes a product understandable.
易读性:清晰地表达产品的结构、功能及使用方法,也就是拥有良好的人机交互界面;
5)Good design is unobtrusive.
谦逊不张扬:产品保持自己应有的特性,而不是作为装饰品或艺术品;
6) Good design is honest.
诚实:忠实地传达功能,而不是企图显得更高级更奢华;
7)Good design is long-lasting.
耐久:经典比时尚更持久;
8)Good design is thorough, down to the last detail.
细枝末节都深思熟虑;
9)Good design is environmentally friendly.a
对环境友好:产品的整个生命周期尽量节省能源,并将污染降至最小化;
10)Good design is as little design as possible.
尽少的设计:至纯至简,要更少设计但却要更好。
设计和艺术的区别
这两张都是椅子,但你应该可以清楚地辨别,哪张是出自艺术家之手,哪张是由设计师打造。因此:
好的艺术需要去演绎,好的设计需要被理解
搞艺术需要天赋,搞设计更看重技巧和经验
好的艺术品传递每个人的信息是不一样的,好的设计需要传递同样的信息给每个人。
艺术是自我的表现,而设计则需要满则目标用户
所以,设计并不是我们想象的那么高深莫测,高贵典雅。做好设计,你只需要掌握一定的规律即可:
Natrue(规律) + Sence(感觉) = Design
序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:
1、What is design?
2、What to learn?
3、How to design?
总结起来就是:2W1H。
由于文章篇幅较长,所以分成3篇来介绍,分别是:
Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)
/****************************接上文 《Web设计基础知识(一)》**************************/
2、What to learn?
在做好设计之前,首先你需要学习一些基本的知识:Colors(颜色) + layOut(布局)
1) Color
a. Color – properties(颜色属性)
颜色具有三个基本属性:色相、纯度、明度以及色温。
色相:色彩的色相是色彩的最大特征,是指能够比较确切地表示某种颜色色别的名称。色彩的成分越多,色彩的色相越不鲜明。
纯度:色彩的纯度是指色彩的纯净程度。它表示颜色中所含有色成分的比例,比例愈大,色彩愈纯,比例愈小,则色彩的纯度也愈些
明度:色彩的明度是指色彩的明亮纯度。各种有色物体由于它们反射光量的区别就产生颜色的明暗强弱。色彩的明度有两种情况:一是同一色相不同明度;二是各种颜色的不同明度。
色温:是发光体表面的温度,而不是到达视觉视网膜的温度,人类对颜色的感觉是一样的。这里谈谈对于色温(color Temperature)的误解:
(在色温上的喜好是因人而定的,这跟我们日常看到景物景色有关,例如在接近赤道的人,日常看到的平均色温是在11000K(8000K(黄昏)~17000K(中午)),所以比较喜欢高色温(看起来比较真实),相反的,在纬度较高的地区(平均色温约6000K)的人就比较喜欢低色温的(5600K或6500K),也就是说如果您用一台高色温的电视去表现北极的风景,看起来就感觉偏青;相反的若您用低色温的电视去看亚热带的风情,您会感觉有点偏红,)
b. colors - classification(色彩分类)
色相:色彩所呈现出来的质地面貌,如日光通过三棱镜分解出的红、橙、黄、绿、青、紫六种色相。
c. 色彩搭配
1. 一个网页的色调是怎样的?
色调指的是一幅画中画面色彩的总体倾向,是大的色彩效果。这种在不同颜色的物体上,笼罩着某一种色彩,使不同颜色的物体都带有同一色彩倾向,这样的色彩现象就是色调。一个网站的色调基本分配比例如下:
●主色调 ●辅色调 ●点睛色
2. 怎样确定一个网站的色调(5种颜色搭配方式)
① 单色匹配
由一种色相的不同明度组成的搭配,这种搭配很好的体验了明暗的层次感。
② 近似色搭配
相邻的两到三个颜色称职为近似色,如下面的(橙色、褐色、黄色),这种搭配比较让人赏心悦目。低对比度、比较和谐。
③ 补色搭配
色环中相对的两个色相搭配。颜色对比强烈,传递能量、活力、兴奋等意思,补色中最好让一个颜色多。一个颜色(如下图紫色和黄色)。
顺便介绍一个常用补色搭配口诀:红驴王子惨啦(红绿/黄紫/橙蓝)
④ 分裂色搭配
同时用补色及类比色的方法确定颜色的关系,称为分裂补色。这样搭配,既有类比色的低对比度,又有补色的力量感,形成一种既和谐又有重点的颜色关系,如下图。红色的文字就显得忒别的铿锵有力,特别突出。
⑤ 原色搭配
大部分是在儿童产品上,色彩明快,这样的搭配在欧美也非常流行。如蓝红搭配。Frickr的logo以及麦当来的logo色与主色调红黄色搭配等。
各色彩搭配强度(strength)应该在以下范围内:
序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕3个方面给大家介绍设计的基础知识:
1、What is design?
2、What to learn?
3、How to design?
总结起来就是:2W1H。
由于文章篇幅较长,所以分成3篇来介绍,分别是:
Web设计基础知识(一)
Web设计基础知识(二)
Web设计基础知识(三)
/***************************接上文 《Web设计基础知识(二)》*****************************/
2) layOUT
1) Layout-布局四原则(principles)
1、contrast对比
对比采用:颜色+尺寸+图形+特殊布局。
2、重复(Repeatition)
3、对齐Alignment
4、Proximity亲密性
最后拿一张最近做过的项目:QQ面板里的界面分析下:
色调:主色调(蓝色和黑色)、辅色调(紫色、绿色)、点睛色(黄色)
色彩搭配: 红与绿 黄与紫 橙与蓝。颜色对比强烈,传递能力、活力、兴奋,给用户一种既和谐又非常有重点的感觉。
布局原则:页面分别用了对比、重复、对齐、亲密性,与设计布局原则十分吻合。
2) Layout- Gold ratio(黄金分割)
1、黄金分割率(Golden Setion)
黄金分割无论是在自然界还是在设计界都用随处可见,而且用得相当广泛。
2、黄金矩形(Golden Rectangle)
它的长宽之比为黄金分割率0.618,并且可以不断以这种比例分割下去。
自然界的黄金比例:
艺术界也采用黄金比例:
工业界的黄金比例:
人体黄金比例:
比如名模:艾尚真、林志玲都是九头身,号称中国第一黄金比例身材,完美。
网页设计的黄金比列:
3. How to design?
设计就如画画,先布局(layout)再填色(colors)。
网页也一样,先布局再填色:
最后推荐一个设计教程:http://bbs.blueidea.com/thread-2949749-1-1.html,教你从零开始设计一个漂亮的网页。