阿城

前面的话:

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

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

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

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

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

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

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

这样做有几个好处：

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

一些延伸：

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

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

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

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

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