1.定义

用户体验（User Experience，UE或UX），指用户访问一个网站或者使用一个产品时所带给他的体验。关注的是用户如何“接触”和“使用”它。用户体验是用户的主观感受，如图6-1所示，如果产品的设计能够与用户心理的期望相吻合的话，用户就会更满意于产品，用户的满意度越高，用户对产品的忠诚度就越高，产品的黏性就越大。

图6-1　体验和期望

图6-2　用户体验与期望组合关系

一般而言，如图6-2所示，用户体验效用与其消费期望呈现出用户+产品、期望+体验、体验结果三种不同阶段的组合关系，当绝对体验值大于用户期望值，意味着良好的或至少达到标准的产品；当绝对体验值等于用户期望值，意味着差强人意勉强应付的产品；当绝对体验值小于用户期望值，意味着让人恼怒的失败的产品。

2.体验内容

用户体验划分为四个部分：品牌（branding）、使用性（usability）、功能性（functionality）、内容（content）。

用来衡量网站品牌的描述包括用户为访问都提供了有吸引力的难忘的体验；网站的视觉效果与品牌一致；图片，附加内容，多媒体内容提供了体验过程的价值；网站传达了品牌设定的程度；网站充分运用了这个体能力，加强了或延伸了品牌。功能性包括所有的技术上的及屏幕之后的流程及应用，它伴随着为所有最终用户提供互动服务，而且有时对公众和管理员都有意义。用来衡量功能性的描述包括：用户及时获得对其查询和提交信息的反馈；深晰的任务过程的告知（比如成功页面或邮件更新提示）；网站和应用加上了一般的安全及个人隐私的标准；在线功能与离线业务结合；网站包含管理工具，加强管理员的效率。使用性包括一般意义上的对所有网站的内容和特点的易用性，在可能之下的二级主题还包括导航的友好性；网站防止错误发生，并帮助使用都从错误中恢复；整体页面侧重应针对主要目标受众优化；网站帮助其访问都达成一般性目标和任务；网站保持其一致性和标准；网站能为有残疾用户提供特定内容。网站的内容包括文本、图片、多媒体等以及信息体结构，连接密度带来的清晰度和简单的网站浏览；内容组织要方便用户实现他们的目标、及时准确、与用户需要和商务目标相切合。

3.层次结构

（1）层次构成

图6-3　层次构成

如图6-3所示，用户体验由战略层（strategy）、范围层（scope）、结构层（structure）、框架层（skeleton）、表现层（surface）五个层次构成。战略层处理自身目标与用户需求，解决经营者和用户想从网站得到什么；范围层处理功能和特性是否要纳入网站，应该提供哪些功能和内容；结构层确定网站各种特性和功能的最适合的组合方式，交互如何、可以、应该将功能和内容组织在一起，完成网站概念图、结构及流程图（任务、界面）；框架层解决按钮、表格、照片和文本区域的位置，主要界面的原型和框架；表现层将一系列的网页由文字和图片组成，完成原型视觉设计。

框架层不管是软件界面还是信息空间，必须要完成信息设计（information design）。在软件产品那边，框架层还包括了安排好能让用户与系统的功能产生互动的界面元素。对于信息空间方面来讲，界面就是屏幕上的一些元素的组合，允许用户在信息架构中穿行。结构层在软件方面，结构层将从范围转变成系统如何响应用户的请求。在信息空间方面，结构层则是信息空间中内容元素的分布。范围层从战略层进入范围层以后，在软件方面它就转变成对产品的功能组合的详细描述。而在信息空间方面，范围则是对各种内容元素的要求的详细描述。战略层来自企业外部的用户需求（user need）是网站的目标，尤其是那些将要使用网站的用户。

在每一个层面的决定都会影响到它之上层面的可用选择。这种依赖性意味着在战略层上的决定将具有某种向上的“连锁效应”。反过来讲，也就意味着每个层面中可用的选择，都受到其下层面中所确定的议题的约束。这种连锁效应意味着在较高层面中选择一个界限之外的选项将需要重新考虑较低层面中所做出的决策。这并不是说每一个较低层面上的决策都必须在设计较高层面之前做出，在较高层面中的决定有时会促成对较低层面决策的一次重新评估（或者是第一次评估）。在每一个层面，都根据竞争对手所做的事情、业界最佳的实践成果来做决定，这些决策可能产生的连锁效应该是双方向的。层际之间有着基本的双重性，当网站的用户体验开始形成时，为了解决网页这种基本的双重性质，从中间把这五个层面分开。在软件的一边，主要关注的是任务和所有的操作都被纳入一个过程，去思考人们如何完成这个过程。在这里把网站看成用户用于完成一个或多个任务的一个或一组工具。在超文本的一边，关注点是信息─网站应该提供哪些信息，这些信息对用户的意义是什么。

