構(gòu)圖是指作品中藝術(shù)形象的節(jié)后配置方法。是造型藝術(shù)表達(dá)作品思想內(nèi)容，并獲得藝術(shù)感染力。在視覺藝術(shù)中常用的技巧和術(shù)語，特別是繪畫、平面設(shè)計(jì)與攝影中。在UI設(shè)計(jì)中，構(gòu)圖的主要作用是：構(gòu)建和諧穩(wěn)定的頁面布局。

1.1 最平衡的構(gòu)圖對(duì)稱構(gòu)圖1:1 

左右對(duì)稱上下對(duì)稱的構(gòu)圖，一般不會(huì)有太大問題，因?yàn)槿祟悓?duì)世間萬物的觀察來看，因?yàn)樵谏钪薪^大多數(shù)的事物都是對(duì)稱的。

對(duì)稱平衡的形態(tài)在視覺上有自然、均勻、協(xié)調(diào)、整齊、穩(wěn)重的美感，復(fù)合用戶的視覺習(xí)慣。

“對(duì)稱構(gòu)圖”是將版面分割為兩部分，通過設(shè)計(jì)元素的布局讓畫面整體呈現(xiàn)出對(duì)稱的結(jié)構(gòu)，具有很強(qiáng)的秩序感，給人安靜、嚴(yán)謹(jǐn)和正式的感受，呈現(xiàn)出整齊、平穩(wěn)、經(jīng)典的氣質(zhì)。在得物（毒）中應(yīng)用體現(xiàn)平臺(tái)的核心正品與品質(zhì)。

1.2 設(shè)計(jì)中不平衡原因

視覺錯(cuò)覺是指人們對(duì)外界事物的不正確的感覺或知覺。最常見的是視覺方面的錯(cuò)覺。產(chǎn)生錯(cuò)覺的原因，除來自客觀刺激本身特點(diǎn)的影響外，還有觀察者生理上和心理上的原因。其機(jī)制現(xiàn)在尚未完全弄清。

（1）繆勒—萊爾（Maller-Lyer Illusion）錯(cuò)覺：1989年由繆勒一萊爾（F．Muller-lyer）設(shè)計(jì)，末端加上向外的兩條斜線的線段比末端加上向內(nèi)的兩條斜線的線段看起來長(zhǎng)一些，其實(shí)兩條線段等長(zhǎng)。

（2）艾賓浩斯錯(cuò)覺（Ebbinghause Illusion）：看起來左邊中間的圓比右邊中間的圓大—些，但實(shí)際上這兩個(gè)圓的大小相同。

（3）龐佐錯(cuò)覺（Ponzo Illusion）：中間的四邊形是矩形，而不是頂邊比底邊寬的四角形。

（4）厄任斯坦錯(cuò)覺（Ebrenstein Illusion）：中間矩形的四條邊看起來是彎曲的。

（5）黑靈錯(cuò)覺（Hering Illusion）：中間兩條線是平行的，但看起來是彎的。

（6）菲克錯(cuò)覺（Fick Illusion）：垂直線段與水平線段等長(zhǎng)，但看起來垂直線段比水平線段長(zhǎng)。

（7）馮特錯(cuò)覺（Wundt Illusion）：中間兩條線是平行的，但看起來是彎的。

（8）波根多夫錯(cuò)覺（Poggendoff Illusion）：被兩條平行線切斷的同一條直線，看上去不在一條直線上。

1.3 不平衡中的平衡構(gòu)圖

在整體的頁面平衡的情況下，同樣還需要考慮視覺上的平衡。

任何東西都不能在頁面上隨意安放。每個(gè)元素都應(yīng)該與頁面上的另一個(gè)元素有某總視覺聯(lián)系，而這個(gè)視覺聯(lián)系往往是看不到卻可以感受到平衡感，在平面海報(bào)中的平衡原則得到了最大的應(yīng)用。

如上圖所示，三少爺?shù)膭@個(gè)海報(bào)設(shè)計(jì)，將整個(gè)海報(bào)布局進(jìn)行幾何化分析，地面為一個(gè)傾斜的平面，人物為一個(gè)垂直于地面的一個(gè)個(gè)體，人物上方為主體文案。幾何化后如同一個(gè)傾斜的斜面放置了一個(gè)傾斜的天平，最后一個(gè)“劍”字、與下方英文如在右傾斜天平上面的一個(gè)穩(wěn)定的砝碼。然而整體還是不夠平衡，設(shè)計(jì)師通過燕十三的視覺視線、以及圍繞他的殺手用劍指向他的方向?yàn)榱Φ姆较驅(qū)⒄麄€(gè)頁面進(jìn)行平衡。通過用劍多少占比、字體大小等等的細(xì)節(jié)使得整個(gè)頁面達(dá)到最微妙的平衡點(diǎn)。這樣的設(shè)計(jì)之后達(dá)到一種平衡而有不平衡的微妙感覺，不平衡感體現(xiàn)整個(gè)頁面的“ 動(dòng) ”武俠之感油然而生；而平衡感表達(dá)了整個(gè)頁面的“ 靜 ”冷冷的肅殺感、高手的寂寞感油然而生。

