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所示。

知識鏈接

布局設計的五個基本表現手法

① 秩序法：均衡、對稱、擴大、縮小、平行位移等有秩序、有節奏的構圖方式，制造形式美。

② 對比法：色彩、形狀和大小等的對比，出現在視覺中會給人鮮明生動的視覺印象。

③ 元素法：強化點、線、面等構圖元素的使用，促使構圖元素可以創造出視覺交響，將多樣性寓于個性之中。

④ 矛盾空間法：顛倒、錯位、鏡像，在空間上構成特殊性，產生一種無限可能、無限發展、無限趣味的空間感。

⑤ 共形法：巧妙嵌合邊緣形態，重疊共用、互生互補、變幻相生，給人新穎奇特、別開生面之感。