版權(quán)來自《應(yīng)謀鬼計(jì)》
嗨小伙伴們大家好～
今天給大家?guī)淼氖荱I設(shè)計(jì)中的一些排版的設(shè)計(jì)原則掘宪，作為 UI/UX 設(shè)計(jì)師，如何更加有方法的去掌握排版設(shè)計(jì)缩挑，這樣能保證你在設(shè)計(jì)中冀偶，界面排版能力到達(dá)一個(gè)長(zhǎng)期穩(wěn)定的水準(zhǔn)，而不是時(shí)好時(shí)壞花沉。
希望各位小伙伴在閱讀后針對(duì)UI排版有自己的理解和分析柳爽，也歡迎在后臺(tái)與我們討論碰撞～
（全文共計(jì)1778字，閱讀約需要7分鐘）
UI排版4大黃金原則
-
1主穗，視覺焦點(diǎn)
2泻拦，層次結(jié)構(gòu)
3，視覺重量
4忽媒，視覺方向
1.視覺焦點(diǎn)
-
視覺焦點(diǎn)就是在界面中占主導(dǎo)地位的視覺元素绍刮，第一時(shí)間進(jìn)入你眼睛压状，在整個(gè)設(shè)計(jì)中不能強(qiáng)調(diào)所有設(shè)計(jì)元素赤拒；需要確保關(guān)鍵元素用戶的操作目標(biāo)是清晰的榔至。
上圖左側(cè)界面中,作者通過圖形黑色塊來強(qiáng)調(diào)重要的Button，這樣能吸引你的注意力闹瞧，關(guān)鍵元素高亮顯示绑雄，比如添加小圖標(biāo)
這個(gè)選座購票中，中間座位元素都是同一個(gè)奥邮，但是選中后的效果突出万牺，形成視覺焦點(diǎn)，右邊的空狀態(tài)界面提示按鈕形成焦點(diǎn)
這是反面例子：右邊界面所有元素看起來都很重要洽腺，沒有一個(gè)明確的視覺方向指引脚粟，看起來有顏色的都能點(diǎn)擊？左邊的其實(shí)設(shè)計(jì)也是有點(diǎn)問題蘸朋，整個(gè)界面比較輕浮核无，顏色太多。
2.層次結(jié)構(gòu)
-
確保在幾秒鐘內(nèi),用戶就能明確知道關(guān)鍵要點(diǎn)和頁面元素之間的關(guān)系藕坯，并且順利快速的完成當(dāng)前任務(wù)团南。建立視覺層次結(jié)構(gòu)可以通過大小，對(duì)比炼彪，顏色吐根，肌理，留白辐马，空間等可感知的視覺元素佑惠；好的設(shè)計(jì)它的視覺層次結(jié)構(gòu)分明且符合用戶閱讀習(xí)慣
界面中的視覺關(guān)系我標(biāo)注出來了，我們可以思考別人作品是通過什么來表達(dá)這種層次關(guān)系齐疙；其實(shí)可以直觀看出運(yùn)用有顏色膜楷、大小，明暗對(duì)比（列表文字關(guān)系）贞奋。
頂部視覺焦點(diǎn)第一也是導(dǎo)航比較重要的一部分赌厅，下面介紹設(shè)計(jì)師和聯(lián)系圖標(biāo)，右邊頁面頂部視覺重量大轿塔，里面文字通過明暗關(guān)系區(qū)分層級(jí)
上面的案例我通過序號(hào)標(biāo)注層級(jí)關(guān)系
3.視覺重量
-
如何去衡量視覺重量特愿，影響視覺重量的因素有大小、對(duì)比勾缭、顏色揍障、留白、形狀俩由、位置等等毒嫡，那么在一個(gè)界面中如何把握視覺重量的比例，下面看幾個(gè)例子幻梯。
看完有什么感受嗎兜畸？他們大小都是120px
第一個(gè)例子：為何左邊看起來比右邊大
第二個(gè)例子：為何黑色視覺重量比較大
第三個(gè)例子：為何紅紫色比左邊方塊更吸引眼球
上面三個(gè)場(chǎng)景我們會(huì)在界面中和圖標(biāo)設(shè)計(jì)中會(huì)經(jīng)常遇到。
下圖是調(diào)整后的大小左邊方形大小是108px? 右邊圓形還是120px
再來看個(gè)列子：
圖左邊為何我會(huì)第一時(shí)間留意中間logo 而不是大面積的藍(lán)紫色碘梢，因?yàn)榱舭滓б。車鷽]有任何元素。圖右邊按鈕第一時(shí)間吸引我煞躬，這就是通過顏色來吸引我的視覺焦點(diǎn)肛鹏，需要關(guān)注的重點(diǎn)的地方。
圖左邊購買按鈕和評(píng)分恩沛，購買按鈕第一進(jìn)入眼睛在扰，黑色在白底上視覺重量比較大。圖右邊選座購票區(qū)域复唤，都是圓形健田，通過顏色來區(qū)分他們之間的層級(jí)關(guān)系，重要的內(nèi)容通過顏色強(qiáng)調(diào)佛纫，次要的通過明暗關(guān)系來表達(dá)
4.視覺方向
-
前面講了視覺重量妓局，它能第一時(shí)間把你帶到特定重要的位置，那么接下來視覺方向是引導(dǎo)的一個(gè)作用呈宇，設(shè)計(jì)師要做的就是通過視覺引導(dǎo)好爬，讓用戶能快速完成任務(wù)和達(dá)到預(yù)期目標(biāo)，常用的視覺引導(dǎo)有Fpattern 和 Zpattern,下面來和大家詳細(xì)說下
左邊圖標(biāo)和右邊列表形成一個(gè)豎向軸的概念甥啄，那么就會(huì)有線存炮，線連接元素的方向。右圖再看下形成Z字結(jié)構(gòu) ，就是我們說的Z模式
上圖6個(gè)功能入口的圖標(biāo)水平排列穆桂，在頁面內(nèi)系統(tǒng)的建立一個(gè)平行軸的關(guān)系宫盔，所以視覺方向比較清晰
總的來說要形成視覺方向就需要有線，這條線是看不見摸不著享完，他是通過軸來形成灼芭。如何形成軸的概念，那通過對(duì)齊般又，相同形狀元素彼绷。
總結(jié)
-
上面一共說了UI排版中常用的四大排版黃金原則，綜合使用能給排版設(shè)計(jì)帶來質(zhì)的提升茴迁。視覺焦點(diǎn)寄悯、層次結(jié)構(gòu)、視覺重量,三者相互影響堕义，最后視覺方向是前面三者影響的結(jié)構(gòu)猜旬。用戶能否順利在你的產(chǎn)品完成任務(wù)，達(dá)到預(yù)期目標(biāo)胳螟，全靠視覺方向指引昔馋，那么這些我們通過大小、對(duì)比糖耸、顏色秘遏、留白、形狀嘉竟、位置等來協(xié)調(diào)使用他們邦危。
