2019-12-17 濤濤
設(shè)計(jì)并不只是為了區(qū)分市場(chǎng)定位，在視覺(jué)上對(duì)產(chǎn)品做一些修修補(bǔ)補(bǔ)。設(shè)計(jì)需要從品牌自身出發(fā)，設(shè)計(jì)出來(lái)的產(chǎn)品才能與用戶產(chǎn)生情感交流、為品牌而發(fā)聲，這樣的設(shè)計(jì)才能真正為品牌創(chuàng)造長(zhǎng)尾的價(jià)值。
前陣子和朋友去看車，我們?nèi)サ牡谝患业晔俏譅栁郑譅栁种鞔虻钠放评砟钍恰赴踩埂缚煽俊梗?dāng)時(shí)我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進(jìn)化來(lái)的，棱角分明、線條硬朗，同時(shí)每個(gè)部件都相當(dāng)厚實(shí)，當(dāng)時(shí)我坐在車?yán)锏臅r(shí)候，感覺(jué)自己像是坐進(jìn)了一個(gè)大保險(xiǎn)箱，里三層外三層把我包裹起來(lái)，坐在里面特別有安全感。
我們?nèi)サ牧硪患业晔菍汃R，寶馬的品牌概念主打的是「時(shí)尚」「運(yùn)動(dòng)」，所以寶馬車給人的感覺(jué)和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設(shè)計(jì)一直延伸到車內(nèi)的每一個(gè)部件。印象特別深的是，車?yán)镒蔚睦笾ζぜy和我們常見(jiàn)的品皮質(zhì)特別相似，讓我感覺(jué)自己像是坐進(jìn)一個(gè)時(shí)尚的愛(ài)馬仕箱包里。
其實(shí)無(wú)論是工業(yè)設(shè)計(jì)，還是我們的用戶界面設(shè)計(jì)，好的設(shè)計(jì)給用戶的感受與品牌理念是相契合的。設(shè)計(jì)中的每一個(gè)細(xì)節(jié)都是圍繞品牌自身而展開(kāi)，設(shè)計(jì)出來(lái)的產(chǎn)品才能夠成為品牌的具象化延伸，與用戶產(chǎn)生情感交流的同時(shí)也會(huì)讓用戶更加忠誠(chéng)于我們的品牌。具體怎么做？這需要我們運(yùn)用統(tǒng)一的設(shè)計(jì)語(yǔ)言來(lái)完成。
什么是設(shè)計(jì)語(yǔ)言？從設(shè)計(jì)的層面理解，當(dāng)你看到一組功能與形式相互融合，向你訴說(shuō)其特色與優(yōu)點(diǎn)的產(chǎn)品，從而喚起你的情感反應(yīng)時(shí)，你正在體驗(yàn)的就是設(shè)計(jì)語(yǔ)言。簡(jiǎn)單講，當(dāng)你的品牌運(yùn)用設(shè)計(jì)語(yǔ)言的時(shí)候，你的產(chǎn)品會(huì)跟人說(shuō)話：會(huì)告訴人們它能做什么，怎么做，以及你的品牌是個(gè)什么樣的品牌。而這個(gè)設(shè)計(jì)語(yǔ)言也將會(huì)從前期的風(fēng)格設(shè)定到后期的設(shè)計(jì)執(zhí)行，始終貫穿在我們整個(gè)產(chǎn)品設(shè)計(jì)的流程當(dāng)中。
首先從一開(kāi)始的風(fēng)格設(shè)定，比如每次我們?cè)O(shè)計(jì)師接到一個(gè) brief 都會(huì)先做視覺(jué)推導(dǎo)。但是我之前的視覺(jué)推導(dǎo)是這樣的：比如現(xiàn)在為一個(gè)類似拼多多的產(chǎn)品做設(shè)計(jì)，然后搜集了一圈競(jìng)品的界面，發(fā)現(xiàn)拼多多、聚劃算、淘寶特價(jià)都是這種線框的、扁平的設(shè)計(jì)風(fēng)格，所以最后推導(dǎo)的結(jié)論就是——因?yàn)槲覀兤促?gòu)面向的用戶群體是低消費(fèi)人群，而競(jìng)品的設(shè)計(jì)風(fēng)格是 xxxx 的，所以我們的用戶偏愛(ài)這種 xxxx 設(shè)計(jì)風(fēng)格，所以我們需要用這種風(fēng)格去設(shè)計(jì)我們的頁(yè)面。
搜狐總監(jiān)總結(jié)的競(jìng)品分析方法：
其實(shí)這是一種循環(huán)論證，并不能推導(dǎo)出真正有價(jià)值的內(nèi)容。就像你問(wèn)一個(gè)胖子「你為什么這么胖呀」，胖子說(shuō)「因?yàn)槲页缘枚唷梗阌謫?wèn)「為什么要吃這么多呀」，胖子又說(shuō)「因?yàn)槲遗郑孕枰远帱c(diǎn)」。
競(jìng)品分析雖說(shuō)也是一種前期設(shè)計(jì)調(diào)研的方法，但如果我們的設(shè)計(jì)只依賴于參考其他人怎么做，最后我們?cè)O(shè)計(jì)出來(lái)的產(chǎn)品不僅沒(méi)辦法向人們表達(dá)一個(gè)完整的品牌理念，而且我們的設(shè)計(jì)跟其他競(jìng)品看起來(lái)很相似，失去了自己的特點(diǎn)與優(yōu)勢(shì)。
所以，在我們?cè)O(shè)定產(chǎn)品的設(shè)計(jì)風(fēng)格的時(shí)候就需要運(yùn)用統(tǒng)一的設(shè)計(jì)語(yǔ)言，產(chǎn)出能夠表達(dá)我們品牌特質(zhì)的設(shè)計(jì)。那具體怎么做？這里涉及 2 個(gè)關(guān)鍵點(diǎn)，一個(gè)是如何找到你的品牌特質(zhì)，另一個(gè)是如何針對(duì)這個(gè)品牌特質(zhì)找到對(duì)應(yīng)的設(shè)計(jì)語(yǔ)言。
首先，想要找到我們的品牌特質(zhì)，我們可以從一個(gè)很有意思的原型中得到啟發(fā)。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內(nèi)心最深層次的需求，明白用戶買單的動(dòng)機(jī)在哪里。這時(shí)候我們?cè)賹?duì)應(yīng)這些深層次的動(dòng)機(jī)和需求做出設(shè)計(jì)，效果自然會(huì)事半功倍。那么如何能把品牌和用戶的動(dòng)機(jī)需求連接起來(lái)呢？我們可以借助心理學(xué)家榮格的原型理論來(lái)一一對(duì)應(yīng)。
榮格的原型連接了人們最深層次的動(dòng)機(jī)和感覺(jué)體驗(yàn)，表達(dá)了人們的基本需求，最重要的是他將這些需求都具像化為一個(gè)個(gè)角色。所以我們可以從中找到自己品牌的角色，并且在往后的發(fā)展中根據(jù)這個(gè)角色設(shè)定我們的品牌特質(zhì)和設(shè)計(jì)語(yǔ)言，進(jìn)而與用戶建立根深蒂固的聯(lián)系（相當(dāng)于為我們的品牌打造一個(gè)「人設(shè)」）。我們先看看榮格的原型具體有哪些：
1. 開(kāi)拓者
我們也有稱之為探求者、朝圣者，它是敢于冒險(xiǎn)的、首創(chuàng)的、獨(dú)立的、不墨守成規(guī)的，更多的尋求自我實(shí)現(xiàn)和改變，擁有自由的價(jià)值觀、自給自足的。開(kāi)拓者通常會(huì)在未知的領(lǐng)域，開(kāi)創(chuàng)新的路徑。同時(shí)是個(gè)驅(qū)動(dòng)力很強(qiáng)的非常有個(gè)性的人，能夠忍受探索新路上形單影只的孤獨(dú)。屬于這種角色設(shè)定的品牌比如有星巴克、路虎都是。
2. 守護(hù)者
守護(hù)者通常是說(shuō)無(wú)私的、有同情心的、仁慈的人，給弱勢(shì)群體提供幫助和支持的，同時(shí)具有慷慨大方、自我奉獻(xiàn)的精神。守護(hù)者更多立志于他人的安危和福利，像這種角色的品牌稍微少點(diǎn)，通常是一些救濟(jì)會(huì)、慈善組織等等。
3. 愛(ài)人
愛(ài)人相關(guān)的特點(diǎn)像熱情的、美麗的、感性的尋求真愛(ài)和愉悅，追求愛(ài)的價(jià)值觀和親密關(guān)系。愛(ài)人通常是通過(guò)給予和獲得愛(ài)的強(qiáng)烈愿望所驅(qū)動(dòng)的，這個(gè)不局限于愛(ài)情，友誼也包含在內(nèi)，主要是意味著情感，所以一般是香水或者化妝品品牌都是運(yùn)用這個(gè)原型角色。就像 dior，當(dāng)然還有巧克力費(fèi)列羅等等。
4. 魔術(shù)師
我們知道魔術(shù)師的形象通常是愛(ài)惡作劇的、滑稽的，有時(shí)候能夠跨界，打破禁忌，并且自身帶有樂(lè)趣，善于改變的。魔術(shù)師通常渴望樂(lè)趣，從單調(diào)的生活中解脫出來(lái)，敢于打破禁忌，質(zhì)疑不可能的事物。這種角色設(shè)定的品牌我們可以很快想到那個(gè)愛(ài)玩有趣、經(jīng)常跨界合作的百事可樂(lè)。
5. 創(chuàng)造者
創(chuàng)造者更強(qiáng)調(diào)藝術(shù)感、想象力、創(chuàng)新性，以及自我表現(xiàn)的價(jià)值觀和美感上的愉悅性。創(chuàng)造者通過(guò)精心制作用來(lái)表現(xiàn)自我的事物，讓人們耳目一新從而得到認(rèn)可。像這種強(qiáng)調(diào)創(chuàng)造力的品牌比如樂(lè)高，用有限的積木組合、創(chuàng)造出無(wú)限種可能。
6. 反叛者
反叛者也可以說(shuō)是不法之徒、外來(lái)者，這種角色通常是具有變革性的、反常的、打破常規(guī)的，表達(dá)一種價(jià)值觀的解放。反叛者通常存在于社會(huì)邊緣的，被大部分社會(huì)群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉(zhuǎn)變。像這種主打標(biāo)新立異、反常規(guī)的品牌，最著名的就是哈雷。
7. 魔法師
前面我們提到了魔術(shù)師，那么魔法師相對(duì)于魔術(shù)師而言，會(huì)帶有更多的非現(xiàn)實(shí)的想象，精神上的超凡魅力，帶來(lái)轉(zhuǎn)變的、形而上的意識(shí)的擴(kuò)張。通俗地說(shuō)，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環(huán)境，進(jìn)而給人們帶來(lái)身體上以及精神上的轉(zhuǎn)變。同樣，像這種強(qiáng)調(diào) magic 的品牌我們第一個(gè)可以想到迪士尼，典型的魔法世界。
8. 智者
我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識(shí)淵博的形象，忠于追求真理、樂(lè)于分享知識(shí)，也是智慧的代名詞。智者經(jīng)常被當(dāng)成真理的捍衛(wèi)者以及智慧的來(lái)源，為人們指明方向，幫助大家前進(jìn)的代表。這種角色設(shè)定適用于一些知識(shí)輸出的品牌，比如哈佛大學(xué)、金融時(shí)報(bào)等等。
9. 天真
這是 11 個(gè)原型中唯一一個(gè)形容詞而不是角色名詞，它代表著信任、純潔、健康樂(lè)觀，有希望的、誠(chéng)實(shí)善良并且擁有簡(jiǎn)單的快樂(lè)。天真代表著樂(lè)觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個(gè)烏托邦世界。而像這種原型設(shè)定一樣傳達(dá)樂(lè)觀、希望、天真的品牌有麥當(dāng)勞、可口可樂(lè)等等。
10. 統(tǒng)治者
統(tǒng)治者象征著權(quán)威、控制、至高無(wú)上，同時(shí)也有承擔(dān)、效率、和諧的屬性。統(tǒng)治者被得到和控制權(quán)利的欲望所驅(qū)動(dòng)，通過(guò)對(duì)事物的掌控來(lái)防治混亂發(fā)生。同時(shí)也是一種責(zé)任承擔(dān)的表現(xiàn)，以有組織的的方式來(lái)完成義務(wù)。屬于這種角色設(shè)定的品牌比如有 IBM、花旗銀行等等。
11. 英雄
每個(gè)人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時(shí)敢于接受挑戰(zhàn)、伸張正義，面對(duì)逆境的時(shí)候堅(jiān)韌不拔。這種角色設(shè)定的品牌比如強(qiáng)調(diào)挑戰(zhàn)、正義、勇敢的耐克、聯(lián)邦快遞等等。
總而言之，原型是將我們用戶內(nèi)心最深層次的需求，具象化成一個(gè)角色，我們的品牌對(duì)應(yīng)上這些角色，相當(dāng)于對(duì)應(yīng)上了我們用戶最深層次的需求，為我們品牌和用戶產(chǎn)生情感交流打下基礎(chǔ)。同時(shí)，它可以為我們?cè)O(shè)計(jì)師想為品牌找到對(duì)應(yīng)的設(shè)計(jì)風(fēng)格的時(shí)候，提供更多維度的靈感。而這之后的過(guò)程，就涉及到剛才提到的第二個(gè)關(guān)鍵點(diǎn)，如何為我們的品牌找到對(duì)應(yīng)的設(shè)計(jì)語(yǔ)言？
我們從前面的心理原型中了解到品牌的角色設(shè)定之后，圍繞這個(gè)角色將會(huì)有一系列的關(guān)鍵詞去描繪這個(gè)角色的特質(zhì)。我們將這些抽象的、描繪品牌特質(zhì)的關(guān)鍵詞具像化，則可以得到描繪品牌自身的設(shè)計(jì)元素。具體我們可以借助一個(gè)圖形四象限來(lái)完成：
我們將圖形的基本構(gòu)成（點(diǎn)、線、面）作為我們的坐標(biāo)延伸——寬窄曲直，用這四個(gè)屬性我們可以組合出非常多不同形態(tài)的圖形元素。比如說(shuō)，我們用「寬+曲」組合出來(lái)的圖形可以是：實(shí)心的圓形、波浪曲線等等；再比如說(shuō)我們用「窄+直」可以組合出：細(xì)直線、帶有直角邊的矩形等等。
同時(shí)，在圖形屬性的坐標(biāo)上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現(xiàn)；而直線的事物，我們聯(lián)想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現(xiàn)前衛(wèi)、鋒芒畢露的事物。
像上面綠色部分的認(rèn)知印象，針對(duì)每一個(gè)維度可以聯(lián)想出很多關(guān)鍵詞與事物，那么在我們延展出更加詳細(xì)的四象限之后，這時(shí)候可以再次拿出，我們前面說(shuō)到的，原型角色的關(guān)鍵詞，再和剛才的圖形四象限進(jìn)行比對(duì)，利用象限中的圖形基本屬性，來(lái)組合出屬于我們品牌的設(shè)計(jì)元素。具體怎么做，我舉一個(gè)京東直播改版的案例。
首先基于京東品牌特質(zhì)（原型設(shè)定是英雄），圍繞英雄這一個(gè)原型我們會(huì)有很多關(guān)鍵詞去形容它，比如敢于挑戰(zhàn)、堅(jiān)韌不拔等等。不過(guò)，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現(xiàn)的是更加年輕、女性向的英雄——驚奇隊(duì)長(zhǎng)，一位自信、勇敢挑戰(zhàn)的女英雄形象。因?yàn)橄袢嗽诓煌瑘?chǎng)合下都會(huì)有不同的表現(xiàn)，對(duì)于品牌來(lái)說(shuō)也是如此，我們?cè)O(shè)計(jì)師也需要根據(jù)不同的場(chǎng)景或者子產(chǎn)品的需求，基于原型的核心理念再做出適應(yīng)性的設(shè)計(jì)，讓我們?cè)O(shè)計(jì)的品牌更像一個(gè)生命體，而不是一成不變的事物。
那么我們圍繞年輕、女性、自信這個(gè)主題再腦暴出更多相關(guān)的關(guān)鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內(nèi)容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來(lái)表現(xiàn)，女性的「優(yōu)雅」可以用香水、絲帶表現(xiàn)，英雄的「自信勇敢」用笑容表現(xiàn)。
不過(guò)，我們知道用戶界面設(shè)計(jì)相對(duì)于平面設(shè)計(jì)的海報(bào)、插畫(huà)而言，更重要的是對(duì)產(chǎn)品信息功能的輔助，所以這里的設(shè)計(jì)元素運(yùn)用會(huì)更加克制，這意味著需要我們回歸到更基礎(chǔ)的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎(chǔ)屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時(shí)借助圖形四象限，用「寬+曲」的手法來(lái)表達(dá)我們的設(shè)計(jì)元素（年輕、女性向在第二象限，對(duì)應(yīng)的寬+曲屬性）。在后期設(shè)計(jì)過(guò)程中，融入這幾個(gè)元素再作出界面設(shè)計(jì)。
當(dāng)然，在整個(gè)設(shè)計(jì)流程中，設(shè)計(jì)語(yǔ)言的設(shè)定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個(gè)方面的考量缺一不可。
為什么是相對(duì)統(tǒng)一而非絕對(duì)一致？因?yàn)槿藗儗?duì)大部分顏色的認(rèn)知其實(shí)是來(lái)自于自身的行為，受到心理、環(huán)境、文化等背景因素的影響，更多是一種個(gè)體的主觀感受。比如同樣的紅色，在中國(guó)是吉祥喜慶的代表，在國(guó)外普遍認(rèn)為危險(xiǎn)警告的顏色。比如黑色，在大部分年輕人眼里會(huì)認(rèn)為是酷的時(shí)尚的顏色，而相對(duì)年長(zhǎng)傳統(tǒng)的人則更多會(huì)覺(jué)得是邪惡、忌諱的顏色。所以我們并不需要過(guò)分強(qiáng)調(diào)建立絕對(duì)一致的色彩規(guī)則，這樣也能使我們?cè)O(shè)計(jì)的品牌更像是一個(gè)有靈性的生物，而不僅僅是一個(gè)僵硬的組織。
比如今年的京東 618 項(xiàng)目，時(shí)間跨度長(zhǎng)達(dá) 30 天，活動(dòng)頁(yè)面覆蓋上千個(gè)，設(shè)計(jì)師不可能一個(gè)個(gè)去指定顏色規(guī)范、或者讓同一個(gè)顏色適用于所有頁(yè)面，所以需要設(shè)定的只有色彩感覺(jué)和表現(xiàn)手法，這種統(tǒng)一的大方向。所以我們可以看到這些在 618 期間的設(shè)計(jì)，雖然不盡相同但能讓人清楚的感知到，這是來(lái)自同一個(gè)生態(tài)下的主題，并不會(huì)因?yàn)轭伾煌蜔o(wú)法識(shí)別。
雖然人們對(duì)大部分顏色的認(rèn)知來(lái)自于心理的主觀感受，但還有對(duì)另一部分的顏色的認(rèn)知是來(lái)自于人們的生理反應(yīng)。而這一部分，才是我們?cè)谠O(shè)計(jì)的時(shí)候需要注意的，關(guān)于造成人們「感知過(guò)強(qiáng)」和「感知過(guò)弱」的問(wèn)題。
1. 感知過(guò)強(qiáng) —— 顏色對(duì)抗通道
簡(jiǎn)單講，就是相當(dāng)于我們?cè)O(shè)計(jì)常說(shuō)的——對(duì)比色，雖然我們知道對(duì)比色可以給用戶帶來(lái)視覺(jué)刺激，但是并不建議在設(shè)計(jì)中大面積的、長(zhǎng)期的使用（紅綠或黃藍(lán)對(duì)比色），為什么呢？
因?yàn)槲覀兯f(shuō)的顏色，其實(shí)是人眼對(duì)頻率、光的波長(zhǎng)的感知，就像我們耳朵聽(tīng)的音高或一個(gè)音符時(shí)所感知的聲音的原理一樣。下圖是人們視網(wǎng)膜三類視錐細(xì)胞對(duì)光的敏感度，以及人造紅、綠、藍(lán)色光感受器對(duì)光的敏感度。我們可以看到，低頻視錐（紅線）信號(hào)是紅色和黃色，中頻視錐信號(hào)是綠色，高頻則對(duì)應(yīng)藍(lán)色。而我們?cè)O(shè)計(jì)中常說(shuō)的對(duì)比色，其實(shí)就是通過(guò)這些視錐細(xì)胞的低、中、高頻信號(hào)的極值相減，才得來(lái)的顏色對(duì)抗組。所以這種通過(guò)對(duì)視錐細(xì)胞兩極的強(qiáng)烈刺激才得到的對(duì)比色，長(zhǎng)期使用下會(huì)讓人產(chǎn)生疲勞甚至煩躁的情緒，而在這種不穩(wěn)定的情緒下，用戶非常容易產(chǎn)生誤操作，甚至最終遷怒于你的產(chǎn)品不再使用。
所以我們作為設(shè)計(jì)師可以運(yùn)用一些方法來(lái)盡量控制對(duì)人眼的最極端的刺激，比如通過(guò)減少對(duì)抗色的面積，或者通過(guò)將對(duì)抗色組中的一個(gè)顏色用它的近色替換，等等。
2. 感知過(guò)弱 —— 色域跨度
除了以上，讓我們感知過(guò)強(qiáng)的顏色對(duì)抗通道，另一個(gè)需要注意的顏色問(wèn)題就是，讓人們感知過(guò)弱的色域跨度。我們有時(shí)候會(huì)遇到一個(gè)問(wèn)題就是，按鈕上的文字和按鈕的顏色融在一起，導(dǎo)致按鈕文字看不清。
這個(gè)問(wèn)題其實(shí)就是兩個(gè)顏色的色域跨度過(guò)小導(dǎo)致的，首先我們用 H（色相）S（飽和度）B（明度）的數(shù)值來(lái)劃分色域（如下圖）。在統(tǒng)一H（色相）值的情況下，規(guī)定了 10 個(gè)標(biāo)準(zhǔn)的S（飽和度）、B（亮度）值，以 10 為單位作為一個(gè)跨度。兩種顏色在這個(gè)色域中，至少要相差 5個(gè)跨度，用戶才能有效感知到兩種顏色的差異。
比如下圖中的藍(lán)色背景色值是 60，那么放置在這個(gè)背景中的文字 A，至少要跟這個(gè) 60 的位置相差 5 個(gè)跨度，也就是 10 這個(gè)位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個(gè)背景上會(huì)難以識(shí)別。以此類推，深色模式中（如下圖）這個(gè)背景色值 100，那么在這個(gè)背景上的文字 A 色值，最多不能超過(guò) 50。
以上關(guān)于顏色對(duì)抗通道和色域跨度的問(wèn)題，就是我們需要了解的一些顏色運(yùn)用中的邊界，并在這個(gè)邊界以內(nèi)讓設(shè)計(jì)保持最大的靈活度。所以對(duì)于顏色，我們需要強(qiáng)調(diào)的是相對(duì)統(tǒng)一的邊界極值，而不是絕對(duì)一致的色值。
如果我們把前面說(shuō)的設(shè)計(jì)元素和顏色看作品牌的皮膚，那么視覺(jué)框架則是品牌的骨骼。如果想讓我們的品牌成為一個(gè)能夠真正影響用戶的存在，不僅要有好看的皮囊——在設(shè)計(jì)元素和顏色上延續(xù)品牌基因，還要有強(qiáng)大的內(nèi)心——視覺(jué)框架要能足夠支撐起我們品牌的身軀。
視覺(jué)框架包括了層級(jí)和布局，我們需要在設(shè)計(jì)的過(guò)程中，加入對(duì)產(chǎn)品階段和品牌價(jià)值的思考。因?yàn)榫拖袢艘粯樱幱诓煌A段的人追求的東西會(huì)有所差異。同樣的對(duì)于品牌也是如此，處于不同產(chǎn)品階段會(huì)有不同的需求，相應(yīng)的品牌價(jià)值點(diǎn)也會(huì)有所差別。所以如果想讓設(shè)計(jì)的視覺(jué)框架能夠足以撐起品牌，在這其中將會(huì)涉及 2 個(gè)關(guān)鍵點(diǎn)：如何定位產(chǎn)品階段和品牌價(jià)值，以及如何圍繞產(chǎn)品階段與品牌價(jià)值點(diǎn)設(shè)計(jì)對(duì)應(yīng)的視覺(jué)框架。
首先是定位我們的產(chǎn)品階段和品牌價(jià)值，我們可以通過(guò)對(duì)照經(jīng)濟(jì)價(jià)值系統(tǒng)（如下圖）：產(chǎn)品的階段分為初級(jí)產(chǎn)品、產(chǎn)品、服務(wù)和體驗(yàn)這 4 個(gè)階段。
拿京東舉個(gè)例子，如果我們位于初級(jí)產(chǎn)品階段，我們的平臺(tái)就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據(jù)信息聯(lián)系商品的供應(yīng)商，去和供應(yīng)商進(jìn)行交易。那么在這個(gè)階段的時(shí)候，品牌的核心價(jià)值在于對(duì)商品信息展現(xiàn)的完整性、全面性，只要這個(gè)平臺(tái)能夠覆蓋足夠多的商品，并展示完整的商品信息，這個(gè)階段的目標(biāo)就達(dá)到了；
如果我們位于產(chǎn)品階段，我們會(huì)對(duì)商品進(jìn)行分類，并在平臺(tái)上提供統(tǒng)一的購(gòu)買渠道。相應(yīng)的，這個(gè)是以后的品牌價(jià)值在于，平臺(tái)能夠?qū)ι唐愤M(jìn)行精準(zhǔn)分類或者實(shí)現(xiàn)統(tǒng)一的購(gòu)買渠道功能，讓用戶能夠在平臺(tái)上買到商品；
而當(dāng)我們位于服務(wù)階段，我們的平臺(tái)不僅可以購(gòu)買商品，我們還會(huì)提供售前售后的服務(wù)，對(duì)應(yīng)不同的客戶群體推薦不同的商品，或者提供定制化的服務(wù)等等。平臺(tái)除了實(shí)現(xiàn)交易功能，需要提高品牌的競(jìng)爭(zhēng)力，在競(jìng)品之間形成差異化，為人們提供一系列附加價(jià)值的服務(wù)，吸引更多用戶在我們平臺(tái)上下單才是目標(biāo)；
而如果我們位于體驗(yàn)階段，我們可以從視、聽(tīng)、味、嗅、觸覺(jué)給用戶帶來(lái)一系列的情感反應(yīng)，為每個(gè)個(gè)體營(yíng)造不同的回憶與感受。讓用戶與品牌產(chǎn)生情感上的互動(dòng)，在更深層次上影響用戶認(rèn)知并形成堅(jiān)固的情感紐帶，讓用戶忠于我們的品牌才是這個(gè)階段的目標(biāo)。
正因?yàn)椴煌漠a(chǎn)品階段，對(duì)應(yīng)的品牌價(jià)值與目標(biāo)不同，我們才需要針對(duì)產(chǎn)品階段，為品牌設(shè)計(jì)合適的視覺(jué)框架，到后期設(shè)計(jì)出來(lái)的產(chǎn)品才能更貼合地為品牌發(fā)聲。像今年京東 app 改版項(xiàng)目，在接到這個(gè) brief 之后，首先當(dāng)然會(huì)先看看當(dāng)時(shí)版本存在的問(wèn)題，下圖為當(dāng)時(shí)京東 7.0 版本。
當(dāng)時(shí)團(tuán)隊(duì)逐一列出了 7.0 版本存在的幾個(gè)主要問(wèn)題：
1. 品牌識(shí)別度低
我們可以發(fā)現(xiàn)在這個(gè)界面里很難發(fā)現(xiàn)京東的品牌元素，就算現(xiàn)在換一個(gè)品牌同樣這個(gè)界面也適用；
2. 業(yè)務(wù)分發(fā)局限
這個(gè)版本里的商品坑位是固定的，業(yè)務(wù)展現(xiàn)的數(shù)量和形式是局限的；
3. 運(yùn)營(yíng)維護(hù)成本高
banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運(yùn)營(yíng)圖片的時(shí)候，將主要內(nèi)容嚴(yán)格控制在我們的限制區(qū)域內(nèi)，這同時(shí)也增加了我們運(yùn)營(yíng)審核的工作量；
4. 樓層過(guò)長(zhǎng)、轉(zhuǎn)化率低
在 7.0 版本中，中間的樓層頻道長(zhǎng)達(dá) 7 屏，同質(zhì)化的內(nèi)容導(dǎo)致平臺(tái)商品的轉(zhuǎn)化率不高；
5. 促銷信息干擾
界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；
6. 個(gè)性化感知不足
電商平臺(tái)內(nèi)容形式趨向單一化，沒(méi)有太多創(chuàng)新的表現(xiàn)。
有了這些具體的問(wèn)題項(xiàng)，設(shè)計(jì)師們開(kāi)始進(jìn)行針對(duì)性地視覺(jué)框架設(shè)計(jì)。比如，針對(duì)個(gè)性化感知不足的問(wèn)題，我們希望重新設(shè)計(jì)百寶箱區(qū)域，打破常見(jiàn)的圓底 icon 的樣式，每個(gè)圖標(biāo)的邊框都是不規(guī)則的，讓整個(gè)區(qū)域更有表現(xiàn)力，同時(shí)與其他電商平臺(tái)的界面形成差異化。再比如，針對(duì)促銷信息干擾的問(wèn)題，我們希望簡(jiǎn)化原本頻道入口的信息，將原本好幾個(gè) sku 信息對(duì)應(yīng)同 1 個(gè)入口，優(yōu)化為單個(gè) sku 與單個(gè)入口一一對(duì)應(yīng)，讓用戶保持專注力快速找到自己想要的頻道入口。
諸如此類，當(dāng)時(shí)我們?yōu)檫@幾個(gè)問(wèn)題延展出許多設(shè)計(jì)上的解決方案，輸出了不少有創(chuàng)新性的視覺(jué)稿。但是隨著設(shè)計(jì)工作越往后進(jìn)行，我們發(fā)現(xiàn)手中的設(shè)計(jì)并不能很好地解決，品牌在當(dāng)前階段中面臨的實(shí)際問(wèn)題。
因?yàn)樵谇捌诳蚣茉O(shè)計(jì)的整個(gè)過(guò)程中，我們沒(méi)有把品牌定位這一因素考慮進(jìn)去，我們發(fā)現(xiàn)舊版本的問(wèn)題，埋著頭只想把這些問(wèn)題都解決了，卻忘記抬起頭看看我們的品牌現(xiàn)在在哪。我們前面說(shuō)過(guò)，對(duì)照經(jīng)濟(jì)價(jià)值系統(tǒng)，京東目前主要處于服務(wù)階段，還在逐漸邁向體驗(yàn)階段的進(jìn)程中。
而處于這個(gè)階段的京東，外部環(huán)境是電商平臺(tái)的逐漸趨同化；內(nèi)部環(huán)境是業(yè)務(wù)體量龐大，同時(shí)產(chǎn)品仍有上升空間。所以我們的階段目標(biāo)就是需要加深用戶對(duì)品牌的認(rèn)知，業(yè)務(wù)內(nèi)容需要更加具備兼容性、延展性，同時(shí)需要提高產(chǎn)品的業(yè)務(wù)分發(fā)能力。
結(jié)合這個(gè)階段性目標(biāo)，我們可以從舊版本存在的問(wèn)題中，發(fā)現(xiàn)這 4 個(gè)問(wèn)題才是當(dāng)前優(yōu)先級(jí)最高的、需要在當(dāng)前階段中解決的內(nèi)容。所以基于篩選后的 4 個(gè)問(wèn)題，我們開(kāi)始將設(shè)計(jì)往回收，從視覺(jué)框架上更多聚焦于這 4 個(gè)問(wèn)題的優(yōu)化。
比如針對(duì)業(yè)務(wù)分發(fā)局限性的問(wèn)題，對(duì)首頁(yè)下拉區(qū)域的布局進(jìn)行優(yōu)化：下拉刷新除了常規(guī)的刷新?tīng)顟B(tài)外，在營(yíng)銷活動(dòng)期間用戶可下拉跳轉(zhuǎn)至活動(dòng)頁(yè)面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業(yè)務(wù)內(nèi)容，充分利用首焦區(qū)域豐富業(yè)務(wù)的展現(xiàn)形式。
比如針對(duì)品牌識(shí)別度的問(wèn)題，將首頁(yè)頭部區(qū)域的層級(jí)進(jìn)行優(yōu)化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應(yīng)用在頭部的背景輪廓上，并且在整個(gè)頁(yè)面中統(tǒng)一植入品牌色京東紅，同時(shí)在當(dāng)前我們的品牌尚未成熟的階段，直接使用京東 logo 強(qiáng)化用戶對(duì)品牌的感知度和記憶點(diǎn)。
比如針對(duì)運(yùn)營(yíng)維護(hù)成本高的問(wèn)題，還記得前面說(shuō)的我們一開(kāi)始做的百寶箱的設(shè)計(jì)么，雖然那種設(shè)計(jì)是更具有差異化和創(chuàng)新性，但是目前產(chǎn)品量級(jí)大、業(yè)務(wù)入口多，而且這一區(qū)域涉及合作商家自己提供的素材露出，如果沒(méi)有統(tǒng)一的外框與規(guī)范的內(nèi)容，運(yùn)營(yíng)維護(hù)成本是相當(dāng)高的。所以我們保留了 icon 外框，同時(shí)規(guī)范每個(gè)框中只居中展示一個(gè)對(duì)應(yīng)的圖形，不能包含文字等其他元素。
最終我們可以看到，改版后的京東 app 無(wú)論是在品牌、業(yè)務(wù)層面，還是在多種復(fù)雜的運(yùn)營(yíng)場(chǎng)景中，都能實(shí)現(xiàn)作為平臺(tái)的兼容性和延展性。所以，在視覺(jué)框架的時(shí)候需要預(yù)先考慮產(chǎn)品階段，針對(duì)不同階段需求作出相應(yīng)的設(shè)計(jì)側(cè)重，讓設(shè)計(jì)出來(lái)的產(chǎn)品能夠更加貼合品牌本身。
經(jīng)過(guò)剛才的推導(dǎo)和框架設(shè)定，我們對(duì)眼前要做的產(chǎn)品設(shè)計(jì)風(fēng)格、視覺(jué)框架已經(jīng)確定的七七八八，界面的形態(tài)也初具雛形了。接下來(lái)要做的設(shè)計(jì)執(zhí)行階段就是我們?cè)O(shè)計(jì)師的魔法時(shí)刻，相信每位設(shè)計(jì)師都有自己的方式和能力讓我們的產(chǎn)品變得更優(yōu)美，所以關(guān)于這部分的內(nèi)容暫不在此贅述。
通過(guò)以上章節(jié)我們了解到，只有從品牌自身出發(fā)，設(shè)計(jì)出來(lái)的產(chǎn)品才能在每一個(gè)方面都延續(xù)品牌基因、展現(xiàn)出設(shè)計(jì)的整體性。一方面滿足品牌價(jià)值需求為品牌發(fā)聲，另一方面將用戶的所聞、所見(jiàn)、所感打造成一個(gè)特別的情感反應(yīng)，讓用戶更長(zhǎng)久的忠于我們的品牌。
不過(guò)，如果我們想要?jiǎng)?chuàng)造出能深化品牌基因的產(chǎn)品，我們?cè)谟脩舴矫嬉惨度牒推放品矫嫱瑯佣嗟年P(guān)注。因?yàn)椴粌H要看產(chǎn)品的外觀界面，還要看產(chǎn)品給用戶的感覺(jué)、使用方式和效果。比如用戶因?yàn)槭裁床疟荒愕漠a(chǎn)品吸引，用戶會(huì)從中得到什么，你的產(chǎn)品能帶給用戶什么感受，用戶如何才能為你的產(chǎn)品發(fā)生實(shí)際行動(dòng)，等等。正因?yàn)槲覀兯龅囊磺校紤?yīng)該對(duì)品牌產(chǎn)生支撐作用。所以不僅僅是品牌能夠識(shí)別和定義我們的產(chǎn)品，用戶的認(rèn)知體驗(yàn)也應(yīng)該成為我們?cè)O(shè)計(jì)考量的一部分。究竟怎樣做，才能讓我們的設(shè)計(jì)能夠有效的影響用戶、讓用戶為我們的品牌買單呢？
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.73404.com.cn