讓設(shè)計(jì)中的視覺要素在畫面中頁面平衡。可以通過字重、顏色、形狀、線條、圖片占比等等，這樣可以增加整體頁面的平衡感。通過小米中的構(gòu)圖可以看出上方所有圖片文字偏左，通過右方一個(gè)高亮的按鈕進(jìn)行平衡感的設(shè)計(jì)；下方文字左邊文字較少用重的深色的字體，而右邊文字較多用輕且淺的文字這樣的設(shè)計(jì)達(dá)到整個(gè)頁面的平衡感。

2.1 黃金分割設(shè)計(jì)法 

黃金分割是指將整體一分為二，較大部分與整體部分的比值等于較小部分與較大部分的比值，其比值約為0.618。這個(gè)比例被公認(rèn)為是最能引起美感的比例，因此被稱為黃金分割。

設(shè)一條線段AB的長(zhǎng)度為a，C點(diǎn)在靠近B點(diǎn)的黃金分割點(diǎn)上，且AC為b，則b與a的比叫作黃金比，黃金分割具有嚴(yán)格的比例性、藝術(shù)性、和諧性，蘊(yùn)藏著豐富的美學(xué)價(jià)值，這一比值能夠引起人們的美感，被認(rèn)為是建筑和藝術(shù)中最理想的比例。 

畫家們發(fā)現(xiàn)，按0.618:1來設(shè)計(jì)的比例，畫出的畫最優(yōu)美，在達(dá)·芬奇的作品《維特魯威人》、《蒙娜麗莎》、還有《最后的晚餐》中都運(yùn)用了黃金分割。

UI頁面設(shè)計(jì)中的黃金分割比的應(yīng)用有很多如上圖所示，頁面整體功能擺放位置，遵循黃金分割比的分配表達(dá)出來整體頁面更加的和諧聚焦。

2.2  九宮格設(shè)計(jì)法

九宮格構(gòu)圖有的也稱井字構(gòu)圖，實(shí)際上屬于黃金分割法的一種形式。就是在畫面上橫、豎各畫兩條與邊平行、等分的直線，將畫面分成9個(gè)相等的方塊，在中心塊上四個(gè)角的點(diǎn)，用任意一點(diǎn)的位置來安排主體位置，就是九宮格構(gòu)圖。

實(shí)際上這四個(gè)點(diǎn)都符合“黃金分割定律”，是表現(xiàn)畫面美感和張力的絕佳位置。當(dāng)然在實(shí)際運(yùn)用中還應(yīng)考慮平衡、對(duì)比等因素這種的構(gòu)圖原則在海報(bào)以及攝影中有著極大的使用。

3.1 UI頁面布局的格式塔原理 

格式塔心理學(xué)誕生于1912年，是由德國(guó)心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對(duì)它們編訂了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動(dòng)對(duì)視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域?！靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。

創(chuàng)始人提出的5項(xiàng)基本原則：簡(jiǎn)單、接近、相似、連續(xù)、封閉。

3.2 簡(jiǎn)單幾何構(gòu)圖法

簡(jiǎn)單原則就是具有對(duì)稱、規(guī)則、平滑的簡(jiǎn)單圖形特征的各部分趨于組成整體。我們的眼睛在觀看時(shí)，眼腦并不是在一開始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分，而是將各個(gè)部分組合起來，使之成為一個(gè)更易于理解的統(tǒng)一體。

簡(jiǎn)單閱歷暗合構(gòu)圖法則，例如常見的三角形構(gòu)圖，均衡構(gòu)圖，對(duì)陣構(gòu)圖，向心式構(gòu)圖，對(duì)角線、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)、方向、顏色等）的事物組合在一起。

由上圖可見，當(dāng)用戶看到這個(gè)這個(gè)頁面的時(shí)候，會(huì)自覺的把上面5個(gè)icon看作一個(gè)整體，因?yàn)樗麄兊念伾螤疃际窍嗤模晃淖诸伾c字體大小相同會(huì)被自然的看作成為一個(gè)相同的功能，如同樣的紅色都是價(jià)格，同樣的黑色都是商品名稱；相同的汽車圖片直接清洗的都可以歸類為同列表商品。

3.4接近構(gòu)圖法

單個(gè)視覺元素之間無限接近，視覺上會(huì)形成一個(gè)較大的整體。距離近的單個(gè)視覺元素會(huì)溶為一個(gè)整體，而單個(gè)視覺元素的個(gè)性會(huì)減弱；

相關(guān)元素會(huì)盡量接近，不相關(guān)的盡量遠(yuǎn)離。這種構(gòu)圖它強(qiáng)調(diào)化繁為簡(jiǎn)，去除一切與內(nèi)容無關(guān)的裝飾性元素，突出內(nèi)容本身，好讓重要的信息及功能更容易被關(guān)注，讓用戶增加更清晰和直觀地進(jìn)行瀏覽。在這種排版設(shè)計(jì)中，您幾乎看不到區(qū)分內(nèi)容的分割線，他通過大間距完成了視覺層次的劃分，留白是它們最大的武器。

彼此相關(guān)的項(xiàng)，歸組在一起。如果多個(gè)項(xiàng)相互之間存在很緊的親密性，他們就會(huì)成為一個(gè)視覺單位，而不是多個(gè)孤立的元素。這樣有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。

轉(zhuǎn)自：站酷

作者：大峰_Design 

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)