数字媒体交互设计(初级):Web产品交互设计方法与案例
上QQ阅读APP看书,第一时间看更新

1.3 Web产品的用户体验层面

网站相当于一个自助式产品,用户需要依据自己的智慧和经验来面对,当用户对网站某个功能产生疑惑时,大多数网站无法意识到用户的困境,所以网站只是把信息放在上面是不够的,还需要用一种用户能理解和接受的方式呈现出来,这就需要提高用户体验。提高用户体验的方法被称为以用户为中心的设计。战略层、范围层、结构层、框架层和表现层组成了一个基本架构,依据这个架构来解决用户体验的问题。

1.3.1 战略层:产品目标和用户需求

战略层决定了产品的方向,根据产品目标和用户需求来制定。

1.产品目标

产品目标是指通过产品能得到什么。产品目标主要通过3个方面来衡量:商业目标、品牌标识和成功标准。

商业目标可以简单地理解为通过网站给企业带来收益或替企业节约成本。品牌标识是指在用户与产品发生交集时,网站在用户心中形成的品牌形象,以提升用户对企业的好感度。成功标准是指通过一些可追踪的数据来评估产品是否达成商业目标和满足用户需求。

2.用户需求

分析用户需求主要有两个方法,分别是用户细分和用户研究。通过这两个方法收集资料,创建出代表真实用户的虚构人物,如图1-11所示。

用户细分是通过人口统计学、消费心态档案和用户认知程度来构建用户画像。人口统计学包括性别、年龄、教育水平、收入等。消费心态档案是用于描述用户对社会,尤其是对产品的观点或看法的心理分析方法。用户认知程度是指用户对Web产品的熟悉程度和适应程度,如是小白用户还是重度用户。

图1-11

用户研究是通过市场调研、现场调查、任务分析和用户测试等方法来确认用户需求。市场调研通常有问卷调查和用户访谈两种方式。现场调查是通过一套完整且有效的方法来了解用户的日常行为习惯。任务分析是指在特定的任务环境中,对用户与产品产生的交互行为进行分析。用户测试是指在产品上线前,请一些用户来测试产品,通过测试结果来优化用户体验。

1.3.2 范围层:功能需求和内容需求

在通过战略层对产品目标和用户需求有较为清晰的认知之后,需要对已经明确的需求做优先级排列和拆分细化的工作,明确所设计的产品到底要为用户提供什么样的内容和功能。

1.功能需求

功能需求是指具体满足用户哪些方面的需求。功能需求可以分为直接需求和真实需求。例如,一个刚入职场的毕业生,在网上订购了一盒钉子,他的直接需求为买一盒钉子。经过更深入的用户访谈后发现,该用户一个人在外地工作,下班回到出租屋,感觉出租屋很冷清,于是网购了一盒钉子,把全家福照片挂起来,这才觉得屋内温暖了许多。可见,该用户的真实需求是温暖。所以,对用户的研究,不能仅限于销售数据的分析,还要挖掘数据背后的真实需求。

2.内容需求

内容需求与功能需求相配合,有效地收集和管理内容资源。

3.确定优先级

Web产品的上线时间或迭代时间是有限的,在有限的时间里需要确定功能开发的优先级。

1.3.3 结构层:交互设计和信息架构

结构层是将功能需求和内容需求组成一个整体。功能需求需要考虑交互设计,即用户可能产生哪些行为,系统如何配合和响应这些用户行为。内容需求需要考虑信息架构,即信息架构所呈现的内容是否合理,通常以用户是否能快速找到想要的内容为判断依据。

信息架构的单位是节点,节点可以对应任意信息。信息架构设计的结构方法有层级结构、矩阵结构、自然结构和线性结构。

层级结构又称为树状结构或中心辐射结构,节点与其他相关节点存在父级和子级的关系,如果1-12所示。矩阵结构允许用户在节点与节点之间沿着两个或更多的维度移动,如图1-13所示。

图1-12

图1-13

自然结构不遵循任何一种模式,其节点是逐一被连接起来的,没有太强的分类概念,如图1-14所示。线性结构是将节点从头到尾地串联起来,如图1-15所示。

图1-14

图1-15

1.3.4 框架层:界面设计、导航设计和信息设计

结构层让产品具有了整体形象,接下来在框架层需要确定界面设计、导航设计和信息设计。

1.界面设计

将最重要的内容让用户一眼看到,让用户知道在界面上能做哪些事情,使其与产品产生互动。基于用户最常采用的行为习惯做交互元素的布局。例如,单击图片能调整页面,通过搜索功能搜索信息,单击更多下载按钮可以浏览到更多的下载内容,如图1-16所示。

图1-16

2.导航设计

导航可以实现页面跳转,并且能体现网站的功能,它能清晰地告诉用户“从哪里来”“在哪里”“可以到哪里去”,如图1-17所示。

图1-17

3.信息设计

根据用户使用网站后所留存的内容,将这些内容进行信息分类,遵循用户的想法并按优先级排列。例如,用户每日在网站上打卡,网站则会显示今日打卡成功,以及已经打卡的次数和根据打卡次数所获得的等级。

1.3.5 表现层:视觉设计

界面设计解决交互布局的问题,导航设计解决页面跳转的问题,信息设计解决用户信息排列的问题。接下来要为表现层做视觉设计。

在视觉设计上,可以采用品牌颜色,给用户传递品牌形象,如图1-18所示。在不破坏页面结构的情况下,加强各模块之间的区分,让用户能够顺畅地浏览页面。可以用视觉引导的方法让用户完成目标任务。在做视觉设计时需要注意一致性,即页面结构的一致性,元素使用的一致性等,使用户在浏览页面时不会迷茫或产生疑问。

图1-18