本文和大家聊下 UI 設(shè)計(jì)中的一些排版的設(shè)計(jì)原則，作為 UI/UX 設(shè)計(jì)師，如何更加有方法的去掌握排版設(shè)計(jì)，這樣能保證你在設(shè)計(jì)中，界面排版能力到達(dá)一個(gè)長(zhǎng)期穩(wěn)定的水準(zhǔn)，而不是時(shí)好時(shí)壞。

UI排版4大黃金原則：

1. 視覺(jué)焦點(diǎn)
2. 層次結(jié)構(gòu)
3. 視覺(jué)重量
4. 視覺(jué)方向

01 視覺(jué)焦點(diǎn)

視覺(jué)焦點(diǎn)就是在界面中占主導(dǎo)地位的視覺(jué)元素，第一時(shí)間進(jìn)入你眼睛，在整個(gè)設(shè)計(jì)中不能強(qiáng)調(diào)所有設(shè)計(jì)元素；需要確保關(guān)鍵元素用戶的操作目標(biāo)是清晰的。

上圖左側(cè)界面中,作者通過(guò)圖形黑色塊來(lái)強(qiáng)調(diào)重要的Button，這樣能吸引你的注意力，關(guān)鍵元素高亮顯示，比如添加小圖標(biāo)

這個(gè)選座購(gòu)票中，中間座位元素都是同一個(gè)，但是選中后的效果突出，形成視覺(jué)焦點(diǎn)，右邊的空狀態(tài)界面提示按鈕形成焦點(diǎn)

這是反面例子：右邊界面所有元素看起來(lái)都很重要，沒(méi)有一個(gè)明確的視覺(jué)方向指引，看起來(lái)有顏色的都能點(diǎn)擊？左邊的其實(shí)設(shè)計(jì)也是有點(diǎn)問(wèn)題，整個(gè)界面比較輕浮，顏色太多。

02 層次結(jié)構(gòu)

確保在幾秒鐘內(nèi),用戶就能明確知道關(guān)鍵要點(diǎn)和頁(yè)面元素之間的關(guān)系，并且順利快速的完成當(dāng)前任務(wù)。建立視覺(jué)層次結(jié)構(gòu)可以通過(guò)大小，對(duì)比，顏色，肌理，留白，空間等可感知的視覺(jué)元素；好的設(shè)計(jì)它的視覺(jué)層次結(jié)構(gòu)分明且符合用戶閱讀習(xí)慣

界面中的視覺(jué)關(guān)系我標(biāo)注出來(lái)了，我們可以思考別人作品是通過(guò)什么來(lái)表達(dá)這種層次關(guān)系；其實(shí)可以直觀看出運(yùn)用有顏色、大小，明暗對(duì)比（列表文字關(guān)系）。

頂部視覺(jué)焦點(diǎn)第一也是導(dǎo)航比較重要的一部分，下面介紹設(shè)計(jì)師和聯(lián)系圖標(biāo)，右邊頁(yè)面頂部視覺(jué)重量大，里面文字通過(guò)明暗關(guān)系區(qū)分層級(jí)

上面的案例我通過(guò)序號(hào)標(biāo)注層級(jí)關(guān)系

03 視覺(jué)重量

如何去衡量視覺(jué)重量，影響視覺(jué)重量的因素有大小、對(duì)比、顏色、留白、形狀、位置等等，那么在一個(gè)界面中如何把握視覺(jué)重量的比例，下面看幾個(gè)例子。

看完有什么感受嗎？他們大小都是120px

第一個(gè)例子：為何左邊看起來(lái)比右邊大

第二個(gè)例子：為何黑色視覺(jué)重量比較大第三個(gè)例子：為何紅紫色比左邊方塊更吸引眼球

上面三個(gè)場(chǎng)景我們會(huì)在界面中和圖標(biāo)設(shè)計(jì)中會(huì)經(jīng)常遇到。

下圖是調(diào)整后的大小左邊方形大小是108px 右邊圓形還是120px

再來(lái)看個(gè)列子：

圖左邊為何我會(huì)第一時(shí)間留意中間logo 而不是大面積的藍(lán)紫色，因?yàn)榱舭?，周?chē)鷽](méi)有任何元素。圖右邊按鈕第一時(shí)間吸引我，這就是通過(guò)顏色來(lái)吸引我的視覺(jué)焦點(diǎn)，需要關(guān)注的重點(diǎn)的地方。

圖左邊購(gòu)買(mǎi)按鈕和評(píng)分，購(gòu)買(mǎi)按鈕第一進(jìn)入眼睛，黑色在白底上視覺(jué)重量比較大。圖右邊選座購(gòu)票區(qū)域，都是圓形，通過(guò)顏色來(lái)區(qū)分他們之間的層級(jí)關(guān)系，重要的內(nèi)容通過(guò)顏色強(qiáng)調(diào)，次要的通過(guò)明暗關(guān)系來(lái)表達(dá)

04 視覺(jué)方向

前面講了視覺(jué)重量，它能第一時(shí)間把你帶到特定重要的位置，那么接下來(lái)視覺(jué)方向是引導(dǎo)的一個(gè)作用，設(shè)計(jì)師要做的就是通過(guò)視覺(jué)引導(dǎo)，讓用戶能快速完成任務(wù)和達(dá)到預(yù)期目標(biāo)，常用的視覺(jué)引導(dǎo)有Fpattern 和 Zpattern,下面來(lái)和大家詳細(xì)說(shuō)下

左邊圖標(biāo)和右邊列表形成一個(gè)豎向軸的概念，那么就會(huì)有線，線連接元素的方向。右圖再看下形成Z字結(jié)構(gòu) ，就是我們說(shuō)的Z模式

上圖6個(gè)功能入口的圖標(biāo)水平排列，在頁(yè)面內(nèi)系統(tǒng)的建立一個(gè)平行軸的關(guān)系，所以視覺(jué)方向比較清晰.

總的來(lái)說(shuō)要形成視覺(jué)方向就需要有線，這條線是看不見(jiàn)摸不著，他是通過(guò)軸來(lái)形成。如何形成軸的概念，那通過(guò)對(duì)齊，相同形狀元素

總結(jié)

上面一共說(shuō)了UI排版中常用的四大排版黃金原則，綜合使用能給排版設(shè)計(jì)帶來(lái)質(zhì)的提升。視覺(jué)焦點(diǎn)、層次結(jié)構(gòu)、視覺(jué)重量,三者相互影響，最后視覺(jué)方向是前面三者影響的結(jié)構(gòu)。

用戶能否順利在你的產(chǎn)品完成任務(wù)，達(dá)到預(yù)期目標(biāo)，全靠視覺(jué)方向指引，那么這些我們通過(guò)大小、對(duì)比、顏色、留白、形狀、位置等來(lái)協(xié)調(diào)使用他們

#專(zhuān)欄作家#

Tony，微信公眾號(hào)：洞見(jiàn)設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議