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

UI設(shè)計(jì)排版的原則

UI設(shè)計(jì)過程中，核心遵循的原則依然是平面設(shè)計(jì)的四項(xiàng)排版原則：對(duì)齊、親密、對(duì)比、重復(fù)。市面上對(duì)設(shè)計(jì)原則有很多版本的歸納，但筆者反復(fù)比較后依然認(rèn)為這四項(xiàng)原則是最經(jīng)典、最實(shí)用的的設(shè)計(jì)準(zhǔn)則。

• 對(duì)齊：讓所有設(shè)計(jì)元素始終擁有一定的相互對(duì)齊關(guān)系，這樣能形成秩序感，避免混亂
• 親密：讓有關(guān)聯(lián)的設(shè)計(jì)元素間隔更近，讓沒有關(guān)聯(lián)的設(shè)計(jì)元素間隔更遠(yuǎn)。這樣能暗示設(shè)計(jì)元素的內(nèi)在邏輯聯(lián)系，降低用戶的理解成本
• 對(duì)比：避免頁面上的設(shè)計(jì)元素太過相似，有利于增強(qiáng)設(shè)計(jì)感和并強(qiáng)調(diào)關(guān)鍵信息
• 重復(fù)：讓特定視覺要素在整個(gè)作品中反復(fù)出現(xiàn)，可以體現(xiàn)一致性，并構(gòu)建專業(yè)的設(shè)計(jì)感

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

經(jīng)典UI排版設(shè)計(jì)盤點(diǎn)

1）Hero布局

典型案例：NFT&元宇宙設(shè)計(jì)模版（Web）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100268?hmsr=wentt03zz

Hero是Web設(shè)計(jì)領(lǐng)域的一個(gè)專業(yè)詞匯，特指頁面的首屏設(shè)計(jì)。由于網(wǎng)頁的首屏對(duì)用戶持續(xù)停留和轉(zhuǎn)化將起到?jīng)Q定性的作用，所以使用Hero（英雄）來形容這個(gè)板塊的重要性。

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

2）現(xiàn)代極簡(jiǎn)

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

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100077?hmsr=wentt03zz

現(xiàn)代極簡(jiǎn)風(fēng)格強(qiáng)調(diào)大面積留白、對(duì)齊和重復(fù)的運(yùn)用，在北歐和日本非常流行。在宜家家居這個(gè)Web案例中，設(shè)計(jì)元素的數(shù)量非?？酥疲婷姹M可能留給了商品的攝影圖。此外，在維持柵格原則的基礎(chǔ)上允許適當(dāng)?shù)腻e(cuò)落變化，提升了版式的變化感和實(shí)用性。

3）儀表盤結(jié)構(gòu)

典型案例：數(shù)據(jù)可視化設(shè)計(jì)（Web大屏）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100276?hmsr=wentt03zz

儀表盤原來是用在汽車等有駕駛艙的場(chǎng)景，在UI中常常將運(yùn)用在大屏數(shù)據(jù)可視化的場(chǎng)景中。數(shù)據(jù)圖表模塊圍繞中心的主視覺內(nèi)容，形成包裹的結(jié)構(gòu)，強(qiáng)化用戶能一覽全局的掌控感。搭配科幻美術(shù)風(fēng)格和3D、Web動(dòng)態(tài)技術(shù)等，可以進(jìn)一步凸顯產(chǎn)品的科技感和沉浸感。

4）固定導(dǎo)航結(jié)構(gòu)

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

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100009?hmsr=wentt03zz

固定導(dǎo)航結(jié)構(gòu)常見于各種移動(dòng)端APP的UI設(shè)計(jì)。以國(guó)內(nèi)流行的點(diǎn)單小程序?yàn)槔喉敳坑行〕绦蛲ㄓ玫捻敳繉?dǎo)航欄；底部有主功能模塊的Tab欄；一些特殊頁面（商品列表等），還需要再次采用左側(cè)導(dǎo)航欄來進(jìn)一步劃分操作空間，界面上很容易形成1-3個(gè)方向的包裹模塊。

在確定了這些不易改變的板塊以后，剩下的內(nèi)容只需要在縱向的滾動(dòng)空間內(nèi)合理布置即可。相比Web端設(shè)計(jì)，移動(dòng)端的版式受限于設(shè)備尺寸和用戶習(xí)慣，限制會(huì)比較大，所以風(fēng)格往往也更統(tǒng)一。

5）對(duì)稱分屏

典型案例：Shiba（APP）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100270?hmsr=wentt03zz

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

6）強(qiáng)字體和色彩對(duì)比

典型案例：Contra（APP）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100248?hmsr=wentt03zz

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

7）抽屜布局

典型案例：Sidebar menu（Web）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100265?hmsr=wentt03zz

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

8）幾何重疊

典型案例：時(shí)尚攝影集（PPT）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100064?hmsr=wentt03zz

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

9）懸浮式輪播

典型案例：企業(yè)官網(wǎng)（Web）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100007?hmsr=wentt03zz

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

10）磁鐵和Bento布局

典型案例：Marvie（APP）

復(fù)用鏈接：
https://www.mockplus.cn/example/rp/100245?hmsr=wentt03zz

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

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