如何準(zhǔn)確描述自己的設(shè)計(jì),這個(gè)問(wèn)題困擾了我很久。這篇文章希望通過(guò)回溯淘小鋪2.1項(xiàng)目的整個(gè)設(shè)計(jì)過(guò)程,從另一個(gè)角度,嘗試解答這個(gè)問(wèn)題。
這篇文章原本的標(biāo)題是“小鋪2.1用戶(hù)分層引導(dǎo)項(xiàng)目設(shè)計(jì)總結(jié)”,我剛在筆記本里敲下這行標(biāo)題,手機(jī)淘寶UED的顏值帝奇維,突然出現(xiàn)在我身后:標(biāo)題太low了。我一回頭,他已經(jīng)飄走了。數(shù)學(xué)好的同學(xué)可以計(jì)算下我當(dāng)時(shí)的心理陰影面積。然后,然后標(biāo)題就變成了現(xiàn)在大家看到的這個(gè),是不是頗具神秘主義色彩,還有一丟丟黑絲幽默。
對(duì)于設(shè)計(jì)師來(lái)說(shuō),準(zhǔn)確描述自己的設(shè)計(jì)不是件容易的事,尤其是視覺(jué)設(shè)計(jì)師。經(jīng)常能遇到這樣的情況,產(chǎn)品經(jīng)理或者運(yùn)營(yíng)旺旺你:患患,有一個(gè)項(xiàng)目很緊急,今天能出稿,不行明天一早發(fā)我也行。大概的需求是這樣這樣這樣的,交互是這樣這樣這樣的,沒(méi)問(wèn)題吧?你表示有問(wèn)題:時(shí)間這么趕肯定搞不完!但是第二天一早,你還是發(fā)出去一封初稿郵件。對(duì)于絕大多數(shù)視覺(jué)設(shè)計(jì)師來(lái)說(shuō),短時(shí)間內(nèi)產(chǎn)出一個(gè)看起來(lái)不錯(cuò)的設(shè)計(jì)稿并不難,如果時(shí)間充裕,你還能把稿子做得再屌一點(diǎn)。
但是,為什么產(chǎn)出的設(shè)計(jì)稿是這樣的而不是那樣的?是什么東西讓整個(gè)設(shè)計(jì)變成看到的樣子?為什么你要用這個(gè)顏色?如果業(yè)務(wù)方或者你的老板、又或是你自己提出這些疑問(wèn),你會(huì)怎么回答?視覺(jué)設(shè)計(jì)師們應(yīng)該如何用別人能夠理解和信服的邏輯說(shuō)清楚自己的設(shè)計(jì)思路和決策,而不是“這樣美那樣丑”“某應(yīng)用就是這樣處理的”“之所以這么設(shè)計(jì),來(lái)自于我,一個(gè)資深圖層拖動(dòng)師敏銳的嗅覺(jué)和自我修養(yǎng)”。
今年七月底八月初的時(shí)候,用研、設(shè)計(jì)師、產(chǎn)品、運(yùn)營(yíng)同學(xué)一起做了一輪針對(duì)”小鋪新賣(mài)家低活躍因素分析”的調(diào)研。這次調(diào)研的主要目的:
1)收集小鋪新賣(mài)家在產(chǎn)品使用過(guò)程中遇到的問(wèn)題;
2)將規(guī)劃中的產(chǎn)品介紹給新賣(mài)家,看新賣(mài)家是否有相應(yīng)需求;
3) 設(shè)計(jì)師帶去了新版的首頁(yè)和商品極簡(jiǎn)發(fā)布功能的演示demo,希望得到新賣(mài)家的反饋意見(jiàn);
△ 調(diào)研現(xiàn)場(chǎng)
這次調(diào)研收獲很多。調(diào)研之前,我們覺(jué)得步驟繁多的“實(shí)名認(rèn)證”和“支付寶開(kāi)店認(rèn)證”是兩個(gè)大門(mén)檻,肯定會(huì)給用戶(hù)帶來(lái)很大麻煩,但是調(diào)研下來(lái)發(fā)現(xiàn):對(duì)于真正想開(kāi)店的賣(mài)家來(lái)說(shuō),這兩個(gè)認(rèn)證流程并不復(fù)雜,反而覺(jué)得是有必要的。
調(diào)研之前,我們認(rèn)為小鋪發(fā)布商品的表單需要填的項(xiàng)目太多了,用戶(hù)一定希望能夠更快速的發(fā)布商品,于是我們?cè)O(shè)計(jì)了商品極簡(jiǎn)發(fā)布功能:只要上傳1張商品圖片,填寫(xiě)標(biāo)題、價(jià)格、庫(kù)存、郵費(fèi)就可以完成商品發(fā)布。我們給受訪新賣(mài)家演示這個(gè)功能的時(shí)候,有賣(mài)家表示發(fā)布商品的時(shí)候填寫(xiě)的信息越少,后期買(mǎi)家詢(xún)單時(shí)候的工作量就越大。并且,商品信息填的越少,意味著這個(gè)商品在前臺(tái)展示、能被用戶(hù)看到的機(jī)會(huì)也越小,當(dāng)受訪賣(mài)家得知通過(guò)極簡(jiǎn)發(fā)布功能發(fā)布的商品可能無(wú)法被主搜搜索到時(shí),幾乎所有受訪賣(mài)家都表示會(huì)選擇使用之前那個(gè)看起來(lái)較繁瑣的商品發(fā)布功能。
△ 左為“極簡(jiǎn)發(fā)布”界面,右為“傳統(tǒng)發(fā)布”界面
這兩個(gè)case告訴我們,設(shè)計(jì)不是一廂情愿的事情,你要知道你是在為誰(shuí)做設(shè)計(jì)。珍惜和用戶(hù)面對(duì)面的機(jī)會(huì)。他們能助你發(fā)現(xiàn)問(wèn)題,還能幫你厘清設(shè)計(jì)中可能存在的問(wèn)題,因?yàn)闊o(wú)論你覺(jué)得自己產(chǎn)出的設(shè)計(jì)方案精妙到多么無(wú)懈可擊,使用者是他們。雖然有的時(shí)候,我們言必稱(chēng)“用戶(hù)”,但我們并沒(méi)有如我們想象得那么了解他們。
這次調(diào)研我們發(fā)現(xiàn)兩個(gè)主要問(wèn)題:
1. 新賣(mài)家不知道如何使用小鋪。
小鋪首頁(yè)提供了很多功能入口,一期上線的時(shí)候有6個(gè)功能入口,二期上線的時(shí)候增加到了10個(gè),陸續(xù)還有新的功能正在開(kāi)發(fā)測(cè)試當(dāng)中。就跟開(kāi)始讀一本書(shū)一樣,開(kāi)頭的幾頁(yè)總是難讀的。剛從買(mǎi)家身份轉(zhuǎn)變成賣(mài)家身份的新賣(mài)家,不清楚每個(gè)功能具體有什么用,不知道應(yīng)該在什么時(shí)候使用什么功能。
2. 新賣(mài)家不知道如何獲取流量。
無(wú)論是天貓商城里的旗艦賣(mài)家,還是淘寶集市里的芝麻小店,獲取流量對(duì)他們來(lái)說(shuō)就跟吃飯睡覺(jué)一樣重要。雖然受訪的賣(mài)家開(kāi)店時(shí)間都不長(zhǎng),但幾乎所有人都表現(xiàn)出了對(duì)流量獲取的渴望和迷茫??释且?yàn)橹懒髁康闹匾?,迷茫是因?yàn)椴恢缿?yīng)該怎么去做。
這兩個(gè)問(wèn)題在數(shù)據(jù)上面得到了證實(shí):使用基礎(chǔ)功能的新賣(mài)家居多,數(shù)量很少的新賣(mài)家在使用營(yíng)銷(xiāo)推廣、店鋪裝修、發(fā)布微淘等優(yōu)化推廣店鋪的功能。
忍不住要引用某位非有名設(shè)計(jì)師的話:找到了問(wèn)題,你的設(shè)計(jì)就成功了一半。如果你想和一個(gè)妹紙談一場(chǎng)驚世駭俗的戀愛(ài),首先要做的,就是找到這個(gè)妹紙內(nèi)心柔軟的地方。找到了問(wèn)題,接著要做的就是解決它:
1. 我們需要優(yōu)化現(xiàn)有頁(yè)面的信息結(jié)構(gòu),讓它們看起來(lái)更容易理解。
很多時(shí)候,界面設(shè)計(jì)師做的事情是收納,屏幕是你家臥室的衣柜,屏幕上出現(xiàn)的所有界面元素是你剛從陽(yáng)臺(tái)收回來(lái)的衣物。你打開(kāi)衣柜,把疊好的衣物分門(mén)別類(lèi),放到對(duì)應(yīng)的格子和抽屜里。外套掛這個(gè)格子,毛衣襯衫掛這個(gè)格子,第一個(gè)抽屜是領(lǐng)帶,第二個(gè)抽屜是內(nèi)褲和襪子,第三個(gè)抽屜是女朋友的性感睡衣,第四個(gè)抽屜是給女朋友充氣的充氣筒。收納的目的,除了讓你的衣柜看起來(lái)干凈整齊、賞心悅目,更重要的是,它能讓你方便、快速地找到你要用的東西。界面設(shè)計(jì)的目的也是一樣。
我們對(duì)小鋪首頁(yè)做了一些調(diào)整:
1) 我們將首頁(yè)的功能入口做了布局上的劃分:根據(jù)產(chǎn)品的需要結(jié)合賣(mài)家的使用習(xí)慣分成了兩個(gè)區(qū)塊:第一個(gè)區(qū)塊是基礎(chǔ)功能,第二個(gè)區(qū)塊是高階功能。目的是讓用戶(hù)感知到兩個(gè)區(qū)塊的功能是有所區(qū)別的,并不是每一個(gè)功能看上去都是一樣重要的。
2)我們將首頁(yè)的功能入口做了色彩上的歸類(lèi):相似屬性的功能圖標(biāo)會(huì)定義使用同一種顏色:比如商品屬性的如發(fā)布商品、商品管理等功能使用一樣的橙色,官方規(guī)則和幫助屬性的如客服中心、小鋪學(xué)院等功能使用一樣的綠色,數(shù)據(jù)相關(guān)的如生意參謀、數(shù)據(jù)報(bào)表等功能使用一樣的藍(lán)色。色彩歸類(lèi)能將復(fù)雜的界面按照色彩的維度劃分區(qū)塊,使得界面的邏輯性和結(jié)構(gòu)性更強(qiáng)。
設(shè)計(jì)師們應(yīng)該都知道“視覺(jué)感知的格式塔原理”:我們的視覺(jué)系統(tǒng)會(huì)自動(dòng)對(duì)輸入的視覺(jué)信息進(jìn)行結(jié)構(gòu)化處理,因?yàn)檫@樣更易于記憶和理解。無(wú)論是布局上區(qū)塊劃分,還是色彩的歸類(lèi),都是為了用戶(hù)在看到界面的時(shí)候能夠輕易找到規(guī)律并進(jìn)行結(jié)構(gòu)化處理。這有點(diǎn)像玩拼圖,片數(shù)越多,結(jié)構(gòu)越復(fù)雜,還原整個(gè)畫(huà)面越難。相反,片數(shù)越少,結(jié)構(gòu)越簡(jiǎn)單,就很容易拼好。
△ 小鋪2.1新版首頁(yè)
我們也對(duì)營(yíng)銷(xiāo)推廣頁(yè)面做了一些調(diào)整。
△ 舊版營(yíng)銷(xiāo)推廣頁(yè)和幾個(gè)主要營(yíng)銷(xiāo)工具的數(shù)據(jù)表現(xiàn)
賣(mài)家渴望流量,而營(yíng)銷(xiāo)推廣頁(yè)面中有可以為他們帶來(lái)流量的功能,但是用的人卻很少。這就好比你的單身朋友一直抱怨找不到女朋友,可他的周?chē)鷧s明明就有很多優(yōu)質(zhì)的單身妹紙,更有幾個(gè)還對(duì)他有好感。這不科學(xué)。撇開(kāi)產(chǎn)品策略上某些營(yíng)銷(xiāo)工具可能存在使用門(mén)檻的問(wèn)題,我們還是希望從設(shè)計(jì)上做一些調(diào)整,能讓更多的賣(mài)家去嘗試使用營(yíng)銷(xiāo)推廣工具推廣自己的店鋪。
雖然第一版的設(shè)計(jì)我們?cè)诓季稚献隽藚^(qū)域劃分,但從用戶(hù)的反饋的數(shù)據(jù)上表現(xiàn)來(lái)看,這顯然不夠。還是要舉收納的栗子:衣柜里,你的所有衣物都分門(mén)別類(lèi)放在對(duì)應(yīng)的格子里,但有時(shí)候你還是會(huì)找不到要穿的襪子。為什么會(huì)這樣?
一個(gè)原因,是放領(lǐng)帶的抽屜和放襪子的抽屜,看上去都長(zhǎng)一樣——營(yíng)銷(xiāo)推廣頁(yè)面中營(yíng)銷(xiāo)工具的“圖標(biāo)”+“標(biāo)題”列表展示樣式太過(guò)單一,官方的營(yíng)銷(xiāo)工具和第三方的營(yíng)銷(xiāo)工具看起來(lái)是一樣重要的。尤其是當(dāng)功能眾多的時(shí)候,賣(mài)家無(wú)法分辨哪個(gè)功能更加重要。
另外一個(gè)重要的原因,是大多數(shù)的時(shí)候,把衣服放進(jìn)柜子的人并不是你自己,而是你的女友或者老婆——用戶(hù)“衣柜”里的“衣物”不是用戶(hù)自己放的,而是設(shè)計(jì)師決定的,因此,當(dāng)你的用戶(hù)不知道你設(shè)計(jì)的列表頁(yè)面里每個(gè)功能具體能做什么的時(shí)候,設(shè)計(jì)師需要像每個(gè)貼心的女友會(huì)在每一個(gè)收納盒上貼上標(biāo)簽提醒粗心的男友哪個(gè)抽屜放的是他的領(lǐng)帶哪個(gè)抽屜放的是襪子一樣:在必要的時(shí)候,給每一個(gè)功能加上相應(yīng)的提示。
我們開(kāi)始調(diào)整營(yíng)銷(xiāo)推廣頁(yè)面:
1)通過(guò)調(diào)整功能區(qū)的大小,加大每一個(gè)營(yíng)銷(xiāo)工具的顯示區(qū)域,將使用率較低的第三方工具折疊顯示,讓賣(mài)家一進(jìn)到這個(gè)頁(yè)面能知道哪些內(nèi)容重要、哪些內(nèi)容次之,而不是每塊內(nèi)容看起來(lái)都一樣重要。
2)我們給每個(gè)重要的營(yíng)銷(xiāo)工具加上了相應(yīng)的提示,告訴賣(mài)家這個(gè)工具能給他的店鋪帶來(lái)什么。對(duì)于新賣(mài)家來(lái)說(shuō),不必對(duì)著眾多的功能,而不知道該從何下手。
△ 調(diào)整后的營(yíng)銷(xiāo)推廣頁(yè)面
2.我們需要一個(gè)賣(mài)家成長(zhǎng)鏈路的引導(dǎo)方案,讓賣(mài)家知道應(yīng)該如何正確使用小鋪。
提到引導(dǎo)方案,我們很容易想到在產(chǎn)品啟動(dòng)的時(shí)候,以幻燈片的方式輪播精心設(shè)計(jì)過(guò)的產(chǎn)品功能介紹圖,或者滿(mǎn)屏顯示黑色半透明絲襪,呃,是黑色半透明遮罩,上面畫(huà)著幾個(gè)沖著不同方向的長(zhǎng)尾巴箭頭,每一個(gè)箭頭對(duì)應(yīng)某個(gè)功能的說(shuō)明文字。為了表現(xiàn)出這些說(shuō)明文字是帶有情感的,設(shè)計(jì)師會(huì)選擇使用手寫(xiě)字體。如果覺(jué)得情感表達(dá)還不夠,設(shè)計(jì)師會(huì)再精心畫(huà)上一個(gè)卡通小人,沖著屏幕外的用戶(hù)微笑。
△ 常見(jiàn)的一些引導(dǎo)方式
我們考慮過(guò)這些方案,但卻沒(méi)有使用。
一個(gè)原因是:對(duì)于用戶(hù)結(jié)構(gòu)和狀態(tài)相對(duì)復(fù)雜的產(chǎn)品來(lái)說(shuō),純介紹性的引導(dǎo)方式缺乏針對(duì)性。新用戶(hù)和老用戶(hù)、小白用戶(hù)和高階用戶(hù)接收到的引導(dǎo)信息是一樣的。這就好比某個(gè)學(xué)校里,高年級(jí)和低年級(jí)學(xué)生使用同一本教材,無(wú)論這本教材是針對(duì)高年級(jí)的還是針對(duì)低年級(jí)的,總有一個(gè)年級(jí)的學(xué)生是不適用這本教材的。
另一個(gè)原因是:這一類(lèi)的引導(dǎo)方式是一次性的,并且用戶(hù)是被動(dòng)接受的,容易被用戶(hù)“習(xí)慣性”地忽視。如果用戶(hù)點(diǎn)了右上角的“X”關(guān)閉了引導(dǎo)界面,無(wú)論是產(chǎn)品需要向用戶(hù)宣導(dǎo)的全新功能還是全新改版優(yōu)化了的功能點(diǎn),用戶(hù)如果沒(méi)有在第一時(shí)間接收到信息,就可能永遠(yuǎn)都接收不到這個(gè)信息。不得不承認(rèn)的一個(gè)事實(shí)是:對(duì)大多數(shù)用戶(hù)來(lái)說(shuō),設(shè)計(jì)師們用心畫(huà)的微笑小人的吸引力遠(yuǎn)沒(méi)有右上角的“X”按鈕來(lái)得大。
有時(shí)候我覺(jué)得設(shè)計(jì)師就像是一個(gè)多情的“小姐”。開(kāi)始之前,你想和眼前這位心急的“嫖客”先生聊一會(huì)兒天、增進(jìn)一下感情。但是,“嫖客”先生似乎沒(méi)有這個(gè)心情和耐心,門(mén)剛關(guān)上,他就撲了過(guò)來(lái)。
所以,我們?cè)O(shè)計(jì)了一個(gè)有針對(duì)性的、非一次性的、不容易被忽視的引導(dǎo)方案——“任務(wù)盒子”:我們把引導(dǎo)信息包裝成一個(gè)個(gè)任務(wù),根據(jù)用戶(hù)所處的不同階段和產(chǎn)品的導(dǎo)向制定不同的任務(wù),以完成任務(wù)后獲得的獎(jiǎng)勵(lì)作為利益點(diǎn)推動(dòng)賣(mài)家去完成任務(wù),賣(mài)家通過(guò)任務(wù)的引導(dǎo)了解和熟悉整個(gè)產(chǎn)品。
“任務(wù)盒子”結(jié)構(gòu)模型:
寫(xiě)在后面
簡(jiǎn)約設(shè)計(jì)、扁平化設(shè)計(jì)的風(fēng)行,令視覺(jué)設(shè)計(jì)師們的工作看起來(lái)略顯輕松,就這樣圖片擺一擺色塊弄一弄線條勾一勾顏色選一選,一個(gè)界面就完成了,“這樣的界面我也能設(shè)計(jì)”,你是不是曾聽(tīng)過(guò)這樣的聲音?我不僅聽(tīng)過(guò),而且還看過(guò)。一個(gè)前端工程師自己搭了一個(gè)界面,看起來(lái)真的挺不錯(cuò)。雖然這樣的個(gè)案不多,但是,作為一個(gè)專(zhuān)業(yè)吃這碗飯的同學(xué),夜深人靜的時(shí)候還是不禁要捫雞自問(wèn):作為一個(gè)設(shè)計(jì)師,你的“專(zhuān)業(yè)”度應(yīng)該體現(xiàn)在哪里?你設(shè)計(jì)的界面和前端工程師設(shè)計(jì)的界面區(qū)別在哪里?
我洋洋灑灑啰里八嗦寫(xiě)了這大幾千字,就是希望能給自己解答這些疑問(wèn),好消息是,以前腦子一些模糊的想法變得清晰起來(lái)。設(shè)計(jì)師和前端工程師設(shè)計(jì)或者產(chǎn)品經(jīng)理或者開(kāi)發(fā)同學(xué)設(shè)計(jì)的界面,大的區(qū)別,應(yīng)該是設(shè)計(jì)師在設(shè)計(jì)界面的過(guò)程中,需要反復(fù)問(wèn)自己以下幾個(gè)問(wèn)題,并一一給出答案:
1. 你的設(shè)計(jì)解決了什么樣的問(wèn)題?
2. 你的設(shè)計(jì)會(huì)對(duì)用戶(hù)產(chǎn)生什么樣的影響?
3. 你的設(shè)計(jì)方案為什么比那些被你Pass掉的方案好?
當(dāng)你的業(yè)務(wù)方或者老板對(duì)你的設(shè)計(jì)提出疑問(wèn)的時(shí)候,不妨把這些問(wèn)題的答案說(shuō)給他們聽(tīng)。