（2）各层目标和用户需求

战略层——当能越清楚明确地表达想要什么，以及确切地知道其他人想要得到什么，就能越明确地满足双方需求。成功标准（success metric）是一些可最终目标，在网站推出以后用来显示它是否满足了自己的目标和用户的需求。用户细分分别采用人口统计学方法识别性别、年龄、教育水平、婚姻状况、收入等等。心理学统计办法记录用户的心理因素，明确用户对技术和网页本身的观点、用户每天花费多少时间使用网络。开展用户可用性研究，市场调研方法得知用户普遍信息的宝贵资源；现场调查方法了解日常生活情景中的用户行为；任务分析方法了解用户与网站交互行为都发生在某一任务的环境中；用户测试方法让用户帮忙测试你的产品；卡片排序法探索用户如何分类或组织各种信息元素；创建任务角色使用户真实再现在设计者心中。

范围层——范围层是一个有价值的过程导致一个有价值的产品。其过程主要是：确定现在能解决的事情，以及哪些事情迟些才能解决；产品给团队一个参考点，保证在开发过程中不会出现模棱两可的情况；工作流程、日程安排、里程碑形成可视性文档；明确理由包括正在建设什么；当前难以满足的需求，可以成为启动下一版本的基础，这样就能形成一个不断循环的开发过程。软件式网站确定哪些应该被称为软件产品的组成部分的功能规格；项目初期阶段需求，描述系统应该做什么；项目末期阶段需求，描述系统真正完成了什么；文本式网站，编辑和营销推广确定内容范围，内容管理系统，内容管理系统必备的功能取决于要管理的内容的性质；确定文本的字数、图片的像素、下载文件的字节等基本元素；确认某个人来负责某一个内容元素；日常维护工作；每一内容元素的更新频率；如何呈现它们；排列出那些功能应该包含到项目中去；实现这些需求的可行性有多大。优先级别是决定人们所建议的相关特性的首要因素，与管理层谈判确定战略。

结构层——结构层确定各个将要呈现给用户的选项的模式和顺序。信息架构的基本单位是节点。节点对应任意的信息片段或组合，节点的安排方式在层级结构（树状结构、中心辐射结构），节点与其他相关节点之间存在父/子级关系；在矩阵结构中，允许用户在节点与节点之间沿着两个或更多的维度移动；在自然结构中，不遵循任何一致的模式，节点被逐一连接，用于关系不明确或演变中的主题；在线性结构中，最基本的信息结构类型，逐一而连贯。决定哪些节点要编成一组，哪些节点要保持独立的标准即组织原则。应创建一个与网站目标和用户需求相对应的、正确的结构。

框架层——框架层是确定用什么样的公众形式来实现。目标包括：必须提供给用户一种在网站间跳转的方法（真实有效的链接）；必须传达出这些元素和它们所包含内容之间的关系，这些链接之间有什么关系？是否其中一些比别的更重要？它们之间的差异在哪里？必须传达出它的内容和用户当前浏览页面之间的关系。常用的导航手段有全局导航覆盖整个网站的通路、局部导航提供给用户在这个架构中道“附件地点”的通路、辅助导航提供全局和局部导航不能快速到达的相关内容的快捷途径、上下文导航嵌入页面自身内容的一种导航、友好导航联系方式、反馈表单、企业信息、法律声明等信息的导航。其中，线框图捕获所有在框架层做出的决定，并用一个文档来展现他们，它作为视觉设计和网站实施的参考来使用，必须具备三个要素——通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。

表现层——表现层是“弥补网站框架层的逻辑排布”的视觉呈现问题。重点是视觉对比和一致性。对比帮助用户理解页面导航元素之间的关系，传达信息设计中概念群组的主要手段；一致性使设计有效地传达信息，如基于网格的布局。内部的一致性问题在网站两个不同的地方反映了不同的设计方式。外部的一致性问题在其他产品中，反映出被使用的、相同的设计方法。设计合成品是视觉设计领域中对线框图最直接的模拟物，其要点包括：风格指南文档，确定视觉设计的每一方面，从最大到最小的范围内的所有元素，设计网格、配色方案、字体标准或标志应用指南；某一模块或网站功能的具体标准。预防随着员工的变动，而使企业集体失忆；使所有人遵循一套统一的标准来运作，使网站看起来是一个协调一致的整体。

4.分类

（1）感官体验——呈现给用户视听上的体验，强调舒适性(www.daowen.com)

