如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

一、開端：做一個(gè)有故事的淘寶

現(xiàn)如今，消費(fèi)者對產(chǎn)品的需求從追求高性價(jià)比更多地轉(zhuǎn)為高品質(zhì)，雖然手機(jī)只是一個(gè)機(jī)器，但用戶與產(chǎn)品之間當(dāng)然是能有情感傳遞的，不然就只是一個(gè)冷冰冰的工具而已，能讓用戶在使用體驗(yàn)和過程中產(chǎn)生愉悅的產(chǎn)品才可能走的更遠(yuǎn)。

淘寶不只是售賣商品的平臺，而是有活力、創(chuàng)造力的生態(tài)圈，淘寶的用戶也是越來越年輕化，淘寶當(dāng)然也應(yīng)該有自己的故事，自己的“小情緒”，將這些有趣故事敘說給用戶，這樣才能給用戶帶來更好的購物心情和體驗(yàn)。

二、情感化的價(jià)值

“用戶的情緒訴求”

產(chǎn)品給用戶的第一印象決定了很多事情，人是視覺動(dòng)物，第一眼對物的觀察會(huì)本能地判斷是否打動(dòng)其內(nèi)心，很多時(shí)候哪怕只是一個(gè)小小的細(xì)節(jié)，都有可能可能瞬間讓人注意并且喜歡。

產(chǎn)品亦然，就像用戶逛商場一樣，如果逛著逛著心情越來越不好怎么會(huì)樂意繼續(xù)逛下去呢？所以我們要追求的不僅僅是“可以用”而已，還要讓用戶在使用后和使用前一樣的是愉悅的過程和心情。

“人性化的產(chǎn)品更受歡迎”

“人們喜歡和人交談，而不是機(jī)器”，這句話出自唐納德·諾曼寫的《情感化設(shè)計(jì)》，其實(shí)道理很淺顯，人性化的產(chǎn)品，脫離了冰冷的機(jī)器的味道，不再那么的呆板。

人機(jī)交互學(xué)科中，人性化是很重要的一部分，產(chǎn)品的設(shè)計(jì)者充分考慮到用戶的心理感受，將產(chǎn)品化身成一個(gè)有個(gè)性、有脾氣的人，相比冷冰冰的機(jī)器更能得到用戶的好感和共鳴。

這種例子在現(xiàn)實(shí)生活和工業(yè)設(shè)計(jì)中不勝枚舉，將機(jī)器擬人化情感化等元素使其更生動(dòng)有趣由此被用戶記住從而延續(xù)使用，脫穎而出，這就是賦予物以額外情感的價(jià)值。

三、故事的由來

淘寶異常信息提示情感化現(xiàn)狀梳理

如下圖，目前手淘因?yàn)闃I(yè)務(wù)繁多、場景復(fù)雜以及底層架構(gòu)等等原因，其異常場景比如為空場景、網(wǎng)絡(luò)異常以及限流場景等等不僅在布局結(jié)構(gòu)上有很大的優(yōu)化空間，在其設(shè)計(jì)風(fēng)格上不僅沒有滲透淘寶的品牌心智，也沒有互相之間橫向統(tǒng)一，甚至在大促的一些特殊期間還會(huì)出現(xiàn)蹦出彈層等在用戶看來就是BUG的尷尬情況。

首先這對用戶在同一個(gè)產(chǎn)品的異常情況的心智認(rèn)知達(dá)不到統(tǒng)一，其次還有可能讓用戶感到煩躁，這并不是我們想要的狀況。

由此引申的設(shè)計(jì)目標(biāo)

1. 視覺吸引  打動(dòng)用戶，撫平異常場景用戶情緒，從而間接提升用戶留存時(shí)間和點(diǎn)擊轉(zhuǎn)化率。

2. 結(jié)構(gòu)統(tǒng)一  一致異常組件結(jié)構(gòu)，橫向業(yè)務(wù)也能統(tǒng)一對同一個(gè)形式提示內(nèi)容的認(rèn)知。

3. 品牌認(rèn)知  淘寶主力增量人群趨于年輕化，滲透2017淘寶新品牌認(rèn)知，親和活力和鮮明。

設(shè)計(jì)目標(biāo)引申

四、故事的序章

“這是一個(gè)親和、活力和鮮明的故事”

淘寶的體驗(yàn)氛圍應(yīng)該是放松和舒適的，和用戶的關(guān)系更親密，立體個(gè)性化的表達(dá)，讓淘寶更年輕鮮明。

基于這種品牌基調(diào)，我們需要打破原來的ICONFONTS的視覺傳統(tǒng)，講述一個(gè)以一個(gè)第三人稱為中心，因?yàn)閳鼍爱惓Ｔ蚨?jīng)歷的一幕幕奇妙故事。

腦暴風(fēng)格元素繪制草圖

淘寶的品牌圖形化元素抽象化提取之后就是圓形，2017新的品牌元素形狀也是重要的組成部分，這個(gè)形狀寓意完滿擁有用戶和商品所具備的獨(dú)特性，很多業(yè)務(wù)場景也出現(xiàn)了這個(gè)圖形元素。

