優(yōu)先考慮重要的內(nèi)容，在頁面中保持重要的信息占比更大、更明顯。
為了讓用戶能夠快速看到關(guān)鍵信息，可以通過滾動的交互方式和指導(dǎo)性的按鈕設(shè)計，幫助用戶找到他們想要的信息。
?▲ 例如《紐約客》網(wǎng)站的布局設(shè)計，在中間位置優(yōu)先展示最重要的資訊，突出重點，網(wǎng)站兩側(cè)的資訊展示相對弱化。
二、保持合理的視覺層級
頁面中清晰的層級結(jié)構(gòu)對用戶來說也很重要。通過打造明確的視覺層級結(jié)構(gòu)，頁面內(nèi)容的主次關(guān)系會更清晰和合理，方便用戶更容易理解頁面信息。
▲ 在Netflix影片詳情頁的布局中，保持了清晰的視覺層級關(guān)系。跳到詳情頁后，我們首先會看到頁面頂部的預(yù)告片和大尺寸的白色高亮播放按鈕，然后是關(guān)于影片的介紹和其他功能。
三、使用非對稱布局
對稱布局和非對稱布局在日常設(shè)計中都很常用。對稱的布局能夠讓頁面看起來更加統(tǒng)一、整潔，但也導(dǎo)致頁面效果缺少對比，效果單調(diào)。
非對稱的布局剛好可以彌補這個缺點，在保證排版整齊的基礎(chǔ)上增加頁面的對比關(guān)系，讓頁面看起來更有吸引力。
▲ 例如在這個網(wǎng)站首頁中，左圖右文的非對稱布局設(shè)計讓整個頁面看起來更有對比性和沖擊力，快速吸引用戶的注意力。
四、使用間距
通過間距，能夠?qū)㈨撁嬷胁煌陌婷婧蛢?nèi)容劃分出來，讓頁面的布局更豐富。
同時，通過調(diào)整間距的大小能有效區(qū)分內(nèi)容間的關(guān)聯(lián)程度。例如，同一組信息采用間距小的布局方式，讓內(nèi)容的關(guān)聯(lián)更緊密。
▲ 在Instacart頁面中，上下有兩種不同的布局方式，通過增加間距，讓頁面看起來更清晰。
五、打破統(tǒng)一的布局
過于統(tǒng)一的布局方式會讓頁面看起來很單調(diào)，無法突出重點。
如果想讓頁面中的某個內(nèi)容吸引用戶的注意力，可以嘗試在打破一致的布局情況下，讓頁面看起來更有節(jié)奏。
▲ 在Airbnb網(wǎng)站中，圖1、2和5采用了相同的尺寸，圖3和4打破了統(tǒng)一的布局，讓頁面看起來更有動態(tài)感。
六、使用網(wǎng)格
網(wǎng)格系統(tǒng)是使用網(wǎng)格作為輔助，進(jìn)行頁面設(shè)計的方式。通過使用網(wǎng)格系統(tǒng)，可以更準(zhǔn)確地定義頁面的布局。
當(dāng)然，網(wǎng)格不僅能用在頁面布局設(shè)計中，在其他類型的設(shè)計（海報、畫冊等）中也常用到，是非常值得設(shè)計師學(xué)習(xí)的系統(tǒng)。
七、保持對比
在設(shè)計頁面的布局關(guān)系時，要盡可能做到圖文搭配，保證既要有文字、按鈕等元素，也要有一定量的圖片，讓頁面保持對比性。
▲ 例如這個網(wǎng)站首頁中，左右兩部分采用了一致的布局方式，以圖片作為背景，文字和按鈕等元素與背景產(chǎn)生對比，提高頁面的沖擊力。
最后
通過這些實用的布局技巧，希望能夠幫助你設(shè)計構(gòu)建出更好的界面布局~ 對界面中內(nèi)容的劃分和信息的掌控帶來進(jìn)一步的提升。
原文地址：Clip設(shè)計夾（公眾號）
作者：Clippp
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》在UI布局排版中，讓界面快速出彩的7個技巧
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司