如何搞定界面設計之構圖篇(轉)

人家設計得真好！」但是好在什麼地方呢，卻說不出來。這是阻擋你成爲優秀設計師的一大障礙。設計是咱們的本行，不會用設計語言來解構畫面，是說不過去的。

移動互聯網設計發展到今天，有不少傳統的設計規律能夠遵循，也提出了新的挑戰。由於手持設備屏幕較小，如何在有限的頁面內呈現或引導有效信息，又不顯得雜亂臃腫，考驗着設計師的能力。

爲何有的主題或App界面就那麼舒服，那麼清新，那麼有情懷？裏面蘊含着哪些最基礎的版式設計理念，讓咱們一塊梳理梳理，給初入ui設計的同窗作個參考。

想成爲一個合格的ui設計師，光會畫圖標可不行，今天360的@Micu設計小哥從頭幫你補上版式這一課，分享他的界面構圖三板斧，此外，你還能學會如何用設計語言解構畫面，這但是設計師的必備職業能力呦！

今天和你們講講構圖

 

構圖版式三板斧

 

問題一：爲何要講版式設計？有必要麼？

就以我剛入行UI設計失敗經歷爲鑑吧，那時候，一拿到需求就立刻開始設計，根本就無論什麼版式，結果設計出來方案老是很彆扭，顯得特別亂，每每被扣上「風格不統一」「用戶體驗差」的帽子。最開始我也是說服不了本身，以爲別人不理解本身的做品。如今想一想確實當時存在問題。UI設計必然離不開設計師的天馬行空，可是它畢竟是要面向大衆市場，作成全世界只有本身能理解的孤品有什麼意義呢，UI裏的「用戶體驗」又體如今什麼地方呢？而這樣的設計又反過來阻礙了你的設計生涯，長期的失敗設計很容易帶來挫敗感和麻木感。

尤爲是做爲初入行的UI設計師，更有必要學習一些版式設計思路。所謂創新，也仍然須要在瞭解已有的好設計基礎之上進行，這裏說這些不是讓你生搬硬套，是讓你站在前人的肩膀上看得更遠。

 

問題二：爲何一開始就要構圖呢？

設計和繪畫同樣，對需求和內容進行分析，採用適當的構圖能夠化繁爲簡，提升設計效率。在嘗試比較多種構圖後，設計師的思路會更加明確。期間耗費的時間成本最低，能夠反覆進行調整，直到找到最爲合適的構圖方式再往下進行細化，添加元素，豐富畫面。

一個項目給設計師的時間是有限的，咱們核心重點在於弄清楚產品的功能核心和賣點，把它們凸顯出來，最終讓用戶得到更爲舒服的體驗。而雜亂無章的堆積會顯得很是的糟糕，甚至有時候，用戶會由於找不到本身想要的東西而立刻流失，留下很是很差的印象。經過前期構圖，能夠節省時間，讓設計更有條理。

 

問題三：構圖，會限制設計的創造力嗎？

不會的。

設計的痛苦莫過於「沒有思路」和「漫無邊際」，這二者都源於需求分析不夠，同時也與事先沒有作好構圖工做有關。構圖爲設計提供了明確的嘗試方向，甚至經過不一樣的構圖能夠產生的交互效應，達到意想不到的效果。限制創造力的問題不要擔憂，由於構圖只是一個框架，同類型的構圖徹底能夠作出不同的風格。雖然設計構圖結構相同，但設計的表現方式和元素不一樣，仍然可以塑造出不一樣的設計趕腳。靈活運用構圖和佈局更能讓你把設計集中在元素和產品特點上。

 

廢話很少說，下面我將和你們介紹如下幾種在界面中經常使用的構圖方法：

1. 九宮格構圖

2. 圓心點放射形構圖

3. 三角形構圖

4. SF字形構圖

 

1、九宮格網格構圖

這種版式主要運用在分類爲主的一級頁面，起到功能分類的做用。

