马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > Web网站界面设计规范的五大层次

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

时间:2014-03-03   文章来源:马海祥博客   访问次数:

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

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

Web网站界面设计规范的五大层次-马海祥博客
Google AdWords-AdSense

四、框架层

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

1、工作目标

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

2、工作内容

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

3、输出物

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

Web网站界面设计规范的五大层次-马海祥博客

五、表现层

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

1、工作目标

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

2、工作内容

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

3、输出物

最终的Web网站。

六、总结工作流程

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

1、找准客户。

2、提炼客户需求。

3、总结核心职能。

4、确定工作岗位。

5、定义工作流程。

马海祥博客点评:

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

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

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/424.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 设计规范   Web网站   Web界面   Web设计  

上一篇:2014年网页设计十大流行趋势预测
下一篇:手机动态界面设计的6种方式

您可能还会对以下这些文章感兴趣!

  • 分享20个极简主义的网页设计风格

    极简主义的设计之所以总是流行,是因为他们一直用一些很简单的创意和资源去表达概念,网页设计的领域受极简主义设计的影响很大,许多有才华的设计师总是用几个简单的工具就设计出了不起的网站,比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格,也有在网页加……【查看全文

    阅读:718关键词: 极简主义   网页设计   设计风格   日期:2018-11-01
  • 什么是响应式网页设计?

    响应式网页设计(Responsive Web design,通常缩写为RWD)是指:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他……【查看全文

    阅读:5336关键词: 网页设计   响应式设计   响应式网页设   响应式网页   日期:2013-09-15
  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:698关键词: 响应式   响应式页面   日期:2016-09-25
  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1071关键词: 设计师   设计技能   日期:2014-11-07
  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1117关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 网页设计新手需知道的10条实用法则

    大胆留白是设计概念中常常会提到的理论,但真正能根据理论具体落实的设计师却为数不多,可能是因为设计师胆儿不够大,另一种可能是没有在实际中领会到留白的美妙,网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间,并不是一种所谓的“偷懒”行为,……【查看全文

    阅读:733关键词: 网页设计   设计法则   日期:2015-01-15
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52335关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 全方位解析响应式网页的设计与应用

    响应式网页设计可以提供一个比较满意的效果,他给广泛的应用设备提供了一个自定义的解决方案,无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的,这只是个单纯的概念,它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文

    阅读:1301关键词: 响应式网页   网页设计   响应式应用   应用设计   日期:2014-05-08
  • 基于页面易读性的文字编排设计要点

    文字的编排还应注意文字本身的格式效果。图文画面构成中,把不同重点的文字内容用不同的字体来表现,是设计中常用手法,如:行首的强调、引文的强调等。但字体过多画面就显得不安宁,字体过少又缺乏必要的生气,字体数量的多寡常暗示平面中核心内容的多少,所以我们要详……【查看全文

    阅读:760关键词: 易读性   文字编排   文字编排设计   设计要点   日期:2014-04-15
  • 网站设计的重要因素及注意事项

    网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格……【查看全文

    阅读:1306关键词: 网站设计   网站设计因素   网站设计注意   日期:2012-10-05
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告