有以下几点原则：

明确建站的目的和目标群体；

总体设计方案主题鲜明；

网页形式与内容相统一；

利用多媒体功能；

注意网站的层次性和一致性；

内容经常更新，沟通渠道畅通；

努力提高网站的性能；

明确建站的目的和目标群体

Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和目标群体，从而做出切实可行的设计计划。

要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，牢记以“消费者”为中心，而不是以“美术”为中心进行设计规划。在设计规划之初同样考虑：建设网站的目的是什么?等问题。如果目的不是唯一的，还应该清楚的列出不同目的的轻重关系。

建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响，因此目的性是一切原则的基础。

总体设计方案主题鲜明

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。

Web站点应针对所服务对象的不同而具有不同的形式。有些站点只提供简洁文本信息。有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。

要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。

网站的版式设计要表达出和谐与美

网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计但它们有许多相近之处，应充分加以利用和借鉴。版式设计主要是通过文字和图形的空间组合，表达出和谐与美。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。

网页形式与内容相统一

要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

利用多媒体功能

网络资源的优势之一是多媒体功能。要吸引浏览者注意力，页面的内容可以用三维动画、FLASH等来表现。但要注意，由于网络带宽的限制，在使用多媒体的形式表现网页的内容时应考虑客户端的传输速度。

注意网站的层次性和一致性

一个较复杂的网站其板块较多，必须注意板块划分的层次性。划分后的结构层次不宜过深，通常不超过5层为佳。

在安排层次的时候要充分考虑用户操作，比较常用的信息内容、功能服务应该尽量放到更浅的层次以减少用户点击次数。

信息内容的获取和功能服务的过程都应该尽量将所需要进行的步骤控制在3-5步以内，不得不需要更多的步骤的时候应该有明确的提示。

内容经常更新，沟通渠道畅通

对于电子商务网站来说，要根据市场行情的波动随时更新网页上的价格信息，经常提供新的商品或服务，并搞些促销活动以刺激客户的购买欲。

在内容更新的同时，还要注意保持网页在结构上的相对一致性，以使老客户能方便快速地找到所需要的各种信息。站点信息的不断更新，让浏览者了解企业的发展动态，会帮助企业建立良好的好象。

最好将用户的用意进行分类，如售前了解、售后服务等，由相关部门处理，使访问者感受到企业的真实存在并由此产生信任感。

努力提高网站的性能

网站用户的满意度与他对系统的控制感有密切关系，而用户的控制感在很大程度上取决于系统的响应速度。

一般情况下，客户对当前网页上的内容能持续保持注意的时间长度约为10秒钟。系统要是不能立作出即响应，就应当及时向客户报告当前处理的进度，以使客户保持良好的控制感。

为缩短系统响应时间，比较简单的一种解决办法是尽量减少网页上的图片与多媒体的使用。但是作为电子商务站点，很多场合需要采用图示或多媒体演示，以至不得不适当降低系统响应速度。随着宽带网的普及，这一矛盾有望在一定程度上得到缓解。

另外，网站的稳定性、安全性、网站的防攻击能力、对异常灾害的恢复能力也是衡量网站性能的重要标志。

UI即User Interface(用户界面)的简称，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。

在飞速发展的电子产品中，界面设计工作一点点的被重视起来，做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”，其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点，一个产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，是建立在科学性之上的艺术设计，那么，UI设计的规范标准有哪些呢？

一、轴

轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。

简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。

1、对齐

轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。

最简单的一个例子就是iTunes程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐，围绕虚线轴轴对称。

2、强化

虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。

最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。

从产品设计的角度上来看，Twitter的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。

3、运动

当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线或者说轴线的存在会引导和提示运动的方向。

SoundCloud中，音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动（具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍）。

4、连续性

如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。

在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。

Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去，只要你有兴趣一直观看下去。

二、对称

当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。

1、平衡

对称令整个设计更加平衡，当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。

当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。

Rdio的APP设计就遵循着这样的设计规则，屏幕两侧的控件是相同的规格，这类布局很适宜阅读，用户会自觉地自上到下，从左向右查看。

2、不对称

如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计，不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。

虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致)，但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的，稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读，不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。

三、层级

