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