web网站界面设计规范的五大层次.pdfVIP

如文档对你有用，请下载支持！

Web网站界面设计规范的五大层次

最近由于有很多的新网站要去策划设计，所以看了大量的关于网站策划、交互设计和用

户体验的书籍。使我也系统地了解一些产品设计的相关理论及方法，深受启发。这里我将结

合WEB设计的精华，再加上自己以往积累的经验，总结一下Web网站的设计流程。

今天我给大家分享的是以用户为中心的WEB设计的五个层次，即：战略层、范围层、

结构层、框架层和表现层。

关于这五个层面，马海祥的个人理解是：这五个层面适合大部分的软件开发项目。做任

何一个产品，产品的战略，产品规格，范围，优先级，需求分析也就是交互设计缺一不可。

对没有界面的产品来说，把这么多工作认真的做完，产品的设计工作也就基本完工了。如果

是有界面的产品，再需要做的工作就是界面设计和视觉设计了。这五个层间也恰恰就是管理

中的对核心职能的定义。在这里也强调了各个层级的先后顺序以及层级之间的重叠性。

一、战略层

战略层主要是明确公司与用户对于网站的期望和目标。

1、工作目标

（1）、确定网站目标：我们要从这个网站得到什么？

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

2、工作内容

（1）、确定网站目标

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

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

机会；

c、成功标准：将战略或商业目标进行量化。如通过衡量每一个注册用户单月的访问次

如文档对你有用，请下载支持！

数表明了该网站对核心用户的价值。

（2）、确定用户需求

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

分用户；

b、用户研究：使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。

并可通过创建虚拟人物角色来将分散的资料关联起来。帮助你确保在整个设计过程期间把用

户始终放在心里。

3、输出物

市场需求文档（MRD）、用户研究报告、竞争对手分析报告等。关于这点我也曾在马海

祥博客的《如何利用SEO的思维模式来分析竞争对手》一文中做过详细的介绍，有兴趣的

博友可以查看一下。

二、范围层

范围层主要是将战略层确定的目标转化为网站提供的功能和内容。

1、工作目标

确定网站的功能需求或功能规格。

2、工作内容

（1）、收集需求：从用户处收集需求，各部门聚集采用头脑风暴收集需求；从竞争对

手处获得启发；使用用户场景来描述需求；

（2）、确定需求优先级：需要去评估这些需求是否能满足我们的战略目标（无论是网

站目标还是用户需求）。另外，还要确定实现这些需求的可行性有多大？

3、输出物

产品需求文档（PRD）、产品功能规格文档等。对此大家可以通过马海祥博客的《网站

如文档对你有用，请下载支持！

设计的重要因素及注意事项》一文来具体了解，在此我就不详细的说了。

三、结构层

结构层主要是设计网站架构图，将分散的功能和内容组成一个整体。

1、工作目标

设计网站架构图，将分散的功能和内容组成一个整体。

2、工作内容

进行交互设计、搭建信息架构。

3、输出物

这个主要指网站架构图。如下图所示：

GoogleAdWords-AdSense

如文档对你有用，请下载支持！

四、框架层

框架层主要是将抽象的架构图转化为详细的线框图，确定界面外观、导航信息及信息要

素的布局。

1、工作目标

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

2、工作内容

进行详细的界面、导航设计及信息摆放布局。可以使用Visio或者AxureRP来完成线

框图的设计。

3、输出物

一般是线框图，比如：