网页设计的作用在于展示企业形象，并协助、指导用户顺利完成访问目标及任务流程。网站的外观设计是新竞争力网络营销管理顾问对网站易用性进行评价的重要指标之一。

《网页设计与用户体验》探讨网站外观与界面设计的用户易用性。由新竞争力网页设计师通过大量案例阐述影响用户体验的网页设计问题。涉及用户需求分析、网站整体风格和品牌形象、“实用”与“美观”的平衡点、网站导航设计、网站界面布局、网站视觉元素设计等网页设计主题。
1． 试着去了解用户
网页设计师在进行网站的外观设计之前，不妨先去思考几个问题
·谁是你的目标用户？
·目标用户具有什么特点？
·你的网站运营目标是什么？
·如何让你的设计真正为传递网站内容和产品价值而服务？
·你的设计能否给目标用户带来更好的体验？

网站外观设计应依托于网站结构，以用户为中心设计，使网站内容以更符合用户习惯的方式呈现。同时网站的外观设计还要通过对用户行为的引导服务于网站的运营目标。时下国内的一些企业网站存在的较普遍问题是：没有分析用户特征和用户需求，以企业领导的喜好或设计师个人喜好来作为设计的依据；或者过分强调外观设计而忽略了最根本的企业的行业属性，过于注重视觉效果，网站美观有余实用不足。
新竞争力网络营销管理顾问认为,设计师面对两类用户：一是企业客户本身，一是企业客户所面对的客户，即网站的访问者。如何满足这两类用户的需求，则需要通过以下方法来达成：
1、加强与企业客户的沟通，了解客户建立网站的商业目标；
2、站在网站访问者的角度考虑问题，把注意力集中在潜在客户需求和目标上，而不是依靠企业管理者的凭空想象来进行设计。
2．网站整体风格和品牌形象
网站的整体风格是网站外观设计的指导思想。视觉元素、CSS、布局方式、浏览器兼容性等视觉表现形式都要服从于网站的整体风格。
确立网站整体风格有助于品牌形象的塑造，而网站的品牌理念对网站的整体风格也有着重要的影响。
网站的品牌形象不仅是现有的品牌在网上的延伸，还能给用户带来更多的符合期望的品牌体验。总体上，网站风格设计要契合以下几方面：
2.1 风格要突出企业/产品的个性气质
企业网站的风格要体现独特性而不是与其他网站千篇一律的风格，比如套用模板程序做出来的网站通常就难以体现个性气质。
很多创意类的工作室或者广告公司的网站常常喜欢采用红黑，黑白这样对比强烈的颜色。以此来体现网站的品牌气质，使网站整体显得个性张扬，饱满精致。
例如：设计公司力锐的网站http://www.szlaser.net/

? 点评：力锐网站整体色调为黑加浅灰，搭配协调，外观设计体现了其独特的个性气质，设计意味强烈的配图更是对这点加以强调，给人很深的印象。
例如：品客薯片的网站http://www.pringles.com

? 点评：品客食品的网上设计，采用与代表产品薯片包装相同的抢眼的红色为主色调，飞散的薯片在勾人食欲的同时，让人感觉到淘气活泼趣味性，充分体现了产品的特性。
2.2 网站风格要符合品牌视觉形象
塑造网站的品牌形象的关键是将企业的 VI 视觉元素运用于网页设计，使得网站的整体风格符合企业品牌的内涵，达到线上线下整体风格一致，有助于品牌形象的统一塑造。
如：养生源蜂业公司的网站首页http://www.ysbee.com 与企业VI图片

