“人家設(shè)計(jì)得真好！”可是好在什么地方呢，卻說不出來。這是阻擋你成為優(yōu)秀設(shè)計(jì)師的一大障礙。設(shè)計(jì)是我們的本行，不會(huì)用設(shè)計(jì)語言來解構(gòu)畫面，是說不過去的。

 

移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)發(fā)展到今天，有很多傳統(tǒng)的設(shè)計(jì)規(guī)律可以遵循，也提出了新的挑戰(zhàn)。因?yàn)槭殖衷O(shè)備屏幕較小，如何在有限的頁面內(nèi)呈現(xiàn)或引導(dǎo)有效信息，又不顯得雜亂臃腫，考驗(yàn)著設(shè)計(jì)師的能力。

 

為什么有的主題或App界面就那么舒服，那么清新，那么有情懷？里面蘊(yùn)含著哪些最基礎(chǔ)的版式設(shè)計(jì)理念，讓我們一塊梳理梳理，給初入UI設(shè)計(jì)的同學(xué)做個(gè)參考。

今天和大家講講構(gòu)圖。

 

構(gòu)圖版式三板斧

 

問題一：為什么要講版式設(shè)計(jì)？有必要么？

 

就以我剛?cè)胄?span lang="EN-US">UI設(shè)計(jì)失敗經(jīng)歷為鑒吧，那時(shí)候，一拿到需求就馬上開始設(shè)計(jì)，根本就不管什么版式，結(jié)果設(shè)計(jì)出來方案總是很別扭，顯得特別亂，往往被扣上“風(fēng)格不統(tǒng)一”“用戶體驗(yàn)差”的帽子。最開始我也是說服不了自己，覺得別人不理解自己的作品?，F(xiàn)在想想確實(shí)當(dāng)時(shí)存在問題。UI設(shè)計(jì)必然離不開設(shè)計(jì)師的天馬行空，但是它畢竟是要面向大眾市場(chǎng)，做成全世界只有自己能理解的孤品有什么意義呢，UI里的“用戶體驗(yàn)”又體現(xiàn)在什么地方呢？而這樣的設(shè)計(jì)又反過來阻礙了你的設(shè)計(jì)生涯，長(zhǎng)期的失敗設(shè)計(jì)很容易帶來挫敗感和麻木感。

尤其是作為初入行的UI設(shè)計(jì)師，更有必要學(xué)習(xí)一些版式設(shè)計(jì)思路。所謂創(chuàng)新，也仍然需要在了解已有的好設(shè)計(jì)基礎(chǔ)之上進(jìn)行，這里說這些不是讓你生搬硬套，是讓你站在前人的肩膀上看得更遠(yuǎn)。

 

問題二：為什么一開始就要構(gòu)圖呢？

 

設(shè)計(jì)和繪畫一樣，對(duì)需求和內(nèi)容進(jìn)行分析，采用適當(dāng)?shù)?b>構(gòu)圖可以化繁為簡(jiǎn)，提高設(shè)計(jì)效率。在嘗試比較多種構(gòu)圖后，設(shè)計(jì)師的思路會(huì)更加明確。期間耗費(fèi)的時(shí)間成本最低，可以反復(fù)進(jìn)行調(diào)整，直到找到最為合適的構(gòu)圖方式再往下進(jìn)行細(xì)化，添加元素，豐富畫面。

一個(gè)項(xiàng)目給設(shè)計(jì)師的時(shí)間是有限的，我們核心重點(diǎn)在于弄清楚產(chǎn)品的功能核心和賣點(diǎn)，把它們凸顯出來，最終讓用戶獲得更為舒服的體驗(yàn)。而雜亂無章的堆積會(huì)顯得非常的糟糕，甚至有時(shí)候，用戶會(huì)因?yàn)檎也坏阶约合胍臇|西而馬上流失，留下非常不好的印象。通過前期構(gòu)圖，可以節(jié)省時(shí)間，讓設(shè)計(jì)更有條理。

 

問題三：構(gòu)圖，會(huì)限制設(shè)計(jì)的創(chuàng)造力嗎？

 