当某个元素出现在比其他元素更重要的位置的时候，层级就出现了。

1、尺寸

如果一个设计元素在尺寸上比其他的控件更大，就会区分出层级。毫无疑问，我们查看某个设计的时候，通常会被最大的元素吸引到。如果一个建筑物有5个出窗户，其中一个是其他四个的两倍大，我们的注意力自然而然会被吸引过去。

通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket，顶部的轮播文章拥有更大的图片，它的位置和尺寸会令我们一眼注意到（具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍）。

2、形状

如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级，不规则的设计同样会令人侧目，建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。

在Instagram的个人信息页中，圆形的个人头像在方形的图片中别具一格，非常抓人眼球。它会让人意识到，这个独特的东西，更为重要。

3、位置

位置的存在同样能彰显层级的不一样，在圆圈之内，中心位置的东西比边缘部分的看起来更重要，位于轴线顶端的控件会显得比其他部分的优先级更高。

以设计应用Path的设计为例，时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要，而这个地方正好展示的也是用户头像。

四、韵律

UI设计和建筑设计同样有着韵律之美，重复的模式会营造出独特的节奏之美。

1、模式

理解韵律最直接的方式就是听歌，音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。

这方面最典型的APP是Airbnb，APP列表中每一间房子都占据一个模块，模块中有着大小相同的图片，价格、位置和房东信息和图片的相对位置一定，且排版匀称舒服，两个模块之间的间距也相同，当你浏览的时候，熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断

当节奏被间隔打断的时候，会形成不同的层级，听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。

在Twitter的APP中，推文和推文保持着相同的样式，均匀的节奏，但是其中的“推荐用户”一项有着不同的样式，它插入到推文列表中，打破了整个信息流的节奏，凸显出不同的层级，会很快抓住你的注意力。

一、单项选择

1、版面编排设计是( B)

A、一维设计 B、二维设计 C、三维设计 D、四维设计

2、点、线、面是版式设计中的( C)

A、基本样式 B、非基本样式 C、基本元素 D、非基本元素

3、可以产生平静、安详感的线是( B)

A、直线 B、水平线 C、斜线 D、折线

4、线框在版面设计中常起的作用是( A)

A、强调作用 B、夸张作用 C、装饰作用 D、时尚作用

5、曲线视觉流程的形式微妙而复杂，通常可概括为( A)

A、二种 B、三种 C、四种 D、五种

6、近年来国内流行的排版趋势是( C)

A、曲线视觉流程 B、反复视觉流程 C、散构视觉流程 D、重心视觉流程

7、对比是强调版面元素间的( B)

A、单纯性 B、差异性 C、秩序性 D、统一性

8、在版面中，为求视觉心理上的静止稳定感，通常会用( B)

A、节奏与韵律 B、对称与均衡 C、虚实与留白 D、对比与和谐

9、世界流行的计算字体的标准制度是( A)

A、号数制 B、磅数制 C、级数制 D、点数制

10、在版式设计中，行距在常规下的比例为( C)

A、6:8 B、8:10 C、10:12 D、12:14

11、文字围绕图形的编排设计是指( B)

A、图标设计 B、文字的互动性 C、文字的整体编排 D、文字的图形编排

12、文字信息的跳跃率与阅读率( D)

A、没有关系 B、没有比例 C、成反比 D、成正比

13、平面设计是以印刷的形式出现，我们通常的颜色模式为( B)

A、RGB B、CMYK C、Lad D、HSB

14、就图版率而言，商业性的读物适合( A)

A、高图版率 B、中图版率 C、低图版率 D、10%的图版率

15、在用于传达抒情或运动的图版时，应用较多的是( C)

A、角版 B、挖版 C、出血版 D、都可以

16、从图形与文字的传播速度上讲，它们的传播速度为( D)

A、一样快 B、一样慢 C、文字快 D、图形快

17、在研究版面的同时，不可忽略对图像视觉“角度”的研究，可以给版面带来崭新的视觉形象和张力的是( D)

A、平视 B、仰视 C、俯视 D、逆向的视觉角度

18、网页设计和平面设计有相似也有不同处，不同处是指( B)

A、组织结构 B、互动性 C、版式布局 D、空间表现

19、骨骼设计是( A)

