有些朋友问我：为什么你做的(视觉)设计都是那么素？没有设计感？
这篇文章写写我做视觉设计的方法和思路。视觉设计就好像一门无声的语言，设计师要学会见人说人话，见鬼说鬼话。
相信很多设计师都遇到过这样的情景：
设计师：看看这个橙色的设计？
老板：我觉得我们这个网站应该用蓝色，蓝色我觉得清爽一些。
马屁甲：嗯，橙色有点太艳了。
马屁乙：我觉得也是蓝色比较好，google、百度这样的大网站都是用蓝色。
设计师：好吧，我再改改…
……
问题就出在没有人问一句：在为谁做设计？
视觉设计难道真的是一门感性的学问吗？
我觉得不是，是因为大家都忽略了用户，一个好的产品流程肯定是会把用户研究和市场研究都做得充分了，才会让视觉设计师动手。我在做(视觉)设计的时候，一般会问：
谁用这个网站？用户是谁？
他们的年龄，职业等等特征？
竞争对手是哪些？
这些用户还喜欢上些什么网站？用什么样的产品，哪怕是非网站产品？
……
中国大部分做设计都“抄”，当然，灵感不会是凭空冒出来的：
1 抄竞争对手或者相关网站
2 抄一张插画或者美术作品的配色和图形
3 抄一个好的摄影图片
4 甚至抄一个工业设计，比如手机、MP3
……
我一般会找到这些相关的产品，看看他们在设计上有什么共性，用户喜欢它们，用它们吗？尤其是在颜色方面，不同的色系会迎合不同的人群，同一个色系也一样可以表达不同的视觉效果。颜色是深一点的还是浅一点？虽然是“抄”，但看你抄的是表面还是抄地有理有据。今天回母校看了下今年的毕业设计，想起当初有个低年级的朋友问我毕业设计怎么做，我觉得最重要的就是多看优秀的设计，把好的东西转化成自己的。
视觉规范
一个企业的好设计都会有自己的视觉规范，这完全是由传统的平面设计延伸到互联网，从coca-cola到yahoo，从颜色的运用到图形的设计，每个细节都会让用户想起它对应的品牌。再比如说flickr，只要用过它的人一见到那个蓝色和红色，会很自然地跟那个网站联系起来。
当然，品牌的积累不是一朝一夕，也不是单纯地靠好的视觉设计就能赢得的东西，互联网的产品跟一张海报、一张画不一样，解决问题永远要比好看重要，甚至相比传统的产品，视觉设计相对也要弱很多，但这仅仅是因为互联网的历史还不够长，等互联网真正地全面渗入人们的生活的时候，视觉规范一定会被全面地重视起来。
我想还是解释一下为什么之前的设计风格都是那么素，包括我的blog主题：我认为用户来到我设计的界面里面为的是阅读信息，我不想把多余地视觉元素去干扰阅读，这样的设计需要有包容性，需要中性，这个界面既可以和任何颜色的图片放在一起都和谐。因为我的界面就是让你更好地集中精力阅读，没有创意的设计也能是好的设计，就好像你天天吃的米饭一样。
如果界面的功能是寻找信息而不是阅读，用一些色彩、图标去引导用户是很需要的。再比如要给一个很有特征的用户群做设计，比如说女性，儿童，或者老人等等，我觉得自己也会用一些视觉元素去迎合他们，做适合他们的设计。
设计师不是艺术家，不必刻意去形成自己的风格，而是迎合用户，迎合企业。就好像宜家的口号一样，为大众做设计。所以，我不想别人定义我的设计风格，要是方法而不是风格，我希望能胜任所有的设计。
|240 次阅读
我缺席了上午的内容。
这是第二次参加工作坊，项目由车载音乐改成了比价购物，当然，这只是虚拟的课题，目的是熟悉产品由无到有的流程。因为之前参加一个工作坊的演习，所以本文主要谈谈一些心得和在实战中的一些帮助。
1 了解了产品设计的团队组建和角色分工，尤其是在后来私下跟千鸟聊天的时候，知道了在产品流程能扮演什么样的角色以及怎么跟其他角色配合，以及自己的适合做什么样的角色。
2 如何做市场分析，数据从什么地方来，怎么去获取关键的、对产品有用的数据。
3 做用户的分析，怎么提取出对产品设计有用的属性和关键因素，分解用户需求，并且划分需求的重要程度以及商业价值。通过定性和定量的用户研究方法，抽象出具体的人物角色。
4 竞品分析的方法。
5 根据上面的数据和分析结果做概念设计，画产品大的流程图和结构图。
6 列出功能清单。
7 制作低保真或者高保真的产品原型。
8 测试。
最后补充推荐千鸟的一个文档，相信参加过工作坊的朋友下载看一下能让你思路更加清晰，并且更加清楚流程中环节的交付物。
了解这些流程和概念，会让你在工作中更加有谱，知道接下去应该做什么，怎么去检验你的工作结果，通过什么样的途径去发现问题并且解决问题。其实工作坊只是一种概念性的设计，怎么让这个流程结合运用到你具体的设计里面，个人的心得如下：
1 活学活用，根据你项目的性质，团队的状况，以及可用的资源，和产品的开发效率。不要过于拘泥流程,流程并不是万能的。并不是你会了这个流程就一定能把产品做好，只能让你减少犯错的几率，属于方法论的东西。
2 分析数据，挖掘需求的能力。其实很多成功的网站并没有专业的产品设计人员，只是凭着“网感”发掘了一些关键因素，有些时候你的网站只需要一两个“亮点”就可以决胜千里。
3 加法重要，减法更重要。头脑风暴能让你获得很多很多创意和想法，需求会非常多。有的时候做着做着就出来一大摊子，回头发现你的产品已经脱离了你的核心用户了。在整个流程中，要放得开也要收得回。牢牢把握产品的核心竞争力，产品不是靠功能多取胜。
通过下午的讨论和分析，因为大部分人没有电子商务、图片搜索等等的背景知识，虚拟了数据分析以及没有经过竞品分析的过程，加上思考的时间比较短，最终得出来的分析结论都很单薄，同时也缺乏能让产品出奇制胜的“亮点”。
其他
1 认识了很多新朋友：第一次见到思域，子狼，李真等等还有很多叫不上名字的美女和帅哥，还认识了一个叫朱斌的tony（握手庆贺）。当然还有一些老朋友：老岳，discuz的lushnis。由于下午才过去，还有很多朋友都叫不上名字，还有27日可以再认识，呵呵。
2 我拍了一些照片，地址在这里，我就不单独传了。
3 感谢叽歪友情赞助-叽歪的办公室很好很强大。
4 白鸦、angela辛苦了。
|726 次阅读
这篇文章所说的视觉元素是指：在一个网站中除去内容(文本、图片、视频、音频等）之外的一些元素。比如图标，背景色，以及背景图案。
视觉元素的设计是配合产品的架构意图并且引导用户交互
前文在聊到文字设计的时候，内容本身的应该是简洁、直接了当。其实视觉元素同样如此，好设计不会拖泥带水，在版式设计中，我说到很多时候可以利用留白来划分位置感，比如我的博客主题，区块直接的划分完全使用留白+对齐。但是，对于大多数的网站来说，页面空间寸土寸金，不可能有那么多“白”让设计师挥霍，这时，我们就会利用图标，背景图案、颜色来给予用户位置感，传递产品架构的逻辑关系。
图中是华南理工大学的学生网站，整个网站的视觉可谓一马平川，虽然在布局的划分中，也用到了一些视觉元素，比如区块中的小方块图标，右侧的绿色背景，但是效果非常不明显。假设将绿色背景放在标题文字下面，标题文字反白并且加粗显示，相信效果会好一些。多参看一下一些成熟的门户网站在这方面设计的方法和手段。
视觉元素的一致性
很多设计师有个习惯，在做视觉的时候，会参看大量的“漂亮”网站或者该领域成功的网站，并且借鉴其中的一些视觉元素，但是往往这样东拼西凑的设计往往会影响细节体验。
中华玻璃网在视觉设计中大量借鉴了淘宝的设计风格，向好的网站借鉴本身没有错，但要把细节借鉴到位了，并且融合自己网站的定位。来看玻璃网中的图标，各种颜色、形状非常地丰富。再看看淘宝是怎么做的：小圆角是整个网站的设计风格，不仅仅在页面的模块中用了圆角的设计，在图标的设计上，也都是圆形的设计，颜色也只用了主色调的橙色和灰色。借鉴本身不是坏事，但是要注意保持自己页面风格，品牌风格的一致性。
那些多余的视觉元素
很多网站单纯地为了“漂亮”而设计，比如在每个标题前面都要带个小图标，或者在按钮里面加小图标。给每个模块都加上一样的背景颜色等等。
再比如麦田老师的蚂蚁网，首页中的那个背景图案让我就很费解，更像是一个个人空间的模板而不是一个“平台性”的网站。在页面的布局上面，也让人感觉不够清晰，没有层次感。
PS：渐渐地有些朋友发邮件让我给贵站提建议，而且数量越来越多，不能一一作答，望见谅，而且有些网站连一些基本的视觉概念都没有，问题确实太多，不太好作答，希望这几篇视觉设计的文章对大家有所帮助。还有的用table布局，建议改用div。
这系列文章也仅仅代表我个人的一些观点和经验，希望能和设计师朋友一起讨论。
|497 次阅读
在这系列视觉设计的文章间隙插一篇字体单位的文章。
前文说了，字体单位应该用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
|463 次阅读
可能很多人都要问，网站的文字还需要设计吗？
对于很多的网站来说，字在整个网站的内容中占了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的话题。
|541 次阅读
开博以来，关注度最高的一篇文章就是关于视觉设计。在整个产品的流程中，视觉设计是属于最上层，视觉设计好比一个人的衣着打扮。一个好的产品应该有自己的视觉规范。
下面几篇文章想结合我在原来做平面设计的一些经验来说说网页的视觉设计，大体会从字体、版式、颜色、图标以及在产品流程中影响视觉的一些因素等方面来谈谈网站的视觉设计。特此征集一些网站作为分析案例。如果你的网站已经上线，并且不介意tony给贵站在视觉设计方面找找茬，请将你的网站通过邮件的方式发给我。
本博客影响力微弱，实在没有人响应的话，我会自己找一些案例。
|265 次阅读
设计师最悲哀的事就是将想法写在博客上；
就像一个性欲很强的男人打手枪一样。
|602 次阅读
大约一个月前写过一篇关于hi的文章，俨然百度目标跟腾讯一样，做中文互联网的大社区。跟当年门户添加频道一样，只要网上有的东西，我家都得有。
白鸦没有将他的期待说得特别详细，我再次写百度hi来期待一下。
从封闭走向开放
看看中文互联网社区，都想把用户圈在自己的家里面玩，腾讯在这方面做足了榜样。小到各种“中国facebook”，都是秉着麻雀虽小五脏俱全的理念，建的就是一个小社会，就连豆瓣这样一个纯粹的服务现在也要增加“日记”了。facebook一火，整个中文网络都在圈人。这样的社区是狭隘的，谁都想成为google，成为微软。google、微软的成功靠的不是把人圈在自己家，而是制定了行业的标准，制定了游戏规则。
我期待百度hi能做得足够的开放：
1 日志更新提醒不仅仅支持百度空间，我不用百度空间难道就不让朋友知道我写博客了？
2 各种API的接口能尽快提供出来。尽可能的包容，而不是逼着用户所用的服务都用百度的。用delicious不用搜藏的人，用天涯或者各种BBS而不用贴吧的人等等，不要想着去把别人的用户抢过来，而是去包容。
希望百度能学google而不是学腾讯，做大社区而不是做狭隘的人数多的社区。
价值高端一些
XX公司08年3月27日更新规章制度：禁止使用QQ和百度hi。（开个玩笑）
为什么没有听过把Gtalk、MSN禁掉的？一方面是因为上面人不多，在产品的设计上，Gtalk和MSN上的好友的价值显然要高于QQ，你不能轻易地得到一个人的ID。而QQ、百度hi呢？从空间到贴吧，相信这里面的“网友度”要远远高于QQ的寻找好友，我时常会将百度hi想象成另外一个“泡妞天堂”。脑子里面时常浮现出一个场景，无数“狼友”趴在电脑前，在空间和贴吧里面翻腾MM照片，然后添加其百度hi进行搭讪。
同样，1000人的群也将成为无数低级趣味人士的狂欢基地。
太刺激了！！！
怎样让百度hi给中国网民创造价值，而不是增加“作恶”途径和kill time的方式。说白了就是避免百度hi的腾讯化。
千万别说这是中文互联网环境的造成的。即使是这样，作为中文互联网巨头之一的百度，是有责任去引导整个互联网气氛的。
希望百度hi不跟腾讯比人数，而比价值，目光放在5年以后甚至更长远一些。
|587 次阅读
好设计应该懂得拒绝
很多人都想方设法要把人留在自己的网站，不惜代价“迷惑”、“欺骗”用户，填写更多的资料，做更多地点击，到最后用户一边骂娘一边离开。在中文互联网中处处见到这样的“流氓拉客”方式。
好的设计应该是直接了当，在用户进门的时候，直接告诉用户，我这是饭店，可以让你解决饥饿，要洗头、蒸桑拿上隔壁！
怎么判断用户有没有需求？
把需求分成显性和隐性。
显性需求是说，用户清楚自己想要什么，用户是带着期望来的。
比如：“我要申请一张奥运门票！”
“我要发布一条租房信息！”
“我要下载一首MP3！”
……
隐形需求是有两种：
一 用户不清楚自己想要什么，用户怀着一颗“随便逛逛”的心态来到你的网站。
二 用户带着目的A来，得到更优方案B。（白鸦和angela都拿吃做过比喻）
我再罗嗦两个例子：
A 用户带着的目的是下载一首MP3的歌，下载到本地听是用户的固定思维（显性需求），其实用户真正的目的是想听歌，如果你告诉用户：网站同时提供在线听，而且速度快。这时候用户需求发生转化，激发了用户的隐性需求。
B 用户搜索《青花瓷》到了网站，这是用户的显性需求，而用户的潜在需求可能是：我要听点新歌或者是来点周杰伦的歌。如果你告诉用户：流行的歌还有《菊花台》、《牛X很忙》等等，用户立马精神崩溃：这网站太TMD了解我了。很显然，在这个过程中，网站激发了用户的隐性需求。
结论：
1 满足用户的显性需求是底线。
2 隐性需求是培养用户忠诚度的最好武器。
3 对于隐性需求一，很多网站可能有些小创意在里面，或者有些新的概念想让用户了解，然后拼命地告诉用户：你先读这个，再点那个，填一下资料。不是说这么做不行，得有两个先决条件：
A 用户已经清楚操作完成之后得到什么东西。
B 让用户觉得操作的代价很值。
还拿听歌举例，有一个网站想做音乐社区，作为站方的目的是想让用户转化成注册用户，如果一个陌生用户对该网站没有任何了解。一进门就需要注册，填个人信息等等，尽管首页上用很酷很炫的banner告诉了用户，这是一个音乐社区，可以根据你的喜好推荐音乐，可以通过音乐交朋友等等。
用户是很无情的：NO，太麻烦！我不需要！（尽管很多网站会说：注册只需要10秒钟）
最直接的方式就是试玩，直接让用户感受到价值。
4 对于隐形需求的度的把握是最难的，并不是所有的需求都是受欢迎的。正因为如此，在做需求分析时候，需要拆分需求。
|704 次阅读