不會(huì)的。設(shè)計(jì)的痛苦莫過于“沒有思路”和“漫無邊際”，這兩者都源于需求分析不夠，同時(shí)也與事先沒有做好構(gòu)圖工作有關(guān)。構(gòu)圖為設(shè)計(jì)提供了明確的嘗試方向，甚至通過不同的構(gòu)圖可以產(chǎn)生的交互效應(yīng)，達(dá)到意想不到的效果。限制創(chuàng)造力的問題不要擔(dān)心，因?yàn)闃?gòu)圖只是一個(gè)框架，同類型的構(gòu)圖完全可以做出不一樣的風(fēng)格。雖然設(shè)計(jì)構(gòu)圖結(jié)構(gòu)相同，但設(shè)計(jì)的表現(xiàn)方式和元素不同，仍然能夠塑造出不同的設(shè)計(jì)趕腳。靈活運(yùn)用構(gòu)圖和布局更能讓你把設(shè)計(jì)集中在元素和產(chǎn)品特色上。

 

廢話不多說，下面我將和大家介紹以下幾種在界面中常用的構(gòu)圖方法：

 

九宮格構(gòu)圖，圓心點(diǎn)放射形構(gòu)圖，三角形構(gòu)圖，SF字形構(gòu)圖。

 

1.九宮格網(wǎng)格構(gòu)圖

 

這種版式主要運(yùn)用在分類為主的一級(jí)頁面，起到功能分類的作用。

通常在界面設(shè)計(jì)中，我們會(huì)利用網(wǎng)格在界面進(jìn)行布局，根據(jù)水平方向和垂直方向劃分所構(gòu)成的輔助線，設(shè)計(jì)會(huì)進(jìn)行得非常順利。在界面設(shè)計(jì)中，九宮格這種類型的構(gòu)圖更為規(guī)范和常用，用戶在使用過程中非常的方便，應(yīng)用功能會(huì)顯得格外的明確和突出。

 

九宮格給用戶一目了然的感覺，操作便捷是這種構(gòu)圖方式最重要的優(yōu)勢(shì)。

 

九宮格看似簡(jiǎn)單隨意，用好了同樣能呈現(xiàn)出奇妙的效果。

 

靈活運(yùn)用九宮格輔助線區(qū)分出來的方塊。在有規(guī)律的設(shè)計(jì)方法中找突破，做設(shè)計(jì)一定要注重這一點(diǎn)！

 

在九個(gè)方塊分配的時(shí)候，不一定要一個(gè)格子對(duì)應(yīng)一個(gè)內(nèi)容，完全可以一對(duì)二，一對(duì)多，打破平均分割的框框，增加留白，調(diào)整頁面節(jié)奏，或突出功能點(diǎn)或廣告。各個(gè)方塊的不同組成方式，頁面的效果也會(huì)產(chǎn)生無數(shù)的變化。

 

我們可以看出這樣的版式，同樣可以使界面變得非常的靈活，內(nèi)容簡(jiǎn)單，信息明了。

 

2.圓心點(diǎn)放射形構(gòu)圖

 

生活中，最為常見的就是圓形了，眼睛是圓的，太陽是圓的，碗也是圓的，天也是圓的。在界面設(shè)計(jì)中圓的運(yùn)用可謂是點(diǎn)睛之筆。

 

圓是有圓心的，在界面中，往往通過構(gòu)造一個(gè)大圓來起到聚焦、凸顯作用。

 

放射形的構(gòu)圖，有凸顯位于中間內(nèi)容或功能點(diǎn)的作用。在強(qiáng)調(diào)核心功能點(diǎn)的時(shí)候，可以試著將功能以圓形的范式排布到中間，以當(dāng)前主要功能點(diǎn)為中心，將其他的按鈕或內(nèi)容放射編排起來。

 

我們將主要的功能設(shè)置在版式的中位置，就能引導(dǎo)用戶的視線聚集在想要突出的功能點(diǎn)上，就算視線本來不在中間的位置，也能引導(dǎo)用戶再次回到中心的聚集處。

 

在界面設(shè)計(jì)中，圓形的運(yùn)用能使界面顯得格外生動(dòng)，多數(shù)可操作的按鈕上或交互動(dòng)畫中都能見到圓形的身影。

 

