<b>網(wǎng)站設(shè)計(jì):淺談極簡(jiǎn)風(fēng)格在設(shè)計(jì)中的運(yùn)用</b>

作者: 來(lái)源:未知 2012-06-19 22:29:46 閱讀 我要評(píng)論 直達(dá)商品

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

  

 

  極簡(jiǎn)在攝影中是一種突出主體取簡(jiǎn)去繁的攝影手法,在生活中是一種放松的生活態(tài)度,在設(shè)計(jì)中是一種簡(jiǎn)潔的設(shè)計(jì)手法。

  微博的設(shè)計(jì)體驗(yàn)也是如此,我們?nèi)サ袅藦?fù)雜的視覺干擾,力求給用戶帶來(lái)愉悅輕松的視覺體驗(yàn)。

  1. 微博同城項(xiàng)目

  說(shuō)起微博同城項(xiàng)目在設(shè)計(jì)的時(shí)候,我不得不感謝一個(gè)攝影師給我?guī)?lái)的一些靈感。

  德國(guó)攝影師JosefSchulz(1966生于荷蘭)

  

 

  同城項(xiàng)目要求根據(jù)用戶登錄ip來(lái)判斷登錄地點(diǎn)。這就需要一張能體現(xiàn)當(dāng)?shù)仫L(fēng)土人情的頭圖來(lái)營(yíng)造氛圍。怎么做呢?怎樣才能讓用戶有家的感覺?

  正當(dāng)我在想用美食、風(fēng)景、建筑為題材切入的時(shí)候,無(wú)意中發(fā)現(xiàn)了這組攝影作品。它沒有多余的光效,畫面干凈,看著很舒服。但是看似簡(jiǎn)單的東西卻在角度和構(gòu)圖上要比普通照片講究的多,比如下面這組攝影就是追求的平面構(gòu)成和透視原則,內(nèi)容看似很單調(diào),但構(gòu)成感很強(qiáng)。

  然后我確定了用城市建筑來(lái)表現(xiàn),我開始在網(wǎng)絡(luò)上搜索幾個(gè)主要城市的地標(biāo)性建筑,然后進(jìn)行簡(jiǎn)化和提煉,把建筑的主要特點(diǎn)進(jìn)行勾勒.以香港為例:

  先找了一張有代表性的香港夜景

  

 

  然后畫出簡(jiǎn)單的建筑骨骼后開始上色,說(shuō)到這我插一個(gè)有意思的事情。宮崎駿的工作室中“小男孩”組負(fù)責(zé)草圖和結(jié)構(gòu)稿的繪制,然后由 “小女孩”組完成上色。

  

 

  [最終效果圖]

  

 

  其它城市的設(shè)計(jì)過程也是如此,我就不再一一贅述了:)

  

 

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

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

  下面這個(gè)項(xiàng)目大家每天都在用,雖然它小的讓人很難察覺,但是給用戶減少了很多認(rèn)知負(fù)擔(dān)。圖標(biāo)能讓我們很快速的找到需要的東西,能在給用戶清晰的指引。

  2. 微博圖標(biāo)設(shè)計(jì)

  這個(gè)圖標(biāo)是去年年底的時(shí)候畫的,當(dāng)時(shí)需要對(duì)微博進(jìn)行改版(V4),之前的圖標(biāo)存在很多問題,比如風(fēng)格不統(tǒng)一,大小也五花八門。

  這是整理后的圖標(biāo),圖標(biāo)沒有水晶質(zhì)感,沒有過多的質(zhì)感塑造。以極簡(jiǎn)的設(shè)計(jì)風(fēng)格為主線進(jìn)行,這也跟微博整體體驗(yàn)的“輕”“薄”精神相一致。

  

 

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

  

 

  3. 圖表設(shè)計(jì)

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

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

  [餅形圖表]

  在增加選項(xiàng)的時(shí)候,其它選項(xiàng)的顏色需要根據(jù)主色調(diào)來(lái)進(jìn)行擴(kuò)展,但是有個(gè)小小注意事項(xiàng):因?yàn)榻粕年P(guān)系,為保證顏色左右能區(qū)分開,我們需要規(guī)定每個(gè)顏色出現(xiàn)的位置,所以我給開發(fā)人員做了一個(gè)顏規(guī)范。

  

 

  

 

  [曲線圖表]

  曲線圖表也是如此,細(xì)節(jié)上有一些弱弱的投影和高光變化。

  

 

  最后總結(jié)一下:極簡(jiǎn)不等于簡(jiǎn)單,但極簡(jiǎn)拒絕多余。

  謝謝閱讀:)

  最后推薦幾個(gè)網(wǎng)址:

  http://www.josefschulz.de/(文章第一個(gè)提到的攝影師的網(wǎng)址)

  https://www.mint.com/t/012-c/(圖表做的不錯(cuò)哦)

  http://www.icoeye.com/(圖標(biāo)很牛x,還帶設(shè)計(jì)過程)


  推薦閱讀

  <b>網(wǎng)站分析:縮短網(wǎng)頁(yè)開發(fā)時(shí)間的十大方法</b>