一般在界面設計中，咱們會利用網格在界面進行佈局，根據水平方向和垂直方向劃分所構成的輔助線，設計會進行得很是順利。在界面設計中，九宮格這種類型的構圖更爲規範和經常使用，用戶在使用過程當中很是的方便，應用功能會顯得格外的明確和突出。

九宮格給用戶一目瞭然的感受，操做便捷是這種構圖方式最重要的優點。

 

九宮格看似簡單隨意，用好了一樣能呈現出奇妙的效果。

靈活運用九宮格輔助線區分出來的方塊。在有規律的設計方法中找突破，作設計必定要注重這一點！

在九個方塊分配的時候，不必定要一個格子對應一個內容，徹底能夠一對二，一對多，打破平均分割的框框，增長留白，調整頁面節奏，或突出功能點或廣告。各個方塊的不一樣組成方式，頁面的效果也會產生無數的變化。

咱們能夠看出這樣的版式，一樣可使界面變得很是的靈活，內容簡單，信息明瞭。

 

2、圓心點放射形構圖

生活中，最爲常見的就是圓形了，眼睛是圓的，太陽是圓的，碗也是圓的，天也是圓的。在界面設計中圓的運用可謂是點睛之筆。

圓是有圓心的，在界面中，每每經過構造一個大圓來起到聚焦、凸顯做用。

放射形的構圖，有凸顯位於中間內容或功能點的做用。在強調核心功能點的時候，能夠試着將功能以圓形的範式排布到中間，以當前主要功能點爲中心，將其餘的按鈕或內容放射編排起來。

咱們將主要的功能設置在版式的中位置，就能引導用戶的視線彙集在想要突出的功能點上，就算視線原本不在中間的位置，也能引導用戶再次回到中心的彙集處。

在界面設計中，圓形的運用能使界面顯得格外生動，多數可操做的按鈕上或交互動畫中都能見到圓形的身影。

由於圓形具備靈動、活躍、有趣、可愛、多變的特質。在界面設計中善於將圓形的設計與動畫結合，能讓整個軟件鮮活起來。

如再加上旋轉圍繞的動畫，會讓整個軟件鮮活起來。界面中的圓形能集中用戶的視線，引導點擊操做，突出主要的功能點或數據，把產品核心展示出來。

圓心點放射形的設計，會使軟件感受更爲智能化，包容萬象。

若是要體現的功能點很是簡單，只有幾個功能按鈕的時候，可嘗試這種大圓的展現設計，突出最重要的功能，而後羅列並排出其餘的功能點。這種方式很是實用，就和畫重點同樣，圈出最重要的數據。善於運用大圓構圖，能撐起整個畫面，讓界面圓潤而飽滿。

 

3、三角形構圖

這類的構圖方式主要運用在文字與圖標的版式中，能讓界面保持平衡穩定。從上至下式的三角形構圖，能把信息層級羅列得更爲規整和明確。

在界面中三角形構圖大部分都是圖在上，字在下，閱讀更爲舒服，有重點有描述。

Gogobot登錄頁在設計中將logo做爲了圖形的部分，輸入框就是產品的核心描述。

我的信息頁比較經常使用三角形構圖。頭像明確了這個頁面的內容，而下面的粉絲、喜歡等數據就是對本人的一個描述和介紹。

當時在設計兒童衛士寶貝信息設置頁時運用到了三角構圖與圓形構圖的結合。將體重刻度作成可滑動操做的方式，而卡通形象來突出設置的對象及這個頁面的功能。

 

4、視線在界面中的構圖法則（SF字形構圖）

在設計實踐中，如何引導讀者視線，對加強用戶體驗有重要做用。好的構圖視線法則，可以得到很是舒服的閱讀體驗。而雜亂無章的構圖，每每讓用戶厭倦。

在進行界面設計的時候，對用戶的視覺移動方向的預設是很是重要的。在界面中加入更爲順暢的構圖設計引導用戶視線移動的元素，就能使用戶更多的觀察到產品的核心和產品的賣點。

