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