1、网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇余兰亭界面交互篇用户体验研究信息架构设计界面与布局3.用户体验研究 3.1以用户为中心的设计 3.2用户与网站3.3案例从用户身上寻找需 求【登录界面】3.1.1以用户为中心的设计 Jesse James Garrett在用户体验要素：以用户为中心的产品设计中将用户体验由抽象到具体分为五个层次（见图3.1）：战略层（产品的目标）、范围层（功能组合、信息内容的详细描述）、结构层（信息空间中内容元素的分布）、框架层（用户如何与产品功能进行交互）、表现层（产品的外观设计）。图3.1 Jesse James Garrett 将用户体验分
2、成的五个层次3.1以用户为中心的设计3.1.2以用户为中心的研究方法 以用户为中心的设计就强调用户体验在整个产品设计与开发中的必要性。以用户为中心的方法适用于网页设计生命周期的各个阶段，不管是需求挖掘还是设计评估，都需要与用户打交道。在此，网页设计的流程概括起来可以分为四个阶段:图3.2 网页设计的流程的四个阶段 是以书面形式向特定人群提出问题，并要求被访者以书面或口头形式回答来进行资料搜集的一种方法。在新媒体时代下，问卷调查的传播方式也更丰富化，如电子邮件、微信传播等。用户研究1）问卷调查。2）访谈调研。3）数据分析。4）人物角色。5）故事板。6）卡片分类。7）眼动测试。8）焦点小组。9）可
3、用性测试。图3.3 问卷调查用户研究1）问卷调查2）访谈调研3）数据分析。4）人物角色。5）故事板。6）卡片分类。7）眼动测试。8）焦点小组。9）可用性测试。在访谈中可以与用户有更长时间、更深入的交流，通过面对面沟通、电话等方式都可以与用户直接进行交流。访谈调研法一般在调查对象较少的情况下采用，因此常与问卷调查法、可用性测试法等其他方法结合使用。用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色。5）故事板。6）卡片分类。7）眼动测试。8）焦点小组。9）可用性测试。数据分析是用适当的统计分析方法对收集来的大量数据进行分析，将它们加以汇总、理解并消化，以求最大化地开发数据的功能，发挥数据的
4、作用，是为了提取有用信息和形成结论而对数据加以详细研究和概括总结的过程。在数据分析中了解用户的心智模型（mental model）、使用工具、语言描述、使用方法、目标、价值观从而彻底满足用户需要。用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板。6）卡片分类。7）眼动测试。8）焦点小组。9）可用性测试。物角色并不是一个平均的用户，也不是一个真正存在的用户，而是来源于我们观察到的真实的用户资料（特征、行为、需求）的一个真实用户的综合原型。观察方式为数据分析、问卷调查、访谈调研等。为了人物角色更为生动，它常常结合卡片分类法结合起来确定用户群的主次（见图3.4）。图3.4 人物角色
5、结合卡片分类的应用用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板6）卡片分类。7）眼动测试。8）焦点小组。9）可用性测试。故事板是运用图片和文字的视觉形式将人物角色放置到某个场景中，在网页设计中，通过讲故事的方法让设计师在特定产品使用情境下全面理解用户和网站之间的交互关系。故事板需要使用简单的语言描述人物角色、情境及用户使用情景，尽量避免不要给出具体的用户行为和交互动作。用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板6）卡片分类7）眼动测试。8）焦点小组。9）可用性测试。卡片分类是一种揭示用户如何组合信息、如何分类和如何关联概念的方法。通过将功能写在一张
6、张的卡片上让用户进行分类，从而了解参与者的心理模型。常常用于设计一个新网站或重新设计网站，也可能是一个已有网站的新功能的信息架构上。用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板6）卡片分类7）眼动测试8）焦点小组。9）可用性测试。眼动仪（见图3.6，图3.7）通过记录角膜对红外线反射路径的变化，计算眼睛的运动过程，并推算眼睛的注视位置。通过将定量指标与图表相结合，可以有效分析用户眼球运动的规律，尤其适用于评估设计效果。眼动测试就是通过眼动仪记录用户浏览页面时视线的移动过程及对不同板块的关注度。通过眼动测试可以了解用户的浏览行为，评估设计效果。图3.6 眼动仪图3.7 眼动
7、热力图与视线轨迹图用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板6）卡片分类7）眼动测试8）焦点小组9）可用性测试 焦点小组比较适合非敏感或参与者关系较弱、不以获取偏个人化信息为目的地调研，否则仍然建议通过深度访谈了解用户。执行时，要有一个讨论主题，对主持人和用户的选择都需谨慎。主持人不仅需要把控讨论的方向，也需要妥善照顾到每一位参与者。用户研究1）问卷调查2）访谈调研3）数据分析4）人物角色5）故事板6）卡片分类7）眼动测试8）焦点小组9）可用性测试 可用性测试是针对界面原型的具体性进行结构化访谈。在发布网站之前，我们可以根据测试目标设计一系列操作任务，通过测试510名用
8、户完成这些任务的过程来观察用户实际如何使用产品。3.2 用户需求研究3.2.1 了解你的网站用户在网站使用的情境中遇到的问题是我们要关注的重点。3.2.2 关注你的用户用户的分类方式：一是是基于运营的分类方式，根据使用该网站的人口学信息，如用户的年龄、性别、爱好、学历、收入水平、计算机水平、职业、地域、网龄等，其中的每一条都可以成为一个网站用户分类的方式。如知乎网就以用户的兴趣来分类，通过用户关注的话题来定制化推送信息。图3.8 知乎网 二是基于产品的分类一般是根据用户的需求与行为进行，如重庆大学学位与研究生教育管理信息系统将用户分为研究生导师、学生、工作人员、学院用户、任课教师、答辩秘书、分委会秘书及导师秘书八类用户，图3.9 重庆大学学位与研究生教育管理信息系统再或是有些电子商务类网站就将用户分为买家用户、卖家用户等，蚂蚁短租网就是将用户分成租户用户、房东用户及后台管理员这三种。图3.10 蚂蚁短租网3.3案例从用户身上寻找需求【登录界面】详情请参考微课视频。
