如何創(chuàng)建精致的UI界面布局篇

2019-10-31    ui設(shè)計(jì)分享達(dá)人

前言

前面已經(jīng)完成這個(gè)系列的 “排版和圖形”兩篇文章，本周接著后面的 布局篇幅，我們知道布局的好壞直接影響產(chǎn)品美觀度，不同形式的布局，給用戶帶來(lái)的感受是不一樣的，產(chǎn)品也將會(huì)有不一樣的性格，因?yàn)椴季种苯佑绊懡缑婵臻g疏密程度，不同產(chǎn)品都有著不同空間，那么我們要如何做，才能更好的去布局，并且能在激烈的競(jìng)爭(zhēng)中脫穎而出，現(xiàn)今大部分產(chǎn)品基本都是長(zhǎng)得差不多，作為設(shè)計(jì)師更應(yīng)該去多研究一些布局趨勢(shì)，并能將其融匯在自家產(chǎn)品中。 




為什么要重視布局

- 
布局對(duì)界面設(shè)計(jì)來(lái)說(shuō)十分重要，不僅是我們常說(shuō)的在移動(dòng)端或者web端的設(shè)計(jì)中，他在車載中、電視端UI或者VR設(shè)計(jì)同樣有很大影響。我們知道界面設(shè)計(jì)中最關(guān)鍵的五大基礎(chǔ)語(yǔ)言；形，色，字，質(zhì)， 構(gòu)，其中 構(gòu)（結(jié)構(gòu)）即是我們所說(shuō)的布局，五個(gè)維度之前已經(jīng)和大家分享了 圖形和字體篇，今天我們可以看下布局對(duì)界面設(shè)計(jì)的影響，以及我們?cè)撊绾瓮ㄟ^(guò)布局來(lái)使界面設(shè)計(jì)看起來(lái)更加有范，更有自己的視覺(jué)特征點(diǎn)在里面。 




目前主流布局趨勢(shì)是怎樣的

-

前面在向大家介紹布局的重要性和他對(duì)界面設(shè)計(jì)的影響，那么如果我們需要做出一些比較有創(chuàng)新的布局來(lái)提高界面精致度，該如何去下手呢？我們可以通過(guò)觀察目前主流一些趨勢(shì)做法，了解國(guó)外設(shè)計(jì)師如何找到更有創(chuàng)意的方式來(lái)設(shè)計(jì)他們的布局 - 并將一些創(chuàng)意運(yùn)用到界面設(shè)計(jì)中的，下面我們一起看下。 




偏移與疊加網(wǎng)格布局

-

網(wǎng)格布局我相信大部分人都知道，很熟悉，那么今天所說(shuō)的偏移疊加網(wǎng)格布局是什么樣子的呢？其實(shí)就是我們?cè)谠O(shè)計(jì)界面時(shí)候，把最底層基礎(chǔ)網(wǎng)格搭建好后，上層的內(nèi)容排版，通過(guò)錯(cuò)落疊加方式來(lái)布局，這種布局的優(yōu)點(diǎn)是留白空間大，呼吸感強(qiáng)，圖文錯(cuò)落交織一起，形式感增強(qiáng)。缺點(diǎn)是，運(yùn)用的范圍會(huì)小一些，承載內(nèi)容少，一般Web端運(yùn)用比較多。當(dāng)然也有一些移動(dòng)端設(shè)計(jì)個(gè)性化產(chǎn)品存在這樣的布局 （Rover APP）可以去下載體驗(yàn)下。 


上圖文字與圖片交疊錯(cuò)落排版，圖片與圖片之間也是網(wǎng)格交錯(cuò)



上面移動(dòng)端設(shè)計(jì)，設(shè)計(jì)師通過(guò)留出左側(cè)空網(wǎng)格，整體內(nèi)容往右側(cè)偏移，導(dǎo)航相對(duì)內(nèi)容來(lái)說(shuō)做了差異化設(shè)計(jì)，并未進(jìn)行偏移設(shè)計(jì)（看我上圖紅框部分）  。這樣做的目的是因?yàn)?，我們點(diǎn)擊漢堡菜單的時(shí)候，本來(lái)整體就要往右側(cè)移動(dòng)，如果再繼續(xù)移動(dòng)，那么內(nèi)容會(huì)顯示不下，同時(shí)視覺(jué)效果并沒(méi)有很好



半偏移網(wǎng)格布局，界面中并非所有的內(nèi)容都偏移底層網(wǎng)格，而是部分模塊這樣去做，原因是內(nèi)容多的情況下。





分屏布局

- 

分屏布局，顧名思義就是將屏幕進(jìn)行幾種不同區(qū)域的劃分，然后內(nèi)容分布排版在里面，分屏布局解決的主要問(wèn)題將屏幕大的設(shè)備進(jìn)行合理劃分空間設(shè)計(jì)，一般是在橫屏運(yùn)用比較多，比如PAD，或者WEB或者車機(jī)中控屏，下面一起看下分屏布局在實(shí)際設(shè)計(jì)中的具體表現(xiàn)



