《微博有爱》专题也是个很好的例子，紧握的双手与标题形成了倒三角形，“获取情人节勋章”放在三角形尖部，一下就把主题和最重要的操作，推到了用户眼前。

　　《微身份勋章》和《2012来了》专题中，感觉就要跳出屏幕的模特和大船，也是表现页面冲击力很好的例子。

　　重要内容留在首屏

　　这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。

　　大家看下图，大屏幕是一个反面教材，首屏居然放了一个广告，而微博桌面做得就好多了。

　　由于用户显示器大多还是1024*768以及1280*800的分辨率，除去浏览器高度，重要内容还是尽量放在600高以内吧。

　　让页面有层次有重点

　　交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。

　　先看微博主站的例子。视觉设计师通过色块把页面中的左导、主内容区和右侧模块区分开，用户浏览微博信息时，视线不会被两侧干扰。而同样布局的微博相册就差一些，淡灰色左导很不清晰，右侧和主内容区也没有一个清晰的分界，用户浏览时很难发现重点。

　　再看微直播首页，最重要是页面上方的推荐区，设计师用延展的红色模块，与下方的浅灰色形成对比，一下就把重点突出了。

　　模拟现实世界匹配用户心智模型

　　原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。

　　微电台首页中，节目下方的刻度就模拟了收音机的调频设计。而音乐盒的设计更精彩，唱片机的样式与转动效果，让用户感觉真的在听唱片一样。

　　插图让产品更有情感

　　插图在微博中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低。毛衣针断掉的尴尬、面面相觑的活动气球和投票柱子，都幽默地化解了用户的负面情绪，同时产品也更有味道了。

　　值得一提的是微群的设计，前面我们说到，微群的品牌元素是：星球、飞船和人。在这个品牌定位下，几种错误情况就很好表现啦，我不说，大家自己看吧。

　　巧用Icon，页面更精彩

　　Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。

　　微博大屏幕首页，设计师用了3个Icon，配合文案解释了什么是大屏幕。

　　各产品帮助页，也常常出现Icon。帮助页类似于产品的说明书，很多内容堆在里面，通过图标的区分，用户很容易按类别查找到所需要的信息。

　　栅格化提升用户体验和开发成本

　　栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。

　　微博主站的设计中采用了栅格化体系，栅格宽度为20px，间隙为10px(整个页面宽为950px)。写博文时，我翻看了一下各产品的遵循情况，大多不错，其中最好的应该是微公益。

　　至此，视觉设计原则讲完了。

　　说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：

　　1. 通过字体表达产品风格

　　2. 通过配色展示产品定位

　　3. 营造统一的品牌形象

　　4. 造型让产品更有冲击力

　　5. 重要内容留在首屏

　　6. 让页面有层次有重点