2021-1-11 周周
元旦過(guò)后,新的一波工作又要開(kāi)始了,我在開(kāi)始準(zhǔn)備新一輪匯報(bào)材料的時(shí)候突然想到了一個(gè)問(wèn)題,不知道鐵子們?cè)谕陞⒓釉O(shè)計(jì)評(píng)審的時(shí)候,有沒(méi)有總被老板 diss 設(shè)計(jì)稿里“太空了” “不夠飽滿” 這些個(gè)問(wèn)題呢?
我猜測(cè)應(yīng)該 99%的鐵子經(jīng)歷過(guò),我也不例外,從校招進(jìn)到第一家公司就開(kāi)始被植入頁(yè)面需要利用好每一像素的理念,搞得像北京房?jī)r(jià)一樣寸土寸金,生怕被浪費(fèi)了;思前想后為了大家不重蹈我的覆轍,所以新年的第一篇,咱一起來(lái)聊聊排版的問(wèn)題:
如果你看過(guò)我過(guò)往的文章,也許會(huì)對(duì)我的排版多少有點(diǎn)印象,夸張的大字,極強(qiáng)的對(duì)比,還有一些微妙的層級(jí)關(guān)系。
坦誠(chéng)的講,我的風(fēng)格揉雜了 2 種設(shè)計(jì)體系 —— 瑞士風(fēng)格 / 擬物風(fēng)格;
1. 瑞士風(fēng)格
整潔、嚴(yán)謹(jǐn)、工整、理性化、實(shí)用的特征是瑞士平面設(shè)計(jì)的精神所在;這種一絲不茍,傳達(dá)準(zhǔn)確的風(fēng)格,即所謂瑞士國(guó)際主義風(fēng)格。簡(jiǎn)單的說(shuō),由于 Swiss Design 這種風(fēng)格簡(jiǎn)單明確,傳達(dá)功能準(zhǔn)確,因而很快得到世界范圍內(nèi)的普遍認(rèn)可,成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格,也是國(guó)際最流行的風(fēng)格,因此,又被稱為國(guó)際主義平面設(shè)計(jì)風(fēng)格;
簡(jiǎn)單的說(shuō),瑞士的這種設(shè)計(jì)風(fēng)格典型的代表就是我們看到的雜志,其中有 3 個(gè)特點(diǎn):講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級(jí)關(guān)系;有趣的是,審美和潮流是循環(huán)的,隨著時(shí)代的發(fā)展,越來(lái)越多的 app 開(kāi)始重新挖掘出來(lái)瑞士風(fēng)格并加以使用,比如我們 iOS 系統(tǒng)自帶的應(yīng)用們,Spotify:
年少的時(shí)候,我經(jīng)??粗@些個(gè) app 會(huì)不禁的問(wèn),為什么在沒(méi)有一張圖片的情況下還能如此好看?這些年終于明白了前人良苦用心:文字是內(nèi)容,同樣也是構(gòu)成;是信息,同樣也是裝飾;簡(jiǎn)單可以理解為,不管在平面還是網(wǎng)頁(yè)亦或者是 UI 界面,在沒(méi)有可用的裝飾下,信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能,這就是瑞士風(fēng)格的核心本質(zhì)。
2. 擬物風(fēng)格
iOS 是擬物的典型代表,網(wǎng)上對(duì)于這塊的講解已經(jīng)過(guò)于飽和了,我也沒(méi)必要贅述;那么這一趴,來(lái)聊聊對(duì)我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒(méi)有覺(jué)著多么驚艷,潛意識(shí)里只不過(guò)是覺(jué)著把 iOS 的圖標(biāo)畫(huà)的更漂亮了一點(diǎn)而已…
但當(dāng)我打開(kāi)下圖這個(gè)頁(yè)面的時(shí)候,我意識(shí)到我對(duì)擬物的理解還是淺薄了,第一次被光影的層次震撼到:
通過(guò)光影塑造了一個(gè)三維空間,讓整個(gè)畫(huà)面豐富飽滿,也打破了我幼稚的設(shè)計(jì)觀,PS.不管錘子科技現(xiàn)在如何,我依然敬佩 Paco / 方遲 / 羅子雄的設(shè)計(jì)團(tuán)隊(duì)為這個(gè)行業(yè)做出的貢獻(xiàn),respect!
毫無(wú)保留的說(shuō),我的設(shè)計(jì)就是二者的融合,以 層次對(duì)比 作為核心理念。
啰嗦了半天,趕緊進(jìn)入正題;如果你是一名產(chǎn)品體驗(yàn)設(shè)計(jì)師,一定聽(tīng)說(shuō)過(guò) “奧卡姆剃刀” ,這個(gè)定律通常用在交互鏈路的設(shè)計(jì)上(意思就是在用戶路徑中沒(méi)必要的步驟,省了就完事了),“如無(wú)必要,勿增實(shí)體” 即簡(jiǎn)單有效原理;
同樣,在嘈雜的視覺(jué)結(jié)構(gòu)里,畫(huà)面也需要奧卡姆剃刀,當(dāng)你在對(duì)畫(huà)面的飽和上困擾不已,并急于找到一些背景和紋理填充的時(shí)候,我建議你先冷靜一下…因?yàn)轫?yè)面的空虛未必是需要實(shí)體化的東西來(lái)填充的;上文有說(shuō)過(guò)以 “層次對(duì)比” 作為核心理念出發(fā),要區(qū)別于平面設(shè)計(jì),營(yíng)造一個(gè)立體空間,所以先理一下畫(huà)面結(jié)構(gòu):
通常來(lái)講,如果想要不平,把二維空間轉(zhuǎn)化成三維空間是必要的一步,需要在 Z 軸上下功夫;如果你恰巧也是一名攝影愛(ài)好者,可以想象下照相機(jī)的焦距和景深,工作原理是相同的,需要 前景 / 主體和背景 三個(gè)層次;當(dāng)然,虛實(shí)的對(duì)比對(duì)信息的呈現(xiàn)和層次的拉開(kāi)是極其重要的,這里需要通過(guò)景深來(lái)控制效果,你可以通過(guò) photoshop 濾鏡-模糊畫(huà)廊的“場(chǎng)景模糊”來(lái)做到:
另外,空間的感覺(jué)想要被突顯,那么“光影和空氣”的價(jià)值就可以無(wú)限放大了,按照如上所說(shuō)的結(jié)構(gòu),把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了,甚至可以做到舉一反三(比如不同顏色的氛圍,我就不展開(kāi)了):
整個(gè) case 下來(lái),你會(huì)發(fā)現(xiàn)用光來(lái)聚焦在信息上,自然而然就形成了我們說(shuō)所得 “信息優(yōu)先級(jí)”;有點(diǎn)時(shí)候空氣和光影的飽滿程度超乎你的想象,這種自然存在的物質(zhì)可以很好的幫助畫(huà)面分層,以達(dá)到填充的效果,并不是一定要依賴于實(shí)體化的裝飾。
對(duì)了,如果你跟我一樣閑著沒(méi)事干的話,借用 keynote 的動(dòng)畫(huà)效果做一個(gè)吊炸天的動(dòng)效,一定可以成為匯報(bào)場(chǎng)上最靚的崽(注意:視頻有音樂(lè))!
keynote 素材和視頻可在開(kāi)頭/文末下載
本來(lái)不打算再開(kāi)一個(gè)章節(jié)說(shuō)這個(gè),但還是覺(jué)著很有必要再說(shuō)下(我好糾結(jié)),作為 PPT 來(lái)講,ta 的主要用途分為兩種:其一是給人看的,其二是給人講的;不管是哪種,盡可能的簡(jiǎn)化文字,是對(duì)輸入者關(guān)愛(ài);
以上圖為例(實(shí)名 diss 自己的作品),坦誠(chéng)的講左邊的部分大多數(shù)觀者是不會(huì)有心思來(lái)看的,按照視覺(jué)系統(tǒng)的處理,這部分就會(huì)被當(dāng)成一個(gè)“面”而被忽略掉,這種情況下右邊顯得有力很多,也能幫助觀者聚焦信息,所以還是那句話,能不寫(xiě)的就別寫(xiě),能少些的別多寫(xiě),保持信息的密度也是設(shè)計(jì)師必要的職責(zé)之一。
想問(wèn)一個(gè)問(wèn)題,鐵子們覺(jué)著 UI 的本質(zhì)或者作用是什么?從我個(gè)人的角度來(lái)講,UI 設(shè)計(jì)的本質(zhì)就是對(duì)信息的整理歸類和編排,沒(méi)有什么比信息更重要,如果貿(mào)然為了飽滿加入一些裝飾元素,很有可能是本末倒置,得不償失。這就像喝酒一樣,喝醉很容易,但微醺的感覺(jué)才是最棒的,希望你能有個(gè)好心情迎接美好的一年~
文章來(lái)源:優(yōu)設(shè)網(wǎng) 作者:負(fù)能量補(bǔ)給站
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com