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

一、開端：做一個有故事的淘寶

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

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

二、情感化的價值

“用戶的情緒訴求”

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

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

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

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

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

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

三、故事的由來

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

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

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

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

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

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

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

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

四、故事的序章

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

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

基于這種品牌基調(diào)，我們需要打破原來的ICONFONTS的視覺傳統(tǒng)，講述一個以一個第三人稱為中心，因為場景異常原因而經(jīng)歷的一幕幕奇妙故事。

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

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

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

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

初期繪制草圖

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

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

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

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

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

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

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

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

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

文案設(shè)計過程中，我們需要考慮兩個點：

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

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

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

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

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

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

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

六、故事的發(fā)展

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

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

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

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

通用設(shè)計元素

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

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

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

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

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

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

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

故事二：大漠足印

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

足跡為空場景

故事三：擁擠的傳送帶

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

限流場景

其他場景集合（部分）：

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

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

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

1. 通用布局

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

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

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

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

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

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

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

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

訂單詳情

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

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

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

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

故事將會更有趣

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

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

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