用户至上：以人为中心的产品设计策略

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

用户体验是指产品如何与外界发生联系并发挥作用，也就是人们如何“接触”和“使用”它。

用户体验设计通常要解决的是应用环境的综合问题，兼顾视觉和功能两个方面的因素，同时解决产品所面临的其他问题。产品越复杂，确定如何向用户提供良好的使用体验就越困难。任何在用户体验上所做的努力，目的都是为了提高效率。这基本上是以两种主要形式体现出来的：“帮助人们工作得更快”和“减少人们犯错的几率”。

影响用户体验的因素有很多，其中内容和技术是两个最重要的因素。内容决定了产品能对用户提供的价值，技术决定了能提供给用户的体验状态。除了这两个因素外，影响用户体验的就是下面这五大要素：战略层，范围层，结构层，框架层，表现层。

为了方便具体阐述各个层面的内涵，我们把产品分为两个大类：功能型产品和信息型产品。功能型产品是从传统的桌面和客户端软件的角度出发，主要关注的是任务。所有的操作都被纳入一个过程，去思考人们如何完成这个过程。信息型产品是从信息的发布和检索的角度出发，主要关注的是信息。网站应该提供哪些信息，这些信息对影虎的意义是什么。

下面，我们就来具体阐述这五个层面的具体含义。

战略层

为什么要做这个产品？企业能得到什么好处——产品目标；用户得到什么好处——用户需求。我们的用户是谁？他们的需求是什么?

【成果形态：战略文档，包括目标清单和用户调研报告】

范围层

我们应该为用户提供哪些功能和信息？不能为用户提供哪些功能和信息？定义需求，确定需求的优先级。

【成果形态：PRD，主要指功能规格说明书】

结构层

这些功能和信息该如何组织到一起呢？他们之间都是什么关系？（并列、父子）功能尽量依托于某个概念模型，而且要应对好各种错误处理；信息的有效组织依赖于元数据。

【成果形态：架构图】

框架层

这些层次关系比较清晰的功能和信息该如何在页面中布局？界面设计是选择正确的界面元素，导航设计是在告诉用户他们在哪儿，他们又可以去哪儿，信息设计是放置和排列信息的优先级。

【成果形态：框架图】

表现层

关注视觉设计，决定这种安排在视觉上如何呈现。

【成果形态：风格指南】

创建良好的用户体验最重要的工作内容是大量收集亟待解决的非常细微的问题。

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

战略层定义

我们要通过这个产品得到什么——产品目标

我们的用户要通过这个产品得到什么——用户需求

产品目标

商业目标/商业驱动因素：替公司赚钱或替公司省钱

品牌识别：视觉设计（商标，色调和字体设计），概念系统，情绪反应

成功标准：“什么时候到达了终点”，可追踪的指标 | 印象树：网站上每一个广告的每天被展示的数量

用户需求（他们是谁？他们的需求是什么？）

用户细分：人工统计学，消费心态档案

可用性和用户研究：必须知道他们是谁——用户研究：收集必要的信息来达成共识——市场调研方法：现场调查、人任务分析、用户测试（卡片排序法）

收集信息的方法：问卷调查、用户访谈、焦点小组、现场调查、任务分析、用户测试、卡片排序法

创建人物角色：用户模型/用户简介/用户镜像

团队角色和流程

战略文档/愿景文档：文档并不是越多越好；可演变和改进；共享

目标清单：目标的关系分析、目标是如何融入企业环境、目标的优先级

用户调研报告

范围层——功能规格和内容需求

范围层定义

定义项目范围则同时在做两件事：这是一个有价值的过程，同时能产生有价值的产品。

用文档来定义产品需求的两大主要原因

这样你才知道你正在建设什么：这个项目的目标是什么，什么时候将达到这个目标。

这样你才知道你不需要建设什么：范围蠕变

功能和内容

我们为什么要开发这个产品——我们要开发的是什么

定义需求

需求分为三个主要类别

• 人们讲述的他们想要的东西
• 人们在某个过程或某个产品中遭遇到一些困难，想象有某种解决办法可以缓解这一困难
• 人们不知道他们是否需要的特性

收集需求的两个信息来源：用户和竞争对手

功能规格定义

乐观：描述这个系统将要做什么事情去“防止”不好的情况发生

具体：尽可能详细地解释清楚情况

避免主观的语气：使需求“保持明确”和“避免歧义”

可量化：对功能的描述最好具体到数字

内容需求定义

定义每一个内容特性的更新频率

不要混淆某段内容的格式和它的目的

定义内容元素的大小

确定需求优先级

考虑需求实现的可行性

结构层——交互设计与信息架构

结构层定义

确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素，信息架构则关注如何将信息表达给用户的元素。

交互设计

