構圖是指作品中藝術形象的節后配置方法。是造型藝術表達作品思想內容，并獲得藝術感染力。在視覺藝術中常用的技巧和術語，特別是繪畫、平面設計與攝影中。在UI設計中，構圖的主要作用是：構建和諧穩定的頁面布局。
1.1 最平衡的構圖對稱構圖1:1
左右對稱上下對稱的構圖，一般不會有太大問題，因為人類對世間萬物的觀察來看，因為在生活中絕大多數的事物都是對稱的。
對稱平衡的形態在視覺上有自然、均勻、協調、整齊、穩重的美感，復合用戶的視覺習慣。
“對稱構圖”是將版面分割為兩部分，通過設計元素的布局讓畫面整體呈現出對稱的結構，具有很強的秩序感，給人安靜、嚴謹和正式的感受，呈現出整齊、平穩、經典的氣質。在得物（毒）中應用體現平臺的核心正品與品質。
1.2 設計中不平衡原因
視覺錯覺是指人們對外界事物的不正確的感覺或知覺。最常見的是視覺方面的錯覺。產生錯覺的原因，除來自客觀刺激本身特點的影響外，還有觀察者生理上和心理上的原因。其機制現在尚未完全弄清。
（1）繆勒—萊爾（Maller-Lyer Illusion）錯覺：1989年由繆勒一萊爾（F．Muller-lyer）設計，末端加上向外的兩條斜線的線段比末端加上向內的兩條斜線的線段看起來長一些，其實兩條線段等長。
（2）艾賓浩斯錯覺（Ebbinghause Illusion）：看起來左邊中間的圓比右邊中間的圓大—些，但實際上這兩個圓的大小相同。
（3）龐佐錯覺（Ponzo Illusion）：中間的四邊形是矩形，而不是頂邊比底邊寬的四角形。
（4）厄任斯坦錯覺（Ebrenstein Illusion）：中間矩形的四條邊看起來是彎曲的。
（5）黑靈錯覺（Hering Illusion）：中間兩條線是平行的，但看起來是彎的。
（6）菲克錯覺（Fick Illusion）：垂直線段與水平線段等長，但看起來垂直線段比水平線段長。
（7）馮特錯覺（Wundt Illusion）：中間兩條線是平行的，但看起來是彎的。
（8）波根多夫錯覺（Poggendoff Illusion）：被兩條平行線切斷的同一條直線，看上去不在一條直線上。
1.3 不平衡中的平衡構圖
在整體的頁面平衡的情況下，同樣還需要考慮視覺上的平衡。
任何東西都不能在頁面上隨意安放。每個元素都應該與頁面上的另一個元素有某總視覺聯系，而這個視覺聯系往往是看不到卻可以感受到平衡感，在平面海報中的平衡原則得到了最大的應用。
如上圖所示，三少爺的劍這個海報設計，將整個海報布局進行幾何化分析，地面為一個傾斜的平面，人物為一個垂直于地面的一個個體，人物上方為主體文案。幾何化后如同一個傾斜的斜面放置了一個傾斜的天平，最后一個“劍”字、與下方英文如在右傾斜天平上面的一個穩定的砝碼。然而整體還是不夠平衡，設計師通過燕十三的視覺視線、以及圍繞他的殺手用劍指向他的方向為力的方向將整個頁面進行平衡。通過用劍多少占比、字體大小等等的細節使得整個頁面達到最微妙的平衡點。這樣的設計之后達到一種平衡而有不平衡的微妙感覺，不平衡感體現整個頁面的“ 動 ”武俠之感油然而生；而平衡感表達了整個頁面的“ 靜 ”冷冷的肅殺感、高手的寂寞感油然而生。
讓設計中的視覺要素在畫面中頁面平衡。可以通過字重、顏色、形狀、線條、圖片占比等等，這樣可以增加整體頁面的平衡感。通過小米中的構圖可以看出上方所有圖片文字偏左，通過右方一個高亮的按鈕進行平衡感的設計；下方文字左邊文字較少用重的深色的字體，而右邊文字較多用輕且淺的文字這樣的設計達到整個頁面的平衡感。
2.1 黃金分割設計法
黃金分割是指將整體一分為二，較大部分與整體部分的比值等于較小部分與較大部分的比值，其比值約為0.618。這個比例被公認為是最能引起美感的比例，因此被稱為黃金分割。
設一條線段AB的長度為a，C點在靠近B點的黃金分割點上，且AC為b，則b與a的比叫作黃金比，黃金分割具有嚴格的比例性、藝術性、和諧性，蘊藏著豐富的美學價值，這一比值能夠引起人們的美感，被認為是建筑和藝術中最理想的比例。
畫家們發現，按0.618:1來設計的比例，畫出的畫最優美，在達·芬奇的作品《維特魯威人》、《蒙娜麗莎》、還有《最后的晚餐》中都運用了黃金分割。
UI頁面設計中的黃金分割比的應用有很多如上圖所示，頁面整體功能擺放位置，遵循黃金分割比的分配表達出來整體頁面更加的和諧聚焦。
2.2 九宮格設計法
九宮格構圖有的也稱井字構圖，實際上屬于黃金分割法的一種形式。就是在畫面上橫、豎各畫兩條與邊平行、等分的直線，將畫面分成9個相等的方塊，在中心塊上四個角的點，用任意一點的位置來安排主體位置，就是九宮格構圖。
實際上這四個點都符合“黃金分割定律”，是表現畫面美感和張力的絕佳位置。當然在實際運用中還應考慮平衡、對比等因素這種的構圖原則在海報以及攝影中有著極大的使用。
3.1 UI頁面布局的格式塔原理
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域?！靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。
創始人提出的5項基本原則：簡單、接近、相似、連續、封閉。
3.2 簡單幾何構圖法
簡單原則就是具有對稱、規則、平滑的簡單圖形特征的各部分趨于組成整體。我們的眼睛在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體。
簡單閱歷暗合構圖法則，例如常見的三角形構圖，均衡構圖，對陣構圖，向心式構圖，對角線、x型構圖等，其目的都是為了在復雜的信息環境中，構建更易懂的整體。
3.3相似構圖法
相似原則指的是在某一方面相似的各部分趨于組成整體，強調內容。而接近強調位置。人們通常把那些明顯具有共同特性（如形狀、運動、方向、顏色等）的事物組合在一起。
由上圖可見，當用戶看到這個這個頁面的時候，會自覺的把上面5個icon看作一個整體，因為他們的顏色形狀都是相同的；文字顏色與字體大小相同會被自然的看作成為一個相同的功能，如同樣的紅色都是價格，同樣的黑色都是商品名稱；相同的汽車圖片直接清洗的都可以歸類為同列表商品。
3.4接近構圖法
單個視覺元素之間無限接近，視覺上會形成一個較大的整體。距離近的單個視覺元素會溶為一個整體，而單個視覺元素的個性會減弱；
相關元素會盡量接近，不相關的盡量遠離。這種構圖它強調化繁為簡，去除一切與內容無關的裝飾性元素，突出內容本身，好讓重要的信息及功能更容易被關注，讓用戶增加更清晰和直觀地進行瀏覽。在這種排版設計中，您幾乎看不到區分內容的分割線，他通過大間距完成了視覺層次的劃分，留白是它們最大的武器。
彼此相關的項，歸組在一起。如果多個項相互之間存在很緊的親密性，他們就會成為一個視覺單位，而不是多個孤立的元素。這樣有助于組織信息，減少混亂，為讀者提供清晰的結構。
轉自：站酷
作者：大峰_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
”這個位置是不能直接切換看到組件的，只能在左側看到所有的組件名稱。再加上制作之前，也需要繪制出內容，所以我們需要在圖層處建立界面，繪制我們的內容。樣式也是如此，只能在“組件》
”看到所有的樣式名稱。
