聊一聊界面設計的構圖

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

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

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

為什么有的主題或App界面就那么舒服，那么清新，那么有情懷？里面蘊含著哪些最基礎的版式設計理念，讓我們一塊梳理梳理，給初入UI設計的同學做個參考。

今天和大家講講構圖。

構圖版式三板斧

問題一：為什么要講版式設計？有必要么？

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

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

問題二：為什么一開始就要構圖呢？

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

一個項目給設計師的時間是有限的，我們核心重點在于弄清楚產(chǎn)品的功能核心和賣點，把它們凸顯出來，最終讓用戶獲得更為舒服的體驗。而雜亂無章的堆積會顯得非常的糟糕，甚至有時候，用戶會因為找不到自己想要的東西而馬上流失，留下非常不好的印象。通過前期構圖，可以節(jié)省時間，讓設計更有條理。

問題三：構圖，會限制設計的創(chuàng)造力嗎？

不會的。

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

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

一、九宮格網(wǎng)格構圖

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

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

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

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

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

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

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

二、圓心點放射形構圖