做了就要卓越
分享给那些需要开发iphone平台的网站设计师们。
国内互联网的UI设计师貌似都是一个师傅教出来的，你要是不会做个水晶图标、给底色拉个渐变，你都不好意思说自己是做UI的。可能很多设计师都有自己的苦衷，造成这个职业变成了一种恶性循环：
1 apple是靠设计取胜的，我们的网站要像apple的UI一样漂亮。
2 网站做得太简洁，老板或者客户会觉得没有创新，做成这样还需要UI设计师吗？
3 整个行业都认为UI设计就是做图的，只是“美工”的洋名。
4 从国内的各大门户到腾讯、淘宝、百度这样的大牛，都在水晶、渐变，然后就有人说，中国的网民喜欢酷的，炫的网站设计。
这也难怪，中国人民都在一个世界里做同一个梦，更何况区区地网站的视觉设计。
有些朋友问我：为什么你做的(视觉)设计都是那么素？没有设计感？
这篇文章写写我做视觉设计的方法和思路。视觉设计就好像一门无声的语言，设计师要学会见人说人话，见鬼说鬼话。
相信很多设计师都遇到过这样的情景：
设计师：看看这个橙色的设计？
老板：我觉得我们这个网站应该用蓝色，蓝色我觉得清爽一些。
马屁甲：嗯，橙色有点太艳了。
马屁乙：我觉得也是蓝色比较好，google、百度这样的大网站都是用蓝色。
设计师：好吧，我再改改…
……
问题就出在没有人问一句：在为谁做设计？
视觉设计难道真的是一门感性的学问吗？
我觉得不是，是因为大家都忽略了用户，一个好的产品流程肯定是会把用户研究和市场研究都做得充分了，才会让视觉设计师动手。我在做(视觉)设计的时候，一般会问：
谁用这个网站？用户是谁？
他们的年龄，职业等等特征？
竞争对手是哪些？
这些用户还喜欢上些什么网站？用什么样的产品，哪怕是非网站产品？
……
中国大部分做设计都“抄”，当然，灵感不会是凭空冒出来的：
1 抄竞争对手或者相关网站
2 抄一张插画或者美术作品的配色和图形
3 抄一个好的摄影图片
4 甚至抄一个工业设计，比如手机、MP3
……
我一般会找到这些相关的产品，看看他们在设计上有什么共性，用户喜欢它们，用它们吗？尤其是在颜色方面，不同的色系会迎合不同的人群，同一个色系也一样可以表达不同的视觉效果。颜色是深一点的还是浅一点？虽然是“抄”，但看你抄的是表面还是抄地有理有据。今天回母校看了下今年的毕业设计，想起当初有个低年级的朋友问我毕业设计怎么做，我觉得最重要的就是多看优秀的设计，把好的东西转化成自己的。
视觉规范
一个企业的好设计都会有自己的视觉规范，这完全是由传统的平面设计延伸到互联网，从coca-cola到yahoo，从颜色的运用到图形的设计，每个细节都会让用户想起它对应的品牌。再比如说flickr，只要用过它的人一见到那个蓝色和红色，会很自然地跟那个网站联系起来。
当然，品牌的积累不是一朝一夕，也不是单纯地靠好的视觉设计就能赢得的东西，互联网的产品跟一张海报、一张画不一样，解决问题永远要比好看重要，甚至相比传统的产品，视觉设计相对也要弱很多，但这仅仅是因为互联网的历史还不够长，等互联网真正地全面渗入人们的生活的时候，视觉规范一定会被全面地重视起来。
我想还是解释一下为什么之前的设计风格都是那么素，包括我的blog主题：我认为用户来到我设计的界面里面为的是阅读信息，我不想把多余地视觉元素去干扰阅读，这样的设计需要有包容性，需要中性，这个界面既可以和任何颜色的图片放在一起都和谐。因为我的界面就是让你更好地集中精力阅读，没有创意的设计也能是好的设计，就好像你天天吃的米饭一样。
如果界面的功能是寻找信息而不是阅读，用一些色彩、图标去引导用户是很需要的。再比如要给一个很有特征的用户群做设计，比如说女性，儿童，或者老人等等，我觉得自己也会用一些视觉元素去迎合他们，做适合他们的设计。
设计师不是艺术家，不必刻意去形成自己的风格，而是迎合用户，迎合企业。就好像宜家的口号一样，为大众做设计。所以，我不想别人定义我的设计风格，要是方法而不是风格，我希望能胜任所有的设计。
这篇文章所说的视觉元素是指：在一个网站中除去内容(文本、图片、视频、音频等）之外的一些元素。比如图标，背景色，以及背景图案。
视觉元素的设计是配合产品的架构意图并且引导用户交互
前文在聊到文字设计的时候，内容本身的应该是简洁、直接了当。其实视觉元素同样如此，好设计不会拖泥带水，在版式设计中，我说到很多时候可以利用留白来划分位置感，比如我的博客主题，区块直接的划分完全使用留白+对齐。但是，对于大多数的网站来说，页面空间寸土寸金，不可能有那么多“白”让设计师挥霍，这时，我们就会利用图标，背景图案、颜色来给予用户位置感，传递产品架构的逻辑关系。
图中是华南理工大学的学生网站，整个网站的视觉可谓一马平川，虽然在布局的划分中，也用到了一些视觉元素，比如区块中的小方块图标，右侧的绿色背景，但是效果非常不明显。假设将绿色背景放在标题文字下面，标题文字反白并且加粗显示，相信效果会好一些。多参看一下一些成熟的门户网站在这方面设计的方法和手段。
视觉元素的一致性
很多设计师有个习惯，在做视觉的时候，会参看大量的“漂亮”网站或者该领域成功的网站，并且借鉴其中的一些视觉元素，但是往往这样东拼西凑的设计往往会影响细节体验。
中华玻璃网在视觉设计中大量借鉴了淘宝的设计风格，向好的网站借鉴本身没有错，但要把细节借鉴到位了，并且融合自己网站的定位。来看玻璃网中的图标，各种颜色、形状非常地丰富。再看看淘宝是怎么做的：小圆角是整个网站的设计风格，不仅仅在页面的模块中用了圆角的设计，在图标的设计上，也都是圆形的设计，颜色也只用了主色调的橙色和灰色。借鉴本身不是坏事，但是要注意保持自己页面风格，品牌风格的一致性。
那些多余的视觉元素
很多网站单纯地为了“漂亮”而设计，比如在每个标题前面都要带个小图标，或者在按钮里面加小图标。给每个模块都加上一样的背景颜色等等。
再比如麦田老师的蚂蚁网，首页中的那个背景图案让我就很费解，更像是一个个人空间的模板而不是一个“平台性”的网站。在页面的布局上面，也让人感觉不够清晰，没有层次感。
PS：渐渐地有些朋友发邮件让我给贵站提建议，而且数量越来越多，不能一一作答，望见谅，而且有些网站连一些基本的视觉概念都没有，问题确实太多，不太好作答，希望这几篇视觉设计的文章对大家有所帮助。还有的用table布局，建议改用div。
这系列文章也仅仅代表我个人的一些观点和经验，希望能和设计师朋友一起讨论。
在这系列视觉设计的文章间隙插一篇字体单位的文章。
前文说了，字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。
我在调整本blog的时候，发现不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。
怎么将px换成em呢？特地转jorux06年12月的一篇文章，因为中文站用px的太多了，如果你是对代码不敏感的纯设计师，可以向技术人员或者页面制作人员请教：
em是何物？
em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
重写步骤：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级 元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而 是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有 限。阅读本篇的读者还有其他解释吗？
本现象只发生在12px的汉字，英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm， 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css，看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接
还可以做哪些改进
为什么还需改进：
1. 你的网站css过于复杂，以至于不知道元素的从属关系，很难重写css；
2. 绝大部分人看了本文之后仍然不会重写css；
3. 很大部分人不知道浏览器可以调整页面的字体大小。
所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力，这里就不再罗嗦了，请参看：The Text Changer
Important reference:
1. How to size text using ems
2. The Text Changer
可能很多人都要问，网站的文字还需要设计吗？
对于很多的网站来说，字在整个网站的内容中占了80%以上甚至更多，或者换个角度上说，网站可以没有颜色，没有图片，但唯独不能没有文字。
一个产品团队，有一个角色叫做Content Design，ucdchina有过一期话题叫做注意界面上的文字，非常精彩，我在写本文之前，再次通读一遍，一方面是学习，另一方面，是避免写重复的内容。如果你按照里面的观点对照你的网站，相信一定会有所帮助的。
那期话题只有潇潇重点说的是文字的视觉方面，那篇文章非常精彩，也是该期话题的“浏览冠军”，本文是延续性的一些想法。
先看看网站以外的中文字体设计，英文的正文字体有很多可以选择，但中文的正文字，总的来说就两种：宋体和黑体。在传统的版式设计中，设计师们都喜欢做英文的排版，为什么？从视觉上来看，英文的组合很容易形成线和面的关系，而且字母有节奏感，比如aby这三个字母放一起有高矮区别。中文字相对来说，单调、孤立、不流畅。
回到网站中文字的设计，设计师基本上不用考虑在字体上做选择，只有宋体。前文说：单个字成点，一行字成线，一段字成面。这是版式设计最基本的原理，我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子，本人非常喜欢微软雅黑的设计。
将12号的宋体和雅黑放大，注意以下细节：
1 雅黑要比宋体宽一像素
2 雅黑让每个笔画往四周撑，比如“是”上面的“日”，雅黑显得就要饱满
这么做的目的只有一个，让中文字体更容易形成线，从而读起来更流畅。我们可以看到，尽管雅黑不是真正的正方形，但它看起来要比宋体方一些。
看完上面这个例子，我的观点也就出来了：别把你的文字看成字，而是看成点，文字的视觉设计其实就是处理点线面的关系。
下面是具体设计方面的点：
1字体的单位用px而不用em，尽管12px和0.8em大小差不多。
updete:感谢网友Dreamcolor推荐文章95%的中国网站需要重写CSS，该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了，没有深入理解em单位。只看到很多用em的视觉效果不好看，现在明白了，是因为没有把em单位和px对上号。结论是应该用em而不是px，但需要把em的值设置好。
2 在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana，个人推荐这么写：font-family:Helvetica,Georgia,Arial,sans-serif，宋体。这样能保证你界面中的字母、数字、符号看上去美观一些，更重要的是更加易读。
3 子条说：12号宋体时，我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同，这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话，17也是可以接受的。
4 正文一行字数最好不超过50，首页的标题文字以8-20字为佳。
5 12和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。
6 对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。
7 文字和背景对比要足够明显，保证最弱文字的可读性。
PS1：给Denis的可爱的女儿晨晨设计的wordpress主题今天出炉了，细节方面还需要再调。那丫头着实地可爱！
PS2：有一些朋友给我来邮件让我给贵站提建议，我在写完这系列视觉设计的文章之后，统一给予回复。我觉得可以从文章观点中，是否能得到一些帮助呢？尤其是可以看看ucdchina的话题。
cooper谈到用户的视觉路径一般是：从上到下，从左到右。
好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。
当然，上图的视觉路径图并非绝对的，浏览习惯因人而异。
网站中方块
因为人们从接触信息以来，信息的呈现就是以方块式存在：报纸、书，单个字成点，一行字成线，一段字成面，而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。
网站中的方块能很好地引导用户的视觉路径，用户可以通过区块来分辨这个区域的信息是否是自己需要的，从而可以迅速缩小范围细致寻找或者浏览下一个区块，比如yahoo的首页，从大块上来看，用户很容易分辨出4个大区块，每个区块里面又有小的区块。
1 方块感越强越能给用户方向感。
2 方块越少越好。
3 尽量用留白做视觉区分。
对齐和间距
视觉设计最简单，也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线，方块与方块之间的边线，尤其是纵向维度。
间距的一般规律：字距小于行距，行距小于段距，段距小于块距。检查的方法可以尝试将网站的背景图案、线条全部去掉，看是否还能保持想要的区块感。
拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配，用心地调整好网站的每一个像素或许也能让它焕然一新。
主次关系
怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。
从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。
从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。
常见问题
1 视觉设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。
2 广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。
写这篇文章刚刚赶上4月份新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。
记得国外牛人说过，网页的设计95%都是排版的设计，我不知道具体有没有那么夸张，但版式的重要性估计很多人都深有体会，可是由于现在很多的互联网设计师在版式设计方面的素养并不太高导致了中文网站大多呈现乱，花。美观其次的，主要是让用户在寻找想要的信息的时候花费过多额外的时间。
平面设计中版式入门就是名片设计，在99X55mm的里面将信息组织并且呈现出来，说难不难，做好了也不简单。
我从网上搜出了两张apple的名片，左边的这张我认为是更早的设计，右边的是新的设计：1 LOGO更加简洁；2 字体的也选择了细节更少的字体。
但从版式上来看，变化不大。
信息的要点
第一次拿到这个名片，用户看到的肯定不是某个字，要点很简单：1 公司LOGO；2 名字和职位；3 其他信息
从名片上看1、2、3的视觉要点很明显，网页的版式设计跟名片设计的原理一样。用户在浏览一个新的网页的时候，浏览习惯是跳跃性的，速度非常地快，如果在版式设计的过程中，如果不能将信息要点让用户迅速地找到，这样的设计不管色调怎么和谐，看上去感觉多么都好，都是糟糕的设计。
我对信息要点的想法：
1 一屏内的页面要点控制在3个以内，并且清楚要点的主次关系。
2 装饰的元素需要理性地使用。什么是装饰元素？色块、花纹、图标、线条等等。当你选择要用到这些东西的时候，先想为什么，而不是“我感觉”、“因为这样好看”，是否能用别的方式来达到一样的目的。
3 减少要点周围的干扰因素。要点的分布要掌握节奏，不要扎堆了，一段文字都加粗了跟没有加粗的效果其实一样，所以，要弱化要点周围的信息。
控制并利用留白
在名片的设计中，留白的好坏直接影响名片的信息传递和美观，段落与段落的距离，行与行的距离，字与字的距离，包括四周边缘的空白距离，字的横向排列形成线（行），线的纵向排列形成面（段），面的排列加上留白形成视觉的节奏、比例。他们都通过这样的点，线，面划分了整个画面。是居中还是左对齐，留白的多少将会在潜意识里面告诉读者什么重要，内容的分类。
在网页设计中是一样的。
1 如果我们能让字的排列形成线，那线是否就是多余的呢？
2 如果用文字段与段之间能将区块划分清晰，还需要用底色吗？
3 一行字是否太长了不适合用户阅读？
4 一个段落是否因为行太多了造成阅读压力？
当然，也不是说不要用装饰元素，装饰元素从理性的方面看可以起到划分区块，突出要点的作用，另外，还有品牌识别的作用，但别让这个成为使用它们的借口，有些时候没有那些元素，一样可以达到目的，比如flickr。
做视觉设计的并不是艺术家，不是感性的，更没有什么“美工”之说。
