設(shè)計(jì)頁(yè)面最基本的就是排版布局了，如果你覺(jué)得自己設(shè)計(jì)的頁(yè)面總是哪里不對(duì)勁，為什么別人的頁(yè)面看起來(lái)那么舒服，也許這篇文章能解答你部分的疑惑。

 

　　UI設(shè)計(jì)中，除了我們強(qiáng)調(diào)的配色方案，字體，UI元素之外，還有一點(diǎn)是很重要的，那就是-設(shè)計(jì)布局的四大原則。(對(duì)齊，對(duì)比，親密性，重復(fù))

 

　　一、對(duì)齊

 

　　對(duì)齊(Alignment)：任何東西都不能在頁(yè)面上隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁(yè)面上的另一個(gè)元素有某種視覺(jué)聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。

 

　　

這個(gè)頁(yè)面是一個(gè)推薦關(guān)注的列表頁(yè)，處處能體現(xiàn)設(shè)計(jì)者的對(duì)齊方式。最左邊的與屏幕邊緣的對(duì)齊，列表的推薦名字的對(duì)齊，右邊的“關(guān)注”按鈕的對(duì)齊 等等。這個(gè)頁(yè)面看上去所有的元素都統(tǒng)一，有聯(lián)系而且彼此相關(guān)，各個(gè)單獨(dú)的元素之間存在著某種視覺(jué)紐帶，雖然沒(méi)有間隔線(xiàn)，但是通過(guò)統(tǒng)一對(duì)齊的方式，使頁(yè)面看起來(lái)更容易且美觀。 

 

　　二、對(duì)比

 

　　對(duì)比(Contrast)：對(duì)比的基本思想是，要避免頁(yè)面上的元素太過(guò)相似。如果元素(字體、顏色、大小、線(xiàn)寬、形狀、空間等)不相同，那就干脆讓它們截然不同。要讓頁(yè)面引人注目，對(duì)比通常食最重要的一個(gè)因素，正是它能使讀者首先看這個(gè)頁(yè)面。

 

這個(gè)頁(yè)面是內(nèi)容推薦列表頁(yè)，從文字的對(duì)比分析來(lái)看，文章的標(biāo)題與簡(jiǎn)介的對(duì)比，點(diǎn)贊數(shù)評(píng)論數(shù)和文章標(biāo)題的對(duì)比，一目了然，使頁(yè)面更易讀。

 

　　三、親密性

 

　　親密性(Proximity):彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起。如果多個(gè)項(xiàng)相互之間存在很近的親密性，它們就會(huì)成為一個(gè)視覺(jué)單元，而不是多個(gè)孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。

 

 

上面這個(gè)頁(yè)面紅色框框出部分屬于兩個(gè)內(nèi)容塊，中間有一個(gè)間隙，這就是屬于親密性的運(yùn)用，使得同一塊內(nèi)容在一個(gè)區(qū)域內(nèi)。

 

　　四、重復(fù)

 

　　重復(fù)(Repetition):讓設(shè)計(jì)中的視覺(jué)要素在整個(gè)作品中重復(fù)出現(xiàn)。可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線(xiàn)寬、字體、大小和圖片，等等。這樣一來(lái)，既能增加條理性，還可以加強(qiáng)統(tǒng)一性。

 

 

　　這個(gè)頁(yè)面是內(nèi)容列表頁(yè)，多個(gè)內(nèi)容塊是屬于同一種設(shè)計(jì)形式-作者+圖片+標(biāo)題+簡(jiǎn)介+操作，每個(gè)內(nèi)容的設(shè)計(jì)形式都是一種重復(fù)，有了重復(fù)，讀者可以更簡(jiǎn)易的閱讀，不用學(xué)習(xí)成本就知道是如何的展現(xiàn)形式。很難想象一個(gè)列表頁(yè)有多種設(shè)計(jì)形式(上面作者中間圖片下面標(biāo)題or上面圖片中間標(biāo)題下面作者or采用左中右的形式)，這樣不僅不美觀，也會(huì)給用戶(hù)造成學(xué)習(xí)成本，設(shè)計(jì)者和開(kāi)發(fā)者也得花更多的時(shí)間在頁(yè)面上。

 

　　小結(jié)：頁(yè)面更多會(huì)采用上面四種排版混合的設(shè)計(jì)形式，仔細(xì)觀察上面每一個(gè)頁(yè)面就不難發(fā)現(xiàn)四種設(shè)計(jì)原則都有用到。