因?yàn)閳A形具有靈動(dòng)、活躍、有趣、可愛、多變的特質(zhì)。在界面設(shè)計(jì)中善于將圓形的設(shè)計(jì)與動(dòng)畫結(jié)合，能讓整個(gè)軟件鮮活起來。

 

如再加上旋轉(zhuǎn)圍繞的動(dòng)畫，會(huì)讓整個(gè)軟件鮮活起來。界面中的圓形能集中用戶的視線，引導(dǎo)點(diǎn)擊操作，突出主要的功能點(diǎn)或數(shù)據(jù)，把產(chǎn)品核心展現(xiàn)出來。

 

圓心點(diǎn)放射形的設(shè)計(jì)，會(huì)使軟件感覺更為智能化，包容萬象。

 

如果要體現(xiàn)的功能點(diǎn)非常簡(jiǎn)單，只有幾個(gè)功能按鈕的時(shí)候，可嘗試這種大圓的展示設(shè)計(jì)，突出最重要的功能，然后羅列并排出其他的功能點(diǎn)。這種方式非常實(shí)用，就和畫重點(diǎn)一樣，圈出最重要的數(shù)據(jù)。善于運(yùn)用大圓構(gòu)圖，能撐起整個(gè)畫面，讓界面圓潤(rùn)而飽滿。

 

3.三角形構(gòu)圖

 

這類的構(gòu)圖方式主要運(yùn)用在文字與圖標(biāo)的版式中，能讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。

在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點(diǎn)有描述。

 

Gogobot登陸頁在設(shè)計(jì)中將logo作為了圖形的部分，輸入框就是產(chǎn)品的核心描述。

 

個(gè)人信息頁比較常用三角形構(gòu)圖。頭像明確了這個(gè)頁面的內(nèi)容，而下面的粉絲、喜歡等數(shù)據(jù)就是對(duì)本人的一個(gè)描述和介紹。

 

當(dāng)時(shí)在設(shè)計(jì)兒童衛(wèi)士寶貝信息設(shè)置頁時(shí)運(yùn)用到了三角構(gòu)圖與圓形構(gòu)圖的結(jié)合。將體重刻度做成可滑動(dòng)操作的方式，而卡通形象來突出設(shè)置的對(duì)象及這個(gè)頁面的功能。

 

4.視線在界面中的構(gòu)圖法則（SF字形構(gòu)圖）

 

在設(shè)計(jì)實(shí)踐中，如何引導(dǎo)讀者視線，對(duì)增強(qiáng)用戶體驗(yàn)有重要作用。好的構(gòu)圖視線法則，能夠獲得非常舒服的閱讀體驗(yàn)。而雜亂無章的構(gòu)圖，往往讓用戶厭倦。

 

在進(jìn)行界面設(shè)計(jì)的時(shí)候，對(duì)用戶的視覺移動(dòng)方向的預(yù)設(shè)是非常重要的。在界面中加入更為順暢的構(gòu)圖設(shè)計(jì)引導(dǎo)用戶視線移動(dòng)的元素，就能使用戶更多的觀察到產(chǎn)品的核心和產(chǎn)品的賣點(diǎn)。

 

視線流動(dòng)的軌跡多則是從上至下從左到右移動(dòng)，如果不能圍繞這樣的視線軌跡進(jìn)行排版，用戶在閱讀的時(shí)候會(huì)變得很吃力，找不到重點(diǎn)，使用戶產(chǎn)生反感。所以在界面設(shè)計(jì)中格外需要注意這個(gè)地方。現(xiàn)在界面一般是上下滑動(dòng)的，做好視線引導(dǎo)，可以大大減小用戶的負(fù)擔(dān)和閱讀疲勞。

界面中最基礎(chǔ)的是S形視線構(gòu)圖

 

在界面中怎么運(yùn)用S形視線構(gòu)圖呢？

 

S形視線大家都懂，關(guān)鍵是如何運(yùn)用好S形視線來抓住用戶眼球。

 

首先我們看一下視線的軌跡，在視線轉(zhuǎn)角處視覺軌跡最為密集，瀏覽更為集中在切換的地方，視線轉(zhuǎn)折的地方停留時(shí)間最長(zhǎng)。所以我們應(yīng)該把重要的想要突出的產(chǎn)品或功能放在這塊，這樣更容易讓用戶記住產(chǎn)品的賣點(diǎn)。

 