上圖界面設(shè)計(jì)采用了1/2分屏布局，將圖片與內(nèi)容文字進(jìn)行區(qū)域劃分，下圖是將主文案擺放在分割區(qū)域中間（文字較少情況下可以這樣去做）增強(qiáng)形式感。當(dāng)然分屏布局可以有多重形式，列如，2/3,1/3，3/4等等，可以根據(jù)內(nèi)容進(jìn)行選擇合適分屏





Z軸視差布局

-

視差布局，在web app或者web端布局常用比較多的一種，運(yùn)行方式當(dāng)滑動(dòng)頁(yè)面內(nèi)容時(shí)內(nèi)容與內(nèi)容之間運(yùn)動(dòng)速率會(huì)有時(shí)間差，同時(shí)Z軸空間位置也會(huì)有深度差異，這樣就形成了視差效果，視差布局一般在H5界面出現(xiàn)比較多，用于營(yíng)銷場(chǎng)景會(huì)多一些，當(dāng)然WEB端倒是比較常見(jiàn) 


地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/





內(nèi)容重疊布局

- 
內(nèi)容重疊布局，打破了傳統(tǒng)平整的極簡(jiǎn)注意風(fēng)格，扁平化設(shè)計(jì)將會(huì)加入Z軸空間元素，使得整體設(shè)計(jì)有了新穎的布局方式，這也是一種區(qū)分競(jìng)爭(zhēng)產(chǎn)品的布局方式，一般內(nèi)容重疊產(chǎn)品大多出現(xiàn)在偏雜志化設(shè)計(jì)的產(chǎn)品中，如之前我介紹圖形篇時(shí)候提到 韓國(guó)29cm
他們?cè)斍轫?yè)，運(yùn)營(yíng)頁(yè)面運(yùn)用了重疊布局。 



地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/






卡片布局

- 
為什么要把卡片布局拿出來(lái)講?卡片布局應(yīng)該是我們見(jiàn)過(guò)最多的布局了，卡片布局也會(huì)有很多種方式去布局，根據(jù)產(chǎn)品內(nèi)容復(fù)雜程度去建立卡片容器大小，卡片作為承載內(nèi)容的容器，對(duì)于響應(yīng)式布局也是非常有利的支持，我們看appstore,behance的移動(dòng)端，都是卡片布局。 



卡片布局還有一個(gè)最大好處就是，他能夠封裝內(nèi)容，使得畫(huà)面布局整潔，所有內(nèi)容都往容器里面放，信息之間保持很好的區(qū)分



全封閉卡片布局，內(nèi)容之間通過(guò)卡片封裝，中間無(wú)空隙





自由式網(wǎng)格布局

- 
這種網(wǎng)格布局相對(duì)來(lái)說(shuō)比較開(kāi)放性的，布局上多以卡片承載內(nèi)容為主，卡片跟隨隱形網(wǎng)格隨機(jī)分布在畫(huà)板中，有點(diǎn)類似我們說(shuō)的暴瀑流布局方式，這種會(huì)比較靈活，一般會(huì)在攝影類，雜志類，文藝類產(chǎn)品居多。 







如何運(yùn)用這些布局進(jìn)行創(chuàng)新設(shè)計(jì)

-

上面已經(jīng)列舉了目前比較流行的一些布局，可能部分人還是感覺(jué)不會(huì)使用，也不會(huì)很好的去利用在自己設(shè)計(jì)中。要么就直接把別人布局抄襲過(guò)來(lái)，其實(shí)是有方法的，我們可以把自己認(rèn)為比較好的一種布局拿出來(lái)，然后拆解他，拆解完后，再來(lái)重新組裝，組裝的時(shí)候，你可以參考下其他布局，兩者集合起來(lái)，就像樂(lè)高積木一樣，你可以有很多種組合方式。 


上面利用樂(lè)高積木思維重新對(duì)布局進(jìn)行拆解組合，當(dāng)然一切的布局都是基于當(dāng)前你的主旨，你的產(chǎn)品內(nèi)容，找到合適布局，然后去研究他，并且拆解，然后重新搭建屬于自己產(chǎn)品一套布局規(guī)則





總結(jié)

-

全文向大家介紹5種布局思路，當(dāng)然其實(shí)不止這5種，但是其他布局相對(duì)來(lái)說(shuō)會(huì)運(yùn)用少一些，這些布局我們可以加以學(xué)習(xí)利用，可以運(yùn)用在任何設(shè)計(jì)中去，當(dāng)然運(yùn)用的時(shí)候，一定要清晰知道自己產(chǎn)品的主旨目標(biāo)，用戶群體，合理運(yùn)用布局，做出創(chuàng)新設(shè)計(jì)！


轉(zhuǎn)自：站酷-設(shè)計(jì)TNT 

日歷

鏈接

個(gè)人資料

存檔