《瞬间之美WEB界面设计》(第1章).doc

令人心动的第一印象 人们常说第一印象往往会给人留下一生的记忆。对于一个网站而言，这一说法也同样成立。但遗憾的是注意到这一点的站点并不是很多。 有人说Steve Jobs，这位苹果公司无畏的领导者，对第一印象非常执著。也许这可以解释为什么苹果公司的产品总能在第一时间就吸引人们的眼球。 哪怕是打开一台还在包装盒里的崭新的MacBook Pro，就足以让人流口水。首先，单凭外包装就令人满怀期望和惊喜。而一旦打开包装盒，将MacBook安置在书桌上，它的启动过程从第一个瞬间开始就极富魅力。伴随着栩栩如生的动画，它用多种语言向你表示欢迎，会自动有哪些信誉好的足球投注网站网络连接，提示你把之前Mac电脑中所有的数据和存档备份到新电脑中来，还让你在一片端庄雅致的桌面背景之上进行设置，一切都为用户考虑得细致入微，让这整个过程毫不费力。 要把这一切搬到互联网上则并不容易。不过，设计一个引人注目、令人动心的页面仍然是我们工作中不可缺少的一部分。 前不久有一位客户来找我，带着一大堆关于首页设计的需求。他在设计一个专门面向平面设计师的社区网站。他已经完成了一项困难的工作，就是精简了需求列表，只保留了那些真正有用、确实与网站用户相关的部分。而我所要做的就是把这份列表转变成美好的第一印象。 由于这个网站主要针对平面设计师，因此它的首页需要一个中心区域突出展示大量富有特色的图片，同时还需要一些小区域来安排用户的账号信息、网站特色项目以及登录框。当然，页面中还需要包括那些常见元素，如网站logo、欢迎辞、导航栏、有哪些信誉好的足球投注网站框以及页脚信息等。 另外，就算这些应付，网站首页还需要放置一些关于业界和站点本身的头条新闻摘录片段。 仅展示图片一项就将占据很大一块页面空间。其他所有栏目都加进来，还要包括新闻区域，就显得有些棘手了。同时，即使首页的所有这些部分都能完美地展现，能让用户得到他们想要的东西，但毕竟这个站的主要目的是吸引浏览者们注册并成为该社区的成员。因此我需要一种设计诱使用户注意到Sign Up Now（现在就注册）按钮，同时让他们去点击它。1.1　发现页面布局 我一开始努力尝试去发现页面的布局。对于页面而言，布局是其中最基础的元素。 我在这里用到了发现这个词因为页面的布局设计并不一定出自于设计师本身。当我想到页面布局的时候，经常会联想到Bob Ross。这个画家最让人津津乐道的一点，就是他能将随意洒到画布上的颜料加工成一副满是快乐的树的风景画。他总是下一步该做什么。 ，不是你选择页面布局，而是它选择了你。 布局是内容组织的必然结果，它往往是自己逐渐成形的。一旦周全考虑了页面需求，并且确定了每一块的内容，你的工作就变成了看着所想要的布局自己展现在你眼前。这就好像你不断地切削石膏直到雕塑成型。 在开始页面时，我会秉承这一最基本的（同时也的）设计。简单来说，我把所有的栏目区域都扔到显示屏上，然后移来移去不断地调整让它们彼此。 这个过程有点类似玩拼图游戏，只不过没有盒子封面那张最终完成图作提示，而且拼图的每一个部分都能任意改变大小。 我最先考虑的是主要图片展示部分，因为它需要的区域最大。与此同时我也颇为得意地创建了一个宽宽的区域放置新闻，因为它需要空间显示文章的摘录片段。至于我的账户、导航栏以及网站，我把它们对待，放在了左侧。 几分钟之后，我得到了第一个版本，见图1-1。 图1-1 这时我突然感觉到新闻部分似乎有宽了。这个宽度能让我陈列很长的头条，也能放很多摘录内容，但同时它也划分区域关于站点的内容和关于业界的内容。为了纠正这一点，我把该区域分开为两列，见图1-2。 图1-2 好多了。 随后我又意识到另外一个问题。刚开始设计时，我猜测自己可能需要列来放置所有的内容而现在发现完全不需要那么多栏目就能够解决问题因此我移去了第三列。然后我加大了左侧列的宽度，这样能为站点导航栏和网站工具列表留下更多的空间。与此同时也加宽了主要内容区，从而了更多地方来放置图片和新闻。如图1-3所示。 图1-3现在页面开始成型了。整个网页更站点的主要目的——展示社区成员的艺术创作以及相关新闻。所以我确信自己正确。嗯，继续。 我知道首页目的是吸引（或者说诱使）用户注册，因此我把注意力放在了注册区域。 一般来说注册区域都需要一些颇具号召力的一个按钮。所以我随便写了一些字，做了一个按钮，然后把它们丢进去。如图1-4所示。 图1-4 就这么简单。 现在请允许我稍微扯一些题外话。 1.1.1Automattic”的一次飞跃 此前，我为Automattic公司过一次有关设计方面的研讨会。会上我们讨论了这个公司颇受欢迎的软件——WordPress。过程中我和Automattic一位叫做Andy Skelton的员工一起设法为WordP首页做一点小改动，目标是提升网站的注册率。 我们由原先的设计开始。见图1-5。 图1-5 我为该页面创