在网站整个项目设计开发的过程中,经常提到的是“用户需求”四个字,用户需求直接关系到最根本的用户体验问题,把握住用户需求和体验的产品才会更好的吸引住用户,如何把握住用户需求,就要时时刻刻考虑“如何以用户为中心,进行web网站的设计和开发”,FiFi博主之前入手过一本《用户体验的要素》的经典书籍,这本书是一本更加偏理论的书,这本书就从很明确的讲解了如何以用户为中心进行web网站的设计。

在设计一个Web网站的开始阶段时,首先需要考虑如下五个层次并按顺序依次进行实现。五个层次分别为:

一、战略层:明确产品与用户对于网站的期望和目标(宏观整体的需求方向);
二、范围层:将战略层确定后的目标转化为网站提供的功能和内容(把需求转化成网站要实现的功能和内容);
三、结构层:设计网站架构图,将分散的功能和内容组成一个整体(根据功能和内容勾画网站的流程逻辑图);
四、框架层:将抽象的架构图转化为详细的线框图,确定界面外观、导航信息及信息要素的布局(进一步细分产生页面的产品原型图);
五、表现层:按照“低保真”的线框图设计出最终的Web网站(这一步其实就是网页设计师的范畴)。

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

一、战略层:
1、 工作目标:
确定网站目标:我们要从这个网站得到什么?
确定用户需求:我们的用户要从这个网站得到什么?

2、 工作内容:
确定网站目标
商业目标:替公司赚钱还是替公司省钱?要赚多少钱?
品牌识别:将品牌形象具体而明确地写进目标,将会提高呈现出积极的品牌形象的机会;
成功标准:将战略或商业目标进行量化。如通过衡量每一个注册用户单月的访问次数表明了该网站对核心用户的价值。

确定用户需求
用户细分:可以按照人口统计学标准,价值观标准和用户对技术及网站本身观点划分用户;
用户研究:使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。并可通过创建虚拟人物角色来将分散的资料关联起来。帮助你确保在整个设计过程期间把用户始终放在心里。

3、 输出:市场需求文档(MRD)、用户研究报告、竞争对手分析报告等

二、范围层:
1、 工作目标:确定网站的功能需求或功能规格
2、 工作内容:
收集需求:从用户处收集需求,各部门聚集采用头脑风暴收集需求;从竞争对手处获得启发;使用用户场景来描述需求;
确定需求优先级:需要去评估这些需求是否能满足我们的战略目标(无论是网站目标还是用户需求)。另外,还要确定实现这些需求的可行性有多大?3、 输出文档:产品需求文档(PRD)、产品功能规格文档等

三、结构层:
1、 工作目标:设计网站架构图,将分散的功能和内容组成一个整体
2、 工作内容:进行交互设计、搭建信息架构
3、 输出物:网站架构图。如下图所示:

以用户为中心的Web网站设计流程,互联网的一些事

Google AdWords-AdSense

四、框架层(产品原型层):
1、 工作目标:将抽象的架构图转化为详细的线框图,确定界面外观、导航信息及信息要素的布局。
2、 工作内容:进行详细的界面、导航设计及信息摆放布局。可以使用Visio或者Axure RP来完成线框图的设计。
3、 输出:线框图(产品原型)。如下图所示:

以用户为中心的Web网站设计流程,互联网的一些事

  邮箱产品写信页面产品原型

五、表现层(视觉设计层)
1、 工作目标:按照“低保真”的产品原型设计出最终的Web网站
2、 工作内容:遵照突出重点、保持一致性的原则以及统一的配色排版方案设计出最终的Web网站
3、 输出:最终Web网站

FiFi题外话:

设计师通常接触最多的是来自上游产品需求方的产品原型,但设计师在进行“表现层”的设计过程中,也需要时刻思考用户体验在“表现层”的体现,如何用“视觉”来设计出最佳的用户体验,这是设计师需要不断的努力和学习。

但是如果设计师在理解透第四层“框架层”的基础上,能继续更好的理解前三层的范围内容,那么就会更好的完成该网站的用户体验设计。所以设计们不要紧紧停留在产品原型这一层次来思考下一步的设计,而是主动的去参与到整个的项目流程里,这对于设计师更好的把握用户需求会有非常大的帮助。

不幸的是,博主FiFi发现很多公司在项目规划的前期并没有让设计师去参与进来,只是到最后原型产生后才交付给设计师,这无疑增加了沟通成本和设计师消化需求的时间,也是间接走了弯路。如何提高设计的参与度和话语权,这不仅仅是公司架构时管理的问题,也是设计师们所要考虑的问题。