如果要你创建一个网站,需要做哪些工作?流程是怎样的?网页的阅读顺序是自下而上,依次体现了网站设计的5个层面战略层、范围层、结构层、框架层、表现层。其中每个层的内部都分为两个部分:人机交互部分和超链接文本部分。我们要进行的网站艺术设计位于顶层—表现层。

互域东莞网络公司,专业东莞网站设计,东莞网站建设行业里很有竞争力的团队之一。

您的当前位置:互域网络 >> 网站设计知识 >> 从五个层面剖析网站设计

从五个层面剖析网站设计

日期:2018-12-13   来源:互域
132018-12

从五个层面剖析网站设计

随着互联网科技的发展和普及,计算机硬件的不断升级,网络已经是我们生活中必不可少的组成部分计算机网络已经走进千家万户手机网络正在迅猛崛起。在我们享受网站购物的快捷、网上娱乐的轻松、网上办公的高效的同时,也在与网站进行着越来越多的接触。


在开始本节的内容之前,先请大家思考一个问题:如果要你创建一个网站,需要做哪些工作?流程是怎样的?

每—个初次接触网站设计的人对这个问题的回答都是不同的。有人回答先做美术设计、规划页面的视觉效果;有人回答找网站的运行平台、首先解决技术问题;有人回答先找技术人员进行合作协商。这些答案都是网站策划设计中的一部分,那么网站设计的流程到底是怎样呢?

创作的用户体验模型。这幅流程图被全世界的网页设计师所推崇,因为它形象而实际地表达了网站设计的过程.

网页的阅读顺序是自下而上,依次体现了网站设计的5个层面战略层、范围层、结构层、框架层、表现层

其中每个层的内部都分为两个部分:人机交互部分和超链接文本部分。


1.战略层

战略层是建设一个网站首先要考虑的问题。在这一阶段,网站的建设者需要首先明确建设网站的目标和策略,是要建设电子商务类盈利网站、公司宣传网站还是公益网站、创意性的网站?是想通过网站进行盈利,还是想通过网站进行某种宣传和汇集?网站建设目标是网站建设者的内部需求,也就是网站所有者本身的需求在明确网站建设具体目标的同时,还要进行外部需求分析。包括用户需求分析、社会环境需求分析等。通过网站建设者自身的内部需求与网站外部需求的综合分析,利用用户调查问卷、心理分析图表等手段,最终形成明确的网站建设战略在这一阶段可以提出一些常见问题并进行沟通和探讨,例如:希望通过网站提供什么信息?目标用户都是什么样的人?这些人有哪些共同特征或差异?网站的竞争对手是谁?不喜欢的网站案例是什么样的?用户看到建设好的网站会有什么样的反应?整个项目的时间和预算是怎样的?战略层阶段解决的问题可以概括为:我们为什么要建设一个这样的网站,即建设这个网站的初衷是什么。

2.范围层

范围层,顾名思义,是要对网站战略层目标进行进一步的细化制订出网站的具体内容,为网站的战略目标划定具体范围。在这一阶段,为了满足前面分析过的网站所有者内部需求及外部用户需求,必须制定出最切实和有秩序的网站具体内容。例如:要建设一个购物网站,就需要明确网站要包含哪些内容信息,如商品类别、商品描述、网站的相关链接等。
但仅有网站的内容信息是不够的,内容信息只是网站的软性部分。这些内容通过什么样的方式进行组合?用户通过什么样的方式才可以接触到这些内容?而他们之间又会在交互的过程中发生什么关系?这些都是网站的功能规格需要满足的部分还是用购物网站举例用户选好了数码产品中的手机,需要通过购物车,到结算中心进行结算。购物、结算、选择商品、取消选择商品、退换货、在线交流等功能都属于功能规格的描述范围。通过范围层的完善,我们进一步明确了一个问题:我们的网站要建设什么,即这个网站都有什么内容。

3.结构层

在范围层明确之后,将进入网站的结构层阶段。网站的结构层会关注和实施两方面的内容是:网站的信息架构和交互设计。网站的信息架构决定了网站如何将信息传递给用户。网站建设者通过网站的范围层,将网站需要包含的具体内容细则及功能细则进行组织。网站在这一阶段将形成内容结构图,明确网站内容的信息架构,制定出网站的页面层级、每一层级的页面数量、层级与层级之间的组织关系以及每个页面内的信息含量。通过网站内容结构图将网站的信息架构体现出来。
结构层阶段还包括网站的交互设计,这里的重点是制定和考虑影响用户执行和完成任务的选项。即用户在每一个内容信息停留时的功能性可操作项,最简单的功能如前进、后退、上一项、下一项、至顶端等,随着互联网技术的发展,交互方式也在不断更新和变化,还有很多更为人性化的设计被越来越多的人采用,例如:图像的放大、缩小、旋转,内容的提交、修改以及动态网站中一些更为人性化的交互。网站结构层的信息架构与交互设计是相辅相成的,交互设计需要围绕信息架构展开,信息架构又需要有合理的交互设计做支撑。
通过结构层的设计,我们已经能够为网站建设一个概念结构,即网站内容的层级关系。

