Web界面设计——离开电脑、打散现有资源去设计

Web界面设计

——离开电脑、打散现有资源去设计

 

互联网作为这个时代最伟大的发明，改变了整个世界的节奏，也创造了一个又一个奇迹。当马克·扎克伯格仅以PHP又一次改变整个网络世界格局，甚至影响到现实世界中，推翻一个政府的统治时，全世界都沉默了。网络已经再也不是那个静态的HTML页面就可以撑起一个网站的时代，而Web开发也早已不是仅仅网站那么简单而已，用户更多地希望与Web产品进行交互，而不是简单地去看看图片，看看新闻，用户的品味和需求都在提升，于是究竟怎样的Web界面设计才能增加页面或是Web应用的滞留度，已经成为了人们最关心的话题。因此本文将以Web设计的基本原则、基本要素，以及如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面等为主要内容来探讨。

一、Web设计的基本原则、基本要素

Web设计的基本原则在业内已经有一些被广泛接纳的，例如：

1、简约至上

人们喜欢简约而又不简单的东西，大道至简、凝练至极的产品是所有人都不会拒绝的。2007年，连物理变焦功能都没有的便携式摄像机Flip，在美国市场上掀起一股狂潮，一年销售上百万台；2008年，崇尚产品复杂性的美国三大汽车巨头巧遭遇市场寒冬，百年品牌摇摇欲坠；2009年，只能容纳140个字符的Twitter高歌猛进，迅速占领互联网市场，如今各种微博遍地开花；2010年，简单易用的苹果iPad在短短28天内卖出100万台，创造了平板电脑的销售奇迹；2011年IT界又有许多产品蠢蠢欲动。虽然这些例子里并不都是Web产品，但是这些例子体现了同一种观念，简约至上。

追求简单易用是人类的本性，因为人们可以直接找到自己想要的东西，而不用费时费力地去学会怎么用它，一个产品做出来，如果你做了很厚的产品说明书给用户教他怎么用，不能说你体贴用户，只能说你的产品还有不足的地方，好的产品应该是不需要说明书的，用户拿到了产品就知道怎么用，就可以上手，这才是好的产品。简约的产品还有另一个很大的优势。简约的程度一般都与产品寿命的长短息息相关，简约的产品更容易进行扩展和改进，而复杂的东西则不然。多数时候复杂的产品都需要全盘推翻重新来过，这对开发者来说无疑是难以接受的浪费。

2、一致性

一致性是说整个产品要表现出一种统一的风格。例如一个网站应该是一个完整的作品，无论里面有多少页面，设计师应该把它当成一个整体来做，每个页面之间要协调，页眉、页脚、Banner、Logo等等必须要有自己独特的风格，这个时候就推荐使用母版页（Master Page），母版页可以满足你想令部分页面有统一框架的需求。而且设计师在一个Web产品所使用的颜色最好保持在三种以内，以避免网站颜色太多，而使人眼花缭乱，难以抓住重点。人人网在国内引起了巨大的轰动，据悉现在用户已经超过两亿，但是如果使用了Facebook的用户就会发现，Facebook的每一次改版必然会引来人人网的“尾随”，虽然改过几次版，但是色彩一直没变过，而且风格也没变过，深蓝、白、黑，Facebook本身提供的色彩就这三种，而且整个网站都保持这一风格。

用户并不会因为你的产品只有三种甚至更少的颜色而视觉疲劳，相反如果太花哨往往会引来用户的不满。而你让用户不至于产生视觉疲劳的应该是提高产品内容的吸引力，这将会是下面的第三点。

3、明确和优化内容

也许很多人会说内容是维护的事，和设计无关，那么你就大错特错了，设计的时候应该考虑到在哪些板块放哪些内容，内容与整体产品风格的协调性等。这些都是设计时必须考虑的东西，就像你写一遍作文不能跑题一样，你的每一个功能和细节都是和用户的需求联系在一起和你产品的主题联系在一起的。这些是明确内容的，当然还有对内容的优化。

对内容的优化包括怎么排列内容，按逻辑，按时间还是按别的因素，图片和正文怎么互动，链接放在哪里不至于被忽视又不会喧宾夺主，等等小的细节都可以决定一个产品的成败。有一本被Web设计人士广为推崇的书叫《瞬间之美：Web界面设计和如何让用户心动》，这本书提出了瞬间之美的概念，用户往往会因为一个小的细节，一个瞬间觉得这件产品打动了它，于是就喜欢上了它，并向更多的用户去推荐，这似乎和人与人的感情一样，如若可以让用户喜欢上一个产品，那么他将会把你的所有都变成闪光点。