? 点评：网站的绿色+黄色系与企业品牌的 VI 视觉基本一致，突出了蜂业公司的产品特性，传达品
牌与绿色自然生态一致的健康理念。
? 新竞争力小结：设计师可以通过以下几点确立网站的整体风格和品牌形象
1、理解网站要传达的品牌理念
2、网站 VI主色调与企业 VI 识别一致
3、在页面头部的醒目位置放 logo，并配以品牌口号，贯通全站每个页面
4、同一级别的页面在设计上保持一致性。
3． “实用”与“美观”的平衡点
网络营销导向的企业网站外观设计，要在实用性和艺术性之间寻找出平衡点，让网页设计既美观又方便实用。
3.1 网站设计少点花俏，多些实用
用户到网站是为了获取希望了解的信息，设计繁杂的网页对于用户快速获取信息是一种阻碍，因为过多的设计元素和背景噪音会令用户分心，还会影响网站的兼容性和打开速度。因此，网站设计少点花俏，多些实用，着重于整体风格的形成和实用信息的传递，而不是对局部细节过度刻画、滥用动画图片或 flash，导致浏览者无所适从。
如：斯尔丹奇（服装品牌）的网站http://www.sierdanqi.com/

? 点评：极具视觉冲击力的背景和过多的动态图片抢走了用户的注意力，成为了影响交互的干扰元素，对用户获取网站内容造成了障碍。

例：美观与实用兼顾的企业电子商务网站：

? 点评：首页设计美观和谐，一气呵成，文本信息丰富，banner 广告虽占有不小的宽幅，但内含
促销信息言之有物，能促成顾客转化，整个版面绝无华而不实的元素。
? 新竞争力小结：设计师可以通过以下方法来平衡网站页面的美观与实用性
·一个屏幕区间，单一图片占地不宜超过 1/2的版面
·尽量避免使用纯 flash 制作网站首页
·减少花俏、巨大的背景图片运用
·页面上采用大量的 flash 和动画图片的时候，应考虑到页面的打开速度
·使用大图片时，尽量在图片中通过文字传递更多实用信息
3.2 网站外观设计的艺术性
大部分用户打开一个网站首先形成的印象是来自于网页外观设计，因此外观设计的美观、艺术性也是网站易用性建设的基础。对企业网站来说，要兼顾“实用性”基础上的美观和艺术性，通常在于对细节设计的用心。
如图：国外软件公司的网站http://www.heartbeatsoftware.com

? 点评：这是一个设计简洁的企业网站,结构清晰，导航基于信息本质，没有太多花俏的图片，但对细节深入专注，设计富有质感。
? 新竞争力小结：让页面看起来富有艺术性的美观效果，需要注重以下方面：
·主体色彩与辅助色彩搭配的协调性
·网站选用的配图个性鲜明，并与页面背景协调
·根据网站内容采用合理的分栏结构来进行疏密有致的页面布局
·注重细节设计的完美
4．网站导航设计
网站的导航机制是网站内容架构的体现，网站导航是否合理是网站易用性评价的重要指标之一。
网站的导航机制一般包括全局导航、辅助导航、站点地图等体现网站结构的、对用户进行引导的因素。
正确的网站导航要做到便于用户的理解和使用，让用户对网站形成正确的空间感和方向感，不管来到网站的哪一页，都很清楚自己所在的位置。
4.1 全局导航的3 个基础要素
全局导航（Persistent Navigation）又称主导航，它是出现在网站的每一个页面上一组通用的导航元素，以一致的外观出现在网站的每一页，扮演着对用户最基本的访问方向性指引。
对于大型电子商务网站来说，全局导航还应当包括搜索与购买工具两大要素，以方便用户在任意页面均能执行产品搜索和与顾客转化有关的活动，如加入购物车。
如戴尔网站的全局导航：

? 点评：1和 2 即站点的 logo，同时点击 logo也可以返回到首页，3 是网站的栏目设置，4 是站内搜索，5 是与顾客转化有关的常用工具。
? 新竞争力小结：一般企业的全局导航必须包括 3 个基本设计要素：
·站点 logo：logo 必须加上回首页的连接
·回首页：每个全局导航条左边位置同样出现回首页的提示及连接
·全站基础栏目（一级栏目）
4.2 辅助导航的 3 个设计要点
辅助导航又被称作面包屑路径或层级菜单，体现为内页的“当前位置”提示。辅助导航的作用是无论用户身处站内何处，均不会迷路，尤其当网站的栏目层次较多的时候，正确的辅助导航的设置尤为重要。它从另一个层面反映了网站的结构层次，是对全局导航的有效补充。
如戴尔网站的辅助导航：

