如何搞定界面設(shè)計之構(gòu)圖篇

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

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

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

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

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

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

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

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

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

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

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

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

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

　　不會的。

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

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

　　九宮格構(gòu)圖

　　圓心點放射形構(gòu)圖

　　三角形構(gòu)圖

　　SF字形構(gòu)圖

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

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

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

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

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

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

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

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

二、圓心點放射形構(gòu)圖

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

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

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

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

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

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

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

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

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

網(wǎng)頁題目：如何搞定界面設(shè)計之構(gòu)圖篇
文章位置：http://bm7419.com/news20/162020.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、服務(wù)器托管、定制開發(fā)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)