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