? 点评：辅助导航出现在戴尔网站的每一个内页紧靠主导航条下的位置，以“>”来对层级进行分隔，简单而形象从视觉上暗示了浏览层次的前进方向；末尾的“台式机”和当前所在页面的名称一致，并用不同的颜色加以突出，让浏览者对当前的所在位置一目了然。
? 新竞争力小结：辅助导航的 3 个设计要点：
·出现的位置在全局导航之下、正文内容之上的过渡空间
·层级关系体现正确，用户通过当前页面可以依次返回上一页、直至首页，不出现缺链、错链的情况
·形式采用文本链接，而不是图片
4.3 网站地图的设计
网站地图（SiteMap）将网站内深层次的链接关系以一个扁平的页面呈现出来，同它的命名一样，让用户对网站的内容与结构全局快速了解。就如大卖场指示图一样让我们对各个卖场的区域划分具体位置有个初步的了解。 结构合理的网站地图，不但能让浏览者对整个网站的结构内容有个初步印象，同时也是对搜索引擎友好的表现。
例如http://www.webcredible.co.uk/sitemap.shtml
这个网站的站点地图极为规范，除了结构清晰外，对各栏目还有简单的介绍。

? 点评：该网站地图放弃所有虚饰性图片，富有层次感的设计将栏目结构层次清晰地呈现出来；并对重要栏目有简述说明，对用户起到很好的指引作用。
? 新竞争力小结：网站地图的设计应该重视以下几点：
·快速加载页面，因此去除任何图片
·层次感，而不是密密麻麻堆砌链接
·呈现的层次不宜过多，也不宜过少，一般呈现到主导航下的二级菜单
·文本链接方式，而非图片
4.4 导航设计禁忌
最佳导航方式是采用文本链接方式，但不少网站，尤其是娱乐休闲网站为了表现网站的炫酷风格，在全局导航条上通过 flash 等技术手段大做文章，弊大于利，以下是一些常见的导航设计禁忌：
使用移动的图片
因为不容易找到可点击的区域，移动的图片常会使浏览者产生挫折感。
采用“很酷”的表现技巧
如把导航藏起来，只有当鼠标停留在相应位置才会出现，这样仿佛很酷，但是人们更喜欢可以直接看到的选择。
导航没有文字提示
目前国内较多企业网站喜欢使用图片或flash来构筑站点的导航，从视觉角度上讲这样做显得更别致更醒目一些，但是它对提高网站易用性没有好处，如下图：某企业网站的导航条，顺德工业集团的网站http://www.sdi.com.tw/

? 点评：只有当鼠标移到对应的图片上，才会展开显示内容“电子事业” ，如果单纯的看两个 Our Business，谁能知道有什么区别呢？
5.网站界面布局
网站界面的布局方式、展示形式直接影响用户使用网站的方便性。合理的页面布局令用户快速发现网站的核心内容和服务；如果页面布局不合理，用户不知道如何开始获取所需的信息、或者怎么执行操作来获得相应的服务，那么他们就会离开这个网站，甚至以后都不会再访问这个网站。
界面布局的基本原则是既要体现网站运营的重点，又要兼顾用户访问行为习惯，由此，需要做到以下几方面：
5.1 界面布局与内容的相关性
网站的界面布局与网站内容架构息息相关。网站界面布局应遵循用户浏览习惯和网站的信息规划，将内容合理有序的呈现在用户面前，使重要信息置于页面重要板块得以重点体现。同时网站的界面布局也反映出网站的运营思路，并对最终的营销结果产生影响。
如：深圳电信的网站首页

