TAT.sheran Web设计基础知识(三)
In Web开发,用户体验设计 on 2013年12月26日 by view: 10,666
2

序:设计对于我们技术人员来说也是一门不可或缺的知识,学习设计就像学习一门新的语言一样,它也有遵从自己的一套规则。知道越多关于设计的知识,你就越能理解设计师的工作和意义,和设计师的交流也会更加畅通无阻。下面主要围绕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对比

图片14

对比采用:颜色+尺寸+图形+特殊布局。

2、重复(Repeatition

图片15

 

3、对齐Alignment

图片16

 

4、Proximity亲密性

图片17

 

最后拿一张最近做过的项目:QQ面板里的界面分析下:

图片18

 

色调:主色调(蓝色和黑色)、辅色调(紫色、绿色)、点睛色(黄色)

色彩搭配: 红与绿 黄与紫  橙与蓝。颜色对比强烈,传递能力、活力、兴奋,给用户一种既和谐又非常有重点的感觉。

布局原则:页面分别用了对比、重复、对齐、亲密性,与设计布局原则十分吻合。

2) Layout- Gold ratio(黄金分割)

1、黄金分割率(Golden Setion

图片19

黄金分割无论是在自然界还是在设计界都用随处可见,而且用得相当广泛。

图片20

2、黄金矩形(Golden Rectangle

图片21

它的长宽之比为黄金分割率0.618,并且可以不断以这种比例分割下去。

自然界的黄金比例:

图片22

艺术界也采用黄金比例:

你所不知道的设计那些事1-3174 (1)

工业界的黄金比例:

图片24图片25

 

人体黄金比例:

比如名模:艾尚真、林志玲都是九头身,号称中国第一黄金比例身材,完美。

图片27图片26

 

网页设计的黄金比列:

图片28图片29

3. How to design?

设计就如画画,先布局(layout)再填色(colors)。

图片31

网页也一样,先布局再填色:

图片33

 

最后推荐一个设计教程:http://bbs.blueidea.com/thread-2949749-1-1.html,教你从零开始设计一个漂亮的网页。

/********************************Web设计基础知识介绍完毕,谢谢大家阅读~O(∩_∩)O~************************************/

 

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2013/12/design-basics-three/

  1. aaa 2014 年 1 月 7 日

    学到了

  2. 八戒 2013 年 12 月 27 日

    学习到了!

发表评论