在整體風(fēng)格和基本形狀基調(diào)定下來之后，就是需要在腦海中根據(jù)各個(gè)場景構(gòu)思各種各樣的故事了。

前期可以大膽地去涂鴉繪制草圖，丑一點(diǎn)沒關(guān)系，關(guān)鍵的是把自己的想法表達(dá)清楚，并且大家也能在你稍加說明的前提下能理解你的思維，然后把能想到的全都記錄下來，“大海、草原、沙漠星空”等等場景。當(dāng)發(fā)散思維到一定程度之后，可以漸漸收斂，稍微打磨細(xì)節(jié)大家一起溝通敲定，下圖為部分草稿圖案：

初期繪制草圖

“眾里尋他千百度”—故事傳遞情感

構(gòu)思故事的時(shí)候，可以比較大膽地天馬行空地去想象。比如異常場景中，類似404頁面的空頁面比較多，那么就可以去想，可以用什么故事來表達(dá)“空”這層意思，構(gòu)思的過程中就會(huì)發(fā)現(xiàn)，其實(shí)一個(gè)事物并不是只有“數(shù)目為零“才能表達(dá)”空“的意思，”沉睡“”躲避“”被搶走“等都可以讓用戶感知到這層意思，那么這樣的話，故事的發(fā)展就很開闊了。

比如“訂單為空”這個(gè)場景，就考慮了“訂單躺在竹筏上飄走啦！”“你的訂單正在山谷中沉睡?！眱蓚€(gè)故事，具有趣味性又能積極而準(zhǔn)確地傳遞“為空”的信息。

構(gòu)思訂單為空的兩個(gè)故事

五、文案的情感化表達(dá)

我們不僅使用圖形和色彩構(gòu)建故事、傳遞情感，還嘗試對某些界面中的文案進(jìn)行設(shè)計(jì)。我們的初衷很簡單，就是希望某些界面中的文案表達(dá)可以有趣些。當(dāng)用戶看到這些文案的時(shí)候，能夠會(huì)心一笑，或者吐個(gè)槽。

在界面設(shè)計(jì)中，文案設(shè)計(jì)是最容易被忽視的。很多時(shí)候，設(shè)計(jì)師眼里的文案就是“示例文字示例文字最多展示18個(gè)中文字符”。

用戶使用一款應(yīng)用，就像兩個(gè)人認(rèn)識的過程。生活中，我們通過“外貌、穿著、舉止、談吐”認(rèn)識一個(gè)人。而在界面設(shè)計(jì)中，“圖形和色彩”就好比人的“外貌和穿著”，“動(dòng)效”就好比人的“舉止“，“文案”就是一個(gè)人的“談吐”，是一個(gè)人對另一人說的話。

直播很火，男同胞們可能都有過這樣的經(jīng)驗(yàn)：封面看起來讓人怦然心動(dòng)的的女主播，一開口說話能讓你懷疑人生。一樣火的高曉松老師，有多少女粉絲放棄了原有的“審美原則”想睡他，就是因?yàn)樗目诨詈??？梢?，一個(gè)人說的話有多么重要。

文案設(shè)計(jì)過程中，我們需要考慮兩個(gè)點(diǎn)：

1. 兩個(gè)人之間是什么樣的關(guān)系決定了兩個(gè)人會(huì)說什么話、怎么說

比如“加班”這件事情，你和你老板聊的時(shí)候，肯定沒有你和你的朋友、親人聊的時(shí)候來得痛心疾首、毫無保留。

我們希望手機(jī)淘寶和用戶之間的關(guān)系像是“朋友/閨蜜”，可以一起閑聊、吐槽、雞湯。當(dāng)用戶沮喪的時(shí)候表達(dá)關(guān)心，當(dāng)用戶困惑的時(shí)候提供幫助，當(dāng)用戶完成某個(gè)目標(biāo)的時(shí)候表示祝賀。

2. 不同性格的人，面對同一件事情，說的話也不一樣

比如面對“需求變更”這件事情，好脾氣的設(shè)計(jì)師回了一句“好的，親！”就義無反顧地開始改稿，而暴脾氣的設(shè)計(jì)師則從口袋里掏出一把2米長的西瓜刀，擦了又擦：“我改一稿，你挨一刀，沒毛?。　?。

我們希望手機(jī)淘寶是一個(gè)集各種優(yōu)秀品質(zhì)于一身的的“朋友/閨蜜”，根據(jù)場景不同，可以熱心、溫暖、體貼，也可以逗逼、無聊、毒舌，能夠在不經(jīng)意間為用戶制造一點(diǎn)小驚喜、小意外。

以下是部分場景的文案設(shè)計(jì)：

六、故事的發(fā)展

顏色應(yīng)用規(guī)范

2017淘寶品牌色系仍然是橙色系，與之前不同的是，今年加入了微漸變來做更豐富的視覺表現(xiàn)，更加年輕化和更具有活力，這一點(diǎn)在故事的設(shè)計(jì)中仍然是需要繼承的。主要色彩仍然是橙色系，大色塊采用微漸變的方式，小色塊采用純色，不然畫面漸變太多可能就眼花繚亂了,如圖是手淘基本鏈路色彩應(yīng)用拆解：

