網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計中的排版原則有哪些

編輯：時(shí)間：2018-01-20 08:16:47

　　UI設計中，除了我們強調的配色方案，字體，UI元素之外，還有一點(diǎn)是很重要的，那就是-設計布局的四大原則。

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

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

　　一、對齊

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

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

　　二、對比

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

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

　　三、親密性

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

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

　　四、重復

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

1/2 1 2 下一頁(yè) 尾頁(yè)

<< 上一篇：網(wǎng)頁(yè)制作中html需要注意的問(wèn)題

>> 下一篇：網(wǎng)頁(yè)設計師如何和客戶(hù)理解與溝通

推薦資訊