完美网页的视觉设计法则---读书笔记
第一章 布局和合成
- 设计过程
发现
探索
执行
- 对好的设计做出定义
用户会为设计感到愉悦，但是会被内容吸引
用户可以通过直观的导航栏在网页上移动
用户认识到每一页都是网站的一部分
- 网页的分解
内容块
徽标
导航
内容
页脚
空白处
- 网格理论
黄金分割率：1.6180339… =1.62
三分之一法则
960网格系统
- 平衡
对称平衡
水平平衡
双边平衡
辐射
非对称平衡
统一性
接近性
重复性
- 强调
布置
连续性
隔离
对比
比例
- “面包黄油”式布局
左栏导航
右栏导航
三栏导航
- 寻找灵感
不匹配的样式，位于http://unmatchedstyle.com
CSS驱动，位于http://cssdrive.com
设计灾难，位于http://designmeltdown.com
型式水龙头，位于http://patterntop.com
雅虎设计型式图书馆，位于http://developer.yahpp.com/ypatterns/
使用特殊空间文件
- 最近趋势
无导航杂志样式:
http://thebolditalic.com
扩展性页脚：
http://sitepoint.com
最小化到极致
http://www.underconsideration.com/drandnew/
- 重新确定大小：固定布局、流动布局或响应式布局
| 优势 |
劣势 |
|
| 固定宽度 |
l 可以让设计人员更好地控制内容 l 允许规划空格 l 使用较窄的文本块提高可读性 |
l 在比较大的浏览器窗口中看起来非常小 l 用户不容易控制 |
| 流动宽度 |
l 可以适应大多数分辨率的显示器和其他设备 l 减少用户的滚动操作 |
l 如果文本的宽度较大，这对阅读是一种挑战 l 很难成功执行 l 对空格有限制或影响 |
- 屏幕的分辨率
第二章 色彩
- 颜色心理学
颜色的关联
红色：令人兴奋、使人充满梦想、“富有”的颜色，感情的颜色红色的神色阴影，有一种内在的丰富的、放纵的情感，实际上，它们可能非常傲慢。类似泥土色或棕红色的红色与秋天和收获的季节相关联。
橙色：非常活泼的、充满能量的颜色，提升幸福代表阳光、热情和创造力。橙色比红色更为“非正式”，也减少了那种合作的情感。橙色并不是经常在自然界中出现的，所以我们看到橙色时，它会“突然出现”。出于这个原因，它经常用在救生衣、反光路堆及猎装背心上。橙色也可以刺激人的新陈代谢和食欲，它也是食品和烹饪促销的极好的颜色。
黄色：一种活性的颜色，容易看得见，经常用于出租车或警告标志。它与幸福联系在一起，是微笑的标志。体育运动能量饮料佳得乐最初使用的黄色和橙色。但是，太多的黄色会产生强烈的让人无法接受的气氛。
绿色：一种抚慰的颜色，它象征着生长、新鲜和希望。尽管很多网站设计人员使用绿色吸引访问者的自然感觉，绿色成了一种万能的颜色，它也代表财富、稳定和教育。
蓝色：象征着开放、智力和忠诚，并且人们发现蓝色具有可以让人们平静下来的效果。有时候蓝色还是一种霉运和麻烦的标志。这种情绪与颜色的联系在蓝调音乐中是尤为明显的，在毕加索的可以让人产生压抑心里的“蓝色时期”中创造的画作也是如此。但是，这种颜色并不是只与不自然的食物及忧郁的艺术形式有关；蓝色有着普遍的吸引力，因为它与天空和大海联系在一起。蓝色也可以传递一种稳定的感觉和明确的目标，所以，死机屏幕是蓝色的
紫色：从历史上看，紫色一直与皇家及权利联系在一起，紫色在过去的特权背后隐藏的秘密是：人们很难生产这种制作紫色大衣所需要的燃料。到今天，紫色仍然代表着财富和奢华。这种奢华被带到了自然界中，紫色是最容易与鲜花、宝石及美酒联系起来的颜色。它平衡了红色带来的刺激和蓝色带来的宁静。
白色：在西方文化中，白色被认为是完美、明亮而纯洁的颜色。在中国文化中，白色是一种传统上与死亡和葬礼相关联的颜色。这样的文化区别应当能提醒我们研究颜色与您的目标受众之间的关联，因为他们与您的感觉可能有很大不同。在设计中，白色通常会被忽略，因为它是默认的背景颜色。试着使用深色背景和白色文本，或者把白色背景块放在白色的“帆布”上，以突出此背景。以出人意料的方式使用颜色可以达到一鸣惊人的效果。
黑色：尽管黑色通常有一种负面的含义，例如死亡和魔鬼，但它也代表一种力量、优雅和强力----这取决于如何使用它。
- 色温
暖色：从红色到黄色之间的颜色。暖色代表热和运动。当放置在冷色附近时，暖色通常会要弹出来，占据主导地位，起视觉强调作用。
冷色：从绿色到蓝色之间的颜色。冷色可以让人宁静下来，也可以减少紧张。在设计中，冷色调通常用来减弱某种趋势；把它们作为背景色及某个页面上较大元素的颜色是很不错的做法，因为它们不会让您的内容对访问者产生压制的感觉。
- 色度值：某种颜色的明亮或昏暗程度的测量结果。
- 饱和：某种颜色的饱和度，或密度，就是此颜色的强度或纯度。
- 101颜色理论
基本颜色：红、黄和蓝
刺激颜色：两种基本颜色混合在一起，橙色、绿色和紫色
第三级颜色：基本颜色和相邻的次级颜色混合：朱红色（红-橙）、万寿菊色（黄色-橙色）、黄绿色（黄-绿）、碧绿色（蓝-绿）、紫罗兰（蓝-紫）和洋红色（红-紫色）
- 红色、黄色和蓝色，或者CMYK
- 配色方案
单色调：http://soliclgiant.com,http://aarronwalter.com/,http://artinmycoffee.com/, http://blackestate.co.nz/
接近色的配色方案：http://forrst.com/,http://blinksale.com
互补色的配色方案：http://www.gatorzone.com/, http://www.sproutfund.org/spring/, http://zachhendricks.net/
普通互补色的陷阱：http://bullsandarrows.com
分裂互补色、三色系和四色系的配色方案：http://www.rccjax.com
其他的变化：
带有Mo’pop的单色调配色方案
接近色的调整
单分列式配色方案
- 创建调色板
十六进制表示法
- 颜色工具和资源
Color Scheme Desinger 3
Adobe Kuler
COLOURlovers
Colour Stream iPhone应用程序
Pictaculous
Color Contrast Check
第三章 纹理
- 点
- 线
- 形状
圆角
旋转
形状和布局
- 容积和深度
角度
比例
光和阴影
- 型式
构建纹理
老化、纹理、磨损及怀旧风格：http://broosidersort.com/, http://cameronmoll.com/archives/0000024.html, http://www.teamfannypack.com/, http://electricpulp.com/
纹理及木纹：http://www.foundationsix.com/, http://newadventuresconf.com
手制的剪贴簿：http://gomammoth.co.uk/, http://www.nariecatribs.com/
古怪的卡通风格：http://www.clubpenguin.com
最少的纹理：http://daringfireball.net/, http://www.markboultondesign.com
开始您自己的纹理趋向。
- 应用：粘贴和保存
第四章 排印
网络资源：
适用于网络的字型：http://webtypogrpahy.net
Typophile: http://typophile.com
我爱字型：http://ilovetypography.com
Typographica: http://typographica.org
The Font Feed: http://fontfeed.com/
- 将文字类型带到网页中
- 文本图像的更换
- 带有@font-face的web字体
代管的Web字体
Web字体服务：
http://www.extensis.com.cn/webink/
http://code.google.com/wenfonts
sIFR和Cufon
字体的解析
1. 基线
2. 大写字母高度
3. 横画
4. 衬线
5. 中线
6. 半圆弧线
7. 下伸部分
8. 自谷
9. 字杆
10. 附加符号
11. 末端
12. 上伸部分
13. 腿部
14. 连字
15. X-高度
文字间距
水平间距
垂直间距
- 文字的对齐
- 各种字体之间的区别
衬线字体：http://vogue.com/, http://midcenturymondernist.com/, http://www.sewweekly.com
无衬线字体：http://thedonutproject.com/
手写字体：http：//yourfonts.com, http://chirp.twitter.com
固定宽度的字体
新型字体:http://new.myfront.com/WhatTheFont/
符号字体：Lassus(音符字体)
- 寻找字体
免费字体资源
“字体松鼠”网站，http://fontsquirrel.com
可移动字体联盟，http://leagueofmovebletype.com/
DaFont，http://dafont.com/
商业字体资源
“字体商店”，http://fontshop.com/
Monotype，http://fonts.com
Veer,http://veer.com/products/fonts/
“我的字体网”,http://myfonts.com/
Adobe Font, http://adobe.com/type/
个体艺术家和字体供应商
http://www.jorbuivenga.demon.nl/
- 选择正确的字体
设置字体的大小和线的高度
使用标点符号和特殊符号
- 应用：极小的字体
第五章 图像
- 要找什么
这些图和网站有关吗？
图像有意思吗？
图像吸引人吗？
- 使图像资源合法
要么拿来用，要么制作
素材库
免费图像
免版权费的图像
权利受到管理的图像
得到专业的帮助
- 怎么不给人留下深刻印象
通过谷歌查找热链接
剪贴画
- 有创造性的裁剪
- 使用photoshop进行调整
- 文件格式和分辨率
JPEG
GIF
PNG
- 创造性的处理图像
使用图像提高图像质量
使用纯CSS提高图像质量
- 应用：精细打印
- 回顾和期望