击蓝字，关注我们

UI编排中的布局与构图

UI 编排中的点、线、面

UI 编排是一种造型概念，它的含义是将不同形态的几个以上的单元重新组合成一个新的单元，并赋予其视觉化的观念。点、线、面是组成视觉空间的基本元素，也是 UI 编排设计中的主要视觉构成语言。

1 UI 编排中的点 

点元素的作用：丰富画面，提升氛围。点元素通过形态的不同组合，给人以不同的视觉感 受。点元素不仅可以是几何形态的基本形状，还可以是标志（Logo）或实物等元素。

2UI编排中的线

线元素的作用:在界面构成中，点的视线轨迹就是线，在整个画面中起到串联的作用。如果页面中元素的样式有很多种，可以利用线的串联功能来加强画面的关联感和次序感，从而增强页面的阅读性。

3.Ui编排中的面

面元素的作用:面的基本形状大致为圆形、方形和三角形三种，不同的形状可以体现不同的气氛。在布局中，块面之间的层次关系能很好地理标题与文案之间的前后关系。面元素在UI编排中可以起到突出重点和区分层级关系的作用。

UI 编排中的视觉规律

对于一个 UI 来说，想再利用人的视觉生理和视觉心理吸引人的目光，实现信息的有效传达，就必须把握视觉规律。研究视觉流向可以使观众的视线随着设计中视觉元素的安排来移动，迅速、流畅地接收信息，从中领悟到信息的思想内涵和表达方式。

1 视觉中心

视觉中心中的“中心”，不是几何学中的“点与四周距离相等的位置”，它在平面设计中具

有“视觉焦点”的意义。

视觉中心是人们所关注画面的重点位置，其一般通过特殊性来区别于其他视觉元素，起到

吸引、引导视线和传达信息的作用。如跳跃的色彩、夸张的图形以及文字的字体、大小、位置

的独特性等都能起到吸引视线的作用。心理学研究表明，当视觉中心位于画面左上部和中上部

的位置时最能引起人们的注意，所以要传达的信息重点应优先选在这里。在人们的视觉认知

中，图比文字更具有可视性与直观性，所以设计人员在大多数情况下，会把图作为版面的视觉

中心。

2 视觉重心 

人们在看一个界面的时候，视线常常迅速由左上角到左下角接触画面，然后通过中心部分 从右上角经右下角，最后回到画面最吸引视线的中心点停留下来，这个中心点就是视觉重心。 视觉重心有稳定版式的效果，给人以可信赖的心理感受。 

3 视域 

在 UI 设计中，存在着最佳的视觉区域。根据人们的阅读习惯可知，当物象被放置在不同的 位置，会使画面呈现出不同的视觉印象。只有明确画面主题信息诉求的主次关系，在视域内适 当增添视觉元素，才能带给观众视觉上的舒适感。如信息内容超出视域宽度，眼睛就必须不停 地移动才能延续阅读。字行过长不仅容易造成眼睛的疲乏，更影响阅读速度。 在同一水平线上，左边的事物总是比右边的事物先进入视线；视图的上部与下部比较起来， 上部给人以轻浮、虚无的感觉，下部则给人以踏实、稳定的感觉。

4 视觉流程 

视觉流程是指平面上各种不同元素的主次、先后关系，是从设计上处理起始点和过程的阅 读节奏，是人的视觉在接收外界信息时的空间流动程序。 界面中存在着大量的信息，人们不能同时接收所有的信息，需要按照一定的视线流动顺序 获取，因此这些信息需要一个最佳的组合与合理的编排。 界面版式设计的视觉流程也被称为“空间的运动”，就是视线会随各个视觉元素在空间内沿 一定的轨迹运动。这种流动的线条并没有实实在在地出现，而是引导人的视线，依照设计师的 意图来获取相关信息的“虚拟的线”

5 版面率 

版面率是指界面上文字与图所占面积与整个界面的面积之比。由于版面率设定不同，界 面的效果也会给读者带来不同的印象。 在实际应用中，版面率应与整个界面的风格对应起来进行统筹安排。版面率低意味着留 白多，图文信息量少，会给人简洁大方、格调高雅的恬静感觉，通常用于感性的界面编排。 版面率适中的界面给人随和、自由、清新之感，是常用的设计表现手法之一。版面率高即文 字与图所占版面的面积较大，内容丰富实用，也比较大众化，版面中留白相对较少。此类型 版面安排如果把握不好，极易显得整个版面过于拥挤和无序。

UI 编排设计的方式

