完美网页的视觉设计法则---读书笔记

第一章布局和合成

设计过程

发现

探索

执行

对好的设计做出定义

用户会为设计感到愉悦，但是会被内容吸引

用户可以通过直观的导航栏在网页上移动

用户认识到每一页都是网站的一部分

网页的分解

内容块

徽标

导航

内容

页脚

空白处

网格理论

黄金分割率：1.6180339… =1.62

三分之一法则

960网格系统

平衡

对称平衡

水平平衡

双边平衡

辐射

非对称平衡

统一性

接近性

重复性

强调

布置

连续性

隔离

对比

比例

“面包黄油”式布局

左栏导航

右栏导航

三栏导航

寻找灵感

不匹配的样式，位于http://unmatchedstyle.com

CSS驱动，位于http://cssdrive.com

设计灾难，位于http://designmeltdown.com

型式水龙头，位于http://patterntop.com

雅虎设计型式图书馆，位于http://developer.yahpp.com/ypatterns/

使用特殊空间文件

最近趋势

无导航杂志样式:

http://designinformer.com

http://52weeksofux.com

http://thebolditalic.com

扩展性页脚：

http://showandtellsale.com

http://mazilla.org

http://creamycss.com

http://sitepoint.com

最小化到极致

http://analog.com

http://khahuang.com

http://www.underconsideration.com/drandnew/

http://www.sagemediari.com

重新确定大小：固定布局、流动布局或响应式布局

优势

劣势

固定宽度

l 可以让设计人员更好地控制内容

l 允许规划空格

l 使用较窄的文本块提高可读性

l 在比较大的浏览器窗口中看起来非常小

l 用户不容易控制

流动宽度

l 可以适应大多数分辨率的显示器和其他设备

l 减少用户的滚动操作

l 如果文本的宽度较大，这对阅读是一种挑战

l 很难成功执行

l 对空格有限制或影响

屏幕的分辨率

第二章色彩

颜色心理学

颜色的关联

红色：令人兴奋、使人充满梦想、“富有”的颜色，感情的颜色红色的神色阴影，有一种内在的丰富的、放纵的情感，实际上，它们可能非常傲慢。类似泥土色或棕红色的红色与秋天和收获的季节相关联。

橙色：非常活泼的、充满能量的颜色，提升幸福代表阳光、热情和创造力。橙色比红色更为“非正式”，也减少了那种合作的情感。橙色并不是经常在自然界中出现的，所以我们看到橙色时，它会“突然出现”。出于这个原因，它经常用在救生衣、反光路堆及猎装背心上。橙色也可以刺激人的新陈代谢和食欲，它也是食品和烹饪促销的极好的颜色。

黄色：一种活性的颜色，容易看得见，经常用于出租车或警告标志。它与幸福联系在一起，是微笑的标志。体育运动能量饮料佳得乐最初使用的黄色和橙色。但是，太多的黄色会产生强烈的让人无法接受的气氛。

绿色：一种抚慰的颜色，它象征着生长、新鲜和希望。尽管很多网站设计人员使用绿色吸引访问者的自然感觉，绿色成了一种万能的颜色，它也代表财富、稳定和教育。

蓝色：象征着开放、智力和忠诚，并且人们发现蓝色具有可以让人们平静下来的效果。有时候蓝色还是一种霉运和麻烦的标志。这种情绪与颜色的联系在蓝调音乐中是尤为明显的，在毕加索的可以让人产生压抑心里的“蓝色时期”中创造的画作也是如此。但是，这种颜色并不是只与不自然的食物及忧郁的艺术形式有关；蓝色有着普遍的吸引力，因为它与天空和大海联系在一起。蓝色也可以传递一种稳定的感觉和明确的目标，所以，死机屏幕是蓝色的

紫色：从历史上看，紫色一直与皇家及权利联系在一起，紫色在过去的特权背后隐藏的秘密是：人们很难生产这种制作紫色大衣所需要的燃料。到今天，紫色仍然代表着财富和奢华。这种奢华被带到了自然界中，紫色是最容易与鲜花、宝石及美酒联系起来的颜色。它平衡了红色带来的刺激和蓝色带来的宁静。

白色：在西方文化中，白色被认为是完美、明亮而纯洁的颜色。在中国文化中，白色是一种传统上与死亡和葬礼相关联的颜色。这样的文化区别应当能提醒我们研究颜色与您的目标受众之间的关联，因为他们与您的感觉可能有很大不同。在设计中，白色通常会被忽略，因为它是默认的背景颜色。试着使用深色背景和白色文本，或者把白色背景块放在白色的“帆布”上，以突出此背景。以出人意料的方式使用颜色可以达到一鸣惊人的效果。

黑色：尽管黑色通常有一种负面的含义，例如死亡和魔鬼，但它也代表一种力量、优雅和强力----这取决于如何使用它。