我眼里的视觉与文字：好的网站设计也需要和谐

wz***

原来把题目定为“视觉与文字”，但是又觉得这题目似乎有点过大，怕用了专业的标题却写出非专业的文章。而我无意暂时也没有能力去对视觉一些细节做极为专业的考究，只希望通过自己一些学习和了解来加深自己对美的判断吧。其实文字本身就是一种视觉语言，它把现实世界的所有事物，都以字的形式来进行了表现。曾经读过一篇文章，说在传统的版式设计中，设计师们更喜欢做英文的排版，因为从视觉上来看，英文很容易形成线和面的关系，且字母有节奏感，比如aby这三个字母放一起有高矮区别；而中文相对来说，单调、孤立、不流畅。特别有道理，但在此之前，我在看到一个页面只会说好不好看、怪不怪，从来没有想到过这些原因。好的网站设计需要视觉和文字的和谐，下面就是我的一些理解，当然其中也有向设计师讨教后的结论，若有不对，也是学习过程中的不可避免的吧：）

1、一致性

设计在同一产品（甚至同类产品）中应保持一致性，这样可以大大降低用户的理解成本，使用户快速上手，增加用户的使用率。这个一致性包括内容、颜色、形状、操作方式等，比如在不同的页面使用同样的翻页等，既可以降低成本，又能帮助用户形成良好的习惯，到一定的程度，甚至会提升一个品牌的认知。

•采用统一样式、大小的button（颜色、文字的内边距等）；

•文字采用统一的字体、字号、粗细等（根据不同的内容等级来决定）；

•链接不同状态文字的颜色统一（link\visited\hover\active）；

•采用统一的标点、间距、边距、行高等。

（具体可见视觉规范）

但，文字的位置要符合会员的整体阅读习惯和整体视觉效果，不一定是固定放在某个位置的。如下图，同样是“更多”，前者由于排行有3大类，一行已经占满，所以放在模块的右下角；而后者是顺着会员的思路，在右上角给出提示。





2、色彩

用户看到一个网站，首先冲击他眼球的就是界面整体的色彩，然后才是其中的内容、文字等。就好像听一首歌，首先你肯定是被这首歌的旋律所吸引，然后才想要去听清楚它的歌词，进而引起共鸣。营销学中著名的“7秒定律”就有说到：消费者会在7秒内决定其购买意愿，而在这短短7秒内色彩占67%的决定因素。所以用户对页面中色彩的关注度是非常高的，有效的运用色彩来区分信息的级别、分类等，有助于帮助用户对信息和操作产生关联，减少用户的记忆负担。

•同一页面中一般采用1种主色调，1-2种辅助色，再加1种小面积的点睛色，即同时出现的颜色一般不超过4种；

•主色调的选择由产品性格决定。色彩也是有性格和情绪的，因此会吸引不同性格的人，理解不同的情绪。在设计页面之前，经常听到有PD说我希望这个页面的风格是大气、时尚、活泼的……我想设计师一听到这些词应该马上就会在脑海里蹦出几个跟这些关键字匹配的色彩。已经有许多的视觉设计前辈，根据长期的经验和用户调研总结出了类似下图的表格，根据这些人们已认知的色彩情感，会更容易引起用户的共鸣和信赖感。因此，设计师在考虑色彩时一定要依附于产品，并注意对用户心理和文化的影响。比如口碑目前的主色调采用橙色，所代表的就是热情、活跃和热烈的感觉；



•合理搭配颜色，使用对比度明显的颜色，指导用户看到最重要的信息，如在深色的背景中使用浅色的文字；

•根据不同的产品使用场景，选择合适的颜色，如管理页面经常使用蓝色。

3、图形图标

我一直认为好的图形表达是优于文字的，有时候大段的文字解释不仅不能给用户带来帮助，还容易影响页面的美观；相对于单纯的文字，图形以及符号化的图标更符合用户的认知习惯。要表达一种信息，往往一张图片或一个标识更能让不同用户理解与接受。适当的使用图形与符号化的图标，会让用户很自然的建立起认知习惯。

但是图形如果没有把内容表示清楚，则会适得其反，给用户造成理解上的困扰。很多情况下，我们好像都很喜欢做一些很炫的icon来表达某些内容，这些的确会起到一定的吸引性，但是最重要的一点是：不让用户思考，要够直观，够明了，不对用户理解内容产生干扰，如果做不到，那还不如不要。所以：

•图形图标表意要清晰、明确，要有高度的概括性与指向性，让用户能够快速联想到对应的功能和操作；

•同类信息的图形图标，在形式和风格上应尽量保持一致；

•图形图标的使用要注意场合，避免滥用，仅在需要突出重要信息，用户可能产生理解偏差的情况下使用；

•图形图标要尽量与文本结合使用。

视觉是文案隐形的幕后推手、是文案的媒婆，2者有机的结合才能讲述给会员一个完整的故事。前面是我理解的文案在视觉中的规范，而这些则是我理解的文案与视觉更深层次的关系。他们不是简单的相互解释，而是用各自的语言来创造想象的空间，用清晰、有创意的文案和设计来引导会员的点击，教会他们在网站的习惯。

文章来源：KouBei UED