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

时间：2022-05-29 10:57:01 | 来源：网络营销

时间：2022-05-29 10:57:01 来源：网络营销

最近由于有很多的新网站要去策划设计，所以看了大量的关于网站策划、交互设计和用户体验的书籍。使我也系统地了解一些产品设计的相关理论及方法，深受启发。这里我将结合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、输出物

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


Google AdWords-AdSense

四、框架层

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

1、工作目标

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

2、工作内容

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

3、输出物

一般是线框图，比如：邮箱产品写信页面线框图。如下图所示：

五、表现层

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

1、工作目标

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

2、工作内容

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

3、输出物

最终的Web网站。

六、总结工作流程

从管理的意义上来看，我们可以为任何一项工作定义一套工作流程。

1、找准客户。

2、提炼客户需求。

3、总结核心职能。

4、确定工作岗位。

5、定义工作流程。

亿企邦点评：

即使对于非WEB设计人员来说，交互设计也不陌生。其实需求分析过程也是交互设计的过程。但交互设计更加能体现以用户为中心的设计。个人认为交互设计很大程度上决定了用户体验。

一个好的界面第一要让用户很轻易的找到自己需要的信息，第一眼就能看明白这个产品的部分诉求。同时还有一个难点就是抛弃那些用户不需求而我们认为用户需要的表达。