A、理性的 B、感性的 C、自由的 D、无序的

20、单项视觉流程的方向关系表现为( C)

A、一种 B、二种 C、三种 D、四种

二、多项选择

21、面在版面设计中概念可以理解为( BDE)

A、版面 B、线的重复 C、表面 D、点的密集 E、点的放大

22、版面设计的基本元素是指( ABC)

A、点 B、线 C、面 D、黑 E、白

23、在版面设计中，常会采用图标设计的形式。图标设计的特点是( ACE)

A、图性感强 B、图性感弱 C、视觉度高 D、视觉度低 E、记忆性强

24、现代主义观念的设计，版面往往采取( ADE)

A、无主次 B、有主次 C、有中心 D、无中心 E、相互矛盾

25、线的“力场”是指一种( AC)

A、虚空间 B、实空间 C、心理空间 D、物理空间 E、非心理空间

三、名词解释

26、现代主义设计

答：20世纪二三十年代，在欧洲出现了三个重要的核心运动，即俄国的构成主义、荷兰的风格派、德国的包豪斯。这三个运动成为现代设计思想和形式的基础。

现代主义的特点是理性主义，“功能决定形式”不是一种风格，而是一种信仰。现代主义最鲜明的主张是：“少则多”。

27、文字的互动性

答：文字的互动性一般是指文字围绕图形的编排设计所产生的动感性，图文在组织结构产生的和谐性，版面的趣味性、情感性。

28、视觉度

答：视觉度是指文字和图版（插图、照片）在版面中产生的视觉强弱度。

29、图版率

答：图版率是指版面相对于文字、图（图片或照片）所占据的面积比。

30、出血版

答：出血版，即图形充满或超出版页，无边框的限制，有向外扩张和舒展之势。

四、简答题

31、简述风格派在平面设计上的特点。

答：荷兰风格派的思想和形式来源于蒙德里安得绘画探索。他以高度理性、数字化的逻辑思维来创造和谐的新秩序，画面上简洁到只有纵横分割的几何形方块和鲜明的色块。风格派在平面设计上的特点是：1.高度的理性化，完全采用简单的纵横编排方式，除纵横的几何分割块外，没有其他装饰。2.字体完全采用无装饰线体。3版面编排采用非对称方式，但追求对称的视觉平衡。4尝试在版面上进行直线的骨骼分割构成，形成了被称为“瑞士”骨骼编排法。

32、简述版面设计的组织原则。

答：1.主题突出，让观看着在享受美感的同时，接受作者想要传达的信息。

2.主题鲜明突出，简明易懂。

3.形式与内容统一，整体协调。

4.强化整体布局

32、简述使标题在版面中达到更悦目效果的三种方法。

答：为了使标题在版面中达到更悦目的效果，可采用：1.放大标题字体字号。2.加粗字体笔画。3.对标题进行设计编排。

34、简述版面设计中视觉流程的种类。

答：版面视觉流程中有：1.单项视觉流程；2.曲线视觉流程；3.重心视觉流程；4.反复视觉流程；5.导向的视觉流程；6.散构的视觉流程。

35、简述文字编排的四种形式及主要特点。

答：1.左右均齐：文行从左端到右端的长度均齐，字群端整、严谨、美观，是书籍报刊最常用的编排形式。

2.齐中:字群以中心为轴线。特点为视线更集中，中心更突出，有随意、轻松的感觉。

3.齐左或齐右：齐左或齐右的编排方式有松有紧，有虚有实，飘逸又节奏感。左或右取齐，行首自然产生一条垂直线，更加吸引视点相比之下，文字齐左更符合人们的阅读习惯，感到自然，而齐右在视觉上觉得不顺，但在版面视觉上显得新颖。

4.齐上：在古文或者一些竖排的文字中一般采用齐上的对其方式。

五、创意设计

35、以“云雾山”为品牌，设计生态茶叶广告招贴一幅。文字：湖北省茶叶公司

要求:（1）图面尺寸10cm\8cm

(2)图、文清晰，产品定位明确、版面构成合理、设计新颖有独创性。

（3）用文字标明主要用色。并附100字左右的文字说明。

转载请注明：片头模版 » 简述版式设计的组织原则(版式设计)