優先考慮重要的內容，在頁面中保持重要的信息占比更大、更明顯。

為了讓用戶能夠快速看到關鍵信息，可以通過滾動的交互方式和指導性的按鈕設計，幫助用戶找到他們想要的信息。

?▲ 例如《紐約客》網站的布局設計，在中間位置優先展示最重要的資訊，突出重點，網站兩側的資訊展示相對弱化。

二、保持合理的視覺層級

頁面中清晰的層級結構對用戶來說也很重要。通過打造明確的視覺層級結構，頁面內容的主次關系會更清晰和合理，方便用戶更容易理解頁面信息。

▲ 在Netflix影片詳情頁的布局中，保持了清晰的視覺層級關系。跳到詳情頁后，我們首先會看到頁面頂部的預告片和大尺寸的白色高亮播放按鈕，然后是關于影片的介紹和其他功能。

三、使用非對稱布局

對稱布局和非對稱布局在日常設計中都很常用。對稱的布局能夠讓頁面看起來更加統一、整潔，但也導致頁面效果缺少對比，效果單調。

非對稱的布局剛好可以彌補這個缺點，在保證排版整齊的基礎上增加頁面的對比關系，讓頁面看起來更有吸引力。

▲ 例如在這個網站首頁中，左圖右文的非對稱布局設計讓整個頁面看起來更有對比性和沖擊力，快速吸引用戶的注意力。

四、使用間距

通過間距，能夠將頁面中不同的版面和內容劃分出來，讓頁面的布局更豐富。

同時，通過調整間距的大小能有效區分內容間的關聯程度。例如，同一組信息采用間距小的布局方式，讓內容的關聯更緊密。

▲ 在Instacart頁面中，上下有兩種不同的布局方式，通過增加間距，讓頁面看起來更清晰。

五、打破統一的布局

過于統一的布局方式會讓頁面看起來很單調，無法突出重點。

如果想讓頁面中的某個內容吸引用戶的注意力，可以嘗試在打破一致的布局情況下，讓頁面看起來更有節奏。

▲ 在Airbnb網站中，圖1、2和5采用了相同的尺寸，圖3和4打破了統一的布局，讓頁面看起來更有動態感。

六、使用網格

網格系統是使用網格作為輔助，進行頁面設計的方式。通過使用網格系統，可以更準確地定義頁面的布局。

當然，網格不僅能用在頁面布局設計中，在其他類型的設計（海報、畫冊等）中也常用到，是非常值得設計師學習的系統。

七、保持對比

在設計頁面的布局關系時，要盡可能做到圖文搭配，保證既要有文字、按鈕等元素，也要有一定量的圖片，讓頁面保持對比性。

▲ 例如這個網站首頁中，左右兩部分采用了一致的布局方式，以圖片作為背景，文字和按鈕等元素與背景產生對比，提高頁面的沖擊力。

最后

通過這些實用的布局技巧，希望能夠幫助你設計構建出更好的界面布局~ 對界面中內容的劃分和信息的掌控帶來進一步的提升。

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》在UI布局排版中，讓界面快速出彩的7個技巧

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司