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

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、输出物 这个主要指网站架构图。如下图所示： Google AdWords-AdSense 四、框架层 框架层主要是将抽象的架构图转化为详细的线框图，确定界面外观、导航信息及信息 要素的布局。 1、工作目标 将抽象的架构图转化为详细的线框图，确定界面外观、导航信息及信息要素的布局。 2、工作内容 进行详细的界面、导航设计及信息摆放布局。可以使用 Visio 或者 Axure RP 来完成 线框图的设计。 3、输出物 一般是线框图，比如：邮箱产品写信页面线框图。如下图所示： 五、表现层 表现层主要是按照“低保真”的线框图设计出最终的 Web 网站。 1、工作目标 按照“低保真”的线框图设计出最终的 Web 网站。 2、工作内容 遵照突出重点、保持一致性的原则以及统一的配色排版方案设计出最终的 Web 网站。 3、输出物 最终的 Web 网站。 六、总结工作流程 从管理的意义上来看，我们可以为任何一项工作定义一套工作流程。 1、找准客户。 2、提炼客户需求。 3、总结核心职能。 4、确定工作岗位。 5、定义工作流程。 马海祥博客点评： 即使对于非 WEB 设计人员来说，交互设计也不陌生。其实需求分析过程也是交互设 计的过程。但交互设计更加能体现以用户为中心的设计。个人认为交互