2017-3-17 用心設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一、開端：做一個有故事的淘寶
現如今，消費者對產品的需求從追求高性價比更多地轉為高品質，雖然手機只是一個機器，但用戶與產品之間當然是能有情感傳遞的，不然就只是一個冷冰冰的工具而已，能讓用戶在使用體驗和過程中產生愉悅的產品才可能走的更遠。
淘寶不只是售賣商品的平臺，而是有活力、創造力的生態圈，淘寶的用戶也是越來越年輕化，淘寶當然也應該有自己的故事，自己的“小情緒”，將這些有趣故事敘說給用戶，這樣才能給用戶帶來更好的購物心情和體驗。
二、情感化的價值
“用戶的情緒訴求”
產品給用戶的第一印象決定了很多事情，人是視覺動物，第一眼對物的觀察會本能地判斷是否打動其內心，很多時候哪怕只是一個小小的細節，都有可能可能瞬間讓人注意并且喜歡。
產品亦然，就像用戶逛商場一樣，如果逛著逛著心情越來越不好怎么會樂意繼續逛下去呢？所以我們要追求的不僅僅是“可以用”而已，還要讓用戶在使用后和使用前一樣的是愉悅的過程和心情。
“人性化的產品更受歡迎”
“人們喜歡和人交談，而不是機器”，這句話出自唐納德·諾曼寫的《情感化設計》，其實道理很淺顯，人性化的產品，脫離了冰冷的機器的味道，不再那么的呆板。
人機交互學科中，人性化是很重要的一部分，產品的設計者充分考慮到用戶的心理感受，將產品化身成一個有個性、有脾氣的人，相比冷冰冰的機器更能得到用戶的好感和共鳴。
這種例子在現實生活和工業設計中不勝枚舉，將機器擬人化情感化等元素使其更生動有趣由此被用戶記住從而延續使用，脫穎而出，這就是賦予物以額外情感的價值。
三、故事的由來
淘寶異常信息提示情感化現狀梳理
如下圖，目前手淘因為業務繁多、場景復雜以及底層架構等等原因，其異常場景比如為空場景、網絡異常以及限流場景等等不僅在布局結構上有很大的優化空間，在其設計風格上不僅沒有滲透淘寶的品牌心智，也沒有互相之間橫向統一，甚至在大促的一些特殊期間還會出現蹦出彈層等在用戶看來就是BUG的尷尬情況。
首先這對用戶在同一個產品的異常情況的心智認知達不到統一，其次還有可能讓用戶感到煩躁，這并不是我們想要的狀況。
由此引申的設計目標
1. 視覺吸引 打動用戶，撫平異常場景用戶情緒，從而間接提升用戶留存時間和點擊轉化率。
2. 結構統一 一致異常組件結構，橫向業務也能統一對同一個形式提示內容的認知。
3. 品牌認知 淘寶主力增量人群趨于年輕化，滲透2017淘寶新品牌認知，親和活力和鮮明。
設計目標引申
四、故事的序章
“這是一個親和、活力和鮮明的故事”
淘寶的體驗氛圍應該是放松和舒適的，和用戶的關系更親密，立體個性化的表達，讓淘寶更年輕鮮明。
基于這種品牌基調，我們需要打破原來的ICONFONTS的視覺傳統，講述一個以一個第三人稱為中心，因為場景異常原因而經歷的一幕幕奇妙故事。
腦暴風格元素繪制草圖
淘寶的品牌圖形化元素抽象化提取之后就是圓形，2017新的品牌元素形狀也是重要的組成部分，這個形狀寓意完滿擁有用戶和商品所具備的獨特性，很多業務場景也出現了這個圖形元素。
在整體風格和基本形狀基調定下來之后，就是需要在腦海中根據各個場景構思各種各樣的故事了。
前期可以大膽地去涂鴉繪制草圖，丑一點沒關系，關鍵的是把自己的想法表達清楚，并且大家也能在你稍加說明的前提下能理解你的思維，然后把能想到的全都記錄下來，“大海、草原、沙漠星空”等等場景。當發散思維到一定程度之后，可以漸漸收斂，稍微打磨細節大家一起溝通敲定，下圖為部分草稿圖案：
初期繪制草圖
“眾里尋他千百度”—故事傳遞情感
構思故事的時候，可以比較大膽地天馬行空地去想象。比如異常場景中，類似404頁面的空頁面比較多，那么就可以去想，可以用什么故事來表達“空”這層意思，構思的過程中就會發現，其實一個事物并不是只有“數目為零“才能表達”空“的意思，”沉睡“”躲避“”被搶走“等都可以讓用戶感知到這層意思，那么這樣的話，故事的發展就很開闊了。
比如“訂單為空”這個場景，就考慮了“訂單躺在竹筏上飄走啦！”“你的訂單正在山谷中沉睡。”兩個故事，具有趣味性又能積極而準確地傳遞“為空”的信息。
構思訂單為空的兩個故事
五、文案的情感化表達
我們不僅使用圖形和色彩構建故事、傳遞情感，還嘗試對某些界面中的文案進行設計。我們的初衷很簡單，就是希望某些界面中的文案表達可以有趣些。當用戶看到這些文案的時候，能夠會心一笑，或者吐個槽。
在界面設計中，文案設計是最容易被忽視的。很多時候，設計師眼里的文案就是“示例文字示例文字最多展示18個中文字符”。
用戶使用一款應用，就像兩個人認識的過程。生活中，我們通過“外貌、穿著、舉止、談吐”認識一個人。而在界面設計中，“圖形和色彩”就好比人的“外貌和穿著”，“動效”就好比人的“舉止“，“文案”就是一個人的“談吐”，是一個人對另一人說的話。
直播很火，男同胞們可能都有過這樣的經驗：封面看起來讓人怦然心動的的女主播，一開口說話能讓你懷疑人生。一樣火的高曉松老師，有多少女粉絲放棄了原有的“審美原則”想睡他，就是因為他的口活好。可見，一個人說的話有多么重要。
文案設計過程中，我們需要考慮兩個點：
1. 兩個人之間是什么樣的關系決定了兩個人會說什么話、怎么說
比如“加班”這件事情，你和你老板聊的時候，肯定沒有你和你的朋友、親人聊的時候來得痛心疾首、毫無保留。
我們希望手機淘寶和用戶之間的關系像是“朋友/閨蜜”，可以一起閑聊、吐槽、雞湯。當用戶沮喪的時候表達關心，當用戶困惑的時候提供幫助，當用戶完成某個目標的時候表示祝賀。
2. 不同性格的人，面對同一件事情，說的話也不一樣
比如面對“需求變更”這件事情，好脾氣的設計師回了一句“好的，親！”就義無反顧地開始改稿，而暴脾氣的設計師則從口袋里掏出一把2米長的西瓜刀，擦了又擦：“我改一稿，你挨一刀，沒毛病！”。
我們希望手機淘寶是一個集各種優秀品質于一身的的“朋友/閨蜜”，根據場景不同，可以熱心、溫暖、體貼，也可以逗逼、無聊、毒舌，能夠在不經意間為用戶制造一點小驚喜、小意外。
以下是部分場景的文案設計：
六、故事的發展
顏色應用規范
2017淘寶品牌色系仍然是橙色系，與之前不同的是，今年加入了微漸變來做更豐富的視覺表現，更加年輕化和更具有活力，這一點在故事的設計中仍然是需要繼承的。主要色彩仍然是橙色系，大色塊采用微漸變的方式，小色塊采用純色，不然畫面漸變太多可能就眼花繚亂了,如圖是手淘基本鏈路色彩應用拆解：
故事性，趣味性以及共同設計元素
基于上面提到的思考方式，各個主要異常場景的信息提示畫面也逐個設計出來，除了組件結構上的統一運用，就是視覺上對故事情節和風格的體現
通用設計元素
1. 光源統一在左上角，視角一般為正視或正俯視圖。
2. 異常場景下背景全部為圓形，后續可能會拓展形狀。
3. 延續老版的小人，但小人只起到一個點綴和對比場景物體大小的作用。
4. 設計元素不采用描邊，純色和微漸變搭配，一般為遠中近三層元素，主體元素存在陰影，營造層次感。
故事一：太空網絡遺跡
通用的“網絡異常”的場景，講的是“一個宇航員在外太空尋找網絡遺跡”的故事，太空場景本身就是一種神秘且容易丟失的空間，將網絡夸張擬物保證意義明確，最后定格在正向俯視圖上。
網絡異常場景
故事二：大漠足印
“足跡為空”的場景，是“一個考古學家在大漠中追尋巨人足跡”的故事，一個在沙漠中找尋的學家，發現了一個類似巨人的足印，但足印的主人不知所蹤。
足跡為空場景
故事三：擁擠的傳送帶
通用限流場景，把貨物擬人化，卡在貨物傳送帶的入口上你推我搡，豐富的畫面間接體現擁擠的感覺。
限流場景
其他場景集合（部分）：
異常場景組件和結構的統一
由于手淘中業務繁多場景復雜，有的存在多重信息導航，有的存在二級內容，有的甚至是在場景中間可能會出現異常，從而導致目前各個業務異常場景結構不一，這里是需要統一認知的。
這里從最常用的通用場景和一些存在別的內容的特殊場景比如：購物車和評價場景等等。針對不同的場景做了橫向統一，首先統一了二級內容的高度規范，其次規范了二級內容為空等等的一些特殊情況供其他業務的設計師參考。
1. 通用布局
通用場景規范適用于手淘中網絡異常、限流等全局異常場景，這些場景中除了異常提示信息沒有別的內容出現,文案可配置，相同場景統一為一種文案。
2. 一級內容為空
場景中第一級內容為空或者異常，并且只存在第一級的TitleBar，比如購物車為空等場景。
3. 次級內容為空
一級內容一般高度無法控制，故仍然需要設計師配合各自鏈路開發適配組件位置，例如評論詳情，店鋪詳情，消息等場景，圖示給出場景示例：
圖文信息內部結構由架構組同學做成統一組件可以讓其他業務的開發復用，這樣大大降低了以后各個業務線更改同步的成本以及開發成本，這里對此不多做敘述。
訂單詳情配置圖優化
手淘中還存在情感化作為氛圍渲染的場景，這些場景先分別根據各自原本的布局來重繪氛圍插圖，暫不統一整改結構，例如訂單詳情頁面的氛圍。
訂單詳情
七、故事的結果和延續
落地實現效果及未來的反饋
目前只上線了部分異常場景，雖然沒有完全完成，但是上線的部分還原度都是高的。我們將在后續的版本中陸續更新完成。
這些異常場景比較隱蔽，大多數用戶對于平常的異常場景不僅看不到而且并不在意，故這一塊難以采集數據，只能看在未來全部上線一段時間后，用戶的反饋是否涉及到這一塊，到時便交與用戶評說了。
故事將會更有趣
淘寶的故事不僅僅是這些，當然會有更多更有趣的故事將會展示給用戶。
未來的故事還可能會將情感化設計延伸到不僅僅是異常的場景中去，從而覆蓋整個淘寶，真正地實現做到一個“有故事的淘寶”。
藍藍設計( m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務