故事性，趣味性以及共同設(shè)計(jì)元素

基于上面提到的思考方式，各個(gè)主要異常場景的信息提示畫面也逐個(gè)設(shè)計(jì)出來，除了組件結(jié)構(gòu)上的統(tǒng)一運(yùn)用，就是視覺上對故事情節(jié)和風(fēng)格的體現(xiàn)

通用設(shè)計(jì)元素

1. 光源統(tǒng)一在左上角，視角一般為正視或正俯視圖。

2. 異常場景下背景全部為圓形，后續(xù)可能會(huì)拓展形狀。

3. 延續(xù)老版的小人，但小人只起到一個(gè)點(diǎn)綴和對比場景物體大小的作用。

4. 設(shè)計(jì)元素不采用描邊，純色和微漸變搭配，一般為遠(yuǎn)中近三層元素，主體元素存在陰影，營造層次感。

故事一：太空網(wǎng)絡(luò)遺跡

通用的“網(wǎng)絡(luò)異?！钡膱鼍?，講的是“一個(gè)宇航員在外太空尋找網(wǎng)絡(luò)遺跡”的故事，太空場景本身就是一種神秘且容易丟失的空間，將網(wǎng)絡(luò)夸張擬物保證意義明確，最后定格在正向俯視圖上。

網(wǎng)絡(luò)異常場景

故事二：大漠足印

“足跡為空”的場景，是“一個(gè)考古學(xué)家在大漠中追尋巨人足跡”的故事，一個(gè)在沙漠中找尋的學(xué)家，發(fā)現(xiàn)了一個(gè)類似巨人的足印，但足印的主人不知所蹤。

足跡為空場景

故事三：擁擠的傳送帶

通用限流場景，把貨物擬人化，卡在貨物傳送帶的入口上你推我搡，豐富的畫面間接體現(xiàn)擁擠的感覺。

限流場景

其他場景集合（部分）：

異常場景組件和結(jié)構(gòu)的統(tǒng)一

由于手淘中業(yè)務(wù)繁多場景復(fù)雜，有的存在多重信息導(dǎo)航，有的存在二級內(nèi)容，有的甚至是在場景中間可能會(huì)出現(xiàn)異常，從而導(dǎo)致目前各個(gè)業(yè)務(wù)異常場景結(jié)構(gòu)不一，這里是需要統(tǒng)一認(rèn)知的。

這里從最常用的通用場景和一些存在別的內(nèi)容的特殊場景比如：購物車和評價(jià)場景等等。針對不同的場景做了橫向統(tǒng)一，首先統(tǒng)一了二級內(nèi)容的高度規(guī)范，其次規(guī)范了二級內(nèi)容為空等等的一些特殊情況供其他業(yè)務(wù)的設(shè)計(jì)師參考。

1. 通用布局

通用場景規(guī)范適用于手淘中網(wǎng)絡(luò)異常、限流等全局異常場景，這些場景中除了異常提示信息沒有別的內(nèi)容出現(xiàn),文案可配置，相同場景統(tǒng)一為一種文案。

2. 一級內(nèi)容為空

場景中第一級內(nèi)容為空或者異常，并且只存在第一級的TitleBar，比如購物車為空等場景。

3. 次級內(nèi)容為空

一級內(nèi)容一般高度無法控制，故仍然需要設(shè)計(jì)師配合各自鏈路開發(fā)適配組件位置，例如評論詳情，店鋪詳情，消息等場景，圖示給出場景示例：

圖文信息內(nèi)部結(jié)構(gòu)由架構(gòu)組同學(xué)做成統(tǒng)一組件可以讓其他業(yè)務(wù)的開發(fā)復(fù)用，這樣大大降低了以后各個(gè)業(yè)務(wù)線更改同步的成本以及開發(fā)成本，這里對此不多做敘述。

訂單詳情配置圖優(yōu)化

手淘中還存在情感化作為氛圍渲染的場景，這些場景先分別根據(jù)各自原本的布局來重繪氛圍插圖，暫不統(tǒng)一整改結(jié)構(gòu)，例如訂單詳情頁面的氛圍。

訂單詳情

七、故事的結(jié)果和延續(xù)

落地實(shí)現(xiàn)效果及未來的反饋

目前只上線了部分異常場景，雖然沒有完全完成，但是上線的部分還原度都是高的。我們將在后續(xù)的版本中陸續(xù)更新完成。

這些異常場景比較隱蔽，大多數(shù)用戶對于平常的異常場景不僅看不到而且并不在意，故這一塊難以采集數(shù)據(jù)，只能看在未來全部上線一段時(shí)間后，用戶的反饋是否涉及到這一塊，到時(shí)便交與用戶評說了。

故事將會(huì)更有趣

淘寶的故事不僅僅是這些，當(dāng)然會(huì)有更多更有趣的故事將會(huì)展示給用戶。

未來的故事還可能會(huì)將情感化設(shè)計(jì)延伸到不僅僅是異常的場景中去，從而覆蓋整個(gè)淘寶，真正地實(shí)現(xiàn)做到一個(gè)“有故事的淘寶”。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)