<b>網站設計:淺談極簡風格在設計中的運用</b>

作者: 來源:未知 2012-06-19 22:29:46 閱讀 我要評論 直達商品

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

  

 

  極簡在攝影中是一種突出主體取簡去繁的攝影手法,在生活中是一種放松的生活態度,在設計中是一種簡潔的設計手法。

  微博的設計體驗也是如此,我們去掉了復雜的視覺干擾,力求給用戶帶來愉悅輕松的視覺體驗。

  1. 微博同城項目

  說起微博同城項目在設計的時候,我不得不感謝一個攝影師給我帶來的一些靈感。

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

  

 

  同城項目要求根據用戶登錄ip來判斷登錄地點。這就需要一張能體現當地風土人情的頭圖來營造氛圍。怎么做呢?怎樣才能讓用戶有家的感覺?

  正當我在想用美食、風景、建筑為題材切入的時候,無意中發現了這組攝影作品。它沒有多余的光效,畫面干凈,看著很舒服。但是看似簡單的東西卻在角度和構圖上要比普通照片講究的多,比如下面這組攝影就是追求的平面構成和透視原則,內容看似很單調,但構成感很強。

  然后我確定了用城市建筑來表現,我開始在網絡上搜索幾個主要城市的地標性建筑,然后進行簡化和提煉,把建筑的主要特點進行勾勒.以香港為例:

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

  

 

  然后畫出簡單的建筑骨骼后開始上色,說到這我插一個有意思的事情。宮崎駿的工作室中“小男孩”組負責草圖和結構稿的繪制,然后由 “小女孩”組完成上色。

  

 

  [最終效果圖]

  

 

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

  

 

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

  我小結一下這一過程我學到的一點小經驗吧,在處理類似的產品頁面的時候可以考慮用平面化的剪影圖形,設計加上一點畫面節奏處理,再用顏色一點顏色進行畫面烘托,能起到不錯的視覺效果希望大家能可能用的上。

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

  2. 微博圖標設計

  這個圖標是去年年底的時候畫的,當時需要對微博進行改版(V4),之前的圖標存在很多問題,比如風格不統一,大小也五花八門。

  這是整理后的圖標,圖標沒有水晶質感,沒有過多的質感塑造。以極簡的設計風格為主線進行,這也跟微博整體體驗的“輕”“薄”精神相一致。

  

 

  我們來看看新版微博和舊版微博的發布框的對比,比較明顯能看出來圖標的清晰度和運用極簡設計風格的視覺效果。舊版的圖標有很多沒必要的高光和立體感,但是這些效果反而沒起到理想的效果,反而識別性大大減弱。

  

 

  3. 圖表設計

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

  我會加入一些微弱的光和投影,但是總的方向還是以極簡的風格為主。

  [餅形圖表]

  在增加選項的時候,其它選項的顏色需要根據主色調來進行擴展,但是有個小小注意事項:因為近似色的關系,為保證顏色左右能區分開,我們需要規定每個顏色出現的位置,所以我給開發人員做了一個顏規范。

  

 

  

 

  [曲線圖表]

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

  

 

  最后總結一下:極簡不等于簡單,但極簡拒絕多余。

  謝謝閱讀:)

  最后推薦幾個網址:

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

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

  http://www.icoeye.com/(圖標很牛x,還帶設計過程)


  推薦閱讀

  <b>網站分析:縮短網頁開發時間的十大方法</b>

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


本文標題:<b>網站設計:淺談極簡風格在設計中的運用</b>

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

樂購科技部分新聞及文章轉載自互聯網,供讀者交流和學習,若有涉及作者版權等問題請及時與我們聯系,以便更正、刪除或按規定辦理。感謝所有提供資訊的網站,歡迎各類媒體與樂購科技進行文章共享合作。

網友點評
我的評論: 人參與評論
驗證碼: 匿名回答
網友評論(點擊查看更多條評論)
友情提示: 登錄后發表評論,可以直接從評論中的用戶名進入您的個人空間,讓更多網友認識您。
自媒體專欄

評論

熱度

主站蜘蛛池模板: 国产成人久久777777| 久久久久亚洲av成人无码| 免费看污成人午夜网站| 国产成人av一区二区三区在线观看| 成人国产欧美精品一区二区| 成人午夜视频网站| 国产成人免费ā片在线观看老同学 | 国产成人精品午夜视频'| 国产亚洲精品成人久久网站| 久久电影www成人网| 成人中文字幕在线| 伊人久久大香线蕉AV成人| 成人在线视频一区| 亚洲av成人片在线观看| 成人免费观看一区二区| 国产69久久精品成人看| 日韩成人无码一区二区三区| 国产精品成人久久久久久久| 精品欧美成人高清在线观看| 国产精品成人一区二区三区| 色老成人精品视频在线观看| 国产成人无码av在线播放不卡| 色偷偷成人网免费视频男人的天堂 | 亚洲欧洲精品成人久久曰影片| 成人欧美一区二区三区黑人免费| 亚洲成人免费看| 成人3d动漫网址在线观看| 88xx成人永久免费观看| 免费成人一级片| 国产成人精品视频午夜| 成人永久免费福利视频app| 亚洲AV成人噜噜无码网站| 国产成人a毛片在线| 国产成人免费视频app| 成人做受120视频试看| 成人毛片免费视频播放| 亚洲AV成人片色在线观看高潮| 国产亚洲欧美成人久久片| 亚洲国产成人精品无码一区二区 | 992tv成人影院| 成人草莓视频在线观看|