在當(dāng)今的開發(fā)環(huán)境之下,快即是好。 原文:http://sixrevisions.com/web-development/10-ways-to-cut-down-web-development-time/ 在當(dāng)今的開發(fā)環(huán)境之下,快即是好。 當(dāng)今諸如快速應(yīng)用開發(fā) ,敏捷軟件開發(fā) 以及異步Ja>>>詳細(xì)閱讀


本文標(biāo)題:<b>網(wǎng)站設(shè)計(jì):淺談極簡(jiǎn)風(fēng)格在設(shè)計(jì)中的運(yùn)用</b>

地址:http://www.sdlzkt.com/a/22/20120619/69404.html

樂購(gòu)科技部分新聞及文章轉(zhuǎn)載自互聯(lián)網(wǎng),供讀者交流和學(xué)習(xí),若有涉及作者版權(quán)等問題請(qǐng)及時(shí)與我們聯(lián)系,以便更正、刪除或按規(guī)定辦理。感謝所有提供資訊的網(wǎng)站,歡迎各類媒體與樂購(gòu)科技進(jìn)行文章共享合作。

網(wǎng)友點(diǎn)評(píng)
我的評(píng)論: 人參與評(píng)論
驗(yàn)證碼: 匿名回答
網(wǎng)友評(píng)論(點(diǎn)擊查看更多條評(píng)論)
友情提示: 登錄后發(fā)表評(píng)論,可以直接從評(píng)論中的用戶名進(jìn)入您的個(gè)人空間,讓更多網(wǎng)友認(rèn)識(shí)您。
自媒體專欄

評(píng)論

熱度

主站蜘蛛池模板: 成人18网址在线观看| 国产成人无码a区在线观看视频免费| 亚洲国产成人一区二区精品区| 国产成人vr精品a视频| 久久久www成人免费精品| 成人韩免费网站| 国产成人综合久久精品亚洲| 免费国产成人高清视频网站| 欧美国产成人精品一区二区三区| 成人做受视频试看60秒| 国产成人精品无码片区在线观看| 国产成人精品高清免费| 亚洲国产成人久久一区www| 成人毛片免费观看视频| 国产成人免费一区二区三区| 欧美成人午夜视频| 免费国产成人高清视频网站| 成人片黄网站a毛片免费| 亚洲国产成人片在线观看| 成人免费在线看片| 2345成人高清毛片| 国产一级一级一级成人毛片| 成人女人a毛片在线看| 91成人高清在线播放| 久久国产成人精品| 亚洲高清成人欧美动作片| 国产精品成人va在线观看| 欧美国产成人精品一区二区三区 | 成人免费看吃奶视频网站| 国产成人免费手机在线观看视频| 欧美成人精品高清在线观看| 国产成人久久精品亚洲小说| 成人免费视频软件网站| 欧美成人第一页| 久久久久亚洲av成人无码| 全球中文成人在线| 四虎国产欧美成人影院| 国产成人久久一区二区三区| 国产综合成人久久大片91| 天天摸天天碰成人免费视频| 国产成人高清亚洲一区app|