阿里交互專家：國外視覺設(shè)計(jì)的六大特點(diǎn)

　　最近為了團(tuán)隊(duì)能做好產(chǎn)品首頁設(shè)計(jì)，我研究了很多國外to B類的相關(guān)產(chǎn)品設(shè)計(jì)。發(fā)現(xiàn)國外這類設(shè)計(jì)作品在整體水準(zhǔn)上比國內(nèi)高了不止一個(gè)檔次(國內(nèi)to B產(chǎn)品起步較晚，在設(shè)計(jì)方面的研究幾乎空白)，而這種差距和設(shè)計(jì)技法沒有太多關(guān)系，更多的是對(duì)產(chǎn)品個(gè)性的把握和傳達(dá)?？偟膩碚f，國外設(shè)計(jì)有以下幾個(gè)特點(diǎn)：

　　一、超高逼格(放大看)

　　所謂“高端大氣上檔次”，可能也就是這樣了吧。由于我不是專業(yè)做視覺設(shè)計(jì)的，所以也很難說出其中的原因，相信視覺設(shè)計(jì)師會(huì)從不同的角度講出很多門道。

　　二、充滿個(gè)性(縮小看)

　　我認(rèn)為“個(gè)性”是中外設(shè)計(jì)最大的區(qū)別：中國的設(shè)計(jì)師比較注重是否滿足客戶需求，是否符合產(chǎn)品定位，是否美觀和諧，細(xì)節(jié)是否夠精致;國外的設(shè)計(jì)師除此之外，還非常注重整體感和產(chǎn)品個(gè)性的表達(dá)：每個(gè)網(wǎng)站風(fēng)格看起來都非常的與眾不同，你很難找到看起來非常雷同的設(shè)計(jì)，而國內(nèi)設(shè)計(jì)雷同的網(wǎng)站比比皆是。

　　三、品牌感強(qiáng)(看首屏)

　　國外網(wǎng)站讓我感受最深刻的，是對(duì)品牌的塑造和表現(xiàn)力(第一屏非常重要)。Basho的傳統(tǒng)日式風(fēng)格，Docker的海洋主題，F(xiàn)oundation長兩只角的小萌獸，Heroku的紫色+干練線條，Cloudera的抽象圖形及色彩運(yùn)用等等，都給我留下了深刻的印象。

　　對(duì)色彩、圖形、設(shè)計(jì)元素的大膽想象及運(yùn)用，在不拘一格之間又形成了默契的行業(yè)共性。共性中充滿個(gè)性，是國外to B網(wǎng)站給我的整體感覺。而這種專業(yè)及個(gè)性的表達(dá)，建立在對(duì)品牌的深刻理解及創(chuàng)造發(fā)揮上。這是目前國內(nèi)的設(shè)計(jì)師比較欠缺，并且不夠重視的地方。國內(nèi)的設(shè)計(jì)師往往接到需求，看看競品就開始設(shè)計(jì)了。正是這個(gè)關(guān)鍵環(huán)節(jié)的缺失，造成了設(shè)計(jì)結(jié)果的差異。

　　四、符號(hào)運(yùn)用(看細(xì)節(jié))

　　很多to B網(wǎng)站的圖標(biāo)也具有這個(gè)特征：共性中充滿個(gè)性。比如Palantir(知名大數(shù)據(jù)網(wǎng)站，估值達(dá)200億美金)的圖標(biāo)類似原子的運(yùn)動(dòng)軌跡;Heroku的一組圖標(biāo)外形全是六邊形;Foundation的圖標(biāo)出現(xiàn)了我們熟悉的網(wǎng)格線和尺寸標(biāo)記，意味著嚴(yán)謹(jǐn)縝密;Basho的兩組圖標(biāo)分別運(yùn)用了傳統(tǒng)水紋元素及折紙?jiān)兀蚴澜缧孢@是一個(gè)來自亞洲的網(wǎng)站。通過統(tǒng)一符號(hào)的延展運(yùn)用，既突出了品牌感覺，又讓人感到獨(dú)具匠心，妙不可言。

　　當(dāng)然，品牌符號(hào)(與品牌含義相關(guān)的特定元素符號(hào))與網(wǎng)站整體的品牌設(shè)定是分不開的。比如Palantir可能是想強(qiáng)調(diào)精尖科技，Heroku想通過六邊形強(qiáng)調(diào)穩(wěn)定和科技(六邊形類似化學(xué)元素符號(hào))，F(xiàn)oundation想強(qiáng)調(diào)嚴(yán)謹(jǐn)，Basho想強(qiáng)調(diào)日本的傳統(tǒng)文化，AWS想強(qiáng)調(diào)云計(jì)算的彈性、靈活等等。

　　所以這里有一個(gè)小技巧：明確你的產(chǎn)品想突出的感覺，設(shè)定與之相符合的元素符號(hào)并在適合的位置反復(fù)出現(xiàn)，個(gè)性感和品牌感就會(huì)呼之欲出，設(shè)計(jì)質(zhì)量立刻提升一個(gè)臺(tái)階。

　　五、元素呼應(yīng)(看聯(lián)系)

　　看看Cloudera吧，首頁不同部分(首頁三屏中不同部分的截圖對(duì)比)的關(guān)聯(lián)是不是感覺很像是電影中的隱藏劇情般引人入勝呢?黃、藍(lán)、綠三種顏色的不同處理方式(交融、分離、疊加)構(gòu)成了整體頁面既統(tǒng)一、個(gè)性、又有巧妙聯(lián)系的視覺語言。

　　Basho各網(wǎng)頁截圖對(duì)比

　　元素呼應(yīng)對(duì)設(shè)計(jì)師的要求非常高，需要靜下心來去思考、嘗試以及創(chuàng)新。首先需要對(duì)產(chǎn)品有很深入的理解，然后在此基礎(chǔ)上大膽想象及發(fā)揮，產(chǎn)出產(chǎn)品的個(gè)性關(guān)鍵詞，再通過一些專業(yè)方法賦予靈感，設(shè)定設(shè)計(jì)主題(品牌感強(qiáng))，然后通過反復(fù)試錯(cuò)以及細(xì)節(jié)推敲，逐漸明晰品牌符號(hào)的運(yùn)用(符號(hào)運(yùn)用)及關(guān)聯(lián)方式(元素呼應(yīng))以及表達(dá)手法，最后得到充滿個(gè)性、超高逼格的作品。

　　六、更新速度(看變化)

　　由于我平時(shí)經(jīng)常分析這些優(yōu)秀的網(wǎng)站，所以我發(fā)現(xiàn)，每隔幾個(gè)月，這些網(wǎng)站就會(huì)有明顯的變化。而分析這些網(wǎng)站前后的對(duì)比，對(duì)我了解網(wǎng)站設(shè)計(jì)趨勢有很大的幫助。另外我也從中明白，再好的網(wǎng)站，也需要不斷更新迭代;而不是固守優(yōu)秀成果，不思進(jìn)取。

　　最后，大家一定想更加具體的了解設(shè)計(jì)高逼格、有個(gè)性、品牌感強(qiáng)的產(chǎn)品設(shè)計(jì)方法及流程，如果有興趣的話請(qǐng)關(guān)注我下一篇文章。另外我相信，這些方法也同樣適用于to C的產(chǎn)品。如果你能理解我所講的思維及方法，設(shè)計(jì)質(zhì)量一定會(huì)有突飛猛進(jìn)的提升。