? 点评：广告占据了网站第一屏中重要的位置，每月最新优惠等用户更为关心的内容沉到了页面的下方。网站使用广告的用意是为了配合营销活动的宣传，这样的布局更象是出于网站的目标，忽略了用户的目的，因此未必能达到预期的效果。
? 新竞争力小结：设计师在进行网站界面布局时应注意以下几点
·从上到下，从左到右，按照内容重要性的优先级有序展开：
·重要内容放在靠前的位置
·建立清晰的视觉层次
·页面布局清晰明确，同级的页面布局一致
·页面上内容有包含关系的部分，视觉上要进行嵌套
·页面上内容有相关联系的部分，视觉上也要体现这种相关性
5.2 网站界面设计的兼容性
网站界面设计还应考虑浏览器兼容性，即要适合大多数用户的浏览环境，使他们都能正常的浏览。随着 Web 标准的推广和应用，将网站界面的表现与形式分离，更具灵活性和适应性的方式在网站建设中越来越受推崇。要做到网站界面在各浏览器和分辨率下相兼容，不妨第一步就从 web 标准化的运用开始。
目前网站界面的主流分辨率主要指 1024px×768px，04 年以后大约 60%以上的网民采用此分辨率。而随着液晶显示器的普及，1280px×1024px 分辨率将会有更多人使用。因而网站界面设计应该在保证主流分辨率的基础上，争取做到兼顾适应未来分辨率的趋势。同理，网站界面目前对应的主流浏览器仍然是 IE5.5 以上，火狐 firefox 的市场份额近年也不断增
加，设计师要做到网页在以上浏览器下均能正常浏览。
如图：安利：http://www.amway.com.cn/

? 点评：网站在火狐浏览器中出现严重异常
手机 3g 时代终将来临，无线互联网将是未来发展趋势。企业在建立网站时不光考虑网站界面在各浏览器的兼容性，还有必要对手机浏览兼容，有的企业甚至会建立专供手机上网浏览的 wap网站。
如图：联想集团的手机站点http://lenovo.mobi/

? 点评：网站界面适应手机的窄屏模式，信息内容从上到下有序展开，去除大图片，只剩必要的logo 图片。
? 新竞争力小结：要做到网站界面的兼容性设计师应做到以下几点：
·Web 标准的熟练运用
·网站界面应对主流浏览器兼容
·网站界面应对主流分辨率兼容
·网站界面对手机和屏幕阅览器等特殊设备的兼容
5.3 首页设计任务
作为企业网上信息的第一入口，首页不仅扮演形象展示的作用，更重要的是起到信息传递的作用。目前，国内品牌企业的首页设计过于重视“形象展示”职能而忽略“信息传递”职能，导致大量企业网站首页一律是全屏 flash，对用户快速获取信息造成阻碍。 因此，网站的首页设计要在传递品牌形象的同时，让首次访问的用户在第一时间明白网站的内容、服务和功能，同时，通过首页，能够快速直达所要找寻的目标页面，因此首页设计需要具备一些基础元素：企业 logo 标示、信息搜索框、全局导航条、产品分类目录、动态新闻、推荐信息、网站地图等基本要素。
如下图：联想集团中文网站的首页设计

? 点评：联想首页具备了用户完成访问任务所需要的大部分基础要素，不过尚缺乏网站地图等细节
因素。
? 新竞争力小结：网站的首页设计任务主要包括以下几点：
·站点的标示和使命，让用户明白这个网站是做什么的，有什么独特的地方
·告诉用户站点提供的内容和服务有哪些
·注册和登陆入口
·重点链接推荐，但要避免大量信息堆积首页让用户难以获取重点
5.4 列表页面版式设计
常见的列表页面包括新闻等文字链接类型的列表和产品页面等图文混排型的列表。站内搜索结果页
面也属于列表页面的一种。
列表页面的特点是：用户在列表页面的浏览目的已经相当明确，集中于某一主题下的可选信息丰富，是通向内容页面的最后一道桥梁；用户在此页扫描式浏览，希望尽快找到链接目标进入内容页面。因此列表页面应尽量减少干扰信息，突出内容的链接标题。
如：某出口企业网站的产品列表页面：