蘋果官網(wǎng)便采用了S形視線構(gòu)圖，引導(dǎo)閱讀，大家可以從蘋果官網(wǎng)好好體會(huì)一下。每個(gè)模塊的圖形進(jìn)行穿插，可以起到幫助折回視線的作用。產(chǎn)品圖更多的讓用戶去記憶，設(shè)計(jì)引導(dǎo)消費(fèi)！

此外，為了幫助視線的移動(dòng)方向,圖片的處理也非常的講究。

 

在iPod touch 的介紹中，第一張圖片展開的效果用到了三角形構(gòu)圖，強(qiáng)化了引導(dǎo)視線軌跡的指示性。同時(shí)多張圖片借助手機(jī)排列方向引導(dǎo)到視線軌跡，很好地實(shí)現(xiàn)了圖片—文字—圖片之間切換，將用戶帶入到整個(gè)產(chǎn)品畫面中。

 

第一屏手機(jī)展開方向與視線保持一致

 

為了使用戶閱讀更有推進(jìn)性，在圖片層次和空間上，我們也需要注重用戶的視線效果，將焦點(diǎn)調(diào)整到合理的視線位置上，產(chǎn)品正面方向?qū)?zhǔn)視線的來源點(diǎn)。通過這些調(diào)整不僅能使閱讀順暢，更加強(qiáng)了界面的平衡性。

 

相比于左右構(gòu)圖，S形構(gòu)圖在上下滾動(dòng)頁面上優(yōu)勢(shì)非常明顯。左右構(gòu)圖很容易給人疲勞感，而S形則將圖片和文字完美結(jié)合在一起，配以大量的留白，如同山間的溪流，給人輕快流暢的感覺。

 

下圖界面中，設(shè)計(jì)師很好的運(yùn)用到S視線形構(gòu)圖，增強(qiáng)了穿插感和靈動(dòng)性。人物的信息上下穿插布局，頭像則成為視線的轉(zhuǎn)折點(diǎn)，使這種雙列模式的排版更為有節(jié)奏。而具體到每一部分，頭像與內(nèi)容采用了三角形構(gòu)圖，內(nèi)容描述段落用到了文本居中式，畫面穩(wěn)定、和諧。

 

在引導(dǎo)頁中也會(huì)常常運(yùn)用到S形的構(gòu)圖。圖文進(jìn)行穿插布局，這樣的構(gòu)圖層次感分明，動(dòng)感十足！

 

由圖文版式布局，我們還可以演變出F字形構(gòu)圖，這種類型的構(gòu)圖大部分運(yùn)用在圖文左右搭配圖和banner中，使用F形構(gòu)圖能讓圖文搭配更有張力，更大氣，產(chǎn)品信息更為簡(jiǎn)單和明確。

 

在F形構(gòu)圖的規(guī)律中，主圖為F的主干，右側(cè)兩行（或兩部分）文字為輔，要注意合理分配圖片和文字的占比。

 

F形構(gòu)圖在banner中使用，能將標(biāo)題更為突出，主題更加吸引視線。

 

值得注意的是，要充分利用主圖的畫面的指向性。比如，主圖是人物，可將文字放置于其眼神、朝向、手勢(shì)等對(duì)應(yīng)的方向，加強(qiáng)視線引導(dǎo)。如果是產(chǎn)品圖，則可以通過產(chǎn)品的朝向來引導(dǎo)。這樣做，用戶能最快速的關(guān)注到文本信息，加強(qiáng)認(rèn)知度和購(gòu)買度。

 

小結(jié)：這一課沒有什么實(shí)戰(zhàn)技巧，更多的是引導(dǎo)大家學(xué)會(huì)欣賞，學(xué)會(huì)用基本的設(shè)計(jì)原理來描述自己看到的作品，而不是簡(jiǎn)單扔下一句“人家設(shè)計(jì)得真好”就完了，要明白其中道理，并努力為自己所用。構(gòu)圖先說到這里，當(dāng)然版式不僅僅指構(gòu)圖，還有很多東西可講，有時(shí)間我再整理給大家。