第 3 章 用户体验下的网页交互设计流程
本着一切从用户体验的视角出发，就笔者在商业或平时的实践中所做的网站设计案例进行探讨，分析并总结出网页交互设计的方法与流程。
3.1 用户需求和产品应用场景分析
某种意义上，产品的成功总是鉴于在对用户需求给予极大满足的基础之上，帮助企业快速的达成既定目标。对用户需求和场景的分析是产品项目起始的第一步，也是比较重要的一步，它直接决定着产品实现的目标和大方向。
在做网站设计之前，必须要深入的了解网站的用户群体，知晓他们都有怎样的目标和需求，以及他们自身所具备的能力，有哪些困难，企业对于产品都有哪些规划和期望，主要业务是什么。只有这样才能帮助研发团队尽快找准网站的定位，明确网站设计的方向，懂得网站应该具备什么样的特性以及要实现怎样的功能，从而制定切实可行的网站设计方案。在充分了解用户需求之后，随后最重要的、最不可或缺的一步就是要对用户的使用场景进行分析。用户场景分析是贯穿于产品研发全过程的一个关键环节，从产品构思、设计方案的拟定到设计制作再到最后投放市场，其中的各个步骤都需要建立在对用户应用场景进行深入研究的基础之上。同时，它也是验证产品可行性的有效方式，也就说要将产品的规划、构思以及拟定的设计方案等切实放在用户实际使用的环境之中进行考察，以避免研发团队在对产品的把控上出现偏差，与用户真实的应用场景相背离，产生闭门造车的现象，使得产品陷入不切实际的困境。用户的使用场景通常受不同时段、不同地点、不同设备等因素的制约。通过场景，研发人员可以确切的判断出用户群体的特征、使用习惯、使用状态等，这些往往决定了产品的主要功能。功能的设定又直接影响着网站的整体设计，包括外观界面的呈现，具备什么样的交互行为，如何进行操作，以及带给用户最直观的印象和感受是什么。
友联是一款帮助企业和用户进行实时沟通的应用软件。由此针对友联产品的特点，其官网的用户群体主要是那些强调“以客户为中心”、致力于为用户带来更好服务的大中小企业和机构。他们以不断提升客户的满意度为宗旨，以加快客户服务和提高在线营销水平为需求。其中，用户群体大体可分为两类：一是对友联产品比较了解或使用过的用户，他们访问网站是带着某种目的，比如下载产品，如图 3.1,在改版后的友联网站中，老用户只需通过点击导航栏中“产品下载”的快捷方式，网站就会进入一键下载的模式，自动下载友联客户端，有效减少了用户的操作步骤，避免了跳转到网站下方注册下载区域，需要用户点击“下载友联”的图标后才能下载。二是经他人推荐或自身无意中打开网站的新用户，他们访问网站是浏览式的，会通过阅读产品介绍、优势、成功案例、与客服进行对话等内容，在深入了解产品之后再决定要不要进行试用或下载。整个网站呈现简洁的扁平化风格，用明朗的色彩、条理清晰的模块化方式来吸引用户，从而便于新用户更清楚的了解产品，为企业抓住网站中的潜在用户。
3.2 绘制合理的产品原型图
原型图是将研发团队在对用户进行深入调研和分析后于脑海中所形成的较为抽象的产品概念进行勾勒，通过绘制产品的原始模型图，展现出一个完整的用户界面，使产品更加可视化、明朗化、具体化，它直观的展现了产品界面大体上的最终形态，是对产品整体框架结构的有力描述，也是交互设计师与项目经理、产品经理以及开发人员进行沟通的有效依据。原型设计不仅要考虑网站内容间的主次关系、界面的美观性，包括文字、位置、比例、色调等各部分因素的影响，更要考虑界面中如何为用户呈现简洁、有效的行为方式，它是对网站内容、交互行为和界面形式的一个综合性的表达。
原型图的绘制离不开对界面层级关系的梳理，也就是要站在用户的视角依照用户获取不同内容的热切程度、用户完成任务的难易程度、网站内容间的深入程度、从属关系以及用户的思考模式等对页面层级进行明确划分，使其分门别类、井然有序，任务操作步骤合理。网站的页面层级可分为第一层级页面、第二层级页面、第三层级页面……，第一层级页面为网站首页，一般是对网站内容的一个大而概括的总述，展现的是网站中的核心产品、业务或服务，是网站最想要呈现给用户，通常也是用户最迫切期望看到的以及用户最常用的内容。网站的层级划分越深，子页面的内容就越详细、越具有针对性。但并非页面层级越多越好，层级的过分增加往往会造成网站的交互步骤增多，使用户的操作行为变得繁琐，网站看上去更加神秘，一些隐蔽功能或内容很可能被用户忽视。
网站中的原型图主要可依据两种类型进行划分。一方面，依据材质的不同，可将其分为纸原型和线框图；纸原型图是研发人员在纸张上以手绘形式创建的界面原型，它不受限于任何的设备和场所，可以随时随地及时地进行绘制和修改，更为方便、快速，但界面表现相对较为随意，规范性较差，是网站在诞生早期的最初始状态，往往也离网站的最终界面呈现具有一定的差距。线框图是借助计算机绘制的界面原型，和纸原型图相类似，都是粗略、概括的显示页面的大体布局。
因而在进行线框图绘制时，不必太在意页面中视觉和形式美感的表达，不必拘泥于细节设计，只需表明每个区块的位置、内容和大致的样式即可。常常在公司或企业的实际项目中纸原型和线框图会经由研发人员选择其一进行页面布局结构的表现。另一方面，依照原型图呈现是否更加真实，是否更贴近用户最终使用的界面形式，可将其分为低保真原型图和高保真原型图，这两者的差别在于对细节设计的把控上。低保真原型图指的是逼真度较低的原型图，它的绘制与纸原型和线框图相比，规范性更强，也相对更为细致，与网站真实的应用设备更为契合，对网站中的内容、行为和形式有了更明确的规定，如内容区块、版式、字体、字号、颜色、图片位置、交互方式等。高保真原型图在低保真的基础上对网站页面进行更加深入的表现，它通过将低保真原型图中的各个规定逐一实现，使得界面更加完善，更合乎网站真实的视觉效果，所以高保真原型图往往也被等同于页面的最终效果图，它常常被视为设计师对界面设计的最后一道工序，随后直接交由开发人员进行开发。
比如就上述友联官网的界面层级划分和原型图的制作而言，用户浏览其页面的目标是多少对产品有些兴趣，想要对其有所了解以及在对产品有所熟悉后想要下载、注册产品进行使用。而较为全面的了解一个产品需要从产品介绍、公司的经营理念、产品优势、成功案例等几个方面出发，同时页面中更要留有注册、下载、试用以及联系方式和留言板的入口，方便用户及时进行体验并给予反馈，这就构成了一级层级页面，也就是网站首页的内容。首页一般是对产品较为宽泛的介绍，如果用户想对产品有更进一步的深入了解，可以在页面中通过点击产品简介下的公有云和私有云链接，进入第二层级页面，与其平行的同为二级页面的有“了解更多产品优势”的链接页面。在对页面内容层级和交互行为有了清晰的认识后，研发团队可以通过纸原型图，比如图 3.2.1 所绘制的友联官网的手绘原型草图，在经过团队成员对页面的讨论、修改直到确定后，用 axure 软件绘制线框图和低保真交互原型图。通过 axure,可快速绘制出带注释的页面示意图，并能够对网页中的一个或多个事件设定包括鼠标点击、划过等动作，其模拟效果和网站最终呈现的交互效果几乎无异，这样更能够清晰的展示网站的操作流程、交互方式以及可以自动生成符合网页规格的文件进行演示，然后结合网站可用性进行测试，最后通过 photoshop 软件完成高保真原型图的制作，呈现出网站的完整效果图。
点菜菜是一款提供外卖服务的Web App,是笔者为求职面试时所做的个人作品。它是针对广大用户群体面对当下由众多店铺入驻的送餐 app 中所出现的常常因对卖家店铺不了解而造成选餐难的现象所提出的解决方案，意在帮助用户快速、准确的找到更美味、更优惠的商铺进行下单。它更倾向于构建一个吃货的家园，而不仅仅是一个网络订餐平台。在这里的每一个会员用户都有着一双善于发现美食的眼睛，他们在追逐美食的道路上一路狂奔，如同家人一样，热爱交流与分享。
通过“美食圈”模块，用户可以及时看到吃货达人的美食推荐、家族成员们的晒图与讨论，更有实时优惠共享功能，获得已购朋友的优惠券分享，这种通过买家口口相传的方式不仅可以帮助用户找到更好吃的美味儿，还可以替拥有优质美食的店铺提前做了有力宣传，同时可使得商家之间形成良性竞争，有助于将点菜菜打造成一个有着高品质美食和服务的电子商务类外卖送餐平台。
找准产品定位和目标用户后，首先要做的就是对点菜菜 web App 的业务流程进行分析，如下图 3.2.2 所示，流程图的绘制使得各个页面的主要功能点一目了然，并能够有效的帮助研发团队梳理页面层级关系，删减掉冗余的页面，为页面能有良好的交互行为打下基础。其次，根据流程图绘制出恰当的界面原型图，将手绘的纸原型图以更规范的方式在计算机中制作成低保真原型图，如图 3.2.3 点菜菜的低保真原型图所示，在制作之前必须要考虑产品实际的应用设备和环境，由于点菜菜主要是在移动端进行使用的 Web App,所以在绘制低保真原型图时，要保证界面中的各个元素都能够在用户手掌的可控范围之内，尤其对于页面中的重要模块，要尽量确保用户能够依靠单手轻松地完成操作。也就是说针对页面中各个板块的面积大小、所在位置、比例关系等，既不能太松散也不能太拥挤，太松散则会造成用户使用起来费力，太拥挤又容易引发用户行为上的误操作，使产品陷入难用的困境。页面制作中的每一阶段都是一个不断修改、实时调整的过程，低保真原型图尤其如此，它需要研发人员对产品进行反复推敲、不断考究，最终绘制出与其相吻合的页面高保真的视觉形态图，就像图 3.2.4 一样。依照点菜菜Web App,笔者又设计了一个与其相匹配的网页版官网界面，使得点菜菜这个产品更加完整、更成体系。
3.3 打造友好的交互设计
实现了网站的视觉界面，通过代码完成网站页面制作后，接下来最重要的一环就是对网站的可用性进行测试，使网页中的交互设计更加友好。可用性测试是衡量网站的交互方式是否合理、交互过程是否顺畅、交互行为是否易用的有效方式，也是研发团队在产品在上线之前常常需要倾注最多时间和精力，对其进行特别关注的部分。它的测试方法有一下两种：第一，是研发团队对产品的自评阶段。第二，是对部分用户进行测试，针对用户的使用体验对产品进行不断改善。
当一个产品已经基本完成之时，首先要做的不是对一部分用户进行测试，更不是立刻上线，而是研发团队自身对产品所进行的一个自评阶段，其主要依据是 Web易用性领域的领军人物 Jakob Nielsen 所提出的交互设计十大可用性原则。其中什么，系统给了怎样的反馈。例如，网页中的按钮点击前、点击时的状态一般是不同的，可能是颜色的不同，也可能是用户点击时会有提示，鼠标会由箭头变为手型的变化，这些差异都是系统给用户反馈的有效措施，明确的告诉用户即将进行的下一步操作；二。系统应与用户所在的环境相吻合。即网页中的表述应符合用户所处的真实环境，依照用户的思考方式使用用户最通俗易懂的语言进行表达而非专业术语；三。为避免用户出现误操作，系统应允许用户随时可以撤销和重做。
四。系统要保持一致性和标准性。也就是网站的界面、功能、操作应保持一致。五。
防止用户出错；六。尽量减少用户在操作目标任务过程中的记忆负担，包含操作步骤、行为动作、选项等；七。保证系统灵活高效，方便用户使用。八。为系统瘦身，弱化和去除无关紧要的信息；九。帮助用户判断、识别并纠正错误，保证系统操作时的流畅性；十。必要时可通过帮助文档或使用手册，以给用户提供适时的帮助。
这十条可用性原则尽管提出的时间较早距现在有一段距离，但仍是目前在进行网页交互设计时或者对网页中已存在的交互模式进行检验的最有效方式，其中一些内容已在第二章交互设计法则中的进行了详细的论述。通过可用性原则，研发团队可对网站中的交互设计进行有效的自评、自检，对网页中的一些不恰当的交互模式及时的进行修改。
其次，最具权威的可用性测试莫属于通过部分目标用户亲身体验所得出的结论分析。即在产品的目标用户群体中抽取一些具有差异的并能够代表不同年龄层、不同文化水平、不同生活环境的用户进行调研。在他们对产品完全不熟悉且不受任何外界指导的情况下，关注他们对产品的使用过程、操作方式、每一步操作所花费的时间以及最后完成的效果。此外，等到被调研用户体验完产品后，不可或缺的一步就是对其进行细致的访问，了解他们对产品的认知、有哪些不好用的功能或界面、或者有哪里令人迷惑的地方、他们对产品完成结果的满意程度如何、与同类产品相比的优劣是什么、是否考虑会再次使用该产品等。最后，将调研所统计的数据进行分析，并在产品中加以修改，使得交互行为步骤间的关系更为紧密，操作上更为浅显易懂，切实做好用户的行为引导，以最大化的减少在每个操作步骤过程中的用户流失。只有这样，才能懂得产品在用户眼中到底是怎样的，有哪些需要改进的地方，才能使产品更加贴近用户，做到真正是为目标用户量身打造的产品，而不仅仅是局限于站在研发人员的角度进行开发。
电商通是一款为企业或个人在主流的电商渠道解决店铺中的订单处理和仓库处理的一体化的网商进销存软件。如图 3.3 所示，为笔者在公司实践中所做的电商通网站界面的改版设计。可以看出，整个网站与常见的企业站所塑造的冷静、拘谨、严肃的形象截然不同，页面中的视觉元素大都运用扁平化的表现手法，以灵活的布局、靓丽的色彩进行展现，只为与电商网站的视觉风格相吻合，为用户营造出一种活泼、热闹、欢快的网站氛围，以凸显电商通这款软件的应用领域及所针对目标用户群体。在交互设计上，最突出的亮点是页面中导航栏的设计。从图中可以看出，网站中的导航以垂直式的菜单布局，悬浮固定在页面右侧，以网购人士最熟悉的、电商网站最常用的小图标的图形方式来展现各个菜单模块的主要内容，通过导航，用户可快速的纵览网站全貌，了解整个网站的概况。相比单纯的文字型导航来说，视觉吸引力更强，也更能够引起用户的关注。当用户将鼠标滑到各个小图标上时，每个图标所对应的文字菜单信息就会立刻展现出来，这样便于用户明确知晓当前所在的行为操作入口，可以快速进入他们感兴趣的模块，避免由猜测而造成的对菜单内容的误解和行为上的误操作。同时，针对网站老用户来说，导航栏可以经由最下方的箭头进行折叠，以给用户展现最大的可视窗口。
另外，网站中的 banner 设计不仅仅是对电商通产品的宣传与推广，而且在此基础上还增添了两个功能操作入口，方便用户根据需要快速进入到产品详情和登录的链接页面。在交互细节上，当用户对两个按钮进行点击操作时，鼠标会由箭头变成手型标识，按钮颜色也会相应变成深色，以此与点击前和点击后的按钮状态形成区分，提示用户当前的操作行为。电商通网站的导航栏和 banner 中多链接的访问入口功能，都大大提高了用户与网站互动时的效率，使得用户行为操作上更加有效、易用，从而带给用户良好的使用体验。
3.4 做好网站后期维护
常常有这样一种情况，当网站上线后，企业或研发团队就开始松懈了，总以为产品已经大功告成，殊不知这只能算是完成了一半的工作量，后期网站在运营过程中的站点维护才是定夺网站成败的关键因素，因而更加不能掉以轻心。时刻倾听用户的心声，关注网站中的用户反馈，做好网站的维护与更新，不断优化网站的用户体验，是一个产品能否在互联网时代下推陈出新、不断进步，进行有效迭代的依归，也是如何能够在众多互联网产品大军中脱颖而出、具有强有力竞争、长存长青的必备法宝，更是一个企业建立良性健康发展的不竭源泉。
站点维护的大方向主要由网站运营时所监测的数据指标来决定。开发者通过后端语言，可对用户行为操作进行实时监控。用户每访问或点击一次，与网站进行一次交互，就会往数据库发送一次请求，进而留下一次访问记录。此时企业或开发者通过数据库中抓取到的用户的相关信息，就能够实时掌握网站页面的浏览量、点击量、访问热区、访问速度、用户在网站中的活跃时段，以及根据用户 IP 地址可了解网站的大概访问人数、哪些是经常访问网站的老用户、他们所在地的区域范围等，这些数据信息可以有效的帮助企业或研发团队了解网站的运营效果，知晓用户的喜好，包括用户最喜欢访问哪些页面、最关注哪些信息、与网站有着哪些频繁的交互。对于网站中用户很少关注或访问的板块立刻进行修改与更换，同时，就用户在与页面交互时出现异常、报错等现象做好及时处理，真正做的一切从用户出发，使得产品在内容、行为、形式的各个方面都能够向用户靠拢，在不断优化页面的过程中，逐渐逼近用户心中的产品模样，让用户信服与信赖。就笔者早先在某电商企业实习的感受而言，电商网站相比普通企业类网站，更是非常注重对用户行为数据信息的采集与分析。比如在电商网站首页首屏的正中央区域，用户常常会看到有近10款滚动的banner轮播图作为网站的购物推荐，通常banner图的内容是用户最常浏览的一些品牌，开发人员每天每时段都会从数据库中返回用户的交互数据，那些用户点击量小的 banner 常被视为是没有价值的失败品，会被立刻替换掉，并要求设计人员重新进行设计。这就是为什么像淘宝、京东那些等大型电商购物类网站那么成功的原因，因为他们无时无刻不在推敲用户的心思。
如果说对用户数据的监测与分析是隐形的，那么网站中所提供的意见反馈入口就是一种最直接明显的倾听用户心声、搜集用户看法与评价的重要方式。一些产品在上线后，当用户在使用过程中出现了问题，页面中没有渠道供用户进行反馈，这样的状况不仅不利于网站优化，也容易造成用户群体的流失。因而，网站中意见反馈的功能，常常也是一个网站是否注重用户体验的有力体现。如图 4.3,在电商通网站的界面设计中，当用户鼠标滚轮滚动后，两个正方形小图标就会以固定的形式出现在屏幕窗口右侧的底部位置，以便于用户随时与网站进行互动。其中一个为小铅笔形状的图形，就是电商通网站的“意见反馈”图标。当用户用鼠标触发时，图标就会由铅笔图形变成“意见反馈”的文字信息内容，同时，页面中会弹出一个输入窗口，让用户填写相关意见或建议并留下自身的联系方式，在点击提交按钮后，传输到数据库。这是一种用户积极主动的参与网站的页面改进、帮助网站做好及时优化的有效途径。根据用户的意见，网站研发团队可快速知晓页面中的不足，并对其有针对性的进行修改和调整。但不可避免的，除了用户在叙述使用过程中真实存在的问题之外，其余类似于页面改进类的意见反馈大都具有主观性、个体性，因为大多数用户在内心中对产品形态的认识往往是模糊的、不全面的，它不像用户行为监测的数据一样客观、可靠。因而对于用户提出的一些建议，并不是直接对网站进行修改，研发人员应该将其作为参考，在经过大量调研分析与论证后再对页面进行优化。
