序：设计对于我们技术人员来说也是一门不可或缺的知识，学习设计就像学习一门新的语言一样，它也有遵从自己的一套规则。知道越多关于设计的知识，你就越能理解设计师的工作和意义，和设计师的交流也会更加畅通无阻。下面主要围绕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，教你从零开始设计一个漂亮的网页。
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