? 点评：页面左边直接呈现核心列表信息，没有干扰信息阻碍，产品缩略图、产品名称与摘要信息布局井然有序，产品加粗链接文本醒目，适合快速浏览。
? 新竞争力小结：设计师在设计列表页面模板时候要做到以下几点：
·为列表增加一个标题和一段摘要信息
·尽可能多的展示列表数量，减少频繁翻页
·相邻两条列表之间明确区分间距，每条列表标题醒目
·产品列表最好提供产品的缩略图
·列表翻页的“上一页”“下一页”提示醒目，并至于列表首尾的双向位置，而且应该包括每页多少条，共多少页的全局说明，当前页码突出显示。
5.5 详细内容页面版式设计
详细内容页面应属于网站最深层次的页面，如单条新闻的详细内容或是单个产品的详细内容。一般都有较多的文字。形式上主要分为文字排版和图文混排。在详细内容页面上，用户获取信息的目的已经相当明确，此时不宜在页面左边或正前方视线最集中的地方出现干扰性内容，而应将干扰性内容置右侧或页面底部位置。同时，详细内容页面由于是网站的终极页面，大量用户在这里关闭窗口退出网站，因此有必要根据本页内容主题提供与本文相关的其他内容链接，如“相关文章”列表，尽量挽留用户。

? 点评： 内容页面的核心内容置于网页左边最重要的位置，标题重点突出，推荐更
多信息置于文章底部及右侧次重要位置，以挽留用户查看过多内容。
? 新竞争力小结：设计师在设计详细内容页面的版式时要做到以下几点
·文章标题醒目
·文章底部或右侧置放更多相关内容链接及其它推荐链接、广告；
·对于较长的文字，应该提供摘要和设计锚点目录。
·产品的详细页面中对于较复杂的参数宜采用表格或列表的形式更易查看。
5.6 页面第一屏空间利用
第一屏是用户视线和行为集中的部位，用户最关注的内容必须在第一屏呈现。目前很多企业网站的第一屏大半空间被广告占据，不利于用户快速获取需要的信息。总体上，页面第一屏空间利用包含以下要素：
全局导航条、核心内容部分、内页具备当前位置的提示。国内品牌企业尤其喜欢在第一屏视线最集中的位置使用宽幅的通栏广告图片，以展示所谓的“企业形象”，这种手法往往用得过火，导致第一屏 2/3 的位置都是毫无疑义的形象宣传图片，浪费了宝贵的黄金地段。
如：格兰仕首页：http://www.galanz.com.cn/

? 点评：第一屏的 flash 图片所占位置过大，而且半天“loading”不完，页面不能正常显示，用户体验不佳。
再如：美国某企业投放 google 关键词广告的着陆页设计版式前后对比：

? 点评： 该着陆页设计最为显著的改进是将两屏设计改为一屏，让用户在第一屏即快速执行“试用”的顾客转化行为。
? 新竞争力小结：设计师要做到以下几点以合理利用网页第一屏的空间：
·利用好视觉中心突出重点信息
·权衡文字与图片的比例，图片为辅，文字信息为主
·当后面还有内容时，第一屏不要形成已完成的假象
6.网站视觉元素设计
网站视觉元素包括文字，图片，标签，表单，列表，多媒体等等，是网站外观设计的组成部分，服从于网站的整体风格需要。用好网站视觉元素，能更好的指导和协助用户完成网站上的任务流程，使用户获得良好的在线体验。
6.1 让文字易辨识
字体是帮助用户获得与网站的信息交互的重要手段，因而文字的易读性和易辨认性是设计网站页面时的重点。不同的字体会营造出不同的氛围，同时不同的字体大小和颜色也对网站的内容起到强调或者提示的作用。正确的文字和配色方案是好的视觉设计的基础。网站上的文字受屏幕分辨率和浏览器的限制，但是仍有通用的一些准则：文字必须清晰可读，大小合适，文字的颜色和背景色有较为强烈的对比度，文字周围的设计元素不能对文字造成干扰。尽可能少用游动文字、图形文字。
如：欧莱雅中国网站：http://www.lorealchina.com