设计风格要符合目标客户的审美习惯，并具有一定的引导性。网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。网站LOGO确保保护空间，确保品牌的清晰展示而又不占据过分空间。页面速度正常情况下，尽量确保页面在5秒内打开。大型门户网站必须进行必要的压力测试。页面布局重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。页面色彩与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。动画效果与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。页面导航清晰明了、突出，层级分明。页面大小适合多数浏览器浏览（手机屏、平板屏、交互屏等）。图片展示比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。图标使用简洁、明了、易懂、准确，与页面整体风格统一。广告位避免干扰视线，广告图片符合整体风格，避免喧宾夺主。背景音乐与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

（2）交互体验——呈现给用户操作上的体验，强调易用、可用性

会员申请介绍清晰的会员权责，并提示用户确认已阅读条款。会员注册流程清晰、简洁。待会员注册成功后，再详细完善资料。表单填写尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段做出限制（如手机位数、邮编等等，避免无效信息）。表单提交后需输入验证码，防止注水。提交成功后，应显示感谢提示。按钮设置对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。错误提示若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。在线问答用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。意见反馈当用户在使用中发生任何问题，都可随时提供反馈意见。在线调查为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。在线搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。确保资料的安全保密，对于客户密码和资料进行加密保存。显示路径无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。

（3）浏览体验——呈现给用户浏览上的体验，强调吸引性

栏目的命名与栏目内容准确相关，简洁清晰，不宜过于深奥。栏目的层级最多不超过三层，导航清晰，伸缩便利。内容的分类同一栏目下，不同分类区隔清晰，不要互相包含或混淆。每一个栏目应确保足够的信息量，避免栏目无内容情况出现。尽量多采用原创性内容，以确保内容的可读性。确保稳定的更新频率，以吸引浏览者经常浏览。信息段落标题加粗，以区别于内文，采用倒金字塔结构。为新文章提供不同标识（如new），吸引浏览者查看。重要内容在首页设立导读，使得浏览者可以了解到所需信息。截取字数准确，避免断章取义。在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。提供Rss或邮件订阅功能。在页面的醒目位置，提供信息搜索框，便于查找到所需内容。允许用户打印该页资料，以便于保存。文字排列标题与正文明显区隔，段落清晰。文字字体采用易于阅读的字体，避免文字过小或过密造成的阅读障碍，可对字体进行大中小设置，以满足不同的浏览习惯。页面底色不能干扰主体页面的阅读。设置一定的页面长度，避免页面过长而影响阅读，对于长篇文章进行分页浏览，为面向不同国家的客户提供不同的浏览版本，为有明确目的的用户提供快速入口。

（4）情感体验——呈现给用户心理上的体验，强调友好性

将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。对于每一个操作进行友好提示，以增加浏览者的亲和度。提供便利的会员交流功能（如论坛），增进会员感情。定期进行售后的反馈跟踪，提高客户满意度。定期举办会员优惠活动，让会员感觉到实实在在的利益。根据会员资料及购买习惯，为其推荐适合的产品或服务。提供用户评论、投票等功能，让会员更多地参与进来。定期举办网上会员活动，提供会员网下交流机会，为用户提出的疑问进行专业解答。针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情，为用户提供清晰的网站指引。

（5）信任体验——呈现给用户的信任体验，强调可靠性

查找相关内容可以显示在搜索引擎前列。真实可靠的信息发布，包括公司规模、发展状况、公司资质等。上市公司需为股民提供真实准确的年报，财务信息等。将公司的服务保障清晰列出，增强客户信任。准确地描述公司名称及相关内容。为摘引的文章标注摘引来源，避免版权纠纷。为原创性文章注明编辑或作者，以提高文章的可信度。准确有效的地址、电话等联系方式，便于查找。将公司的服务热线列在醒目的地方，便于客户查找，为客户提供投诉或建议邮箱或在线反馈。对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。对于集团企业及相关企业的链接，应该具有相关性。对于流程较复杂的服务，必须具备帮助中心进行服务介绍。

5.体验优化

（1）原则

优化过程要遵从通用性的用户体验设计优化原则，在设计后要能总结归纳出只适合此产品的用户体验规则。在设计前，参考大量的通用性设计原则；在设计后，才会发现对于项目有针对意义的原则也就很少的几条。这个时候需要靠设计师自己的逻辑归纳能力，把最重要最迫切的用户体验设计原则抽象出来。总体上，设计原则的基本出发点是坚持以用户为中心的设计，设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。　

