Web视觉设计——不只是视觉效果的设计

刚接触 Web 视觉设计，是拿到了《 Visual Design for the Modern Web 》这本书。一致以来，我对于 Web 视觉设计的想法停留在平面设计上，认为 Web 视觉设计就是图形设计的过程，可以由美工一手操办，页面的元素是用 <table><div> 等 HTML 标签堆叠起来，没有考虑过网页设计的本质：是让用户通过网页中的可见元素，更方便的找到自己想要的信息，并且得到良好的使用体验。 想到这里，不禁感叹自己这么长时间的学习有些本末倒置了，作为一个 Web 视觉效果的设计师，不能为了纯美学或者艺术而进行页面设计，应该参考大量其他学科的知识，如建筑学、历史、人类行为学、美学、心理学、经济学等，研究如何增强网站的可用性和用户的体验。

  网站的视觉设计包含了两个范围，即可见部分 和不可见部分 。

一、可见部分

  可见部分是网站的图形 设计 和内容 ，网站的图形设计是网站的布局、字体、图像、背景颜色等，目的是更突出网站的主题，如CocaCola的白红配色，和飘逸的字体正好贴合了CocaCola激情自由的品牌形象。在设计一个网站的图形设计的时候，要从网站的目的出发，如果是推出一个商品的时候，一定符合商品的品牌形象，比如一个服装品牌的网站一定要贴合服装的设计理念，假如要做一个作时尚T恤衫的网站，整体风格要时尚有现代感而不能太过于死板和正式。

   网站的内容设计则是网站真正可以留住用户的东西，“If We Build it，they will come。”网站的内容要选择得当，才能留住用户。如新闻网站的新闻为了用户访问，要随时更新，并且有为了不同爱好的用户编辑的不同种类的热点新闻。

二、不可见部分

  而不可见的部分则是网站的灵魂，包括网站的内容的组织方式 和用户操作部分的可用性设计 。

  网站内容的组织方式是信息架构领域的内容。如果说网站的内容是材料的话，信息架构就像是菜谱，把不同的材料分类和组合，交给厨师做出美味的佳肴。信息架构在网站设计上决定了信息的组织方式并能够建立方便信息查找的索引系统。比如，对于新闻系统中庞杂的新闻材料，运用信息架构的知识，把新闻分成时事政治、体育、娱乐等栏目，并把新闻的标题做成能够准确查找的索引。信息架构对于搜索的另一个贡献，就是建立叙词表，通过搜索相关词汇都可以搜索到信息，如搜索今天湖人和卡尔特人的篮球赛时，无论搜索科比、加内特或者湖人都可以搜索到关于这场比赛的准确信息。

  可用性设计就是要善待用户，让用户可以方便的找到自己需要的信息。在可用性设计时要考虑到不同地区和国家用户操作的喜恶差异、相应的历史、文化、 人类操作的通用性设计、为残障人士专门采用的特殊设计等，包括了如何在界面上呈现信息、用户操作页面元素的方式。比如，在淘宝网商品选择的页面，在页面的最上端总是有商品分类的信息，点击后显示相应信息的子信息，如点击男装，会将男装分类为运动、正装或者按照品牌分类，用户可以按照类别由大到小的找到自己想要的产品。如果换一种方式，用户每次想找到一中类别的产品时，总是要通过重新选择大类和相应的分类会给用户带来很多麻烦。在可用性设计领域，有一个说法“好的设计，就是让用户感觉不到任何设计”。就是说如果网站精心的根据用户需求设计相应的页面，用户不需要花很长时间去学习如何操作，这样的网站就是出色的网站。

  再做个可用性的例子，如果在餐厅中，客人点了一盘面条，服务员端来面条的时候给客人的餐具不是筷子，而是一把勺子，我想，脾气好一点的客人也许会心平气和的和服务员商量再拿来一双筷子，如果脾气不好的客人，可能直接摔碗走人且永远不再回来。我们就流失了一位客人。