淺談極簡風格在設計中的運用

Hi 大家好(hǎo)，我是阿木，今天我結合我在微博的實際項目跟大家分享一下極簡風格的一點設計心得。現代城市生活中我們每天要面(miàn)對(duì)嘈雜擁堵的街道(dào)和地鐵，各式各樣(yàng)的廣告，處理各種(zhǒng)郵件和信息。于是我們内心追求一種(zhǒng)體驗那就是—極簡，像大家家喻戶曉的品牌如：MUJI無印良品、 蘋果 、宜家家居，都(dōu)是這(zhè)一風格的發(fā)揚者，他們的産品也獲得了巨大成(chéng)功。

極簡在攝影中是一種(zhǒng)突出主體取簡去繁的攝影手法，在生活中是一種(zhǒng)放松的生活态度，在設計中是一種(zhǒng)簡潔的設計手法。
微博的設計體驗也是如此，我們去掉了複雜的視覺幹擾，力求給用戶帶來愉悅輕松的視覺體驗。


1. 微博同城項目

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


然後(hòu)我确定了用城市房地産來表現，我開(kāi)始在網絡上搜索幾個主要城市的地标性房地産，然後(hòu)進(jìn)行簡化和提煉，把房地産的主要特點進(jìn)行勾勒.以香港爲例：先找了一張有代表性的香港夜景


說起(qǐ)微博同城項目在設計的時候，我不得不感謝一個攝影師給我帶來的一些靈感。
德國(guó)攝影師JosefSchulz（1966生于荷蘭）

然後(hòu)畫出簡單的房地産骨骼後(hòu)開(kāi)始上色，說到這(zhè)我插一個有意思的事(shì)情。宮崎駿的工作室中“小男孩”組負責草圖和結構稿的繪制，然後(hòu)由 “小女孩”組完成(chéng)上色。

[終效果圖]

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

遺憾的是這(zhè)個項目由于種(zhǒng)種(zhǒng)原因上線後(hòu)很快就下了，所以大家可能(néng)沒(méi)能(néng)看到。呵呵~


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


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


2. 微博圖标設計


這(zhè)個圖标是去年年底的時候畫的，當時需要對(duì)微博進(jìn)行改版（V4），之前的圖标存在很多問題，比如風格不統一，大小也五花八門。
這(zhè)是整理後(hòu)的圖标，圖标沒(méi)有水晶質感，沒(méi)有過(guò)多的質感塑造。以極簡的設計風格爲主線進(jìn)行，這(zhè)也跟微博整體體驗的“輕”“薄”精神相一緻。

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

3. 圖表設計


先定義圖表的色調，以爲圖表跟以上兩(liǎng)個設計不同的地方是在于，它是靠顔色來識别。所以顔色選用尤爲重要。圖表有的時候是比較枯燥的，所以顔色我選擇冷色系，這(zhè)樣(yàng)比較耐看，相對(duì)于暖色系而言，能(néng)降低用戶厭倦反感的情緒。


我會加入一些微弱的光和投影，但是總的方向(xiàng)還(hái)是以極簡的風格爲主。


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

[曲線圖表]

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

後(hòu)總結一下：極簡不等于簡單，但極簡拒絕多餘。