元旦過后，新的一波工作又要開始了，我在開始準(zhǔn)備新一輪匯報材料的時候突然想到了一個問題，不知道鐵子們在往年參加設(shè)計評審的時候，有沒有總被老板 diss 設(shè)計稿里“太空了” “不夠飽滿” 這些個問題呢？

我猜測應(yīng)該 99%的鐵子經(jīng)歷過，我也不例外，從校招進(jìn)到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房價一樣寸土寸金，生怕被浪費了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：

如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強(qiáng)的對比，還有一些微妙的層級關(guān)系。

坦誠的講，我的風(fēng)格揉雜了 2 種設(shè)計體系 —— 瑞士風(fēng)格 / 擬物風(fēng)格；

1. 瑞士風(fēng)格

整潔、嚴(yán)謹(jǐn)、工整、理性化、實用的特征是瑞士平面設(shè)計的精神所在；這種一絲不茍，傳達(dá)準(zhǔn)確的風(fēng)格，即所謂瑞士國際主義風(fēng)格。簡單的說，由于 Swiss Design 這種風(fēng)格簡單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計風(fēng)格，也是國際最流行的風(fēng)格，因此，又被稱為國際主義平面設(shè)計風(fēng)格；

簡單的說，瑞士的這種設(shè)計風(fēng)格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級關(guān)系；有趣的是，審美和潮流是循環(huán)的，隨著時代的發(fā)展，越來越多的 app 開始重新挖掘出來瑞士風(fēng)格并加以使用，比如我們 iOS 系統(tǒng)自帶的應(yīng)用們，Spotify：

年少的時候，我經(jīng)常看著這些個 app 會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內(nèi)容，同樣也是構(gòu)成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網(wǎng)頁亦或者是 UI 界面，在沒有可用的裝飾下，信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能，這就是瑞士風(fēng)格的核心本質(zhì)。

2. 擬物風(fēng)格 

iOS 是擬物的典型代表，網(wǎng)上對于這塊的講解已經(jīng)過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標(biāo)畫的更漂亮了一點而已…

但當(dāng)我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：

通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設(shè)計觀，PS.不管錘子科技現(xiàn)在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設(shè)計團(tuán)隊為這個行業(yè)做出的貢獻(xiàn)，respect！

毫無保留的說，我的設(shè)計就是二者的融合，以 層次對比 作為核心理念。

啰嗦了半天，趕緊進(jìn)入正題；如果你是一名產(chǎn)品體驗設(shè)計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設(shè)計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；

同樣，在嘈雜的視覺結(jié)構(gòu)里，畫面也需要奧卡姆剃刀，當(dāng)你在對畫面的飽和上困擾不已，并急于找到一些背景和紋理填充的時候，我建議你先冷靜一下…因為頁面的空虛未必是需要實體化的東西來填充的；上文有說過以 “層次對比” 作為核心理念出發(fā)，要區(qū)別于平面設(shè)計，營造一個立體空間，所以先理一下畫面結(jié)構(gòu)：

通常來講，如果想要不平，把二維空間轉(zhuǎn)化成三維空間是必要的一步，需要在 Z 軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機(jī)的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當(dāng)然，虛實的對比對信息的呈現(xiàn)和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：

另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結(jié)構(gòu)，把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：

整個 case 下來，你會發(fā)現(xiàn)用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優(yōu)先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質(zhì)可以很好的幫助畫面分層，以達(dá)到填充的效果，并不是一定要依賴于實體化的裝飾。

對了，如果你跟我一樣閑著沒事干的話，借用 keynote 的動畫效果做一個吊炸天的動效，一定可以成為匯報場上最靚的崽（注意：視頻有音樂）！

keynote 素材和視頻可在開頭/文末下載

本來不打算再開一個章節(jié)說這個，但還是覺著很有必要再說下（我好糾結(jié)），作為 PPT 來講，ta 的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關(guān)愛；

以上圖為例（實名 diss 自己的作品），坦誠的講左邊的部分大多數(shù)觀者是不會有心思來看的，按照視覺系統(tǒng)的處理，這部分就會被當(dāng)成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設(shè)計師必要的職責(zé)之一。

總結(jié)一下

想問一個問題，鐵子們覺著 UI 的本質(zhì)或者作用是什么？從我個人的角度來講，UI 設(shè)計的本質(zhì)就是對信息的整理歸類和編排，沒有什么比信息更重要，如果貿(mào)然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，希望你能有個好心情迎接美好的一年～

文章來源：優(yōu)設(shè)網(wǎng)     作者：負(fù)能量補(bǔ)給站

藍(lán)藍(lán)設(shè)計( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)