? 点评：新闻文本与背景色对比不强烈，阅读吃力，同时底部新闻标题字体过小，几乎难以识别。
? 新竞争力小结：设计师在进行网站的页面文字排版时要做到以下几点
·避免字体过于黯淡导致阅读困难
·字体色与背景色对比明显
·字体颜色不要太杂
·有链接的字体要有所提示，最好采用默认链接样式
·标题和正文所用的文字大小有所区别
·作为内容的文字字体大小最好能做大一点
·英文和数字选用与中文字体和谐的的字体
6.2 让图片更合理
页面上图片也是版式的重要组成，正确的运用图片，可以帮助用户对信息加深印象，引导用户的行为，与网站整体风格协调的图片，能帮助网站营造独特的品牌氛围，加深浏览者的印象。网站中图片的主要作用大致有以下三种：banner 广告图片、产品展示图片、修饰性图片。图片运用不合理的情况通常有：图片尺寸过大、动态图片过多、应该使用文本的地方错用了图片。
? 新竞争力小结：
·出现的位置和尺寸合理，不对信息获取产生干扰，喧宾夺主
·考虑浏览者的网速，图片文件不宜过大
·有节制的使用 flash和动画图片
·产品图片的 alt 标签加上产品名称
·形象图片注重原创性
6.3 让表单更易用
用户在填写网站表单的时候，无论是注册、发布信息/文章、信息反馈，都已到了顾客转化的关键环节，重要性不言而喻。表单涉及到较复杂的在线交互行为，与流程息息相关，当一个交互过程需要分成很多个步骤完成的时候，更重视对用户一步一步的引导，每一次点击都合理有效，接近并最终达成任务目标。好的表单设计可以提升用户体验，但不少网站的表单设计都或多或少存在一些问题，排除内容部分的因素，就设计上而言，表单设计容易犯的几个错误包括以下几点：
-过于冗长的表单和繁多的填写项
-不知所以的单选框和复选框
-填写出错后才出现说明和帮助
-提交按钮不易发现
以下是阿里巴巴的供求信息发布表单第一页：

? 点评：阿里巴巴的供求信息发布表单较长，涉及用户行为较多，包括选择、填写、插图等复杂的流程，故默认分步式发布形式，即将一页表单拆成几个页面，每个页面单元只完成一种类别行为。分步式发布比较适合初次使用的客户，避免一页扑面而来大堆填写项令其不适，甚至放弃。对于老用户，则可以通过选择“切换到标准式发布”，一次性完成所有填写项目。
? 新竞争力小结：设计师可以通过以下几点来提高表单的易用性：
·控制输入框的大小、恰当对齐，使之符合内容版式的需要
·根据表单元素的相关性进行合理分组和排序
·有下拉选择区域的下拉列表，将初始状态默认为全部区域
·下拉列表过长时，可横向排列
·对填写内容提供必要的帮助提示
·避免一页表单必填项堆积过多，通过分页或收缩方式实现分步式表单形式
·提交按钮醒目，位置符合习惯
6.4 让按钮更易点击
按钮是网站界面中伴随着用户的点击行为的特殊图片，由于按钮点击行为是将用户引向顾客转化的重要步骤，因此按钮在设计上有较高的要求。按钮设计的基本要求是要达到“点击暗示”效果，凹凸感、阴影效果、水晶效果等均是这一原则的体现。同时，按钮中的可点击范围最好是整个按钮，而不仅限于按钮图片上的文本区。
如图：三大 C2C 网站的购买按钮设计

? 点评：图形、文字、感叹号、水晶效果、立体效果统统用上，而相比之下，淘宝按钮在整体效果
上更胜一筹。
? 新竞争力小结：设计师可以通过以下几点来设计按钮，让它更易被点击。
·按钮颜色与背景颜色有一定的对比度
·按钮有浮起感
·按钮文字提示明确，如果没有文字，确信所使用的图形按钮是约定俗成、容易为用户理解的图片
·对顾客转化起重要作用的按钮用色突出一点，尺寸大一点
·可点击范围够大，包括整个按钮