某天中午去食堂吃飯時看著菜單陷入了沉思...

菜單基本信息如下：

很顯然我不是來凡爾賽食堂伙食的，我只是突然覺得這個東西特別像之前收到的很多交互/用研鐵汁的作品集，甚至述職報告。

其實關于?UI 排版的文章挺多的，但是好像都把 UI 排版局限在了小小的格式塔原則里。其實 UI 排版是一個很強大的信息收集與處理分發的過程，它的核心價值并不在于變好看這件事兒。

至于它有多強大？核心精髓又如何 get？我決定授之以魚不如授之以漁，就用食堂的菜單來做一個例子，分享一個大家可以舉一反三的 UI 排版方法。

我們假設，如果要把菜單信息變成一些鐵汁（尤其是純交互/用研）的作品集，可以如何優化排版呢？

Step 1. 動手之前，先拆解信息

第一步不要急著排版，我們需要思考的問題是我們的內容需要分拆成多少塊進行一頁頁的輸出，也就是量化每一頁的文案內容。過度擁擠的一頁內容，讀者不易發現內容的亮點與優先級，從而產生閱讀抵觸。而如果每一頁的內容都過少又無法高效的體現思路與豐滿度。那么我們該如何把握這里的節奏呢？

這里建議大家可以以這樣的思路進行拆分，我們將上面的菜單作品集拆為了 4 頁左右的 ppt，如下圖：

1. 全局上考慮

模塊目錄：午飯+午飯的相關說明——目的為讓各位干飯人清楚干飯的整體時間、地點

亮點：2 號窗口當做了推薦窗口（也就是亮點）給讀者進行了閱讀推薦——目的是讓各位干飯人知道我們有特別好次的菜，快來干飯

集合分類：分類剩下的窗口為配餐與自選 2 種窗口進行集合展示——目的是告訴各位干飯人，我們的飯菜種類超多，想吃啥都有。

2. 細節信息考慮

合并同類項：把同類信息合并，避免重復展示，提煉最有價值的信息展示

限制層級：盡量限制一頁內容層級在 2 級以內，控制信息長度

于是乎，內容的信息梳理便有節奏的完成了，注意是有節奏的完成了。

*這里可能有細心的鐵汁發現我舍棄了菜單里的一些窗口，不是因為個人不愛吃，而是打個比方：并不是所有信息都是有價值展示出來的，我們不需要面面俱到，判斷好信息的價值，做到斷舍離。

Step 2. 文字與圖片，講究恰到好處

在組織完每頁的內容后，作為設計師肯定少不了得配個圖什么的（插畫、界面、原型什么的）。

這個時候文字與圖片之間的關系就變得十分重要。

這里給大家介紹幾個高級配圖的方式以及技巧吧：

1. 關于全圖背景

有的鐵汁可能會覺得整張圖放著挺好看的昂，也很簡單，不用拼接什么的。但其實整張圖在排版里的應用是很講究條件的，貿然隨便配個圖當全圖背景就會使的整體非常不高級且不專業。建議大家多使用純色底的元素拼接點綴背景，這樣化繁為簡容易出效果。

那什么特殊情況下可以使用整圖背景呢？

一般是針對視覺的同學有非常亮眼的純視覺效果展示的時候可以用全圖背景，其他時候都不推薦。

2. 主圖的破格與個數限制

很多鐵汁喜歡把展示的圖片規規矩矩的放滿，但其實亮點要通過放大與破格突出。不要企圖用很多圖堆在一起來說明這個項目的亮點，比如這道菜是你重點推薦的，那么只需要一個放大的這道菜就會很有說服力。當然前提是這個亮點足夠亮。

（*請不要問為什么酸菜魚章魚爪和青菜要配一個餃子圖，人艱不拆）

3. 多圖排布技巧

我們經常要遇到必須要多圖展示的情況，比如全頁面、原型流程的展示、或者表格什么的。比起 duang 一下扔一組 mockup 上去，我們可以借用超實用的蒙層來實現圖片與文案間的過渡，防止生硬的尷尬過渡。

尤其黑色底板的蒙層應用效果更加的好。

Step 3. 沒有對比，就沒有層次變化

關于 UI 排版思維里的對比主要是為了凸顯內容的層次，引導用戶更容易的獲取主要信息。這里對比包括字體、字重、大小、顏色等多維度的比對。我們通常通過以下幾個方式來形成比對，提升信息的傳達效率。

1. 不要企圖用同字重字色完成不同層級的信息展示。

這里推薦大家盡可能的多用黑白字體，彩色字體僅作為需要分割的輔助信息或者標簽存在，不然會影響整體閱讀的重心，感覺畫面很花。

2. 文字、圖片與色彩的比對，才是一個合格的畫面。

盡量不要留滿滿一頁文字，或者滿滿一頁圖片，合理搭配，按不同配比進行碰撞才能有良好的視覺體驗及閱讀愉悅感。

Step 4. 細節元素的視覺化

我們盡可能多的將純文本信息轉化為細節的視覺元素，不僅可以點綴畫面，也可以讓用戶降低理解成本，從而提升閱讀的可讀性。

這里我們可以通過標簽、圖標、分割線等多種方式來進行元素的視覺化傳達。

1. 圖標化

2. 標簽化

Get 完以上的技巧，還有最后一件事情：如果是述職 or 面試作品集，排版的意義更在于信息表達的清晰度而非視覺上的美觀，無論你是 UI 還是交互！切記切記！希望大家不要把作品集做成菜單～

基本當你將以上的 UI 排版思維應用到日常時、尤其作品集時，很多人就會開始分不清你是 UI 還是交互了，這個時候你就可以說自己萬能 UX。

最后，看完了這個“精彩”的故事，有人有興趣拿“晚飯”來做個練習嗎？還是說有人默默打開了藍色軟件點了一份圖上的拉面？

歡迎關注作者的微信公眾號：「Nana的設計錦囊」