为了加深视觉记忆，界面的编排设计应遵循一定的形式法则，例如合理地运用画面元素，有意识地分割界面，创造整体氛围，突出表现主题等。

界面编排的方式种类繁多，基本上有标准式、定位式、斜置式、中轴式、文字式、图片式、水平式、指示式八种方式。

UI 编排中的黄金比例 

运用黄金比例可以建立协调、自然的画面结构和富有美感的视觉效果，运用黄金比例的严 密计算打造出来的界面具有一种平衡感和生命力。许多人对黄金比例并不陌生，很小的时候在 数学课上就听闻过它的名字，但对于如何将其应用在 UI 设计中却一无所知，总觉得它神秘又深 奥。通过研究大量的优秀案例发现，利用黄金比例原理的设计非常多。了解黄金比例在 UI 设计 中的应用，可以开阔我们的设计思路。

网格化构图 

三角形构图  

三角形构图主要用于文字与图标的设计中，能让界面保持平衡稳定。从上至下的三角形构图，能把信息层级罗列得更为规整和明确。在界面设计中，三角形构图大部分都是图在上，字在下，这样阅读起来更为舒适。

在个人中心页的设计中，三角形构图也是比较常用的。上面的头像明确了这个界面的内容，而下面的数据和选项则是对该用户的一个描述及介绍

在设计来电界面的时候，也运用了三角形构图，上面的头像作为三角形的顶点，下面的接听和拒接按钮组成了三角形的底边，整个界面显得均衡而稳定

对角线构图   

对角线构图是指界面中的主要元素分别位于版面的左上角与右下角（或者右上角与左下 角）主要视线处于左上角与右下角（或者右上角与左下角）之间，具有不稳定感，视觉冲击力 较强。形成了在变化中相互呼应的视觉效果。 

放射形构图   

放射形构图具有突显中央内容的作用。在强调核心功能的时候，可以将功能以圆形的方式编排到中间，以当前功能为中心，然后将其他内容用放射的形式编排起来。将主要功能设置在界面的中心位置，能更好地聚焦用户的视线。

圆形具有灵动、活跃、有趣、多变的视觉特征，它的运用能让界面显得格外生动，圆形也是界面设计中最常见的元素之一。

在 UI 设计中，巧妙地将圆形的设计与动效结合，能让整个界面鲜活起来。

S 形构图  

在进行 UI 设计时，最能让界面有节奏感的构图就是 S 形构图。一个有节奏感的界面能使 用户获得舒适的阅读体验，节奏感弱的界面往往让用户感到厌烦。在进行界面设计时，有效地 安排界面的节奏感是非常重要的。在界面中，S 形构图最能抓住用户的视线，是引导读者视线 最基础的构图是 S 形构图。

对齐元素   

对齐是界面版式设计的基础，对齐并不是上下、左右对齐这么简单。对齐原则是指：“任何元素都不能在页面上随意安放，每一项都应当与页面上的某个内容存在某种视觉联系”。不管什么样的环境，只要有各种各样的事物存在，它就需要一个秩序，人类的环境如此，设计元素的环境也如此。

设计元素参差不齐，界面就会显得杂乱无章，没有美感，影响阅读；而合理的对齐可以带

来秩序感，看起来更加严谨、专业，信息传达效果更好。在界面编排中，常见的对齐方式有齐左、居中和齐行三种对齐方式。

倒“L”形构图  

各类网页都具备能让用户快速找到内容的导航栏。导航栏大多采用垂直或水平方式，位置则是放在网页上方或是左右两侧，使网页看起来分成 3 个区块。最标准的版式是把网页上方和左侧设为导航栏区，这样规划起来像是倒过来的“L”，因此称为倒 L 形构图。

由于浏览器窗口以左上角为基准点来缩放窗口大小，因此网页的下方和右侧有被窗口遮住的可能性。也就是说，重要、使用频率高、想引人注意的信息必须放在倒 L 形区域中。

F 形浏览模式  

根据网页可用性专家 Jakob Nielsen 博士的调查，用户在浏览网页时，视线以英文字母“F”般的轨迹，一边移动一边浏览信息。他发现当用户以水平方向看完首页或内文上方的区域后，

会把视线向下移，再以水平方式浏览（这次视线水平距离移动较短）, 最后视线会直接向下方移动。由于视线的移动轨迹如英文字母“F”，因此称其为 F 形浏览模式。

这项研究表明，很多用户不是以之形的方式来回浏览并完成所有内容的观看的，而是看完网页上方之后，把剩余的内容大致浏览一下。

END