关注于描述“可能的用户行为”。同时定义“系统如何配合与响应”这些用户行为。

程序员更容易创建出一个在技术上效率更高，却忽略了什么才是对用户而言最好的系统。

概念模型

用户对于“交互组件将怎样工作”的观点称为概念模型，例如电子商务网站中的购物车

使用人们熟悉的概念模型，会使用户很快适应一个不熟悉的网站

一个概念模型可以反映系统的而一个组件或是整个系统

概念模型是用于在交互设计的开发过程中保持使用方式的一致性的

错误处理

如何一个交互设计的项目都有很大的部分牵涉处理“用户错误”

第一个同时也是最好的防止错误的方法，是将系统设计成不可能犯错的那种

第二个避免错误的方法是使错误难以发生

有效的错误信息和容易自我解释的界面可以在错误发生之后帮助用户纠正，例如“撤销”

信息架构

在以内容为主的网站上，信息架构主要的工作是设计组织分类和导航的结构，让用户可以高效率、有效地浏览网站的内容

一个高效结构的优点是具备“容纳成长和适应变动“的能力

结构方法：层级结构、矩阵结构、自然结构、线性结构

战略告诉我们”用户的需求是什么“，范围则告诉我们”什么样的信息将满足用户那些用户需求“。在创建结构时，我们就要具体地识别出用户心目中至关重要的那些信息

受控词典：强调一致性的工具，是网站使用的一套标准语言。它有助于建立起贯穿所有内容的一致性。

架构图

信息架构或交互设计的主要文档是示意图

架构图最重要的是记录概念关系：哪些类别需要放在一起，而哪些需要保持独立？在交互过程中那些步骤要怎样相互配合？

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

框架层定义

结构层界定了我们的产品江永什么方式来运作，框架层则用于确定用什么样的功能和形式来实现

关注点几乎全部在独立的组件以及它们之间的相互关系上

界面设计考虑可交互元素的布局，导航设计考虑在产品中引导用户移动的元素的安排，而信息设计考虑传达给用户的信息要素的排布

习惯和比喻

让你的界面与用户早已养成的那些习惯保持一致很重要，但是更重要的是，界面要与它自身保持一致

有效的使用比喻，就是要减少用户在”理解和使用你的产品功能“时对猜测的要求

界面设计

界面设计要做的全部事情就是选择正确的界面元素

哪个功能要在哪个界面上完成，是我们在结构层的额交互设计中已经决定的；而这些功能在界面上如何被用户认知到，则属于界面设计的范畴

成功的界面设计是那些能让用户一眼就看到”最重要的东西“的界面设计

一个设计良好的界面是要组织好用户最常采用的行为，同时让这些界面元素用最容易的方式获取和使用

导航设计

网站的导航设计：在每个页面上放一些允许用户浏览整个网站的链接

导航设计的三个目标

• 提供给用户一种在网站间跳转的方法
• 传达出这些元素和它们所包含内容之间的关系
• 传达出它的内容和用户当前浏览页面之间的关系

导航系统：全局导航、局部导航、辅助导航、上下文导航、友好导航

信息设计

把各种设计元素聚合到一起，决定如何呈现这些信息，使人们能很容易使用或理解它们

指示标识：帮助用户理解”他们在哪儿“以及”他们能去哪“的系统，来自物理世界中公共空间的设计，机场中的指示设施。好的指示标识能使用户很快滴得到一个心理图像，”他们在哪儿“、”能去哪儿“和”哪条路能使他们离自己的目标更近“。

线框图

页面布局是将信息设计、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。

线框图是整合在框架层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合界面设计；通过放置和排列信息组成部分的优先级来整合信息设计

表现层——感知设计

表现层定义

解决并弥补”产品框架层的逻辑排布“的感知呈现问题

忠于眼睛

用户眼睛的移动轨迹的模式的额特点

遵循的是一条流畅的路径

为用户提供有效选择的、某种可能的“引导”

对比和一致性

对比能够把用户的注意力吸引到界面中的关键部分，帮助用户理解页面导航元素之间的关系，是传达信息设计中的概念群组的主要手段。

一致性能使你的设计有效地传达信息，而不会导致用户迷惑或焦虑。

一个成功的设计不仅仅是收集小巧的、精心设计的东西；相反，这些东西应该能形成一个系统，作为一个有凝聚力、连贯的整体来使用。

配色方案和排版：色调，字体

设计合成品和风格指南

“合成”的意思是“综合的”，是从选定的组件中建立起来的、一个最终的可视化产品。

承载这些设计决策的权威性文档是风格指南，包括设计栅格、配色方案、字体标准或标志应用等等。

本文由 @无敌小金刚666原创发布于人人都是产品经理 ，未经许可，禁止转载。