2015-11-4 用心設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
來源:莫貝網(wǎng)
△ 國外一些to B 產(chǎn)品的首頁設(shè)計
以上是我隨便找的幾個產(chǎn)品的首頁截圖,大家感受下??偟膩碚f,國外設(shè)計有以下幾個特點:
所謂“高端大氣上檔次”,可能也就是這樣了吧。由于我不是專業(yè)做視覺設(shè)計的,所以也很難說出其中的原因,相信視覺設(shè)計師會從不同的角度講出很多門道。
我認為“個性”是中外設(shè)計最大的區(qū)別:中國的設(shè)計師比較注重是否滿足客戶需求,是否符合產(chǎn)品定位,是否美觀和諧,細節(jié)是否夠精致;國外的設(shè)計師除此 之外,還非常注重整體感和產(chǎn)品個性的表達:每個網(wǎng)站風(fēng)格看起來都非常的與眾不同,你很難找到看起來非常雷同的設(shè)計,而國內(nèi)設(shè)計雷同的網(wǎng)站比比皆是。
國外to B 產(chǎn)品首頁縮小后,依然可以快速辨認
國內(nèi)to B產(chǎn)品首頁縮小后,辨認較困難
比如上圖所示,國外的to B產(chǎn)品首頁辨識度較高,即使縮小后,我依然可以輕松辨認出是哪一家的網(wǎng)站。而國內(nèi)的to B產(chǎn)品(我找的都是國內(nèi)的大公司或行業(yè)知名公司)首頁縮小后,辨識比較困難(盡管我對這些網(wǎng)站都很熟悉)。
國外網(wǎng)站讓我感受最深刻的,是對品牌的塑造和表現(xiàn)力(第一屏非常重要)。Basho的傳統(tǒng)日式風(fēng)格,Docker的海洋主題,F(xiàn)oundation長兩只角的小萌獸,Heroku的紫色+干練線條,Cloudera的抽象圖形及色彩運用等等,都給我留下了深刻的印象。
對色彩、圖形、設(shè)計元素的大膽想象及運用,在不拘一格之間又形成了默契的行業(yè)共性。共性中充滿個性,是國外to B網(wǎng)站給我的整體感覺。而這種專業(yè)及個性的表達,建立在對品牌的深刻理解及創(chuàng)造發(fā)揮上。這是目前國內(nèi)的設(shè)計師比較欠缺,并且不夠重視的地方。國內(nèi)的設(shè)計師 往往接到需求,看看競品就開始設(shè)計了。正是這個關(guān)鍵環(huán)節(jié)的缺失,造成了設(shè)計結(jié)果的差異。
很多to B網(wǎng)站的圖標也具有這個特征:共性中充滿個性。比如Palantir(知名大數(shù)據(jù)網(wǎng)站,估值達200億美金)的圖標類似原子的運動軌跡;Heroku的一 組圖標外形全是六邊形;Foundation的圖標出現(xiàn)了我們熟悉的網(wǎng)格線和尺寸標記,意味著嚴謹縝密;Basho的兩組圖標分別運用了傳統(tǒng)水紋元素及折 紙元素,向世界宣告這是一個來自亞洲的網(wǎng)站。通過統(tǒng)一符號的延展運用,既突出了品牌感覺,又讓人感到獨具匠心,妙不可言。這樣的網(wǎng)站你怎么可能記不住呢?
幾個國外to B網(wǎng)站的圖標
再看AWS,無處不在的曲線分割元素讓很多人記住了它的頁面,即使有些人很討厭這種風(fēng)格。
AWS 首頁部分位置
當然,品牌符號(與品牌含義相關(guān)的特定元素符號)與網(wǎng)站整體的品牌設(shè)定是分不開的。比如Palantir可能是想強調(diào)精尖科技,Heroku想通過 六邊形強調(diào)穩(wěn)定和科技(六邊形類似化學(xué)元素符號),F(xiàn)oundation想強調(diào)嚴謹,Basho想強調(diào)日本的傳統(tǒng)文化,AWS想強調(diào)云計算的彈性、靈活等 等。
所以這里有一個小技巧:明確你的產(chǎn)品想突出的感覺,設(shè)定與之相符合的元素符號并在適合的位置反復(fù)出現(xiàn),個性感和品牌感就會呼之欲出,設(shè)計質(zhì)量立刻提升一個臺階。
看看Cloudera吧,首頁不同部分(首頁三屏中不同部分的截圖對比)的關(guān)聯(lián)是不是感覺很像是電影中的隱藏劇情般引人入勝呢?黃、藍、綠三種顏色的不同處理方式(交融、分離、疊加)構(gòu)成了整體頁面既統(tǒng)一、個性、又有巧妙聯(lián)系的視覺語言。
Cloudera首頁三個部分的對比
再看看Basho,無處不在的呼應(yīng):不管是圖形、元素還是圖標,并且不同頁面風(fēng)格也高度統(tǒng)一。
Basho各網(wǎng)頁截圖對比
元素呼應(yīng)對設(shè)計師的要求非常高,需要靜下心來去思考、嘗試以及創(chuàng)新。首先需要對產(chǎn)品有很深入的理解,然后在此基礎(chǔ)上大膽想象及發(fā)揮,產(chǎn)出產(chǎn)品的個性 關(guān)鍵詞,再通過一些專業(yè)方法賦予靈感,設(shè)定設(shè)計主題(品牌感強),然后通過反復(fù)試錯以及細節(jié)推敲,逐漸明晰品牌符號的運用(符號運用)及關(guān)聯(lián)方式(元素呼 應(yīng))以及表達手法,最后得到充滿個性、超高逼格的作品。
由于我平時經(jīng)常分析這些優(yōu)秀的網(wǎng)站,所以我發(fā)現(xiàn),每隔幾個月,這些網(wǎng)站就會有明顯的變化。而分析這些網(wǎng)站前后的對比,對我了解網(wǎng)站設(shè)計趨勢有很大的幫助。另外我也從中明白,再好的網(wǎng)站,也需要不斷更新迭代;而不是固守優(yōu)秀成果,不思進取。這點對設(shè)計師來說非常的重要。
Foundation首屏前后對比
Foundation首屏圖標前后對比
比如Foundation最近做了一次設(shè)計改版。在這次改版中,文案和品牌內(nèi)核沒有發(fā)生變化(還是兩個角的小萌獸,還是之前的圖標內(nèi)容),只是設(shè)計 風(fēng)格改變了。從中可以看出品牌內(nèi)核的重要性及穩(wěn)定性。新的設(shè)計風(fēng)格更加現(xiàn)代、簡潔(新版圖標外沿依然有和頭圖呼應(yīng)的品牌符號,截圖可能看不清楚)。
最后,大家一定想更加具體的了解設(shè)計高逼格、有個性、品牌感強的產(chǎn)品設(shè)計方法及流程,如果有興趣的話請關(guān)注我下一篇文章。另外我相信,這些方法也同樣適用于to C的產(chǎn)品。如果你能理解我所講的思維及方法,設(shè)計質(zhì)量一定會有突飛猛進的提升。
原文地址:blog.sina
作者:劉津legene
藍藍設(shè)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://paul-jarrel.com