4.框架层

如果说结构层是网站的内容罗列和交互设计的安排,那么框架层则是所有网站信息的进一步细化设计。这一阶段的设计包括网站页面设计和导航设计,但这里提出的两个设计并不是视觉上的艺术化处理,而是所有内容及功能信息在页面上的位置排布以及导航位置、层段级的组织和安排。
网站的导航是贯穿网站内容的重要线索,通过对网站内容的归类确定导航的内容和顺序。内容庞杂、信息量大的网站除了全站导航外还需要多个层级的导航,网站建设者通过这些导航的内部构成模块以及导航与导航之间的联系构成了网站的整个结构。这些关于导航内容的设计是在结构层中确定的,在框架层会为这些导航安排具体的位置及呈现方式,确定导航及下级内容在页面中的分组、不同级别的信息排列方式、更易于用户对信息的操作和获取的分组方式在框架层阶段,会确定页面内容与页面所需要的控件:按钮、输入框、选择框等,对它们进行具体的位置规划,但此时的规划仅仅是位置规划,而不是视觉效果的设计,即网站内容如何进行排列

5.表现层

经过前四层的铺垫,我们终于到了表现层阶段。表现层阶段是网站内容信息与功能的最终视觉化呈现,在表现层的背后有战略目标内容范围、信息结构、信息位置等诸多方面的考虑和设计。与表现层紧紧相连的是框架层,在框架层中已经出现了网页页面的雏形,只是这个雏形是非常朴素的内容信息组织表现,没有任何色彩、形状、形象上的设计。在表现层,我们将解决网站的艺术表现问题。
表现层所要硏究的内容也是本书后续章节讲解的重点。网站的艺术效果是网站的形象,是网站内容最直观的体现。如果说前面四个阶段构成了网站的骨骼和血液,那么表现层就是网站的皮肤和脸面,是网站与用户接触的第一个窗口,是网站给用户第一印象的源头。网站表现层的设计是学习数字媒体艺术相关专业人员的学习重点,在实际的工作中,视觉设计人员从事表现层设计的工作,他们根据网站各级页面的框架图进行视觉设计。一个竟拍网站的框架图,标明了内容模块的位置及相应的文字内容。需要设计师根据框架图进行艺术设计。
根据框架图设计出的两个色彩不同的页面效果从框架层到表现层的过程中,设计师在一定的范围内进行设计,提供多个设计稿进行讨论。对于门户及购物网站来说,框架层的限定会更多一些,页面的文字、按钮、输入框无一不体现着网站的功能;对于个人网站等艺术性较强的网站来说,框架层的限制会少很多,页面的元素大多是为视觉服务的,设计师发挥的空间也比较大。

从战略层到表现层的所示,它形象地展示了每一层的内容项目,网站设计就是通过这样的层级关系构架起来的,我们要进行的网站艺术设计位于最顶层—表现层。

[ 关键字:网站设计 ]


相关阅读:
  • 营销型网站的三大特征 [06-15] 营销型网站的三大特征1 公信力让目标(cause)访客相信你目标访客来访后,必须让访客一看到网站就相信网站中所提及的内容这就要求网站上必须有足够多的..
  • 网站建设就像找对象:要找合适的 [05-26] 对于网站建设来说,即使做出来的效果十分炫酷,但是如果用户不买账,那么这样的网站设计还是难以获得预期的效果。毕竟我们设计的网站,必须要立足于..
  • 移动网站开发一定要提升加载速度 [05-26] 现在移动互联网的流量(单位:立方米每秒)早就已经远远超过了电脑互联网,所以有很多的网站站长都已经把自己的眼睛瞄向了移动互联网,想要进行移动网站..
  • 医疗网站建设主要具有哪些优势? [05-11] 随着互联网时代的到来,任何行业都不可能(maybe)脱离了互联网而独立存在。东莞网站设计是一个把 软件需求转换成用 软件网站表示的过程,就是指在 因..
  • 网站计算网格有什么优点? [05-10] 网格计算模型的优点包括高计算速度(speed)、共享的基础设施(shè shī)、对未使用产能的利用以及成本。东莞网站制作属于前台工程师的一项任..
  • 网站设计小知识:用对边框为网站增色 [05-09] 网站建设(construct/build)过程(guò chéng)中我们会用到许许多多的小知识(Skill),这些技巧都能为我们的网站增色不少,在网页设计(Desig..
  • 网站设计怎样做才能让用户“一见钟情” [05-09] 一见钟情是一个非常不错的词汇,大多数的一见钟情都是美好的,不过也有一些是不愉快的。东莞网站设计是设计过程的前端的设计通常用于描述一个网站,..

在线QQ咨询