來源：淘寶用戶體驗(yàn)設(shè)計(jì)（微信號：ali-taobaoued）
作者：丘黎 神患
原標(biāo)題：淘寶2017-提示信息的情感化設(shè)計(jì)
一、開端：做一個有故事的淘寶
現(xiàn)如今，消費(fèi)者對產(chǎn)品的需求從追求高性價(jià)比更多地轉(zhuǎn)為高品質(zhì)，雖然手機(jī)只是一個機(jī)器，但用戶與產(chǎn)品之間當(dāng)然是能有情感傳遞的，不然就只是一個冷冰冰的工具而已，能讓用戶在使用體驗(yàn)和過程中產(chǎn)生愉悅的產(chǎn)品才可能走的更遠(yuǎn)。
淘寶不只是售賣商品的平臺，而是有活力、創(chuàng)造力的生態(tài)圈，淘寶的用戶也是越來越年輕化，淘寶當(dāng)然也應(yīng)該有自己的故事，自己的“小情緒”，將這些有趣故事敘說給用戶，這樣才能給用戶帶來更好的購物心情和體驗(yàn)。
二、情感化的價(jià)值
“用戶的情緒訴求”
產(chǎn)品給用戶的第一印象決定了很多事情，人是視覺動物，第一眼對物的觀察會本能地判斷是否打動其內(nèi)心，很多時候哪怕只是一個小小的細(xì)節(jié)，都有可能可能瞬間讓人注意并且喜歡。
產(chǎn)品亦然，就像用戶逛商場一樣，如果逛著逛著心情越來越不好怎么會樂意繼續(xù)逛下去呢？所以我們要追求的不僅僅是“可以用”而已，還要讓用戶在使用后和使用前一樣的是愉悅的過程和心情。
“人性化的產(chǎn)品更受歡迎”
“人們喜歡和人交談，而不是機(jī)器”，這句話出自唐納德·諾曼寫的《情感化設(shè)計(jì)》，其實(shí)道理很淺顯，人性化的產(chǎn)品，脫離了冰冷的機(jī)器的味道，不再那么的呆板。
人機(jī)交互學(xué)科中，人性化是很重要的一部分，產(chǎn)品的設(shè)計(jì)者充分考慮到用戶的心理感受，將產(chǎn)品化身成一個有個性、有脾氣的人，相比冷冰冰的機(jī)器更能得到用戶的好感和共鳴。
這種例子在現(xiàn)實(shí)生活和工業(yè)設(shè)計(jì)中不勝枚舉，將機(jī)器擬人化情感化等元素使其更生動有趣由此被用戶記住從而延續(xù)使用，脫穎而出，這就是賦予物以額外情感的價(jià)值。
人性化的產(chǎn)品更受歡迎
三、故事的由來
淘寶異常信息提示情感化現(xiàn)狀梳理
如下圖，目前手淘因?yàn)闃I(yè)務(wù)繁多、場景復(fù)雜以及底層架構(gòu)等等原因，其異常場景比如為空場景、網(wǎng)絡(luò)異常以及限流場景等等不僅在布局結(jié)構(gòu)上有很大的優(yōu)化空間，在其設(shè)計(jì)風(fēng)格上不僅沒有滲透淘寶的品牌心智，也沒有互相之間橫向統(tǒng)一，甚至在大促的一些特殊期間還會出現(xiàn)蹦出彈層等在用戶看來就是BUG的尷尬情況。
首先這對用戶在同一個產(chǎn)品的異常情況的心智認(rèn)知達(dá)不到統(tǒng)一，其次還有可能讓用戶感到煩躁，這并不是我們想要的狀況。
由此引申的設(shè)計(jì)目標(biāo)
1. 視覺吸引 打動用戶，撫平異常場景用戶情緒，從而間接提升用戶留存時間和點(diǎn)擊轉(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è)計(jì)目標(biāo)引申
四、故事的序章
“這是一個親和、活力和鮮明的故事”
淘寶的體驗(yàn)氛圍應(yīng)該是放松和舒適的，和用戶的關(guān)系更親密，立體個性化的表達(dá)，讓淘寶更年輕鮮明。
基于這種品牌基調(diào)，我們需要打破原來的ICONFONTS的視覺傳統(tǒng)，講述一個以一個第三人稱為中心，因?yàn)閳鼍爱惓Ｔ蚨?jīng)歷的一幕幕奇妙故事。
腦暴風(fēng)格元素繪制草圖
淘寶的品牌圖形化元素抽象化提取之后就是圓形，2017新的品牌元素形狀也是重要的組成部分，這個形狀寓意完滿擁有用戶和商品所具備的獨(dú)特性，很多業(yè)務(wù)場景也出現(xiàn)了這個圖形元素。
在整體風(fēng)格和基本形狀基調(diào)定下來之后，就是需要在腦海中根據(jù)各個場景構(gòu)思各種各樣的故事了。
前期可以大膽地去涂鴉繪制草圖，丑一點(diǎn)沒關(guān)系，關(guān)鍵的是把自己的想法表達(dá)清楚，并且大家也能在你稍加說明的前提下能理解你的思維，然后把能想到的全都記錄下來，“大海、草原、沙漠星空”等等場景。當(dāng)發(fā)散思維到一定程度之后，可以漸漸收斂，稍微打磨細(xì)節(jié)大家一起溝通敲定，下圖為部分草稿圖案：
初期繪制草圖
“眾里尋他千百度”—故事傳遞情感
構(gòu)思故事的時候，可以比較大膽地天馬行空地去想象。比如異常場景中，類似404頁面的空頁面比較多，那么就可以去想，可以用什么故事來表達(dá)“空”這層意思，構(gòu)思的過程中就會發(fā)現(xiàn)，其實(shí)一個事物并不是只有“數(shù)目為零“才能表達(dá)”空“的意思，”沉睡“”躲避“”被搶走“等都可以讓用戶感知到這層意思，那么這樣的話，故事的發(fā)展就很開闊了。
比如“訂單為空”這個場景，就考慮了“訂單躺在竹筏上飄走啦！”“你的訂單正在山谷中沉睡。”兩個故事，具有趣味性又能積極而準(zhǔn)確地傳遞“為空”的信息。
構(gòu)思訂單為空的兩個故事
五、文案的情感化表達(dá)
我們不僅使用圖形和色彩構(gòu)建故事、傳遞情感，還嘗試對某些界面中的文案進(jìn)行設(shè)計(jì)。我們的初衷很簡單，就是希望某些界面中的文案表達(dá)可以有趣些。當(dāng)用戶看到這些文案的時候，能夠會心一笑，或者吐個槽。
在界面設(shè)計(jì)中，文案設(shè)計(jì)是最容易被忽視的。很多時候，設(shè)計(jì)師眼里的文案就是“示例文字示例文字最多展示18個中文字符”。
用戶使用一款應(yīng)用，就像兩個人認(rèn)識的過程。生活中，我們通過“外貌、穿著、舉止、談吐”認(rèn)識一個人。而在界面設(shè)計(jì)中，“圖形和色彩”就好比人的“外貌和穿著”，“動效”就好比人的“舉止“，“文案”就是一個人的“談吐”，是一個人對另一人說的話。
直播很火，男同胞們可能都有過這樣的經(jīng)驗(yàn)：封面看起來讓人怦然心動的的女主播，一開口說話能讓你懷疑人生。一樣火的高曉松老師，有多少女粉絲放棄了原有的“審美原則”想睡他，就是因?yàn)樗目诨詈谩？梢姡粋€人說的話有多么重要。
文案設(shè)計(jì)過程中，我們需要考慮兩個點(diǎn)：
1. 兩個人之間是什么樣的關(guān)系決定了兩個人會說什么話、怎么說
比如“加班”這件事情，你和你老板聊的時候，肯定沒有你和你的朋友、親人聊的時候來得痛心疾首、毫無保留。
我們希望手機(jī)淘寶和用戶之間的關(guān)系像是“朋友/閨蜜”，可以一起閑聊、吐槽、雞湯。當(dāng)用戶沮喪的時候表達(dá)關(guān)心，當(dāng)用戶困惑的時候提供幫助，當(dāng)用戶完成某個目標(biāo)的時候表示祝賀。
2. 不同性格的人，面對同一件事情，說的話也不一樣
比如面對“需求變更”這件事情，好脾氣的設(shè)計(jì)師回了一句“好的，親！”就義無反顧地開始改稿，而暴脾氣的設(shè)計(jì)師則從口袋里掏出一把2米長的西瓜刀，擦了又擦：“我改一稿，你挨一刀，沒毛病！”。
我們希望手機(jī)淘寶是一個集各種優(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ì)元素
基于上面提到的思考方式，各個主要異常場景的信息提示畫面也逐個設(shè)計(jì)出來，除了組件結(jié)構(gòu)上的統(tǒng)一運(yùn)用，就是視覺上對故事情節(jié)和風(fēng)格的體現(xiàn)
通用設(shè)計(jì)元素
1. 光源統(tǒng)一在左上角，視角一般為正視或正俯視圖。
2. 異常場景下背景全部為圓形，后續(xù)可能會拓展形狀。
3. 延續(xù)老版的小人，但小人只起到一個點(diǎn)綴和對比場景物體大小的作用。
4. 設(shè)計(jì)元素不采用描邊，純色和微漸變搭配，一般為遠(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)容的特殊場景比如：購物車和評價(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ù)用，這樣大大降低了以后各個業(yè)務(wù)線更改同步的成本以及開發(fā)成本，這里對此不多做敘述。
訂單詳情配置圖優(yōu)化
手淘中還存在情感化作為氛圍渲染的場景，這些場景先分別根據(jù)各自原本的布局來重繪氛圍插圖，暫不統(tǒng)一整改結(jié)構(gòu)，例如訂單詳情頁面的氛圍。
訂單詳情
七、故事的結(jié)果和延續(xù)
落地實(shí)現(xiàn)效果及未來的反饋
目前只上線了部分異常場景，雖然沒有完全完成，但是上線的部分還原度都是高的。我們將在后續(xù)的版本中陸續(xù)更新完成。
這些異常場景比較隱蔽，大多數(shù)用戶對于平常的異常場景不僅看不到而且并不在意，故這一塊難以采集數(shù)據(jù)，只能看在未來全部上線一段時間后，用戶的反饋是否涉及到這一塊，到時便交與用戶評說了。
故事將會更有趣
淘寶的故事不僅僅是這些，當(dāng)然會有更多更有趣的故事將會展示給用戶。
未來的故事還可能會將情感化設(shè)計(jì)延伸到不僅僅是異常的場景中去，從而覆蓋整個淘寶，真正地實(shí)現(xiàn)做到一個“有故事的淘寶”。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（2條）