阿城

前面的话:

前段时间琢磨过一阵山寨网站的界面设计，这里所谓的山寨网站，泛指一些看上去没有太规范化的UI、设计风格粗犷、眼花缭乱、色彩丰富，设计风格与百度、google等简洁风格截然相反的，同时，这些网站提供的内容和服务非常符合一部分用户的实际需求，大家也都热情洋溢的用着的网站。很典型的就是下载网站、小说等一些内容丰富、满屏幕广告的网站。由于近年“山寨”的流行，姑且称之为山寨设计吧。

山寨设计由多方面原因造成，因为早期大家对网站设计都没有太深的认识，加上网站的发展的确非常迅猛，形成了具有我们国家互联网特色的“长闪挤花”的网页设计；另外，各种背景的互联网公司，需要考虑网站成本预算的boss、项目负责人，对网站设计都没有重视起来，导致了一大批没有经过调研、思考的网站设计的产生。也因此，我们的网民长期接受着这样的网站设计，尤其是一些网龄不长比较初级的互联网用户，或许还觉得网站设计就该这个样子吧？在杂乱的网页上寻找内容，或许已经成为习惯；尤其是一些下载网站各种各样的下载按钮，经常下载软件的朋友应该知道这种感觉了。

从web界面设计者的角度，这样的山寨网站设计是不被很多有点理想化的设计师认可的。因为这样的网页，浪费了用户大量的精力，人们要在很多杂乱的视觉信息中寻找有用的东西。因此，近几年来，大家开始把用户体验上升到一个新的高度，都出来琢磨怎样设计界面让用户更好用。

百度开始框计算，是最终极的一种产品理想；行业内用户体验被越来越频繁的提出；尽管用户体验设计的职业还不明朗，但我们也看到越来越多的从业者开始接触他们；从事搜索优化的点石也把SEO提升到了用户体验的角度——这些都越来越清楚的告诉我们，以用户为中心必然是大势所趋，今后的互联网战场，以用户为中心的设计将会是很重要一个竞争力。

这个主题《设计更好用的网页》会成为一个系列的专题，不定期的更新一些体会和思考，跟朋友们一起进步，对自己也是思路的整理。开始正题吧。

第一篇 顶部的黄金区域，让正文离地址栏再近一点

最近用的较多的两个产品，一个是Flickr，一个是豆瓣，无意之间，发现了他们的一个共同点：即顶部的标志、导航区域的高度都非常小。截图是这样的：

这样做有几个好处：

1. 简洁，logo是网站名，一般会加上回到首页的链接。另外就是导航菜单，这张图不是很完整，右侧，都很默契的放着会员登录信息和退出，以及搜索框；没有视觉干扰；
2. 导航。一级导航直接显示出来，二级导航隐藏，用户需要的时候会找到隐藏起来的二级导航；豆瓣导航的当前页的标题在导航中处于选中状态，方便辨认当前的网页主题；
3. 由于顶部黄金区域的高度很低，所以很容易看到左侧网页展示出来的有用信息。尤其对于很多用户仍然使用1024*768的屏幕，这一点非常重要。

一些延伸：

开心网、facebook等所有的主流的sns网站都将顶部的区域的高度控制的非常少。

开心网的顶部相当的简洁，从上线至今一直没改过：

人人网登陆后页面相当混乱，是个反面教材，可以看一下：

门户网站的内容页浏览起来很和谐，很方便，看看新浪是怎么设计的：内容非常靠上，符合用户视觉的习惯，从左到右的视觉方向。

UED Flickr, 新浪, 用户体验, 网页设计, 豆瓣

近期看了很多电影，具体看了多少已经没有概念了，老婆在老家，室友出差，老程我一个人独守空房，寂寞难耐。打开PPstream，从高清影院，到2009最新大片，到动作片，到悬疑片，到文艺片，再到动画片，除了恐怖片那一栏，我像狼吃小羊一样趴在电脑前看这些电影。很难懂，我一直没有胆量看恐怖片，担心那些影像在脑海中留下阴影，害怕冷不丁自己吓自己一顿。顺便说一句，今年有一些动画片非常不错，尤其是那部《机器人9号》，用麻绳编制的拳头大的机器人，竟然也能栩栩如生，麻绳脸上的表情丰富自然，就像真的一样；还有《冰河世纪3》《海豚鼠特种部队》也都不错。

看的实在不知道看什么了，到豆瓣去找，发现《豆瓣里五颗星得评分超过1万的电影》，原来还有这么多好电影都没看过！作为一个不怎么关心电影、书、音乐的人，这时才发现豆瓣原来这么好，网络也可以这么好，寂寞也可以这样好。

于是我开始进入一个又一个精彩的世界，有19世纪从欧洲开往美国的邮轮上，幸福的《海上钢琴师》1900；有《辛德勒名单》上没有被纳粹屠杀的1100名犹太人；有爱尔兰英雄之子的那颗《勇敢的心》；有杀人不眨眼的杀手也开始变的有爱、有情感的《这个杀手不太冷》……困惑、悬疑、曲折、矫情、泪水，我希望从这里找到我的谜底，久久的沉浸在不同的时代、不同的主角的不同的故事中，或许，平凡的生活才是真正的谜底吧；1900在寻找他的End，在和小号手讨论两只右臂的故事，辛德勒在战火中挽救1100个生命，我呢，我们呢。

在旅途 海山钢琴师, 电影, 豆瓣, 辛德勒名单