在UI設計工作中，如何保證版式設計的“美觀 + 合理”是經常需要考慮問題。經過了多年的設計工作后，筆者發現新人設計師的尤其容易陷入對流行趨勢的簡單模仿，缺失對排版本身的邏輯性認知。在這篇文章中，筆者將盤點10個經典UI排版案例，并分析這些版式能成為“經典”的原因。此外，所有的案例都將提供一鍵復用的鏈接，方便讀者自行進行更細致的研究和學習。

UI設計排版的原則

UI設計過程中，核心遵循的原則依然是平面設計的四項排版原則：對齊、親密、對比、重復。市面上對設計原則有很多版本的歸納，但筆者反復比較后依然認為這四項原則是最經典、最實用的的設計準則。

• 對齊：讓所有設計元素始終擁有一定的相互對齊關系，這樣能形成秩序感，避免混亂

• 親密：讓有關聯的設計元素間隔更近，讓沒有關聯的設計元素間隔更遠。這樣能暗示設計元素的內在邏輯聯系，降低用戶的理解成本

• 對比：避免頁面上的設計元素太過相似，有利于增強設計感和并強調關鍵信息

• 重復：讓特定視覺要素在整個作品中反復出現，可以體現一致性，并構建專業的設計感

UI設計作為傳統平面設計的數字化延展，實際操作中有哪些不同呢？下面就讓我們一起來看看如何在UI排版設計中融入上面四條原則吧。

經典UI排版設計盤點

1）Hero布局

典型案例：NFT&元宇宙設計模版（Web）

復用鏈接：http://www.wlsxx.com/example/rp/100268

Hero是Web設計領域的一個專業詞匯，特指頁面的首屏設計。由于網頁的首屏對用戶持續停留和轉化將起到決定性的作用，所以使用Hero（英雄）來形容這個板塊的重要性。

上圖的設計則是一個典型的Hero版式：最上方放置Nav導航條，左側采用高對比度字體展示核心價值（搭配高飽和度CTA按鈕引導用戶點擊），右側采用定制的主視覺素材解釋文案并提升視覺沖擊力，最后輔以隨機元素裝飾背景。這套版式在各種Web設計中可謂是萬金油套路，非常推薦新人設計師把優先練熟。

2）現代極簡

典型案例：宜家家居（Web）

復用鏈接：http://www.wlsxx.com/example/rp/100077

現代極簡風格強調大面積留白、對齊和重復的運用，在北歐和日本非常流行。在宜家家居這個Web案例中，設計元素的數量非常克制，版面盡可能留給了商品的攝影圖。此外，在維持柵格原則的基礎上允許適當的錯落變化，提升了版式的變化感和實用性。

3）儀表盤結構

典型案例：數據可視化設計（Web大屏）

復用鏈接：http://www.wlsxx.com/example/rp/100276

儀表盤原來是用在汽車等有駕駛艙的場景，在UI中常常將運用在大屏數據可視化的場景中。數據圖表模塊圍繞中心的主視覺內容，形成包裹的結構，強化用戶能一覽全局的掌控感。搭配科幻美術風格和3D、Web動態技術等，可以進一步凸顯產品的科技感和沉浸感。

4）固定導航結構

典型案例：喜茶（小程序）

復用鏈接：http://www.wlsxx.com/example/rp/100009

固定導航結構常見于各種移動端APP的UI設計。以國內流行的點單小程序為例：頂部有小程序通用的頂部導航欄；底部有主功能模塊的Tab欄；一些特殊頁面（商品列表等），還需要再次采用左側導航欄來進一步劃分操作空間，界面上很容易形成1-3個方向的包裹模塊。

在確定了這些不易改變的板塊以后，剩下的內容只需要在縱向的滾動空間內合理布置即可。相比Web端設計，移動端的版式受限于設備尺寸和用戶習慣，限制會比較大，所以風格往往也更統一。

5）對稱分屏

典型案例：Shiba（APP）

復用鏈接：http://www.wlsxx.com/example/rp/100270

在屏幕中間位置，對素材和內容進行切分是移動端Onboarding（引導頁面）的常見套路。這個方式可以制造整個滑動體驗的一致性。在Shiba這個案例中，配圖的部分始終處于頁面縱向相同的位置，分割讓配圖素材和文字描述部分形成了自然而優美的對比感。值得一提的是，配圖部分的背景色一定要和文字部分的背景色區隔開，否則會讓分屏的效果大打折扣。

6）強字體和色彩對比

典型案例：Contra（APP）

復用鏈接：http://www.wlsxx.com/example/rp/100248

Contra這套移動端的原型設計體現了字體和色彩對版式的影響。通過放大字體和填充高飽和度顏色，可以讓界面呈現自然的分割感、活潑感和不拘一格的設計感。如果你需要設計一套充滿趣味和潮流感的UI界面，可以考慮采用更大膽的字號和更激進的配色方案，從而讓頁面呈現獨特的版式感受。

7）抽屜布局

典型案例：Sidebar menu（Web）

復用鏈接：http://www.wlsxx.com/example/rp/100265

側面抽屜布局常用于呈現菜單內容，讓這部分內容固定在界面的左 / 右側都能營造穩定的設計感，并始終保持操作的便捷性。值得注意的是，抽屜部分內容是很靈活的，可以搭配高對比度顏色的背景來強化視覺，也可以搭配動效做成更有趣味性的收納形式。

8）幾何重疊

典型案例：時尚攝影集（PPT）

復用鏈接：http://www.wlsxx.com/example/rp/100064

采用主色的矩形色塊和其他素材形成刻意的碰撞和重疊，是經典的平面設計風格。在制作這種效果的時候，設計師最好是借助柵格來確定色塊的大小和位置。對于新人設計師來說，一旦掌握了柵格的基本原理，這種風格還是非常好上手的，而且也很容易出效果。

9）懸浮式輪播

典型案例：企業官網（Web）

復用鏈接：http://www.wlsxx.com/example/rp/100007

對于移動端或者Web端官網設計來說，采用輪播展示客戶的多張產品圖是常見需求。如果采用最普通的輪播和左右切換按鈕，難免會顯得非常死板。將輪播控制條的面積增大并改成矩形樣式，和圖片形成層級關系，就有了懸浮式的輪播效果。在這種版式下，懸浮所帶來的輕立體效應可以帶來立竿見影的設計感，從而提升整個頁面的用戶體驗。

10）磁鐵和Bento布局

典型案例：Marvie（APP）

復用鏈接：http://www.wlsxx.com/example/rp/100245

作為最近幾年最火爆的排版風格，磁鐵和Bento可以是當下所有UI設計師必學的設計范式。蘋果的發布會就經常使用Bento版式做成一圖流，實現極高的信息傳遞效率。Bento來源于日語中的便當盒，在UI設計圈用來形容類似“便當盒格子”的版式切分。磁鐵和Bento布局需要依靠柵格原理作為基礎，在頁面上根據信息需要切分出合適的模塊，并在單個模塊中使用少量文案 + 圖片素材進行展示。需要注意的是，無論內部如何切分，外部都需要保持一個標準圓角矩形的形狀（類似便當盒的輪廓）。

上述的十個經典案例展示了UI排版設計中的常見套路，覆蓋了Web設計、APP設計、大屏設計、PPT設計等多種場景，相信這些排版設計方案會為你的UI / UX設計帶來新的靈感和思考。點擊相關的“復用鏈接”可以在摹客RP（rp.mockplus.cn）這款免費的在線設計工具中進行深入的研究和設計練習。靈活掌握這些排版思路，將給你的UI的排版設計工作帶來極大的助力，趕緊去試試吧！