在UI佈局排版中,讓界面快速出彩的7個技巧

語言: CN / TW / HK

關注 ▲Clip設計夾 後台 回覆“ 進羣 加入設計成長羣

設計夾的第 115 篇文章分享 

大家好 ,這裏是設計夾 今天為大家分享的是 「排版佈局

佈局對於每個APP或者網站來説都至關重要,每一處經過思考的排版佈局設計,能幫助用户輕鬆理解頁面中的信息。

合理的佈局方式可以有效地向用户傳達頁面內容。 通過下面這些佈局技巧,學習如何設計構建更好的頁面佈局~

    優先考慮重要內容

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

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

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

    保持合理的視覺層級

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

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

    使用非對稱佈局

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

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

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

    使用間距

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

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

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

    打破統一的佈局

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

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

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

    使用網格

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

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

    保持對比

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

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

最後

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

慢慢來比較快,如覺得有幫助,

請點個 贊&在看 謝謝!

添加微信, 邀你進設計成長羣 :star2:

Tips:  這裏會持續更新設計乾貨,包括但不限於交互日記、設計法則、答疑解惑、讀書筆記…感興趣的同學可以掃碼加入,一起成長! :arrow_down: :arrow_down: :arrow_down:

:fire: 文章合集

致2021:設計文章合集

致2020:設計文章合集