评价北京大学网站的页面设计和用户体验设计

田婧 201522080016

高校的网站设计不仅是高校形象的展示，还是指导用户顺利完成访问目标的重要介质。评价一个网站的设计，主要看其网站外观和用户的易用性。比较分析了国内高校的网站，觉得北京大学的很不错。下面，我从网站的内容，网站导航设计，网站页面布局和网站的视觉元素来简单的谈一下个人看法。

一、网站内容

除了首页的导航栏和大图，网站主要分为北大要闻、教学科研、媒体北大、通知公告和专题网站。首页的大图有校园风景，还有学校近期举办的活动、讲座等图片。北大要闻是北京大学近期的新闻，包括一些论坛的举办，学校的会议的报道等。教学科研主要是针对科研项目突破的报道。媒体北大这个板块是转载其它社会媒体对北大的报道。通知公告主要是一些校内通知，包括疫苗的接种等。专题网站是一些和同学们联系很紧密的常用网站，比如网络服务、信息公开和未名BBS等。总的来说内容很全面。

http://s7/mw690/0066bXDIzy6WDUlFj9k56&690

二、网站导航设计

网站的导航是网站内同和架构的体现，合理的网站导航设计才会给用户带来不错的体验。好的导航是方便用户理解和使用的。

（一）全局导航

北京大学网站的全局导航包括北大的logo和网站的栏目设置，同时还有站内搜索和一些常用网站，另外还设有旧版和英文版本，英文版本方面留学生使用。北京大学的logo有返回首页的链接，无论看到哪一页，都可以点击logo返回首页。作为全站的基础栏目，分为北大概况、招生与资助、院系设置、教育教学、科学研究、交流合作和校园生活，清楚明了。

（二）辅助导航

辅助导航是网站的层级菜单，使用户在哪里都不会迷路。辅助导航从另一个层面反映了网站的布局，是对全局导航的补充。从全局导航链接过去多是另一些网站，例如研究生学院、国内合作委员会办公室和各个学院等。各个网站有自己的网站首页导航和辅助导航。从北大的网站到一些相对具体化的学院课程等层层链接，但十分清晰，辅助导航起到很大的作用。

http://s13/mw690/0066bXDIzy6WDUsgNgobc&690
       三、网站的页面布局

网站的页面布局是网站的核心服务，北京大学网站的页面布局我认为有以下优点：

（一）页面布局和内容的风格统一

整个页面的布局，从上到下，从左到右按照内容重要性的优先级有序展开。首先是北大要闻，依次是科研教学、媒体北大等，在页面布局有包含关系的部分，例如北大要闻和其下面的文章，视觉层次也非常清晰。

（二）列表页面的设计

点击北大要闻板块，进而是以列表的形式按照日期排列每天的要闻。相邻的两个列表之间有明确的区分，每条列表的标题醒目。值得注意的是，北大要闻尽可能多的展示了列表的数量，减少翻页的频率，同时也有页数列表和下一页这样清晰的翻页提醒。

http://s9/mw690/0066bXDIzy6WDUoZ5J658&690
      （三）详细页面的设计

以《美国科维理基金会主席一行访问北京大学》一文为例，整个页面内容突出，文字配有照片。在标题的下方有日期和信息来源，在文章的底部有北京大学官方微博，北京大学新闻网等二维码，算是一个小小的广告。整个页面十分简洁，突出高等学府的气息。页面底部是友情链接和合作网站，还有投稿的邮箱，信息十分全面。

四、视觉元素的设计

网站的视觉元素包括文字、图片、标签、表单等，是网站的外观设计的组成部分，服务于整体的网站风格。

北大的网站文字和页面的配色十分和谐。页面整体是红色的风格，首页和线条等都是红色的，文字是白色的。在空白的页面上是黑色的文字，字体的颜色和背景颜色对比明显，有链接的字体有所提示。

北大网站首页上的图片，除了首页大图，都是小图片。首页的大图是给用户视觉冲击，直观快速的了解北大。而小图多配以文字，不宣兵夺主。

网页的标签是重要的视觉元素，同时也有导航和链接的作用。北大网站首页的标签主要有四个：人物风采、菁菁校园、北大史苑和专题网站。菁菁校园的标签是一本书，北大史苑的标签上是北大的篆书，很有历史气息，专题网站的标签是一座小房子。虽然是小小的标签，却精心设计。

http://s12/mw690/0066bXDIzy6WDUuApLR7b&690

总的说来，北京大学的网站包含的内容繁多却设计的非常合理，方便用户的使用。从许多细节，像英文版本等也体会到对不同用户的独特设计。多数按钮也十分明显，易于用户发现。但是个别按钮位置比较隐蔽，按钮的颜色和背景的对比颜色不是十分突出，容易被忽略。但如此大的一个网站，在内容、导航、页面布局和视觉元素上能做到如此，已经非常棒了！