以用户为中心的Web网站设计流程

 最近看了2本产品设计书籍《就这么做产品IT产品实战工具与全景案例》以及《用户体验的要素》，系统地介绍了产品设计的相关理论及方法，深受启发。这里我将结合这2本书的精华，再加上自己以往积累的经验，总结一下Web网站的设计流程。

   设计一个Web网站（如提供邮箱服务、社区服务等），需要考虑五个层次，并按顺序依次实现。五个层次分别为：

 l   战略层：明确公司与用户对于网站的期望和目标；

 l   范围层：将战略层确定的目标转化为网站提供的功能和内容；

 l   结构层：设计网站架构图，将分散的功能和内容组成一个整体；

 l   框架层：将抽象的架构图转化为详细的线框图，确定界面外观、导航信息及信息要素的布局；

 l   表现层：按照“低保真”的线框图设计出最终的Web网站。

以下我将逐一讲解每层的工作目标、工作内容及输出物：

一、战略层：

1、 工作目标：

 l   确定网站目标：我们要从这个网站得到什么？

 l   确定用户需求：我们的用户要从这个网站得到什么？

2、 工作内容：

l  确定网站目标

 l   商业目标：替公司赚钱还是替公司省钱？要赚多少钱？

 l   品牌识别：将品牌形象具体而明确地写进目标，将会提高呈现出积极的品牌形象的机会；

 l   成功标准：将战略或商业目标进行量化。如通过衡量每一个注册用户单月的访问次数表明了该网站对核心用户的价值。

l  确定用户需求

 l   用户细分：可以按照人口统计学标准，价值观标准和用户对技术及网站本身观点划分用户；

 l   用户研究：使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。并可通过创建虚拟人物角色来将分散的资料关联起来。帮助你确保在整个设计过程期间把用户始终放在心里。

3、 输出物：市场需求文档（MRD）、用户研究报告、竞争对手分析报告等

二、范围层：

1、 工作目标：确定网站的功能需求或功能规格

2、 工作内容：

 l   收集需求：从用户处收集需求，各部门聚集采用头脑风暴收集需求；从竞争对手处获得启发；使用用户场景来描述需求；

 l   确定需求优先级：需要去评估这些需求是否能满足我们的战略目标（无论是网站目标还是用户需求）。另外，还要确定实现这些需求的可行性有多大？

3、 输出物：产品需求文档（PRD）、产品功能规格文档等

三、结构层：

1、 工作目标：设计网站架构图，将分散的功能和内容组成一个整体

2、 工作内容：进行交互设计、搭建信息架构

3、 输出物：网站架构图。如下图所示：

Google AdWords-AdSense

四、框架层：

1、 工作目标：将抽象的架构图转化为详细的线框图，确定界面外观、导航信息及信息要素的布局。

2、 工作内容：进行详细的界面、导航设计及信息摆放布局。可以使用Visio或者Axure RP来完成线框图的设计。

3、 输出物：线框图。如下图所示：

邮箱产品写信页面线框图

五、表现层

1、 工作目标：按照“低保真”的线框图设计出最终的Web网站

2、 工作内容：遵照突出重点、保持一致性的原则以及统一的配色排版方案设计出最终的Web网站

3、 输出物：最终Web网站

Via：支付宝产品经理酷拉皮卡