視線流動的軌跡多則是從上至下從左到右移動，若是不能圍繞這樣的視線軌跡進行排版，用戶在閱讀的時候會變得很吃力，找不到重點，使用戶產生反感。因此在界面設計中格外須要注意這個地方。如今界面通常是上下滑動的，作好視線引導，能夠大大減少用戶的負擔和閱讀疲勞。

 

界面中最基礎的是S形視線構圖

在界面中怎麼運用S形視線構圖呢？

S形視線你們都懂，關鍵是如何運用好S形視線來抓住用戶眼球。

首先咱們看一下視線的軌跡，在視線轉角處視覺軌跡最爲密集，瀏覽更爲集中在切換的地方，視線轉折的地方停留時間最長。因此咱們應該把重要的想要突出的產品或功能放在這塊，這樣更容易讓用戶記住產品的賣點。

蘋果官網便採用了S形視線構圖，引導閱讀，你們能夠從蘋果官網好好體會一下。每一個模塊的圖形進行穿插，能夠起到幫助折回視線的做用。產品圖更多的讓用戶去記憶，設計引導消費！

此外，爲了幫助視線的移動方向,圖片的處理也很是的講究。

在iPod touch 的介紹中，第一張圖片展開的效果用到了三角形構圖，強化了引導視線軌跡的指示性。同時多張圖片藉助手機排列方向引導到視線軌跡，很好地實現了圖片—文字—圖片之間切換，將用戶帶入到整個產品畫面中。

第一屏手機展開方向與視線保持一致

爲了使用戶閱讀更有推動性，在圖片層次和空間上，咱們也須要注重用戶的視線效果，將焦點調整到合理的視線位置上，產品正面方向對準視線的來源點。經過這些調整不只能使閱讀順暢，更增強了界面的平衡性。

相比於左右構圖，S形構圖在上下滾動頁面上優點很是明顯。左右構圖很容易給人疲勞感，而S形則將圖片和文字完美結合在一塊兒，配以大量的留白，如同山間的溪流，給人輕快流暢的感受。

 

下圖界面中，設計師很好的運用到S視線形構圖，加強了穿插感和靈動性。人物的信息上下穿插佈局，頭像則成爲視線的轉折點，使這種雙列模式的排版更爲有節奏。而具體到每一部分，頭像與內容採用了三角形構圖，內容描述段落用到了文本居中式，畫面穩定、和諧。

在引導頁中也會經常運用到S形的構圖。圖文進行穿插佈局，這樣的構圖層次感分明，動感十足！

由圖文版式佈局，咱們還能夠演變出F字形構圖，這種類型的構圖大部分運用在圖文左右搭配圖和banner中，使用F形構圖能讓圖文搭配更有張力，更大氣，產品信息更爲簡單和明確。

在F形構圖的規律中，主圖爲F的主幹，右側兩行（或兩部分）文字爲輔，要注意合理分配圖片和文字的佔比。

F形構圖在banner中使用，能將標題更爲突出，主題更加吸引視線。

值得注意的是，要充分利用主圖的畫面的指向性。好比，主圖是人物，可將文字放置於其眼神、朝向、手勢等對應的方向，增強視線引導。若是是產品圖，則能夠經過產品的朝向來引導。這樣作，用戶能最快速的關注到文本信息，增強認知度和購買度。

 

小結：

這一課沒有什麼實戰技巧，更多的是引導你們學會欣賞，學會用基本的設計原理來描述本身看到的做品，而不是簡單扔下一句「人家設計得真好」就完了，要明白其中道理，並努力爲本身所用。構圖先說到這裏，固然版式不只僅指構圖，還有不少東西可講，有時間我再整理給你們。

作設計要培養職業敏感，習慣用設計語言解構看到的畫面。

 

 

感謝您的閱讀，本文資源歸原做者全部，僅供學習研究哈。