1.6　UI界面设计中的布局

在设计制作一个UI界面的过程中，除了要考虑图片、文字内容的放置及其颜色的搭配是否合理，还应该合理规划页面布局，让界面空间得到充分使用，最终使UI界面的显示效果达到最优或趋于理想化。

1.6.1　构图的基本概念

构图就是在有限的画面中，将各种元素进行合理布局和安排，使图形和文字在画面中产生最优的视觉效果。构图是整个UI界面的骨架，它可以决定界面是否准确表达了主题，并吸引用户注意。

1.6.2　构图的法则

UI界面设计中有四大构图法则，这些法则非常适用于平面设计。这是大家学习UI界面设计必备的基本理论知识之一。

●均衡

各元素在布局上保持视觉重量的平衡和匀称，从而使视觉界面具有平衡感和稳定性。对称是均衡的一种极端情况，平衡感和稳定性很强，但局限性较大，缺乏变化，如图1-47所示。

●对比

在视觉界面中可以通过大小对比、字体大小对比、粗细对比、疏密对比、曲直对比等形式来突出和强化主题，引起用户关注，如图1-48所示。

●律动

律动，可以理解为有节奏、规律、跳跃、动感等元素，起到引导用户的视觉轨迹的作用。研究表明，画面右上角最能吸引人的关注，而左下角对人的吸引力最小。律动能给人视觉上带来富有规律的节奏效果，进而吸引用户了解UI界面的内容，如图1-49所示。

●视点

视点，即视觉的中心点或者视觉的焦点，也是视觉传达要素的核心点。就像我们在拍照时，首先选定一个焦点一样。

构图的视觉中心一定是放置界面中最重要的内容，也是必须让用户了解的内容。视觉中心常常在画面中5/8的地方。以此为基础进行视点构图，既能突出视觉主题，又能将用户的注意力集中到主要内容上，如图1-50所示。

知识链接

布局设计的五个基本表现手法

① 秩序法：均衡、对称、扩大、缩小、平行位移等有秩序、有节奏的构图方式，制造形式美。

② 对比法：色彩、形状和大小等的对比，出现在视觉中会给人鲜明生动的视觉印象。

③ 元素法：强化点、线、面等构图元素的使用，促使构图元素可以创造出视觉交响，将多样性寓于个性之中。

④ 矛盾空间法：颠倒、错位、镜像，在空间上构成特殊性，产生一种无限可能、无限发展、无限趣味的空间感。

⑤ 共形法：巧妙嵌合边缘形态，重叠共用、互生互补、变幻相生，给人新颖奇特、别开生面之感。