4、即时响应

响应时间无疑是交互性产品性能衡量最重要的指标。还记得《社交网络》电影中马克·扎克伯格因为服务器临时罢工一事大发雷霆吗？虽然只是几分钟的无法响应，但是可能会损失数之万计甚至更多的用户，这就是互联网。用户永远不会为你的失误而买单，更不会给予你同情，用户希望得到的是即时的响应，是感觉不到处理时间的交互。而这些不仅和后台代码有关，和前端的设计更是密不可分，例如究竟用不用插件，用什么样的插件，用多少，这就是典型的前端设计与响应难以分割的例子。在这一点上有一个大家再熟悉不过的例子——“土豆”和“优酷”。

中国国内的互联网视频大致上被几家网站所瓜分，在这几家网站中优酷如今已经隐隐有压倒性的优势。在优酷开始做互联网视频之前中国最大的视频网应该是“土豆网”和“56网”而优酷后来者居上目前市场份额已经超过了土豆，这其中的缘由很多，其中包括创始人“古永锵”和“王微”两个的性格差别等等，但是最主要的还是响应、带宽的原因。用户看视频时最主要的是什么，是缓冲速度，优酷本身的带宽要比土豆的大，播放界面的响应速度要比土豆好。在速度领先的基础上优酷就可以推出清晰的视频作品，这样很多用户就被优酷抢走了。当然全面来讲这两家各有优劣，但仅从响应速度这一项上来说，优酷要比土豆好很多。

二、Web设计中的人为因素

Web设计中要考虑的与人有关的心理和生理因素大概有以下几种：

1、有限的短期记忆力（Limited short-term memory）

人们的记忆力总是有限的，尤其是在这纷繁的网络世界，短期记忆力尤为重要，就像看简历一样，产品不会说话，因此要让用户在短暂的一瞥记住你，是很重要的设计目标。人们在短期内可以记住7项信息。如果超过这个数量，人们很可能要出错。这就是我在前文中说的产品不需要一本使用手册，需要的是上手就可以用，需要的是体验而不是学习。不得不说国内的Web开发中，QQ这方面做得最好，QQ完全不需要产品手册，当你安装了它之后就怎么知道去使用，这也是QQ用户为何如此之多，年龄跨度如此之广，上至八十岁的老人，下至八岁的小孩，都在用QQ而从来没有想过去看使用说明，甚至就我个人来讲，我从来不曾注意过QQ有帮助这个功能。

2、人会犯错误（People make mistakes）

人在使用产品的时候总会犯错，这个时候需要错误提醒和警示，错误提醒和警示是一个必须很谨慎使用的功能，因为你不知道你的用户群中会有什么样的人，不知道什么样的警示和提醒会给他们带来不便或者不舒适的感觉，甚至会造成紧张而产生更多更严重的错误。对用户的伤害以及引起的负面效应甚至宣传都会让你的产品毁于旦夕。

3、 人是不同的（People are different）

产品的设计者往往会在设计产品的时候不自觉地陷入一个怪圈，就是先假想自己是客户会怎么样，既而慢慢的就以自己的自身能力来设计产品了，而忘记了人的物理能力悬殊很大，设计者不应该只以自身的能力作为依据设计产品。应当做好充分的调查，考虑到各种用户群的情况。

4、 人们有各自的交互偏好（People have different interaction preferences）

这一条又不是不同于第二条和第三条的，第二条说的是人的心理相关的一些东西，而第三条说的是人的物理机能相关的。每个人的交互偏好不同，表现在例如一些人喜欢触摸屏，而另一些人喜欢控制杆或者按键；一些人喜欢图画来表示和交流，而另一些则喜欢文本等等。因此设计师在设计的时候可以考虑丰富的交互界面和方式，或者将其中的一些优点结合起来。

文章就两个大的方面对Web界面设计做了一些探究，是从本人做Web产品及从平时读的书和一些类似知乎、Quora等的网站中与人交流内容的总结，最后想再说一个最重要的Web界面设计的准则，那就是离开电脑，离开Web，离开屏幕去设计，把现有的资源全部打散，真正从用户需求出发，去设计一个好的Web产品。