淺談極簡(jiǎn)風(fēng)格在設計中的運用

Hi 大家好，我是阿木，今天我結合我在微博的實(shí)際項目跟大家分享一下極簡(jiǎn)風(fēng)格的一點(diǎn)設計心得?，F代城市生活中我們每天要面對嘈雜擁堵的街道和地鐵，各式各樣的廣告，處理各種郵件和信息。于是我們內心追求一種體驗那就是—極簡(jiǎn)，像大家家喻戶(hù)曉的品牌如：MUJI無(wú)印良品、 蘋(píng)果 、宜家家居，都是這一風(fēng)格的發(fā)揚者，他們的產(chǎn)品也獲得了巨大成功。

極簡(jiǎn)在攝影中是一種突出主體取簡(jiǎn)去繁的攝影手法，在生活中是一種放松的生活態(tài)度，在設計中是一種簡(jiǎn)潔的設計手法。
微博的設計體驗也是如此，我們去掉了復雜的視覺(jué)干擾，力求給用戶(hù)帶來(lái)愉悅輕松的視覺(jué)體驗。


1. 微博同城項目

同城項目要求根據用戶(hù)登錄ip來(lái)判斷登錄地點(diǎn)。這就需要一張能體現當地風(fēng)土人情的頭圖來(lái)營(yíng)造氛圍。怎么做呢？怎樣才能讓用戶(hù)有家的感覺(jué)？
正當我在想用美食、風(fēng)景、房地產(chǎn)為題材切入的時(shí)候，無(wú)意中發(fā)現了這組攝影作品。它沒(méi)有多余的光效，畫(huà)面干凈，看著(zhù)很舒服。但是看似簡(jiǎn)單的東西卻在角度和構圖上要比普通照片講究的多，比如下面這組攝影就是追求的平面構成和透視原則，內容看似很單調，但構成感很強。


然后我確定了用城市房地產(chǎn)來(lái)表現，我開(kāi)始在網(wǎng)絡(luò )上搜索幾個(gè)主要城市的地標性房地產(chǎn)，然后進(jìn)行簡(jiǎn)化和提煉，把房地產(chǎn)的主要特點(diǎn)進(jìn)行勾勒.以香港為例：先找了一張有代表性的香港夜景


說(shuō)起微博同城項目在設計的時(shí)候，我不得不感謝一個(gè)攝影師給我帶來(lái)的一些靈感。
德國攝影師JosefSchulz（1966生于荷蘭）

然后畫(huà)出簡(jiǎn)單的房地產(chǎn)骨骼后開(kāi)始上色，說(shuō)到這我插一個(gè)有意思的事情。宮崎駿的工作室中“小男孩”組負責草圖和結構稿的繪制，然后由 “小女孩”組完成上色。

[終效果圖]

其它城市的設計過(guò)程也是如此，我就不再一一贅述了：）

遺憾的是這個(gè)項目由于種種原因上線(xiàn)后很快就下了，所以大家可能沒(méi)能看到。呵呵~


我小結一下這一過(guò)程我學(xué)到的一點(diǎn)小經(jīng)驗吧，在處理類(lèi)似的產(chǎn)品頁(yè)面的時(shí)候可以考慮用平面化的剪影圖形，設計加上一點(diǎn)畫(huà)面節奏處理，再用顏色一點(diǎn)顏色進(jìn)行畫(huà)面烘托，能起到不錯的視覺(jué)效果希望大家能可能用的上。


下面這個(gè)項目大家每天都在用，雖然它小的讓人很難察覺(jué)，但是給用戶(hù)減少了很多認知負擔。圖標能讓我們很快速的找到需要的東西，能在給用戶(hù)清晰的指引。


2. 微博圖標設計


這個(gè)圖標是去年年底的時(shí)候畫(huà)的，當時(shí)需要對微博進(jìn)行改版（V4），之前的圖標存在很多問(wèn)題，比如風(fēng)格不統一，大小也五花八門(mén)。
這是整理后的圖標，圖標沒(méi)有水晶質(zhì)感，沒(méi)有過(guò)多的質(zhì)感塑造。以極簡(jiǎn)的設計風(fēng)格為主線(xiàn)進(jìn)行，這也跟微博整體體驗的“輕”“薄”精神相一致。

我們來(lái)看看新版微博和舊版微博的發(fā)布框的對比，比較明顯能看出來(lái)圖標的清晰度和運用極簡(jiǎn)設計風(fēng)格的視覺(jué)效果。舊版的圖標有很多沒(méi)必要的高光和立體感，但是這些效果反而沒(méi)起到理想的效果，反而識別性大大減弱。

3. 圖表設計


先定義圖表的色調，以為圖表跟以上兩個(gè)設計不同的地方是在于，它是靠顏色來(lái)識別。所以顏色選用尤為重要。圖表有的時(shí)候是比較枯燥的，所以顏色我選擇冷色系，這樣比較耐看，相對于暖色系而言，能降低用戶(hù)厭倦反感的情緒。


我會(huì )加入一些微弱的光和投影，但是總的方向還是以極簡(jiǎn)的風(fēng)格為主。


[餅形圖表]
在增加選項的時(shí)候，其它選項的顏色需要根據主色調來(lái)進(jìn)行擴展，但是有個(gè)小小注意事項：因為近似色的關(guān)系，為保證顏色左右能區分開(kāi)，我們需要規定每個(gè)顏色出現的位置，所以我給開(kāi)發(fā)人員做了一個(gè)顏規范。

[曲線(xiàn)圖表]

曲線(xiàn)圖表也是如此，細節上有一些弱弱的投影和高光變化。

后總結一下：極簡(jiǎn)不等于簡(jiǎn)單，但極簡(jiǎn)拒絕多余。