編輯導(dǎo)語：在產(chǎn)品設(shè)計的排版當(dāng)中，視覺舒服是很重要的，對于用戶來說，看到的頁面排版的第一印象比較重要，并且在乎是否能在頁面上捕捉到重要信息；本文作者分享了關(guān)于把UI排版的思維應(yīng)用于其他地方是如何的，我們一起來了解一下。

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

菜單基本信息如下：

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

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

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

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

一、動手之前，先拆解信息

第一步不要急著排版，我們需要思考的問題是我們的內(nèi)容需要分拆成多少塊進(jìn)行一頁頁的輸出，也就是量化每一頁的文案內(nèi)容。

過度擁擠的一頁內(nèi)容，讀者不易發(fā)現(xiàn)內(nèi)容的亮點(diǎn)與優(yōu)先級，從而產(chǎn)生閱讀抵觸；而如果每一頁的內(nèi)容都過少又無法高效的體現(xiàn)思路與豐滿度。那么我們該如何把握這里的節(jié)奏呢？

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

全局上考慮：

• 模塊目錄：午飯+午飯的相關(guān)說明——目的為讓各位干飯人清楚干飯的整體時間、地點(diǎn)；
• 亮點(diǎn)：2號窗口當(dāng)做了推薦窗口（也就是亮點(diǎn)）給讀者進(jìn)行了閱讀推薦——目的是讓各位干飯人知道我們有特別好次的菜，快來干飯；
• 集合分類：分類剩下的窗口為配餐與自選2種窗口進(jìn)行集合展示——目的是告訴各位干飯人，我們的飯菜種類超多，想吃啥都有。

細(xì)節(jié)信息考慮：

• 合并同類項：把同類信息合并，避免重復(fù)展示，提煉最有價值的信息展示；
• 限制層級：盡量限制一頁內(nèi)容層級在2級以內(nèi)，控制信息長度；

于是乎，內(nèi)容的信息梳理便有節(jié)奏的完成了，注意是有節(jié)奏的完成了。

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

二、文字與圖片，講究恰到好處

在組織完每頁的內(nèi)容后，作為設(shè)計師肯定少不了得配個圖什么的（插畫、界面、原型什么的），不然無圖言屌。

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

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

1. 關(guān)于全圖背景

有的鐵汁可能會覺得整張圖放著挺好看的昂，也很簡單，不用拼接什么的。

但其實整張圖在排版里的應(yīng)用是很講究條件的，貿(mào)然隨便配個圖當(dāng)全圖背景就會使的整體非常不高級且不專業(yè)；建議大家多使用純色底的元素拼接點(diǎn)綴背景，這樣化繁為簡容易出效果。

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

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

2. 主圖的破格與個數(shù)限制

很多鐵汁喜歡把展示的圖片規(guī)規(guī)矩矩的放滿，但其實亮點(diǎn)要通過放大與破格突出。

不要企圖用很多圖堆在一起來說明這個項目的亮點(diǎn)，比如這道菜是你重點(diǎn)推薦的，那么只需要一個放大的這道菜就會很有說服力，當(dāng)然前提是這個亮點(diǎn)足夠亮。

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

3. 多圖排布技巧

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

尤其黑色底板的蒙層應(yīng)用效果更加的好。

三、沒有對比，就沒有層次變化

關(guān)于ui排版思維里的對比主要是為了凸顯內(nèi)容的層次，引導(dǎo)用戶更容易的獲取主要信息。這里對比包括字體、字重、大小、顏色等多維度的比對。

我們通常通過以下幾個方式來形成比對，提升信息的傳達(dá)效率。

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

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

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

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

四、細(xì)節(jié)元素的視覺化

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

這里我們可以通過標(biāo)簽、圖標(biāo)、分割線等多種方式來進(jìn)行元素的視覺化傳達(dá)。

1. 圖標(biāo)化

2. 標(biāo)簽化

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

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

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

作者：柒爺，云音樂資深設(shè)計師；微信公眾號： Nana的設(shè)計錦囊

本文由 @柒爺 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議