成熟且共用的用户体验设计原则包括：①操作入口明确，任何一个产品都要有明确、合理的入口，不歧视特殊人群，确保即使色盲、肢体残疾人士可以完成基本操作。②任务可被完成，任务在无外界影响下可以被完成。③问题可被解决，用户在任务中出现的问题，在无外界影响下可以被解决。④简洁自然，清晰易懂，用简洁、自然、用户可理解的形式表达信息。⑤突出重点，一目了然。用户的第一关注，将是设计中要表达的重点信息。⑥导航明晰、有效。导航明确清晰、有效，分类彼此独立、完全穷尽。⑦避免迷路，任何位置都能明确“我在那里?这里有什么?从这里能去哪里?”。⑧深广度平衡，单个页面上可见菜单项的数目与层级结构中级别的数目平衡。⑨习惯延续，必要延伸，用户的操作习惯必须延续，在用户可接受的范围之内适当延伸与引导。⑩符合用户心智模型，用户对功能的预期与实际操作的结果保持一致。操作一致性，相同类型的命令或操作产生同样的效果。及时、有效、友好，第一时间针对用户的操作作出有效、友好的反应。避免出错：针对用户可能出现的错误，通过系统来避免错误的发生。一次点击，尽可能减少完成任务所需要的操作次数。别让我思考，用户的第一反应所产生的操作正确、有效。最小记忆负担，避免用户需要记忆5条以上的数据。最简化，帮助信息精简，准确描述，段落不超过3段，句子不超过30字。适时帮助，当用户需要帮助的时候才提供帮助。二倍、一个，方案设计数量增加两倍或减少到单位数量时，仍可适用该设计方案。以简化繁，尽量使用简单、原生的交互方式解决复杂的用户交互行为。符合栅格，页面布局符合栅格系统标准。符合标准设计模式，交互控件符合DPL设计模式标准。已存在的产品优化过程，通过对网站问题进行调整，不断提高网站的“可用性”。

（2）过程

衡量用户体验效用的具体情况，一般侧重于从体验媒介、产品和过程的有用性、易用性、友好性（说你用户的语言，懂你用户的语言）、情感性等方面进行针对性的改进和提升。改进用户体验的过程如图6-4所示，一是重新进行需求分析，以此作为用户体验价值的必要条件；二是强调产品的可用性设计，通过原型设计、概念方案设计、信息架构设计、交互设计、视觉设计、制作UI等手段，提高面向用户设计成果；三是注重评估和反馈，通过体验过程的可用性评估、商业目标评估和体验结束的评估结果，及时将用户体验数据和判断反馈到产品创意和产品设计阶段，持续改进和提升体验效用；四是突出产品创意和产品构建，通过业务对象分析、技术设计与实现、可用性测试与监控等手段，达到产品定位商业目标与用户期望、体验实践的高度契合。

图6-4　改进用户体验的体系

（3）优化体验的技术

交互设计优化。制作交互设计原型的原则是构建信息架构、页面的命名要有统一的规范标准。避免纠结复杂的交互控件实现、一点色彩与布局，多一点标注与说明、交互物也要注意可读性、可及性；交互设计原型不是必须生成HTML文件并能动态交互；在经过纸上原型设计之后，交互设计师要与产品规划师、可用性工程师迅速沟通，优化纸上原型。交互设计师会根据纸上原型确定的功能点与信息框架，制作出低保真的交互设计原型。

视觉色彩优化。色彩选择，决定了人们在第一眼看到网站时的感觉。视觉优化，风格上通常会支持企业的品牌，目标上传达出一种强烈的品牌信息。但是品牌识别不只是图标和广告 词，它遍布在项目产品设计、网站，以及材料中。事实上，品牌对配色方案的选择、字体、图形、词汇表，体现在各个方向。视觉设计需要考虑的因素有：颜色——让色彩更具有可读性，少一点颜色，多一点价值。排版——根据字体的选择，文字颜色的选择，再看内在的、情感上的因素来布局。规模——避免空间过度拥挤。角度和形状——尖锐的角度、线交叉点或多个线条汇聚的地方，使用这些焦点把用户的眼光引导到你希望的地方去。重复出现的视觉主题——角落处理模式可以给用户带来视觉旋律。文本——选择形散，神不散的字体与文本颜色。图片——节制性的使用装饰性图片，在功能性GUI里谨慎使用，因为会分散用户注意力。文化因素——如果要表达明显的文化含义，考虑下将要面对的受众。

前端代码优化。如图6-5所示文件越大，用来下载和显示页面的时间就越长.文件总体积是构成Web页面的所有文件，包括HTML、外部CSS、外部JavaScript、图像、声音以及视频在内的文件的大小。对文件体积做事先的规划，把大部分的CSS和JavaScript文件放入外部文件，重复使用不同页面的图形、音频和视频，不要使用不必要的图形、动画或声音，在可能的情况下，使用小尺寸图像，而不是大尺寸图像，尽量减少特殊导航按钮。无论何时，页面打开速度是给用户的第一印象，也是提升用户对网站满意度的重要因素，并且前端代码的优化将会给用户带来舒适地操作体验。

图6-5　代码优化的过程