网站界面分析和优化设计技术详解

网站界面分析和优化设计一、网站界面优化的重要性。

web技术的发展，使得互联网用户从单纯浏览信息时代迈入了更加注重交互、更加人性化的时代。网民使用互联网产品已经不仅仅只关注工作效率，而是越来越关心使用过程中的体验。网站界面的本质是让用户做主，操作简便性、强调交互性。

在互联网发展的过程中，最初希望通过建立网站来抢占市场、树立形象的企业逐步认识到网站提供优质的用户体验才是可持续发展的竞

争优势，而网站服务界面的设计效果是用户体验好坏的直接影响因素。某电商网站Allurent曾经做过一个调查，当用户对某一网站的验较差时，80%的用户表示不会再次访问该网站，60%的用户表示影响到了自己对该商家的整体印象，而40%的用户表示甚至可能不再去该商家的实体店铺。用户不良体验无疑是在与网站界面的交互中形成的。目前，很多商业网站已经充分认识到周到、贴心的网站界面设计对于企业利益获取的重要性。很多跨国公司如雅虎、惠普、IBM微软、苹果、等都先后成立了用户体验研究机构，尝试将用户体验的研究成果应用到界面设计中来，国内互联网企业如百度、腾讯等也都建立了相应的研究团队。

二、网站界面优化的核心要素

网站服务界面是指网站为用户办事服务和提供信息的网页内容展

现方式。关注服务界面，就是要做好网页界面的优化设计工作。基于用户体验进行网站服务界面优化设计，需要将用户体验从不同层次、维度进行分解，提取与网页界面相关的要素，然后才能对相应要素实施具体的优化设计。Adaptive Path

公司的创始人James Garrett对用户体验的要素进行过较为系统地研究，将用户体验划分为战略、范围、结构、框架、表现10个核心要素，如图所示。这5个层面自下而上逐步的从抽象转为具体。

图1. 用户体验要素模型

这一用户体验要素模型中与界面优化直接相关的是框架层和表现

层的四个关键要素，即界面设计、导航设计、信息设计和视觉设计。我们主要讨论界面设计这一主要要素。

三、网站界面的优化

3.1提高页面响应速度

随着科技的发展用户等待网页加载的耐性越来越低。2009年，微软搜索引擎必应（bing）进行过一项调查，研究页面载入速度和其他网站指标是否有明显相关性。根据报告显示，每2秒钟的延迟页面会使用户满意度降低3.8%的，减少4.3%的单位用户收入和减少4.3% 的点击数。多项研究结果表明，2秒以内是用户最满意的网页打开时间，用户能够忍受的最长等待时间为6-8秒，如果网页载入时间超过12秒，99%的用户会关闭网页。从用户角度看，网页打开的速度越慢，

其心理受挫感会越强，进而会恶化用户对网站的使用体验。目前，百度、谷歌等主流搜索引擎已经将页面响应速度加入了他们的排名计算因素中，成为决定网站权重值的重要因素，可见页面响应速度的重要性。

网站应定期对页面响应速度进行测试。例如，可以利用标准化度量工具如YSlow来协助进行前端性能优化。同时采取相应措施改进性能：一方面应尽量减少网页文件的大小。图片和多媒体在修饰网页的同时，也成为影响网页下载速度的重要因素，可将图片压缩或将大图分块成为零散图片来减少图片载入负荷。另一方面可提高加载的呈现效率，选择让页面内容根据重要程度有秩序地加载。

3.2增强站内搜索易用性

绝大多数功能完善的政府网站都提供站内搜索服务，并将其当做标准功能。当用户无法通过导航系统找到信息或者他们清楚自己所需信息的准确描述时，发起站内搜索将是获取信息最简单、最直接的途径。然而，目前绝大多数政府网站的站内搜索实际效果都不尽人意，有的网站甚至没有设置搜索条。搜索功能不足使得用户面对庞大的政府网站资源无从下手，既降低了用户体验，也降低了网站资源的利用率。增强站内搜索的易用性主要从两个方面入手：一是要让用户易于发现，二是要提高搜索性能。

首先，搜索条的位置要尽量统一，且放置在醒目位置。较为通用的做法是放置在网页右上角，并使用与周围网页元素颜色对比强烈的搜索按钮吸引用户注意。

其次，搜索性能方面，应用查询建议工具，提供结果筛选功能，在提高搜索查准率的同时，还可建立垂直搜索。查询建议工具又称为提前键入，当用户在搜索框中输入相应词时会自动出现更多相关的搜索词，查询建议工具对于那些不太明确查询信息的正确描述的用户来说尤其有效，目前google、百度都提供了此功能。

3.3优化界面细节体验

网站建设之初，设计人员往往按照对用户需求的理解和规划方案进行服务界面设计，而这种状况下往往因为关注了一些大的方面，却忽视了一些细节功能的处理。而很多时候，一些细节的优化最能够给用户惊喜、贴心的感受。

细节处理的过程实际上亦是用户需求的发现与需求满足的过程。随着互联网技术不断创新，已经出现了一些用于改善网站用户体验的智能分析工具，其中就有国家信息中心网络政府研究中心研发的记录网站用户点击行为的分析工具——政府网站页面热力图。热力图收集了网民访问页面的每一次鼠标点击，并将这些点击位置用添加图层的方式在政府网站页面上予以准确标示，是分析网民访问行为的有效工具。在热力图中网民点击越多的地方颜色越亮（黄色），点击较少的地方呈蓝色，无人点击的地方为白色。使用网站页面热力图可以有效帮助发现曾经忽视的细节，从而有针对性的提出优化方法

以都政府网站首页（）为例，在首页加载热力图后我们发现，从2011年12月10日到2012年5月10日五个月中，网站logo“太阳神鸟”有近6500人次点击，但用户点击Logo后，网页仅仅只是刷新屏幕。用户点

击便意味着他们对logo好奇，认为这里应当有内容。于是我们建议成都网站运营部门在网站首页logo中加入了链接，点击logo将进入logo“太阳神鸟”的介绍页面中，让用户对logo以及网站设计风格有更为深入的了解。热力图是用户访问行为的客观记录工具，基于热力图可以有针对性的发现优化细节。

3.4提升表单的友好性

表单是用户在网站上进行信息输入的窗口，是交互体验最重要的影响元素。对于网站来说，想要获取尽可能详细、规范的用户信息，而对于用户来说，希望填写的表单越简单越好。因此，在满足网站信息收集基本要求的同时，也要考虑表单设计的友好性。

一是应减少表单操作的时间。表单输入元素应尽可能简化，避免过早向用户索要过于详细的信息，否则繁琐的输入操作不仅延长了完成任务的时间，还会导致用户的厌烦情绪而放弃使用。根据用户喜欢点击多于输入的操作习惯，还应尽量用选择性控件代替输入框。二是尽量简化用户的思考。为容易产生疑惑的表单元素提供必要的解释或示例，如允许输入的长度、必填项等，避免让用户过多思考。三是出错信息及时提醒。当用户在相应输入框中输入错误信息时应及时判断并提醒，这比起点击提交按钮后出现错误页面提示、要求返回重新输入的交互方式，不仅降低了用户的劳动量，也减少了任务完成的时间。

四是让表单记住用户的部分信息以减少用户下次访问时重复信息的输入。

3.5划页面布局