技術資訊
簡潔的網頁設計
2012-07-18 00:12:13
現(xiàn)代城市生活中我們每天要面對嘈雜擁堵的街道和地鐵,各式各樣的廣告,處理各種郵件和信息。于是我們內心追求一種體驗那就是—極簡,像大家家喻戶曉的品牌如:MUJI無印良品、 蘋果 、宜家家居,都是這一風格的發(fā)揚者,他們的產品也獲得了巨大成功。
極簡在攝影中是一種突出主體取簡去繁的攝影手法,在生活中是一種放松的生活態(tài)度,在設計中是一種簡潔的設計手法。
微博的設計體驗也是如此,我們去掉了復雜的視覺干擾,力求給用戶帶來愉悅輕松的視覺體驗。
1. 微博同城項目
說起微博同城項目在設計的時候,我不得不感謝一個攝影師給我?guī)淼囊恍╈`感。
德國攝影師JosefSchulz(1966生于荷蘭)
同城項目要求根據用戶登錄ip來判斷登錄地點。這就需要一張能體現(xiàn)當地風土人情的頭圖來營造氛圍。怎么做呢?怎樣才能讓用戶有家的感覺?
正當我在想用美食、風景、建筑為題材切入的時候,無意中發(fā)現(xiàn)了這組攝影作品。它沒有多余的光效,畫面干凈,看著很舒服。但是看似簡單的東西卻在角度和構圖上要比普通照片講究的多,比如下面這組攝影就是追求的平面構成和透視原則,內容看似很單調,但構成感很強。
然后我確定了用城市建筑來表現(xiàn),我開始在網絡上搜索幾個主要城市的地標性建筑,然后進行簡化和提煉,把建筑的主要特點進行勾勒.以香港為例:
先找了一張有代表性的香港夜景
然后畫出簡單的建筑骨骼后開始上色,說到這我插一個有意思的事情。宮崎駿的工作室中“小男孩”組負責草圖和結構稿的繪制,然后由 “小女孩”組完成上色。
[最終效果圖]
遺憾的是這個項目由于種種原因上線后很快就下了,所以大家可能沒能看到。呵呵~
我小結一下這一過程我學到的一點小經驗吧,在處理類似的產品頁面的時候可以考慮用平面化的剪影圖形,設計加上一點畫面節(jié)奏處理,再用顏色一點顏色進行畫面烘托,能起到不錯的視覺效果希望大家能可能用的上。
下面這個項目大家每天都在用,雖然它小的讓人很難察覺,但是給用戶減少了很多認知負擔。圖標能讓我們很快速的找到需要的東西,能在給用戶清晰的指引。
2. 微博圖標設計
這個圖標是去年年底的時候畫的,當時需要對微博進行改版(V4),之前的圖標存在很多問題,比如風格不統(tǒng)一,大小也五花八門。
這是整理后的圖標,圖標沒有水晶質感,沒有過多的質感塑造。以極簡的設計風格為主線進行,這也跟微博整體體驗的“輕”“薄”精神相一致。
我們來看看新版微博和舊版微博的發(fā)布框的對比,比較明顯能看出來圖標的清晰度和運用極簡設計風格的視覺效果。舊版的圖標有很多沒必要的高光和立體感,但是這些效果反而沒起到理想的效果,反而識別性大大減弱。
3. 圖表設計
先定義圖表的色調,以為圖表跟以上兩個設計不同的地方是在于,它是靠顏色來識別。所以顏色選用尤為重要。圖表有的時候是比較枯燥的,所以顏色我選擇冷色系,這樣比較耐看,相對于暖色系而言,能降低用戶厭倦反感的情緒。
我會加入一些微弱的光和投影,但是總的方向還是以極簡的風格為主。
[餅形圖表]
在增加選項的時候,其它選項的顏色需要根據主色調來進行擴展,但是有個小小注意事項:因為近似色的關系,為保證顏色左右能區(qū)分開,我們需要規(guī)定每個顏色出現(xiàn)的位置,所以我給開發(fā)人員做了一個顏規(guī)范。
[曲線圖表]
曲線圖表也是如此,細節(jié)上有一些弱弱的投影和高光變化。
最后總結一下:極簡不等于簡單,但極簡拒絕多余。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網品牌數字化
- [2023-05-06 10:32:26] 青島網站建設公司,高端網站定制,一站式網站服務——力圖數字科技
- [2023-04-27 13:47:54] 高端定制網站建設——從滿足預期到走向卓越
- [2023-04-11 09:17:49] H5頁面設計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數字科技配套網站服務支持
- [2021-05-18 10:14:11] 青島網站建設的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網建設項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網站建設最容易忽略的人性化設計
- [2020-12-16 16:55:32] 建設一個常規(guī)的公司網站建設成本大概是多少?
延伸閱讀
- [2012-11-20 16:45:31] dede程序頁面輸出空行
- [2012-12-23 00:11:11] 交互設計的邏輯關系應用
- [2011-11-07 11:47:01] 怎樣主動提交網站地圖,讓谷歌公司、雅虎、百度、live.com統(tǒng)統(tǒng)收錄
- [2016-07-19 11:37:45] 織夢 廣告管理不更新
- [2013-09-24 23:27:29] 網站設計切圖與重構的質量分析
- [2014-09-27 00:52:56] 響應式網站的利與弊
- [2011-12-08 19:17:59] 可雙向提交酷站的門戶網站
- [2014-09-28 10:39:40] 了解和運用網頁設計中的GRUNGE
- [2014-11-18 09:43:39] 網站導航設計系統(tǒng)的分類及作用
- [2012-02-10 15:15:01] 不被處罰的DIV隱藏連接方法
- [2011-12-06 16:12:06] 新站如何快速的增加網站外鏈?
- [2015-04-23 00:21:28] 網站風格定位如何把握