本文講述了“峰終定律”的定義，并結(jié)合筆者生活中的兩個(gè)例子做了圖文分析，最后通過(guò)學(xué)習(xí)海底撈的案例，然后結(jié)合顧客角度將一次糟糕的活動(dòng)進(jìn)行了改進(jìn)。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)獲得者，心理學(xué)家）提出的——他發(fā)現(xiàn)人們對(duì)體驗(yàn)（體驗(yàn)事物或者產(chǎn)品）的記憶由兩個(gè)因素決定：
即，除了峰值和終值時(shí)之外的其他體驗(yàn)，無(wú)論好與不好體驗(yàn)的比重是多少，體驗(yàn)時(shí)間的長(zhǎng)短，對(duì)記憶或感受都沒(méi)那么大影響，會(huì)被選擇性忽略。
概念講完，下面筆者結(jié)合去飯店買飯的故事，使用“峰終定律”進(jìn)行圖文分析，為什么一家飯店給我的體驗(yàn)非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時(shí)間飯店聯(lián)合天地壹號(hào)搞活動(dòng)，買飯送一瓶鐵罐裝的天地壹號(hào)。某天中午下班提前5分鐘到了飯店，我特意說(shuō)明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問(wèn)這份是不是我的，店里服務(wù)員支支吾吾，也沒(méi)有看著我，然后那份飯被拿去跟天地壹號(hào)的工作人員合影，一張不滿意又拍一張，一個(gè)角度拍完又換一個(gè)角度。最后，飯店的服務(wù)員才把那份飯給我，當(dāng)時(shí)我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時(shí)間就一個(gè)小時(shí)，為了能睡好點(diǎn)還要吃得快點(diǎn)。
這家店給我的體驗(yàn)就是，不把用戶當(dāng)用戶，心里非常不是滋味。
而當(dāng)我向同事說(shuō)起這家店時(shí)，我會(huì)推薦手撕雞飯，這是我在廣州吃過(guò)的最好吃的手撕雞飯， 沒(méi)有之一。同時(shí)，我還會(huì)說(shuō)上面的故事給同事，最后評(píng)價(jià)道：可以試試的，另外，出餐質(zhì)量有問(wèn)題他們也會(huì)給你換一份的。
當(dāng)我說(shuō)完這次的經(jīng)歷給同事聽(tīng)，同事并沒(méi)有表示會(huì)去嘗試一次，因?yàn)槲艺f(shuō)的故事，又因?yàn)閮r(jià)格也不便宜。所以說(shuō)，店鋪（或者說(shuō)品牌）是在食物（或者說(shuō)餐品）之前被消費(fèi)的，這是給用戶留下第一印象的關(guān)鍵，第一印象不好，即便是廣州第一手撕雞，也不會(huì)去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗(yàn)就是：
峰值有兩個(gè)，正峰值是廣州第一手撕雞的“口味”，負(fù)峰值是“員工服務(wù)”。負(fù)峰值的出現(xiàn)，說(shuō)明了店家在活動(dòng)開(kāi)始前并沒(méi)有設(shè)計(jì)好活動(dòng)流程，服務(wù)員也就沒(méi)有足夠的授權(quán)去處理和應(yīng)對(duì)。
終值是“離店”時(shí)的不爽，店家并沒(méi)有作出任何的正面回應(yīng)，沒(méi)有表達(dá)歉意，沒(méi)有意識(shí)到這樣做會(huì)給顧客造成怎樣的影響。
“員工服務(wù)”是直接突破了我的忍耐底線，“離店”時(shí)店家的不作為再次挑戰(zhàn)了我的忍耐底線。短時(shí)間內(nèi)兩次挑戰(zhàn)我的忍耐底線，店家不但“失去”了我，我的幾個(gè)同事也不會(huì)是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結(jié)合了梁寧老師講過(guò)的內(nèi)容，然后加到了這張“用戶體驗(yàn)?zāi)Ｐ汀眻D上。
梁寧老師講的是：“PC時(shí)代用戶等待一個(gè)頁(yè)面打開(kāi)的忍耐底線平均數(shù)是7秒，等了7秒還沒(méi)打開(kāi)，基本上99%的用戶就會(huì)離開(kāi)。所以，對(duì)成本的控制是本分，但是不能挑戰(zhàn)用戶的忍耐底線?！?
某天中午我發(fā)現(xiàn)寫字樓下新開(kāi)了一家飯店，我到店里問(wèn)老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個(gè)菜用什么材料做，哪個(gè)湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺(jué)不錯(cuò)。后面選擇了老板推薦的肉餅飯，發(fā)現(xiàn)真合我胃口。
上兩周有兩天中午休息時(shí)都到店里想點(diǎn)肉餅飯，但是連續(xù)兩天都在我來(lái)之前賣完了，之后老板說(shuō)可以掃門口的小程序預(yù)約下單，第二天上班我早早的就預(yù)約了肉餅飯，到店之后老板已經(jīng)打包好了，我把訂單信息給老板看，老板說(shuō)了一句我聽(tīng)到就覺(jué)得好笑，并且每當(dāng)給人推薦這家店時(shí)就說(shuō)的一句話：“這是我們專門給您留的肉餅飯?！?
當(dāng)我笑著回應(yīng)謝謝的時(shí)候我也在想，這飯是我在小程序上面早早預(yù)定的，老板還說(shuō)是專門我留的；因?yàn)槲蚁雀跺X了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來(lái)提供對(duì)應(yīng)的服務(wù)的，并且我也確實(shí)感受到了老板的真誠(chéng)、熱情。
于是我把這家店介紹給了幾個(gè)同事，他們都表示下次沒(méi)有自己帶午餐的時(shí)候會(huì)試一下，并且有兩個(gè)同事聽(tīng)了我的推薦后去下單了，其中有一位同事表示會(huì)回購(gòu)。
這家店給我的體驗(yàn)就是，不把用戶當(dāng)流量，心里有用戶，產(chǎn)品可以，用戶自然會(huì)安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗(yàn)就是：
有兩個(gè)正峰值，第一個(gè)正峰值是讓我感受到店家心里有顧客的“員工服務(wù)”。第二個(gè)正峰值是“口味”，這里甚至有一點(diǎn)點(diǎn)主觀上的小驚喜：當(dāng)時(shí)抱著不知道會(huì)不會(huì)踩雷，試試新店的心態(tài)，當(dāng)我試到肉餅飯時(shí)，小驚喜就來(lái)了——比我以往在外面吃到的肉餅飯都好吃。
小結(jié)：
當(dāng)我跟同事同事說(shuō)起第一家飯店體驗(yàn)不好的時(shí)候，并不是說(shuō)他的“港式氛圍”裝修不好，不是說(shuō)出餐有問(wèn)題不給換新的，手撕雞也是廣州最好吃的，而是說(shuō)，這家店給我的感覺(jué)是他并不像跟用戶建立長(zhǎng)期關(guān)系，只做一桿子買賣。于是他們并不注重維護(hù)客情關(guān)系，當(dāng)他們把合過(guò)影的手撕雞飯遞給我時(shí)，連安撫情緒的話都沒(méi)有，就餐體驗(yàn)自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會(huì)如何設(shè)計(jì)本次活動(dòng)？
我們先看看餐飲行業(yè)的巨頭都是怎么做的，因服務(wù)被大家口口相傳的海底撈就是非常值的學(xué)習(xí)的對(duì)象。
通過(guò)模型，我有以下幾點(diǎn)感悟：
服務(wù)觸點(diǎn)：用戶為了完成目標(biāo)，需要做一系列連續(xù)的行為，而這一連串行為中會(huì)涉及到一個(gè)一個(gè)的用戶與產(chǎn)品完成交互的觸點(diǎn)，這就是服務(wù)觸。比如上圖所示的，海底撈出于提高轉(zhuǎn)化率、降低顧客等待叫號(hào)時(shí)的無(wú)聊感等原因，在顧客排隊(duì)時(shí)可以體驗(yàn)免費(fèi)的美甲服務(wù)、免費(fèi)擦鞋服務(wù)等。
帶著學(xué)習(xí)完海底撈得出的感悟，下面我來(lái)嘗試思考一下，我現(xiàn)在是這家燒臘飯店的主理人，那我會(huì)這樣設(shè)計(jì)本次活動(dòng)：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預(yù)期
選擇符合自己口味的菜品，店內(nèi)就餐/打包回公司吃；店家穩(wěn)定出餐（口味穩(wěn)定、不要有異物等）；不希望排長(zhǎng)龍。
3、服務(wù)觸點(diǎn)
點(diǎn)餐時(shí)、支付時(shí)、等待出餐時(shí)（排隊(duì)）、（打包完）出餐時(shí)、離店時(shí)。
其次，才到本次活動(dòng)的設(shè)計(jì)：
1、背景
贊助商天地壹號(hào)需要做品牌推廣，找到我們合作，方案就是消費(fèi)即送天地壹號(hào)一瓶。
2、目的
幫助合作伙伴宣傳的同時(shí)，吸引新的顧客，回饋老顧客，提升營(yíng)業(yè)額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費(fèi)即送天地壹號(hào)一瓶，送完即止”的宣傳海報(bào)，并且放置在店鋪門口。
3.2、完善服務(wù)流程。（請(qǐng)看下圖）
3.3、設(shè)置幾種異常情況的應(yīng)對(duì)方案。（請(qǐng)看下圖）
完善好服務(wù)流程，提前設(shè)置好幾個(gè)異常情況的應(yīng)對(duì)方案，相比于海底撈一連串的各種免費(fèi)服務(wù)，其實(shí)花不了多少實(shí)際的金錢成本。但是卻能用最少的資源，最大程度的避免“負(fù)峰值”的出現(xiàn)。
另外，天地壹號(hào)的工作人員提出合影，飯店應(yīng)該用自己的員工餐，而不是用顧客的。這其實(shí)不是異常情況的應(yīng)對(duì)方案，而是作為服務(wù)行業(yè)從業(yè)人員該有的覺(jué)悟。
本文到此結(jié)束，朋友們?nèi)绻O(shè)計(jì)/體驗(yàn)了好的“峰終體驗(yàn)”的案例，麻煩在評(píng)論區(qū)告知我一聲，讓我也去體驗(yàn)一把~
作者：我是Berwin
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
時(shí)間對(duì)于我們每個(gè)人來(lái)說(shuō)都極為重要和珍貴。隨著生活節(jié)奏的加速，很多產(chǎn)品也都開(kāi)始注重和考慮對(duì)于用戶時(shí)間的節(jié)省和分配。本文重點(diǎn)分享三種在交互設(shè)計(jì)中幫助用戶「同時(shí)做幾件事」的設(shè)計(jì)方法，以及其對(duì)應(yīng)的優(yōu)秀案例：
希望會(huì)為你帶來(lái)更多的設(shè)計(jì)靈感。
通過(guò)將屏幕的布局進(jìn)行分割處理，可同時(shí)呈現(xiàn)多項(xiàng)內(nèi)容，讓用戶自由選擇任務(wù)主次，同時(shí)處理多項(xiàng)任務(wù)。分屏設(shè)計(jì)很常見(jiàn)，但其中的體驗(yàn)細(xì)節(jié)卻依舊值得研究和優(yōu)化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時(shí)支持分屏功能，還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機(jī)尺寸，體驗(yàn)順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動(dòng)端的視頻通過(guò)小窗模式可以不間斷播放，不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式，正在播的視頻，在被臨時(shí)打斷退出視頻后，還可以用音頻的方式繼續(xù)播放：
案例 3
微信的新功能，在你閱讀文章時(shí)依舊能看到朋友發(fā)來(lái)的微信消息，可以直接在當(dāng)前頁(yè)面回復(fù)消息，避免你在看文章時(shí)閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”，一會(huì)兒再做處理：
案例4
微信視頻號(hào)改版后，點(diǎn)擊視頻號(hào)下方的博主名稱和頭像，下方彈窗會(huì)彈出該博主的主頁(yè)和其他視頻，而當(dāng)前正在播放的視頻會(huì)漸漸呈現(xiàn)小屏播放，視頻內(nèi)容不會(huì)被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內(nèi)容：
案例 5
在微信訂閱號(hào)中展示的視頻內(nèi)容可以通過(guò)劃到右下角變成小窗播放音頻，既可以聽(tīng)內(nèi)容，也不影響你繼續(xù)瀏覽訂閱號(hào)的其他內(nèi)容：
產(chǎn)品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續(xù)，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時(shí)進(jìn)行。
案例 1
釘釘?shù)囊苿?dòng)端浮窗功能，向右滑動(dòng)退出正在操作的頁(yè)面時(shí)，就會(huì)出現(xiàn)添加浮窗區(qū)域，用于收錄未做完的操作。同時(shí)顯示出已添加浮窗的內(nèi)容數(shù)量，最多添加 5 個(gè)：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時(shí)閱讀的內(nèi)容，在打開(kāi)時(shí)還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時(shí)間來(lái)閱讀長(zhǎng)篇文章，可以更合理地掌控閱讀節(jié)奏：
案例3
微信讀書 App 會(huì)在你跳讀到其他章節(jié)時(shí)，在頁(yè)面下方顯示“返回原進(jìn)度”的按鈕，方便你在跳讀后回來(lái)繼續(xù)閱讀：
案例4
網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點(diǎn)開(kāi)一封郵件，頁(yè)面上方會(huì)增加一個(gè)類似瀏覽器標(biāo)簽頁(yè)的 Tab，你可以通過(guò)它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時(shí)，同時(shí)又收到了其他的新郵件，去查看新郵件之后，可以通過(guò) Tab 直接回到郵件編輯頁(yè)面，繼續(xù)編寫剛才的郵件：
案例5
使用釘釘發(fā)起會(huì)議邀請(qǐng)，如果中途退出，系統(tǒng)幫助你自動(dòng)保存。再發(fā)起會(huì)議邀請(qǐng)時(shí)也會(huì)給出上次操作的提示，幫你續(xù)寫內(nèi)容：
用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù)，將更多的時(shí)間用在其他事情而非無(wú)法控制的等待上。
案例1
iOS 系統(tǒng)中，當(dāng)你在不同 App 之間傳遞文件時(shí)，如果文件過(guò)大，彈窗的“取消”按鈕會(huì)在幾秒鐘之后變成“隱藏”，用戶點(diǎn)擊后可以繼續(xù)做其他操作，并不妨礙后臺(tái)的文件傳輸。
案例2
微信在接收超大文件時(shí)，增加了“發(fā)送給朋友”的選項(xiàng)，你不必等待文件在自己這邊下載完成后再發(fā)送，可以直接發(fā)送源文件給對(duì)方，同時(shí)下載：
案例3
微信撥打語(yǔ)音的界面，在等待好友接聽(tīng)的過(guò)程中，你可以看到對(duì)方朋友圈的動(dòng)態(tài)，緩解無(wú)聊的等待，也為即將進(jìn)行的語(yǔ)音聊天提供了話題：
作者：元堯
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在上一篇《如何設(shè)計(jì)高質(zhì)量B端調(diào)研問(wèn)卷？用戶研究方法(一)》一文中，詳細(xì)介紹了如何通過(guò)調(diào)研問(wèn)卷的方式，整理發(fā)現(xiàn)用戶的淺層需求。
本文將分享另一個(gè)更為深層全面的B端用戶研究方法——用戶訪談。通過(guò)面對(duì)面地溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。（文末附模板下載鏈接）
下面是本次分享的文章結(jié)構(gòu)，標(biāo)??的為重點(diǎn)部分。
01
用戶訪談的兩種路徑
用戶訪談通?？梢圆捎?strong>線上會(huì)議、電話或者線下面對(duì)面交流兩種形式。
線上會(huì)議和電話訪談的優(yōu)勢(shì)顯而易見(jiàn)，可以不受地域限制展開(kāi)調(diào)研訪談，整體的成本也比較低，設(shè)計(jì)師可以自己找領(lǐng)導(dǎo)或者協(xié)調(diào)資源去推動(dòng)。
缺點(diǎn)也是比較明顯，溝通起來(lái)效率低下，比如我們一定有過(guò)“電話里說(shuō)不清，我們見(jiàn)面詳談”的經(jīng)歷。
所以，相較而言線下訪談無(wú)疑是最佳的調(diào)研形式。首先當(dāng)面溝通更加高效，其次對(duì)于搭載硬件設(shè)備的產(chǎn)品來(lái)說(shuō)，讓受訪者在真實(shí)場(chǎng)景里操作演示，可以發(fā)現(xiàn)更多隱性問(wèn)題。
02
常見(jiàn)的3種受訪者類型
在訪談過(guò)程中通常會(huì)接觸到以下3種類型的受訪用戶，不同類型的用戶我們應(yīng)該怎么接觸交流呢？
話癆型的受訪者占大多數(shù)，通常就是想法、意見(jiàn)比較多。他們不僅有一大堆不滿意的點(diǎn)要訴說(shuō)，甚至連對(duì)應(yīng)的解決方案都想好了。
整體接觸下來(lái)，我覺(jué)得該類型的受訪者，可提供的有價(jià)值信息會(huì)更多一點(diǎn)。只不過(guò)我們要學(xué)會(huì)過(guò)濾信息。因?yàn)樗麄兊男揎椨迷~通常比較多，例如：“太難用”、“超級(jí)麻煩”、“哎 我真的是受不了啊”...
訪談話癆型的受訪者，我們需要注意無(wú)論怎么聊都要緊扣主題，防止變成了吐槽專場(chǎng)。
其次也要表達(dá)肯定，安撫情緒，并對(duì)問(wèn)題進(jìn)行進(jìn)一步提問(wèn)：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來(lái)了，我還想確認(rèn)下，剛才您說(shuō)的3個(gè)關(guān)于結(jié)算環(huán)節(jié)的問(wèn)題，哪一個(gè)給您造成的困擾最大？”
顧名思義，受訪者可能是因?yàn)?/span>性格內(nèi)向或害怕說(shuō)錯(cuò)了不好意思等緣故，在受訪過(guò)程中問(wèn)一句答一句，比較容易冷場(chǎng)。答案的價(jià)值也比較低，例如：“對(duì)，是的”、“還行吧”、“沒(méi)啥感覺(jué)啊”、“反正就這樣用用吧”、“說(shuō)不上來(lái)”。
這種情況下要嘗試緩解下氛圍壓力，換個(gè)形式溝通：“就是隨便聊聊，公司派我們來(lái)呢，就是因?yàn)榉浅ｊP(guān)注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好?！?/span>
其次我們?cè)谔釂?wèn)的時(shí)候也要帶有引導(dǎo)性，例如：“還有呢、然后呢、具體說(shuō)說(shuō)呢”，如果對(duì)方實(shí)在說(shuō)不出所以然，最有效的辦法就是進(jìn)入上機(jī)操作環(huán)節(jié)，通常操作過(guò)程中那些問(wèn)題也會(huì)隨之暴露出來(lái)。
專業(yè)型的受訪者一般是老板或者店長(zhǎng)、經(jīng)理崗位的員工，他們對(duì)于產(chǎn)品或整個(gè)門店乃至行業(yè)都了解的比較透徹。
和這樣的受訪者溝通，不僅是局限于產(chǎn)品的一些問(wèn)題挖掘，他們會(huì)從這個(gè)行業(yè)的角度闡述一些個(gè)人的見(jiàn)解觀點(diǎn)，給我們提供一些有價(jià)值的優(yōu)化方案或者改進(jìn)方向。
例如餐飲的老板其實(shí)并不是很關(guān)心點(diǎn)餐、結(jié)算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執(zhí)行，而且坦率的說(shuō)，對(duì)于絕大部分產(chǎn)品而言，好用并不能成為其核心競(jìng)爭(zhēng)力。
他們關(guān)心的是如何帶來(lái)更大的商業(yè)價(jià)值，類似于如何提升坪效，如何提升門店會(huì)員的儲(chǔ)值能力等等。而這些老板的關(guān)注點(diǎn)，也會(huì)給我們未來(lái)的產(chǎn)品優(yōu)化方向打開(kāi)新的思路，去思考如何給我們的用戶創(chuàng)造更高的商業(yè)價(jià)值。
03
我們?cè)谧鲈L談之前，首先一定要熟悉產(chǎn)品業(yè)務(wù)的相關(guān)背景、受訪商戶的基本情況。
訪談過(guò)程中可能會(huì)提及一些專業(yè)名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎(chǔ)相關(guān)知識(shí)以后，省去了不必要的解釋環(huán)節(jié)，可以使訪談推進(jìn)地更順利。
其次建議要了解下行業(yè)相關(guān)的基礎(chǔ)知識(shí)。尤其是餐飲業(yè)態(tài)，華南、北方、四川等地都因?yàn)?strong>飲食習(xí)慣的不同，在產(chǎn)品的功能和使用上的需求也是相差很大。具備了這些知識(shí)點(diǎn)以后，在提問(wèn)過(guò)程中，也更利于提出一些深刻的問(wèn)題，而不是浮于表面的提問(wèn)。
行業(yè)相關(guān)的分析報(bào)告，可以去艾瑞、36氪、發(fā)現(xiàn)報(bào)告等網(wǎng)站進(jìn)行查詢收集，在此不做贅述。
在訪談初期，需要準(zhǔn)備一份訪談框架，但并不意味著我們整個(gè)過(guò)程只能按提綱來(lái)提問(wèn)。尤其是B端這種千載難逢的訪談機(jī)會(huì)，只按規(guī)定的框架提問(wèn)屬實(shí)是太吃虧了。所以在時(shí)間允許的情況下，除了框架以內(nèi)的問(wèn)題，盡可能多發(fā)散的去提問(wèn)。
例如餐飲業(yè)態(tài)，會(huì)有各種不同載體的終端設(shè)備聯(lián)動(dòng)使用，一體機(jī)POS、手持的POS、廚房KDS、廚顯大屏、各類打印機(jī)等等都可以順便了解、調(diào)研下，讓我們對(duì)于全鏈路的協(xié)作流程也會(huì)有更深刻的認(rèn)知。
再例如后廚會(huì)涉及到KDS大屏顯示，可以問(wèn)問(wèn)目前的大屏顯示是否夠清晰（字夠大），也可以和負(fù)責(zé)海鮮稱重的工作人員聊聊，海鮮的售賣、計(jì)價(jià)流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過(guò)程中，一定會(huì)有一些觸類旁通的收獲與問(wèn)題被發(fā)現(xiàn)。這些問(wèn)題也許來(lái)自一個(gè)模塊、或者某個(gè)特定角色，又或者是主產(chǎn)品關(guān)聯(lián)的其他后臺(tái)產(chǎn)品。
在提問(wèn)的時(shí)候要考慮到受訪者的年紀(jì)和理解能力，如果措辭過(guò)于專業(yè)，可能會(huì)導(dǎo)致受訪者理解不到位，因此溝通的過(guò)程中要盡可能的說(shuō)大白話。
我們都知道沒(méi)有經(jīng)歷過(guò)的事，很難感同身受。有時(shí)候看到客戶群里，因?yàn)楫a(chǎn)品的各種原因?qū)е律虘羟榫w激動(dòng)，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調(diào)研，我都會(huì)抓住機(jī)會(huì)觀察整個(gè)門店的運(yùn)營(yíng)情況，去感受那種忙碌的氛圍。有時(shí)候開(kāi)始進(jìn)入營(yíng)業(yè)高峰期，機(jī)器出現(xiàn)卡頓或者外賣不接單等情況時(shí)，自己的情緒都會(huì)一下子緊張起來(lái)，也能夠深刻感受到產(chǎn)品給客戶帶來(lái)的困擾。
當(dāng)再次有產(chǎn)品迭代優(yōu)化時(shí)，這些體驗(yàn)總能讓自己能更容易代入用戶的角度思考問(wèn)題。
除了去體會(huì)產(chǎn)品對(duì)情緒的直接影響，還可以關(guān)注下整個(gè)門店的布局、收銀產(chǎn)品的數(shù)量與擺放位置、不同產(chǎn)品的協(xié)同使用等等。
這些都會(huì)幫助我們發(fā)現(xiàn)，到底什么是門店運(yùn)營(yíng)環(huán)節(jié)里最重要的模塊。
在訪談過(guò)程中，不排除受訪客戶會(huì)反饋一些暫時(shí)無(wú)法解決的問(wèn)題。這時(shí)候一定要告訴受訪商戶：“您的問(wèn)題我已經(jīng)記錄下來(lái)，回去會(huì)針對(duì)這個(gè)問(wèn)題反饋上報(bào)，最遲X天我會(huì)讓顧問(wèn)給您回復(fù)的”。
這么做一方面也是細(xì)節(jié)處維護(hù)公司品牌的整體售后體驗(yàn)，其次也有助于我們?cè)俅位卦L時(shí)，受訪商戶樂(lè)意花時(shí)間跟我們聊。
04
了解了用戶訪談的一些基本信息和注意點(diǎn)以后，到了本文核心部分，關(guān)于整個(gè)訪談的推進(jìn)過(guò)程，一共分為3個(gè)階段。
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見(jiàn)的就是第三種類產(chǎn)品使用回訪。
新品調(diào)研的訪談，一般是由于業(yè)務(wù)的發(fā)展，可能需要升級(jí)或者打磨一款新產(chǎn)品來(lái)滿足市場(chǎng)的需求。
在訪談的過(guò)程中，我們需要關(guān)注的點(diǎn)就是用戶畫像、商戶訴求、使用場(chǎng)景、終端載體等一系列因素。
當(dāng)去往一個(gè)城市進(jìn)行批量客戶調(diào)研的時(shí)候，偶爾會(huì)有拜訪潛在客戶的調(diào)研機(jī)會(huì)。這種類型訪問(wèn)的關(guān)注點(diǎn)集中在商戶的痛點(diǎn)與需求上。
由于是潛在客戶，我們勢(shì)必是要了解他們想要購(gòu)買或者替換產(chǎn)品的前因后果。也是借此機(jī)會(huì)了解到競(jìng)對(duì)的優(yōu)劣勢(shì)，他們放棄競(jìng)對(duì)的原因，以及我們當(dāng)前產(chǎn)品的功能是否滿足客戶的需求，還有哪些點(diǎn)不滿足，客戶重點(diǎn)關(guān)注的是什么。
使用回訪是最常見(jiàn)的訪問(wèn)類型，主要目的是對(duì)商戶進(jìn)行售后維護(hù)、提升使用體驗(yàn)。
且由于B端產(chǎn)品的復(fù)雜性和遠(yuǎn)距離特點(diǎn)，以及新功能同步給商戶存在的滯后性，公司會(huì)安排定期的上門回訪。如果有這樣的機(jī)會(huì)，UED一定要盡量申請(qǐng)跟著去門店調(diào)研。
到了最關(guān)鍵的一步，就是關(guān)于訪談的問(wèn)題設(shè)計(jì)。
總結(jié)一下，問(wèn)題的設(shè)計(jì)渠道來(lái)源主要有3種。主要還是根據(jù)調(diào)研目標(biāo)進(jìn)行問(wèn)題設(shè)計(jì)，另外兩種方式，作為輔助。
那具體問(wèn)題應(yīng)該怎么設(shè)計(jì)，這邊我們分為3個(gè)步驟，從面到點(diǎn)依次拆解進(jìn)行問(wèn)題設(shè)計(jì)。
B端產(chǎn)品的特點(diǎn)可以借用《U一點(diǎn)料》的9個(gè)字概括，“多場(chǎng)景、全鏈路、多角色”，所以設(shè)計(jì)問(wèn)題前，我們可以從場(chǎng)景+鏈路+角色/節(jié)點(diǎn)功能的維度來(lái)設(shè)計(jì)問(wèn)題。
以餐飲行業(yè)的產(chǎn)品舉例，首先建議了解自家產(chǎn)品的全場(chǎng)景業(yè)務(wù)能力。即從商家端到消費(fèi)端會(huì)經(jīng)歷的產(chǎn)品模塊和具備的現(xiàn)有功能，做到心中有數(shù)即可，畢竟不會(huì)一下子調(diào)研這么多模塊和功能。
其他ToB產(chǎn)品同理，可根據(jù)某個(gè)操作鏈路為主線，確定主流程后進(jìn)行問(wèn)題設(shè)計(jì)。其實(shí)就可以理解為確定調(diào)研的目標(biāo)。例如下圖要調(diào)研的主流程，就是提取點(diǎn)餐>下單>結(jié)算為主線。
根據(jù)剛才確定的主流程 我們找到所有關(guān)鍵節(jié)點(diǎn)進(jìn)行問(wèn)題框架設(shè)計(jì)。
以上3個(gè)步驟可以理解為，如何在功能極其復(fù)雜的B類產(chǎn)品當(dāng)中，篩選出與訪談目標(biāo)緊密相連的功能鏈路。避免我們的訪談提綱做的過(guò)于冗余沒(méi)有核心。
這點(diǎn)也非常重要，每一次去門店調(diào)研之前，先由當(dāng)?shù)刎?fù)責(zé)的顧問(wèn)與受訪商戶提前溝通。
一方面是需要與對(duì)方預(yù)約時(shí)間，另外一方面這種訪談對(duì)商戶而言就相當(dāng)于優(yōu)質(zhì)的售后服務(wù)，會(huì)有受訪商戶提前列框架，準(zhǔn)備問(wèn)題。
那么這種情況更有利于調(diào)研，因?yàn)槭茉L者明確自己的問(wèn)題點(diǎn)在哪里，就等著調(diào)研團(tuán)隊(duì)（售后團(tuán)隊(duì)）來(lái)門店后，好好拉扯一番。
萬(wàn)事具備，只欠東風(fēng)。我們?cè)?strong>盤點(diǎn)確認(rèn)下本次訪談的各類工具是否備齊，準(zhǔn)備進(jìn)入訪談階段，大致需要準(zhǔn)備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點(diǎn)，以及帶著我們?cè)O(shè)計(jì)好的問(wèn)題，下面正式進(jìn)入訪談階段。
到達(dá)門店后，我們的顧問(wèn)會(huì)給受訪客戶做一下來(lái)訪成員介紹，并講明此次到店的目的。一般都是產(chǎn)品使用回訪，或者新功能推薦培訓(xùn)。
通常來(lái)說(shuō)，受訪商戶對(duì)來(lái)訪團(tuán)隊(duì)總是有很多”心里話“想嘮一嘮，因此暖場(chǎng)氛圍比較容易起來(lái)，也有助于我們接下來(lái)的溝通
進(jìn)入正題以后，我們會(huì)先大致了解下受訪者最近使用的體驗(yàn)以及遇到的問(wèn)題，而后會(huì)根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在整個(gè)過(guò)程中也需要注意觀察用戶在描述問(wèn)題時(shí)候的表情和肢體語(yǔ)言，搜集用戶對(duì)于產(chǎn)品的真實(shí)態(tài)度。
其實(shí)整個(gè)訪談流程我們歸納一下，需要關(guān)注的就是四個(gè)關(guān)鍵點(diǎn)，手+口+心+顏。
關(guān)于實(shí)操演示放在第一個(gè)講，是因?yàn)檫@個(gè)環(huán)節(jié)非常重要。線下訪談時(shí)強(qiáng)烈不建議“脫機(jī)訪問(wèn)”，這種形式對(duì)受訪者而言需要花更多的時(shí)間去思考問(wèn)題的答案。
會(huì)遺忘甚至想不起來(lái)當(dāng)時(shí)的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個(gè)頻道上。
其次，在操作過(guò)程中，建議用手機(jī)進(jìn)行拍攝記錄。因?yàn)槊總€(gè)人對(duì)產(chǎn)品的理解方式與程度不同，在用戶操作的過(guò)程中，會(huì)發(fā)現(xiàn)一些有意思的代償方案。這些也是思考的切入點(diǎn)。代償方案是否比原先設(shè)定的實(shí)現(xiàn)方法更便捷。
回去通過(guò)視頻仔細(xì)分析受訪者的操作路徑，以及每個(gè)操作之前是否有遲疑等等。并且將問(wèn)題點(diǎn)一一記錄下來(lái)。
這個(gè)就是根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在這個(gè)過(guò)程中，通常會(huì)穿插著上機(jī)操作演示，在現(xiàn)場(chǎng)記錄的時(shí)候可以先記錄個(gè)大概，等結(jié)束后再仔細(xì)整理。
問(wèn)受訪者的心理感受，其實(shí)就比較偏主觀了，我們可以從“我們家的產(chǎn)品”和“人家的產(chǎn)品”兩個(gè)維度去對(duì)比詢問(wèn)心里感受。值得注意的是，即使是這樣開(kāi)放式的提問(wèn)，也有提問(wèn)技巧。
比如“你覺(jué)得現(xiàn)在還有什么不好用的地方”就比“你感覺(jué)現(xiàn)在的產(chǎn)品好用么”這樣的提問(wèn)方式更有效。
因?yàn)楫a(chǎn)品一定是有可有優(yōu)化的空間，“有什么不好用的地方”這樣提問(wèn)的方式就是具體到了某個(gè)點(diǎn)上面，具體什么點(diǎn)不好用。
而后者的提問(wèn)方式是基于整個(gè)產(chǎn)品，受訪者可能會(huì)出于不好意思等原因直接說(shuō)“你們的東西還行吧，還可以”。
當(dāng)我們提問(wèn)產(chǎn)品優(yōu)缺點(diǎn)的時(shí)候，受訪者大部分都會(huì)帶上表情和肢體語(yǔ)言，并且情緒表現(xiàn)和性格有比較大的關(guān)系。
性格比較雷厲風(fēng)行、急躁一點(diǎn)的，通常會(huì)像連珠炮一樣瘋狂輸出，并且措辭會(huì)比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴(yán)重影響門店?duì)I業(yè)了啊”。
接受到這種信息我們首先要做的就是安撫對(duì)方的情緒，其次對(duì)于這些信息要學(xué)會(huì)剔除一些夸張描述。
而性格溫和一點(diǎn)的受訪者，在闡述問(wèn)題的時(shí)候也會(huì)比較婉轉(zhuǎn)。“不是太方便”、“這個(gè)改動(dòng)沒(méi)啥感覺(jué)”、“也還行、都可以”，如果某個(gè)高頻操作真的很影響日常工作效率，往往會(huì)表現(xiàn)得很無(wú)奈，甚至還有點(diǎn)委屈。
那么無(wú)論是哪種表現(xiàn)，其實(shí)都要考驗(yàn)采訪者的經(jīng)驗(yàn)，結(jié)合產(chǎn)品的功能去考慮，找到反饋中真實(shí)有效的部分。
通過(guò)以上4個(gè)環(huán)節(jié)，其實(shí)就可以收集到很多有用的信息，語(yǔ)言信息、視頻信息、動(dòng)作表情信息等等。接下來(lái)的任務(wù)就是信息的梳理歸納。
訪談結(jié)束后，我們需要做個(gè)簡(jiǎn)單的總結(jié)回顧。將關(guān)鍵問(wèn)題再次復(fù)述確認(rèn)，進(jìn)行查漏補(bǔ)缺并且再次感謝受訪者，表達(dá)他們今天提的建議價(jià)值很大，后續(xù)會(huì)梳理出可落地的點(diǎn)優(yōu)化到產(chǎn)品當(dāng)中。
如果說(shuō)聊得比較開(kāi)心，大多數(shù)的受訪商戶都會(huì)邀請(qǐng)來(lái)訪團(tuán)隊(duì)吃個(gè)飯?jiān)僮撸菜闶穷~外的福利。在就餐過(guò)程中的非正式場(chǎng)合交流，也可以聊聊門店的一些運(yùn)營(yíng)情況等等，幫助我們更深入的了解這個(gè)行業(yè)。
我們?cè)谠L談過(guò)程中會(huì)有大量未整理的一手記錄，結(jié)束后需盡快的梳理，盡可能詳細(xì)的記錄下用戶描述的細(xì)節(jié)、肢體動(dòng)作表情語(yǔ)言等等。建議使用石墨、語(yǔ)雀、騰訊文檔等在線編輯工具，方便分享修改。（本文提供模板可下載）如果是連續(xù)訪談幾位商戶，我會(huì)在訪談結(jié)束以后，迅速地將剛才的訪談內(nèi)容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒(méi)有的問(wèn)題，去下一家受訪商戶的時(shí)候可以驗(yàn)證下該問(wèn)題的普遍性。
② 整理落地
輸出后我們需要再次進(jìn)行提煉，將有價(jià)值可落地的問(wèn)題點(diǎn)提取出來(lái)，進(jìn)行匯報(bào)分享，并找到相對(duì)應(yīng)的產(chǎn)品研發(fā)進(jìn)行探討排期，這樣就形成了一個(gè)完整的閉環(huán)，真正做到了發(fā)現(xiàn)問(wèn)題、解決問(wèn)題.
③ 流程概括
前文絮絮叨叨說(shuō)了很多，其實(shí)關(guān)于用戶訪談這事用6個(gè)字就可以概括，簡(jiǎn)單理解：
問(wèn)誰(shuí)？問(wèn)啥？答啥？改啥？
能夠回答清楚這4個(gè)問(wèn)題，那么這就是一次有價(jià)值的訪談經(jīng)歷。
ToB業(yè)務(wù)的特點(diǎn)就是會(huì)有一定的行業(yè)壁壘，設(shè)計(jì)師在剛接觸的時(shí)候一定會(huì)有很多茫然時(shí)刻。對(duì)于各種專業(yè)詞匯的一臉懵，對(duì)于行業(yè)的不了解。
或者很多人對(duì)于B端的認(rèn)知還停留在，B端好像沒(méi)啥好設(shè)計(jì)的，都是現(xiàn)成的組件庫(kù)拖一拖，成就感比C端差遠(yuǎn)了。
那么做訪談、體驗(yàn)優(yōu)化的意義是什么呢？
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
你有沒(méi)有注意過(guò)，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過(guò)渡），來(lái)完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺(jué)層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來(lái)排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過(guò)修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過(guò)調(diào)整百分百參數(shù)來(lái)控制線條生長(zhǎng)。
但只是單色修剪，看起來(lái)很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺(jué)看起來(lái)更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺(jué)得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過(guò)多吸引用戶注意力。但對(duì)于帶有娛樂(lè)類屬性的產(chǎn)品來(lái)說(shuō)，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來(lái)制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來(lái)控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來(lái)營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來(lái)調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來(lái)完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺(jué)。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺(jué)得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見(jiàn)，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來(lái)替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過(guò)讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過(guò)動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過(guò)蒙版來(lái)控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來(lái)適合科技或游戲類產(chǎn)品。
通過(guò)調(diào)整元素路徑來(lái)改變其造型，模擬液體滴落，再通過(guò)蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過(guò)修剪這條軌跡來(lái)完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見(jiàn)的原因在于其動(dòng)態(tài)效果面積大，視覺(jué)層級(jí)高，容易過(guò)度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過(guò)卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過(guò)這效果。但為了降低視覺(jué)干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來(lái)源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒(méi)有在其他產(chǎn)品中看過(guò)，究其原因還是效果太過(guò)搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來(lái)不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來(lái)。
正是它們之間這種奇妙的融合，給我們帶來(lái)了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說(shuō)兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見(jiàn)的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
作者：幺零三 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在產(chǎn)品設(shè)計(jì)中，當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會(huì)給予用戶提示。常見(jiàn)的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。
而人類是視覺(jué)生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動(dòng)態(tài)內(nèi)容吸引。
今天來(lái)聊一下頁(yè)面中常見(jiàn)的動(dòng)態(tài)引導(dǎo)。
當(dāng)你看到這個(gè)頁(yè)面時(shí)
我想你會(huì)先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）
而當(dāng)頁(yè)面元素都賦予細(xì)節(jié)時(shí)
假如我想讓你關(guān)注到其中某個(gè)較小元素
其實(shí)只需要為它添加動(dòng)態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計(jì)中的動(dòng)態(tài)引導(dǎo)。
▍新功能提示 ?
當(dāng)產(chǎn)品上線新功能時(shí)，設(shè)計(jì)師們都會(huì)根據(jù)功能重要程度，來(lái)決定使用什么形式讓入口元素和其他元素區(qū)分開(kāi)來(lái)。常見(jiàn)的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會(huì)消失）。當(dāng)然，也有將上述點(diǎn)綴元素動(dòng)態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動(dòng)畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹健?
動(dòng)態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對(duì)元素的注意力（與動(dòng)態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動(dòng)畫，因此可以持續(xù)吸引用戶注意力。
ps：據(jù)說(shuō)，每當(dāng)頁(yè)面多出一個(gè)會(huì)動(dòng)的元素，后臺(tái)就會(huì)多出這樣一些留言，捅了開(kāi)發(fā)窩了[Doge]。
▍誘導(dǎo)用戶操作 ?
動(dòng)態(tài)引導(dǎo)還常常被設(shè)計(jì)師用來(lái)強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營(yíng)拿刀架脖子），來(lái)達(dá)成某些數(shù)據(jù)指標(biāo)，通過(guò)利用動(dòng)態(tài)誘導(dǎo)用戶操作。
例如：在會(huì)員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動(dòng)畫。
這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動(dòng)端，受屏幕大小限制，設(shè)計(jì)師通常會(huì)折疊或隱藏不常用的功能，來(lái)保持頁(yè)面簡(jiǎn)潔。
對(duì)于這些不可見(jiàn)的功能，在初次使用時(shí)需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。
▍操作教學(xué)指引 ?
講到引導(dǎo)，還必須要提的是手勢(shì)引導(dǎo)，通過(guò)動(dòng)態(tài)直觀展示不同手勢(shì)的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。
這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當(dāng)你第一打開(kāi)視頻時(shí)， App 會(huì)提醒你雙擊屏幕可以點(diǎn)贊，上下滑動(dòng)可以切換視頻。
在產(chǎn)品交互設(shè)計(jì)中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動(dòng)態(tài)敘述的直觀性，使得我們可以減少對(duì)復(fù)雜信息進(jìn)行大量文字描述。通過(guò)動(dòng)態(tài)設(shè)計(jì)，我們可以創(chuàng)建視覺(jué)故事，這有助于將復(fù)雜信息以更簡(jiǎn)單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。
也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開(kāi)始應(yīng)用。
但是需要注意的是，上述這些大多都只在第一次使用時(shí)才會(huì)觸發(fā)。
當(dāng)然有特例，例如：
在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時(shí)（面容解鎖的情況下），系統(tǒng)會(huì)通過(guò)動(dòng)態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識(shí)別。
在掃碼時(shí)，弱光場(chǎng)景下出現(xiàn)的手電筒，通過(guò)動(dòng)態(tài)引起用戶注意，指引用戶使用。
以及作為動(dòng)態(tài)演示，幫助用戶理解如何使用手掌滑動(dòng)截屏
如何進(jìn)行NFC感應(yīng)等等..
動(dòng)態(tài)引導(dǎo)像是設(shè)計(jì)師用來(lái)控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見(jiàn)...
作者：幺零三 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過(guò)程中，如果沒(méi)有系統(tǒng)的可視化知識(shí)，會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對(duì)你的設(shè)計(jì)過(guò)程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來(lái)表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過(guò)圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個(gè)例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個(gè)步驟：選擇適合的圖表，強(qiáng)化視覺(jué)層次，圖表響應(yīng)式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開(kāi)始作圖，往往會(huì)遇到一個(gè)困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過(guò)分析數(shù)據(jù)關(guān)系來(lái)選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。
1. 分析數(shù)據(jù)關(guān)系
根據(jù)數(shù)據(jù)分析的方式來(lái)看，每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見(jiàn)的還有流轉(zhuǎn)關(guān)系。
構(gòu)成關(guān)系
構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來(lái)為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級(jí)結(jié)構(gòu)，還會(huì)用矩形樹(shù)圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。
關(guān)鍵詞：“占比、比例、百分比”
比較關(guān)系
比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過(guò)對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類對(duì)比兩種形式，趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類對(duì)比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等；分類對(duì)比常用條形圖、柱狀圖、氣泡圖等。
關(guān)鍵詞：“增減、升降、漲跌、波動(dòng)”
分布關(guān)系
利用空間分區(qū)來(lái)展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。
常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等
關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等
關(guān)聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。
常用圖表：關(guān)系圖、桑基圖、漏斗圖、進(jìn)度圖等
關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見(jiàn)數(shù)據(jù)特征有：變量特征、維度特征、層級(jí)特征、流程特征。
變量特征
分辨一個(gè)指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì)，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類
層級(jí)特征
多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱樹(shù)形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹(shù)圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場(chǎng)銷售額的來(lái)源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷售額，通過(guò)色調(diào)來(lái)區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對(duì)比一般結(jié)構(gòu)樹(shù)圖表，它的優(yōu)勢(shì)在于可以有效利用空間。
流程特征
流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和，同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。
二、強(qiáng)化視覺(jué)層次
選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。
1. 強(qiáng)化數(shù)據(jù)特性
使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差
2. 色彩視覺(jué)傳達(dá)
除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知，錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過(guò)不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。
我們?cè)谥暗奈恼吕镉薪榻B過(guò)圖表的取色模型，通過(guò)調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。
定性型：使用色調(diào)來(lái)進(jìn)行分類
數(shù)據(jù)內(nèi)在沒(méi)有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國(guó)家、行業(yè)等類型。如果希望圖表看起來(lái)更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：
定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序
如果在同一個(gè)分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來(lái)突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應(yīng)式設(shè)計(jì)
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來(lái)的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁(yè)端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來(lái)保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過(guò)改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。
2. 圖表元素適配
要適配移動(dòng)端，網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。
3. 極值適配
因B端平臺(tái)的特性，我們無(wú)法預(yù)知客戶傳入的數(shù)據(jù)量，可能會(huì)遇到因數(shù)據(jù)量過(guò)多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問(wèn)題。這種情況下，提前考慮數(shù)據(jù)極限場(chǎng)景，通過(guò)交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。
還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。
// 結(jié)語(yǔ)
數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一、項(xiàng)目背景
語(yǔ)音搜索場(chǎng)景在功能不斷迭代的同時(shí)，也在探索更年輕化的玩法、傳遞更多元的體驗(yàn)感受。在產(chǎn)品初期，我們嘗試在語(yǔ)音搜索場(chǎng)景下增加AI伙伴的形象，雖然線上版本已經(jīng)實(shí)現(xiàn)，但從產(chǎn)品形態(tài)以及用戶反饋上看，還沒(méi)有達(dá)到可情感互動(dòng)的效果。所以在本次迭代上，我們著重從情感聯(lián)結(jié)、閑聊互動(dòng)的維度，對(duì)語(yǔ)音搜索進(jìn)行創(chuàng)新性嘗試。
二、設(shè)計(jì)挑戰(zhàn)與目標(biāo)
圍繞項(xiàng)目背景，從現(xiàn)在語(yǔ)音搜索的用戶行為與框架來(lái)看，有幾個(gè)比較明確的問(wèn)題：
因?yàn)榍捌谠谡Z(yǔ)音搜索的優(yōu)化中，已經(jīng)嘗試在面板中引入AI形象，上線后用戶反響強(qiáng)烈，用戶的行為中聊天、互動(dòng)的訴求也明顯增加。由此可見(jiàn)，滿足用戶對(duì)AI伙伴的情感化訴求是十分有必要的，同時(shí)語(yǔ)音搜索引入AI伙伴是體現(xiàn)同行業(yè)差異化的有力創(chuàng)新點(diǎn)，從行業(yè)報(bào)告《2021年中國(guó)智能語(yǔ)音市場(chǎng)分析報(bào)告》中，也闡述了打造沉浸感語(yǔ)音搜索體驗(yàn)與引入AI是目前智能語(yǔ)音市場(chǎng)的發(fā)展趨勢(shì)。
綜合以上原因，設(shè)計(jì)團(tuán)隊(duì)在與產(chǎn)品討論過(guò)后，達(dá)成本次升級(jí)的核心目標(biāo)：
三、設(shè)計(jì)舉措
1、構(gòu)建認(rèn)知 - 語(yǔ)音搜索基礎(chǔ)框架升級(jí)
在舊頁(yè)面中，語(yǔ)音面板限制了人物與按鈕的展現(xiàn)，人物既要承載功能反饋又需要作為物理操作按鍵進(jìn)行點(diǎn)擊操作，與用戶認(rèn)知相悖且也不利于功能擴(kuò)展。因此在新版本設(shè)計(jì)中，需要明確“人”在語(yǔ)音搜索里的屬性，以及AI伙伴與語(yǔ)音搜索的關(guān)系。
我們將語(yǔ)音搜索頁(yè)面框架分為主要功能與輔助功能區(qū)。從舊語(yǔ)音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發(fā)起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強(qiáng)情緒傳遞感的同時(shí)保證框架可拓展性。
同時(shí)，將原堆積在面板中的功能與信息按優(yōu)先級(jí)歸位，確保頁(yè)面信息清晰易讀、功能操作熱區(qū)無(wú)重疊、信息反饋區(qū)無(wú)干擾。新框架上線后，AI伙伴互動(dòng)與語(yǔ)音搜索的認(rèn)知關(guān)系更加清晰，語(yǔ)音搜索跳框量明顯增加，AI伙伴帶動(dòng)面板整體導(dǎo)流增加，面板退出率下降。
2、引入情感 - 全場(chǎng)景情感化體驗(yàn)提升
除了通過(guò)框架層面進(jìn)行認(rèn)知優(yōu)化之外，為營(yíng)造更貼合“人”的互動(dòng)體驗(yàn)與情感建立，我們又根據(jù)語(yǔ)音場(chǎng)景對(duì)每個(gè)狀態(tài)進(jìn)行了情感體驗(yàn)升級(jí)。改版上線后，用戶閑聊訴求和互動(dòng)點(diǎn)擊行為均有所提升，從而驗(yàn)證情感化的體驗(yàn)提升，滿足了用戶互動(dòng)訴求。
1）情感化引導(dǎo)提示：視覺(jué)上人物破框展示配合AI招手/比心的動(dòng)作展示，不再是圖片，而是可以對(duì)話的實(shí)體，同時(shí)使用年輕化的引導(dǎo)語(yǔ)氣拉近與用戶間的距離，增加數(shù)字人曝光，建立新用戶心理預(yù)期，激發(fā)興趣點(diǎn)提轉(zhuǎn)化。
2）互動(dòng)提示規(guī)則升級(jí)：圍繞“人”的真實(shí)情感，通過(guò)彈出氣泡的方式模擬AI伙伴狀態(tài)，比如聽(tīng)歌、讀書、游戲。以此引發(fā)用戶點(diǎn)擊或進(jìn)行互動(dòng)行為嘗試。并且配合AI伙伴升級(jí)引導(dǎo)規(guī)則，使引導(dǎo)能夠根據(jù)不同場(chǎng)景進(jìn)行適配，保證其既可以承接語(yǔ)音常規(guī)引導(dǎo)功能，又可以承接負(fù)一樓聊天互動(dòng)，點(diǎn)擊氣泡可跳轉(zhuǎn)對(duì)應(yīng)負(fù)一樓場(chǎng)景、聯(lián)動(dòng)數(shù)字人語(yǔ)境內(nèi)容，避免造成場(chǎng)景情感化割裂。
3）增加“AI伙伴”情感反饋：增加人物動(dòng)作、豐富情感化動(dòng)態(tài)反饋，想要模擬更真實(shí)的“人”的狀態(tài)，就需要滿足更多擬人反饋。將語(yǔ)音搜索常見(jiàn)場(chǎng)景劃分為聆聽(tīng)、識(shí)別解析、異常狀態(tài)、指令響應(yīng)、引導(dǎo)等5種狀態(tài)。對(duì)應(yīng)不同的狀態(tài)，規(guī)劃相應(yīng)的數(shù)字人反饋動(dòng)作或組合使用方式，可復(fù)用拓展其他相關(guān)場(chǎng)景，為設(shè)計(jì)與開(kāi)發(fā)提效。
3、感知升級(jí) - 營(yíng)造沉浸視覺(jué)氛圍
確定了產(chǎn)品主要改版方向后，通過(guò)對(duì)目標(biāo)的提煉，提取設(shè)計(jì)關(guān)鍵點(diǎn)「年輕化」與「情感化」，配合AI伙伴形象，需要呈現(xiàn)出輕松活力的氛圍感，設(shè)計(jì)中運(yùn)用了大面積的毛玻璃質(zhì)感，使場(chǎng)景更加輕盈、沉浸。通過(guò)對(duì)色彩的運(yùn)用來(lái)演繹年輕的視覺(jué)效果，詮釋語(yǔ)音搜索年輕化的設(shè)計(jì)突破。
1）定義視覺(jué)風(fēng)格：圍繞改版目標(biāo)，定義設(shè)計(jì)關(guān)鍵詞，由關(guān)鍵詞延伸設(shè)計(jì)風(fēng)格要點(diǎn)。
2）形色字構(gòu)質(zhì)動(dòng)：從「形色字質(zhì)構(gòu)」5個(gè)方面提煉設(shè)計(jì)特征。
基于視覺(jué)方向及特征提煉，在質(zhì)感、形狀、顏色三個(gè)設(shè)計(jì)中改動(dòng)最大的方向詳細(xì)描述。
考慮到語(yǔ)音搜索場(chǎng)景日后的拓展，色彩上希望可以營(yíng)造給用戶一種輕松柔和的視覺(jué)氛圍，并且元素的色彩需要與AI伙伴服飾相呼應(yīng)，從而使AI伙伴形象更加靈動(dòng)、場(chǎng)景搭配更加和諧生動(dòng)。
①基礎(chǔ)色彩范圍制定：
以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對(duì)色彩進(jìn)行歸類處理，從中提取主題色系，從搜索色庫(kù)中對(duì)應(yīng)選出主題色環(huán)。
②如何在數(shù)字人裝扮中提取主體色：
我們需要把色彩量化，建立特定場(chǎng)景取色規(guī)則，根據(jù)規(guī)則層層篩選，我們可以從中獲取N種主體侯選色。
③校正主體色，與搜索智庫(kù)色彩形成映射關(guān)系：
通過(guò)對(duì)數(shù)字人裝扮的色彩分類，我們以H值為標(biāo)準(zhǔn)，通過(guò)調(diào)整S值與B值，劃分了12個(gè)色相，設(shè)定對(duì)應(yīng)色系的H值區(qū)間范圍，如智能取色色值在該色相區(qū)間范圍內(nèi)，且吸取到的候選色個(gè)數(shù)最多，就在對(duì)應(yīng)的色庫(kù)卡中選取主體色。
校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識(shí)別度
④建立輔助色搭配規(guī)則：
為了保持背景層的色彩氛圍營(yíng)造，保證其具有清晰的識(shí)別度，我們以主體色為起點(diǎn)，選擇了顏色相對(duì)較多的鄰近色，在色溫上保持整體色調(diào)的一致性，其次利用對(duì)比色和互補(bǔ)色，選擇更加豐富多元的色相，制造更強(qiáng)烈的色彩對(duì)比，以保證滿足各種使用場(chǎng)景下對(duì)色彩的需求。
⑤組件化思維拆解頁(yè)面元素：
在梳理了智能取色機(jī)制后，我們也在思考，語(yǔ)音面板涉及到的元素過(guò)多，往往會(huì)面臨不同場(chǎng)景不同適配的情況出現(xiàn)，那么在做到視覺(jué)減負(fù)的同時(shí)，如何能靈活的替換對(duì)應(yīng)元素呢？
我們以組件化思維去拆分設(shè)計(jì)，進(jìn)行立體化的分層，將引導(dǎo)層（熱詞推薦引導(dǎo)關(guān)注）、信息展示層（承接語(yǔ)音各類狀態(tài)與信息）、形象層（強(qiáng)化AI伙伴智能感知）、背景層（烘托視覺(jué)氛圍感）羅列出來(lái)，各場(chǎng)景可根據(jù)需要進(jìn)行顏色延展，保證視覺(jué)樣式達(dá)成橫向統(tǒng)一，呈現(xiàn)出更加豐富的視覺(jué)內(nèi)容，避免審美疲勞。
總結(jié)本次語(yǔ)音搜索的改版升級(jí)，我們通過(guò)“構(gòu)建伙伴認(rèn)知、滿足情感互動(dòng)、增強(qiáng)沉浸體驗(yàn)”等手段，增強(qiáng)AI伙伴的曝光率，進(jìn)一步向用戶傳達(dá)智能搜索的感知，從而促進(jìn)搜索行為轉(zhuǎn)化。
構(gòu)建認(rèn)知過(guò)程中強(qiáng)化AI伙伴形象，增強(qiáng)語(yǔ)音搜索功能拓展性；同時(shí)結(jié)合“情感化”等全場(chǎng)景引導(dǎo)手段，營(yíng)造更貼合“人”的互動(dòng)體驗(yàn)與情感建立，對(duì)每個(gè)狀態(tài)進(jìn)行了情感體驗(yàn)升級(jí)；最后重新定制視覺(jué)風(fēng)格，圍繞「年輕化」關(guān)鍵點(diǎn)對(duì)整體氛圍進(jìn)行強(qiáng)化，讓語(yǔ)音搜索場(chǎng)景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動(dòng)行為均有所提升，用戶體驗(yàn)也得到了顯著提升。
四、寫在最后
我們正處于數(shù)字化快速變革的時(shí)代，傳統(tǒng)工具的基礎(chǔ)功能已不再滿足用戶的訴求，人們的感官也從現(xiàn)實(shí)空間延伸到虛擬空間，AI伙伴會(huì)逐漸融入人們的生活，未來(lái)語(yǔ)音搜索將不再是一個(gè)信息輸入-結(jié)果輸出的傳統(tǒng)搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達(dá)、情感和學(xué)習(xí)能力，滿足人們更高層次的情感訴求的同時(shí)，也可以讓搜索更加簡(jiǎn)單有趣。
未來(lái)我們持續(xù)對(duì)語(yǔ)音搜索進(jìn)行升級(jí)，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗(yàn)，創(chuàng)造出更多有趣的、創(chuàng)新的、別出心裁的年輕化設(shè)計(jì)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一、前言
視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。
視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！?、「雙擊→點(diǎn)贊」、「長(zhǎng)按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。
那么如何在保留用戶對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。
本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。
二、什么是「組合手勢(shì)」
「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。
于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。
「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。
由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。
三、「長(zhǎng)按組合手勢(shì)」激活快捷菜單
1.項(xiàng)目背景
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
2.競(jìng)品調(diào)研及選型
通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型， 分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。
選型A
「長(zhǎng)按觸發(fā)獨(dú)立播控面板」：通過(guò)長(zhǎng)按手勢(shì)可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對(duì)視頻沉浸觀感體驗(yàn)有一定的打斷感；
選型B
「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」：通過(guò)長(zhǎng)按手勢(shì)可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
選型C
「長(zhǎng)按觸發(fā)特定播控功能」：通過(guò)長(zhǎng)按手勢(shì)觸發(fā)特定的某個(gè)播控功能（如長(zhǎng)按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對(duì)于長(zhǎng)按手勢(shì)的使用效率較低；
3.設(shè)計(jì)方案
1）長(zhǎng)按手勢(shì)交互擴(kuò)容
針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶。
那么如何在兼容用戶已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
step1：以“長(zhǎng)按手勢(shì)”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；
step2：若用戶未松開(kāi)手指，則系統(tǒng)默認(rèn)開(kāi)始識(shí)別用戶意圖，是否有以“拖拽手勢(shì)”滑選至目標(biāo)功能項(xiàng)以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長(zhǎng)按+向上滑選」快捷觸發(fā)對(duì)應(yīng)功能項(xiàng)；
「長(zhǎng)按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對(duì)于此功能的使用習(xí)慣）。
2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測(cè)試目標(biāo)、用戶類別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測(cè)試。
測(cè)試訪談的過(guò)程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/span>
同時(shí)，我們通過(guò)觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實(shí)時(shí)提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。
方案上線及驗(yàn)證
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：
「對(duì)照組」效果：長(zhǎng)按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實(shí)驗(yàn)組」效果：長(zhǎng)按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）；
小流量實(shí)驗(yàn)上線后，經(jīng)過(guò)近半個(gè)月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長(zhǎng)按快捷菜單的上線推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢(shì)」拓展探索
手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類高級(jí)手勢(shì)，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。
以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。
1.「右滑返回手勢(shì)」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
2.「雙指手勢(shì)」激活“滿屏播放”
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
五、結(jié)語(yǔ)
便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場(chǎng)景的手勢(shì)交互體驗(yàn)。
————————————————————————————————————————————————————————————————————
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。
也歡迎加入MEUX,視覺(jué)/交互/運(yùn)營(yíng)設(shè)計(jì)師可投簡(jiǎn)歷至MEUX@BAIDU.COM(注明信息獲取來(lái)源如：站酷）
關(guān)于我們：
MEUX,百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。
MEUX以「簡(jiǎn)單極致」為設(shè)計(jì)理念，創(chuàng)造極致用戶體驗(yàn)的同時(shí)賦能商業(yè)，推動(dòng)設(shè)計(jì)行業(yè)的價(jià)值和影響力，讓生活因設(shè)計(jì)而更美好。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
百度小說(shuō)是百度APP內(nèi)的垂直頻道，擁有過(guò)億月活和行業(yè)最全的正版書籍。隨著著作權(quán)保護(hù)意識(shí)逐步上升，越來(lái)越多的用戶愿意為優(yōu)質(zhì)的資源和閱讀體驗(yàn)付費(fèi)。2019年底，為了滿足用戶消費(fèi)升級(jí)所產(chǎn)生的一系列需求，百度小說(shuō)初步建立了會(huì)員體系。經(jīng)過(guò)兩年多的打磨，我們不斷提升會(huì)員的服務(wù)體驗(yàn)，并進(jìn)行了多次優(yōu)化升級(jí)，現(xiàn)在將我們的設(shè)計(jì)經(jīng)驗(yàn)分享給大家。
一、設(shè)計(jì)背景
2021年我國(guó)數(shù)字閱讀用戶規(guī)模達(dá)到5.06億，同比增長(zhǎng)2.43%，半數(shù)以上用戶愿意為電子閱讀付費(fèi)，占比最重的人群為19~25歲用戶，達(dá)到44.63%（數(shù)據(jù)來(lái)源《中國(guó)數(shù)字閱讀報(bào)告》），“Z世代”已經(jīng)成為我國(guó)數(shù)字閱讀的主要群體。隨著消費(fèi)升級(jí)，用戶對(duì)服務(wù)的需求不斷提升，更看重信息之上的附加價(jià)值，如認(rèn)同感、歸屬感和儀式感。
二、改版原因
2019年，由于時(shí)間緊、任務(wù)重，我們完成了小說(shuō)會(huì)員從無(wú)到有、從0-1的基礎(chǔ)場(chǎng)景搭建。但隨著設(shè)計(jì)趨勢(shì)的變化，當(dāng)時(shí)小說(shuō)會(huì)員的設(shè)計(jì)風(fēng)格與主流用戶的喜好不完全匹配，在使用場(chǎng)景中也存在易用性不足、內(nèi)容缺乏吸引力等問(wèn)題。下圖是2019年小說(shuō)會(huì)員的界面。
同時(shí)，我們對(duì)小說(shuō)用戶進(jìn)行了視頻訪談，搜集了用戶在使用會(huì)員服務(wù)中遇到的問(wèn)題，如會(huì)員福利少、找不到會(huì)員專屬內(nèi)容、購(gòu)買過(guò)程有卡頓等，最終梳理為的三大核心問(wèn)題：身份感知弱、購(gòu)買路徑長(zhǎng)和資源內(nèi)容少。
三、設(shè)計(jì)目標(biāo)
在小說(shuō)會(huì)員亟待改版的背景下，我們結(jié)合業(yè)務(wù)目標(biāo)、舊版核心問(wèn)題和用戶訴求，推導(dǎo)出了本次改版的設(shè)計(jì)目標(biāo)—品牌化、鏈路化和服務(wù)化。
1、品牌化—強(qiáng)化會(huì)員品牌
小說(shuō)會(huì)員作為百度APP眾多會(huì)員之一，設(shè)計(jì)團(tuán)隊(duì)希望能帶給閱讀用戶一些不同的品牌記憶點(diǎn)。
1）設(shè)計(jì)關(guān)鍵詞
基于會(huì)員的主流用戶、產(chǎn)品屬性和用戶訴求，我們衍生出以下關(guān)鍵詞：年輕、品質(zhì)、尊貴、超值。年輕用戶群體的占比越來(lái)越高，新版的設(shè)計(jì)風(fēng)格力求更好滿足年輕用戶的審美需求。
2）會(huì)員符號(hào)
符號(hào)是最直觀的視覺(jué)元素之一，能夠以最快的方式傳遞產(chǎn)品記憶點(diǎn)。在會(huì)員品牌符號(hào)設(shè)計(jì)的草圖階段，我們從字母V、VIP、鉆石、王冠和小說(shuō)IP白嘟嘟等多個(gè)方向進(jìn)行了方案發(fā)散。最終采用了白嘟嘟圖形與尊貴感的V形符號(hào)相結(jié)合的形式。該方案既延續(xù)了小說(shuō)的視覺(jué)符號(hào)，又與競(jìng)品的會(huì)員標(biāo)識(shí)形成差異，從而加深用戶的品牌感知和視覺(jué)記憶。
3）會(huì)員色彩
為了確定更加獨(dú)特的品牌色，設(shè)計(jì)團(tuán)隊(duì)搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個(gè)具有品質(zhì)感的顏色。在視覺(jué)初稿階段，我們選擇了玫瑰金和黃金兩種主色進(jìn)行了方案嘗試。最終根據(jù)整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現(xiàn)代，煥然一新。
4）會(huì)員圖標(biāo)
在圖形元素上，為了增強(qiáng)親和感，我們選擇了圓潤(rùn)的面形圖標(biāo)樣式，通過(guò)大圓弧和小圓角的細(xì)節(jié)處理，傳遞給用戶一種年輕、品質(zhì)的品牌印記。
5）信息傳達(dá)
我們對(duì)會(huì)員購(gòu)買頁(yè)和權(quán)益詳情頁(yè)進(jìn)行了布局重構(gòu)，采用深色的背景襯托卡片信息，使得產(chǎn)品框架層和內(nèi)容信息層更加明確，突出核心內(nèi)容。
在各類場(chǎng)景中，我們通過(guò)會(huì)員品牌色彩、圖形、符號(hào)和IP形象的滲透，強(qiáng)化會(huì)員品牌印記。
經(jīng)過(guò)分析研究和實(shí)踐，我們完成了主場(chǎng)景的設(shè)計(jì)升級(jí)。
2、鏈路化—精細(xì)化運(yùn)營(yíng)
就會(huì)員體驗(yàn)而言，我們需要關(guān)注用戶在各種時(shí)間和各類場(chǎng)合下的需求，因此我們將會(huì)員的全鏈路狀態(tài)分為時(shí)機(jī)、場(chǎng)景和人群三個(gè)維度。
1）時(shí)機(jī)
在不同的時(shí)機(jī)狀態(tài)下，我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態(tài)下的用戶訴求，才能為其提供更好的服務(wù)。接下來(lái)我們從購(gòu)買前、購(gòu)買中、購(gòu)買后和即將過(guò)期四個(gè)階段闡述：
①購(gòu)買前—權(quán)益/優(yōu)惠信息引導(dǎo)
在用戶購(gòu)買前，我們強(qiáng)化了低價(jià)和省錢信息，讓用戶直觀的感受到購(gòu)買會(huì)員后的價(jià)格福利。為此我們從三個(gè)方向上進(jìn)行優(yōu)化，在開(kāi)通購(gòu)買頁(yè)，外露省錢金額，幫助用戶了解開(kāi)通會(huì)員可享受的收益；在會(huì)員頻道頁(yè)，采用外露多項(xiàng)權(quán)益，讓用戶快速了解會(huì)員權(quán)益；在章節(jié)購(gòu)買頁(yè)，采用突出會(huì)員折扣和會(huì)員優(yōu)惠價(jià)，讓用戶感受到開(kāi)通會(huì)員的折扣福利。
②購(gòu)買中—優(yōu)化路徑流程
在用戶購(gòu)買中，我們?cè)跁?huì)員購(gòu)買鏈路環(huán)節(jié)進(jìn)行簡(jiǎn)化，采用當(dāng)前頁(yè)彈出半層面板替代跳轉(zhuǎn)至?xí)T聚合頁(yè)的方式，縮短等待加載時(shí)間；在章節(jié)付費(fèi)鏈路環(huán)節(jié)，將商品選擇區(qū)信息結(jié)構(gòu)進(jìn)行優(yōu)化，減少多章購(gòu)買的頁(yè)面跳轉(zhuǎn)，使得用戶能夠更流暢的完成支付，提升付費(fèi)體驗(yàn)。
③購(gòu)買后—強(qiáng)化權(quán)益感知
在用戶購(gòu)買后，鑒于付費(fèi)用戶對(duì)商品和服務(wù)品質(zhì)有著更高追求，為此我們通過(guò)在各類重要入口展示會(huì)員權(quán)益，包括省錢金額、去廣告次數(shù)以及各類場(chǎng)景VIP狀態(tài)提示等方法，以達(dá)到強(qiáng)化用戶的權(quán)益感知。
④即將過(guò)期—輕引導(dǎo)續(xù)費(fèi)
在即將過(guò)期前，為了避免對(duì)用戶造成強(qiáng)付費(fèi)的不友好感知。過(guò)期前3天，我們采用了輕量化的形式告知用戶續(xù)費(fèi)，通過(guò)各類引導(dǎo)信息的提示，讓用戶知曉會(huì)員服務(wù)期限屆滿。
2）場(chǎng)景
我們?cè)谌肟诤凸δ軋?chǎng)景中也進(jìn)行了精細(xì)化設(shè)計(jì)，讓用戶更便捷地使用會(huì)員服務(wù)。為了突出會(huì)員優(yōu)質(zhì)內(nèi)容和服務(wù)，我們?cè)O(shè)置了會(huì)員專屬的頻道和書庫(kù)，方便用戶選擇。
在各類功能場(chǎng)景中，為了方便用戶在使用功能的過(guò)程中隨時(shí)購(gòu)買，我們?cè)O(shè)置了多個(gè)功能場(chǎng)景的會(huì)員開(kāi)通入口。讓用戶快捷享受會(huì)員服務(wù)。
3）人群
通過(guò)小說(shuō)用戶數(shù)據(jù)分析，我們將用戶人群分為會(huì)員用戶、潛在用戶、新用戶和過(guò)期用戶。
為了讓會(huì)員用戶能夠體驗(yàn)到區(qū)分于普通用戶的尊貴感，我們?cè)诟顿M(fèi)頁(yè)、批量離線、TTS播放頁(yè)和簽到頁(yè)等場(chǎng)景均采用了會(huì)員定制化的配色方案和引導(dǎo)提示，這樣使得會(huì)員用戶在體驗(yàn)服務(wù)的各類場(chǎng)景中有更強(qiáng)的身份專屬性。
所謂潛在用戶，是指仍在猶豫是否購(gòu)買會(huì)員的用戶。我們通過(guò)限時(shí)優(yōu)惠券、激勵(lì)視頻試用15分鐘、書架省錢提示、挽留彈窗和降級(jí)版免廣告權(quán)益等方式，讓潛在用戶不僅可以先試后買了解會(huì)員權(quán)益，而且可以通過(guò)各類信息提示通曉會(huì)員體驗(yàn)，更好地判斷是否通過(guò)會(huì)員服務(wù)減少付費(fèi)金額和提升閱讀體驗(yàn)。
我們針對(duì)新用戶建立了新人見(jiàn)面禮活動(dòng)，用戶在新手福利活動(dòng)期內(nèi)可享受超值折扣開(kāi)通會(huì)員，低價(jià)體驗(yàn)會(huì)員權(quán)益。而針對(duì)已過(guò)期的用戶，我們通過(guò)下發(fā)優(yōu)惠券、強(qiáng)化特權(quán)等形式喚醒用戶，以免錯(cuò)過(guò)各類福利和特權(quán)。
3、服務(wù)化—提升會(huì)員服務(wù)
在內(nèi)容為王的時(shí)代背景下，為了增加會(huì)員產(chǎn)品的核心競(jìng)爭(zhēng)力，我們持續(xù)擴(kuò)充會(huì)員書庫(kù)的數(shù)量和類目、拓展會(huì)員權(quán)益，讓用戶閱讀到更加豐富的小說(shuō)內(nèi)容和體驗(yàn)到更多權(quán)益的會(huì)員服務(wù)。小說(shuō)書庫(kù)的付費(fèi)和免費(fèi)書數(shù)量大幅擴(kuò)充，且書籍類型新增了有聲書和短篇故事，增添了小說(shuō)資源的多樣性。
在權(quán)益上，對(duì)內(nèi)我們持續(xù)拓展會(huì)員特權(quán)，從最初的4項(xiàng)擴(kuò)展為10項(xiàng)，新增了有聲免費(fèi)聽(tīng)、免費(fèi)讀故事、整本離線、專屬字體、簽到1.5倍書幣等權(quán)益；對(duì)外我們聯(lián)合其他產(chǎn)品，推出了會(huì)員贈(zèng)禮和聯(lián)合會(huì)員服務(wù)，用戶可以根據(jù)自己的需求進(jìn)行購(gòu)買，享受組合購(gòu)買的優(yōu)惠。
通過(guò)多個(gè)版本的迭代，我們完成了會(huì)員體系的設(shè)計(jì)升級(jí)和落地，用戶體驗(yàn)得到了顯著提升。
四、未來(lái)規(guī)劃
提升付費(fèi)產(chǎn)品的用戶體驗(yàn)是一個(gè)體系化的研究課題，需要各個(gè)角色通力合作，合力同行，開(kāi)拓革新。將來(lái)我們還會(huì)不斷探索，通過(guò)不斷優(yōu)化體驗(yàn)細(xì)節(jié)，不斷增加用戶權(quán)益感知，不斷嘗試方案創(chuàng)新，形成設(shè)計(jì)組合拳，為用戶提供更好的服務(wù)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
寫在前面
成熟的設(shè)計(jì)系統(tǒng)是一個(gè)強(qiáng)大的生態(tài)體系，在這個(gè)體系下，各系統(tǒng)部分協(xié)同運(yùn)行，促進(jìn)平臺(tái)產(chǎn)品之間的一致性，為更大規(guī)模的產(chǎn)品提供“標(biāo)準(zhǔn)化”的工作流程，從而實(shí)現(xiàn)組織的運(yùn)作效率的提升。
A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. --Alla Kholmatova, from Design system
設(shè)計(jì)系統(tǒng)是指服務(wù)于數(shù)字化產(chǎn)品設(shè)計(jì)的一系列具有內(nèi)在關(guān)聯(lián)性的、組織有序的設(shè)計(jì)模式與實(shí)踐方法（Kholmatova，2017）。
它既包含了可復(fù)用并組成界面的要素，也涵蓋了如何在設(shè)計(jì)團(tuán)隊(duì)當(dāng)中創(chuàng)建、提煉、使用和共享的方法。在2014年后，各大知名公司開(kāi)始在界面設(shè)計(jì)領(lǐng)域紛紛構(gòu)建設(shè)計(jì)系統(tǒng)。百度商業(yè)團(tuán)隊(duì)隨著產(chǎn)品不斷的發(fā)展和壯大，團(tuán)隊(duì)希望通過(guò)統(tǒng)一的設(shè)計(jì)和研發(fā)語(yǔ)言來(lái)提升產(chǎn)品的一致性，并實(shí)現(xiàn)團(tuán)隊(duì)協(xié)同效率提升，從而達(dá)到降本提效。在基于自身業(yè)務(wù)特性上，建設(shè)了一套Light設(shè)計(jì)系統(tǒng)并持續(xù)的發(fā)展。
目前在設(shè)計(jì)系統(tǒng)建設(shè)方面，各家有非常完備的建設(shè)方法與實(shí)踐。當(dāng)設(shè)計(jì)系統(tǒng)建設(shè)趨于完備和成熟時(shí)，如何更有效定位設(shè)計(jì)系統(tǒng)的發(fā)展方向、持續(xù)迭代成為我們思考的重點(diǎn)。
本文將以百度商業(yè)團(tuán)隊(duì)Light設(shè)計(jì)系統(tǒng)PATS度量體系的建設(shè)為例，分享我們?nèi)绾翁剿髟O(shè)計(jì)系統(tǒng)度量的建構(gòu)，與具體實(shí)踐。希望通過(guò)文章能為大家?guī)?lái)新思考，并借此與大家進(jìn)行交流與探討。
1.為什么要做設(shè)計(jì)系統(tǒng)度量
度量是一種測(cè)量或評(píng)價(jià)特定現(xiàn)象或事物的方法，而體驗(yàn)度量則是一種可靠的測(cè)量或評(píng)價(jià)體驗(yàn)的方法與數(shù)據(jù)體系，使得體驗(yàn)可被測(cè)量、量化并以數(shù)據(jù)的形式表示出來(lái)（Tullis and Albert，2009）。
管理學(xué)大師彼得?德魯克：If you can’t measure it, you can’t improve it.無(wú)度量、無(wú)改善。設(shè)計(jì)系統(tǒng)無(wú)疑是一個(gè)動(dòng)態(tài)發(fā)展的，是不斷演進(jìn)的一個(gè)生態(tài)。在百度商業(yè)團(tuán)隊(duì)Light Design設(shè)計(jì)系統(tǒng)建設(shè)初步完善后，我們希望通過(guò)行之有效的度量，來(lái)進(jìn)行可測(cè)量、可量化、可持續(xù)的監(jiān)測(cè)，從而對(duì)設(shè)計(jì)系統(tǒng)進(jìn)行全面評(píng)估，明確下一步重點(diǎn)的投入方向。這對(duì)我們?cè)O(shè)計(jì)系統(tǒng)管理和迭代非常有必要。
2.如何建立設(shè)計(jì)系統(tǒng)度量
2.1 現(xiàn)有度量模型研究
在構(gòu)建度量體系之前，我們先回溯已有的度量模型。了解當(dāng)前市面上以及學(xué)術(shù)上已有的成熟度量模型。并帶著以下2個(gè)問(wèn)題進(jìn)行研究：
當(dāng)前業(yè)界較為典型常用的模型體系：例如HEART + GSM模型、PTECH模型、《云計(jì)算軟件產(chǎn)品使用體驗(yàn)質(zhì)量度量模型及度量方法》。
通過(guò)對(duì)比分析模型維度、具體指標(biāo)和方法，我們發(fā)現(xiàn)：
1）較為典型常用的模型是面向具體商業(yè)產(chǎn)品和用戶，但針對(duì)設(shè)計(jì)系統(tǒng)的度量很少涉及。
2）常見(jiàn)度量模型建構(gòu)的方法是有一定共性特征，我們可借此指導(dǎo)建構(gòu)設(shè)計(jì)系統(tǒng)度量模型。
2.2 設(shè)計(jì)系統(tǒng)度量的建構(gòu)
根據(jù)以上調(diào)研，我們認(rèn)為：現(xiàn)有度量模型評(píng)估的對(duì)象、內(nèi)容和方法是面向用戶群體，并針對(duì)具體業(yè)務(wù)或產(chǎn)品；而設(shè)計(jì)系統(tǒng)的度量則是：通過(guò)全面科學(xué)的度量體系，評(píng)估設(shè)計(jì)系統(tǒng)在工作流程與業(yè)務(wù)側(cè)應(yīng)用的表現(xiàn)，驗(yàn)證其價(jià)值，并判斷在應(yīng)用中存在的問(wèn)題。
我們基于百度商業(yè)團(tuán)隊(duì)Light設(shè)計(jì)系統(tǒng)發(fā)展和預(yù)期目標(biāo)，構(gòu)建了一套度量設(shè)計(jì)系統(tǒng)的評(píng)估體系。具體構(gòu)建過(guò)程分四步進(jìn)行：
Step 01. 盤點(diǎn)當(dāng)前現(xiàn)狀：
通過(guò)盤點(diǎn)對(duì)設(shè)計(jì)系統(tǒng)的各項(xiàng)內(nèi)容、困惑問(wèn)題等，以此明確設(shè)計(jì)系統(tǒng)需要度量對(duì)象和內(nèi)容。根據(jù)設(shè)計(jì)系統(tǒng)標(biāo)準(zhǔn)化建立指南（Invision，2020）所提出：設(shè)計(jì)系統(tǒng)在不同發(fā)展階段，需要到達(dá)標(biāo)準(zhǔn)的依據(jù)以及設(shè)計(jì)系統(tǒng)應(yīng)包含的內(nèi)容。結(jié)合我們?cè)O(shè)計(jì)系統(tǒng)當(dāng)前發(fā)展的情況，將百度商業(yè)團(tuán)隊(duì)設(shè)計(jì)系統(tǒng)內(nèi)容拆分為原則規(guī)范（Principle）、設(shè)計(jì)資產(chǎn)（Asset）、設(shè)計(jì)工具（Tool）、維護(hù)管理（Support）四大板塊。由此，明確我們度量設(shè)計(jì)系統(tǒng)的具體內(nèi)容，并將我們?cè)O(shè)計(jì)系統(tǒng)度量定義為設(shè)計(jì)系統(tǒng)PATS度量體系。
Step 02.制定度量維度：
在明確度量對(duì)象內(nèi)容后，結(jié)合我們?cè)O(shè)計(jì)系統(tǒng)的目標(biāo)，將度量體系聚焦五大維度：
Step 03.明確目標(biāo)、信號(hào)與指標(biāo)：
在不同維度下，依照GSM模型的方法具體推導(dǎo)出指標(biāo)和度量方法。具體實(shí)施的過(guò)程是：羅列出度量?jī)?nèi)容在維度上所期望的目標(biāo)，以及表現(xiàn)出的信號(hào)，來(lái)推到出具體指標(biāo)。整個(gè)過(guò)程中，做到【貼近系統(tǒng)目標(biāo)，緊扣度量?jī)?nèi)容】。
Step 04.選取度量方法：
對(duì)應(yīng)上述的劃分維度和指標(biāo)，設(shè)計(jì)特定的度量問(wèn)卷，采用主觀評(píng)分的形式持續(xù)跟蹤使用者們體驗(yàn)分?jǐn)?shù)變化，從而監(jiān)控設(shè)計(jì)系統(tǒng)在我們工作流程中的運(yùn)行情況。并結(jié)合定性訪談，對(duì)薄弱內(nèi)容深入探究，了解具體原因。此外，我們也引入客觀度量方法，對(duì)組件應(yīng)用表現(xiàn)的客觀數(shù)據(jù)進(jìn)行監(jiān)測(cè)，來(lái)反映其靈活度情況。
3.PATS度量落地實(shí)踐
構(gòu)建設(shè)計(jì)系統(tǒng)PATS度量模型后，持續(xù)開(kāi)展度量實(shí)踐，度量模型與評(píng)估方法得到初步驗(yàn)證，確定設(shè)計(jì)系統(tǒng)度量體驗(yàn)分的基線；并了解當(dāng)前系統(tǒng)發(fā)展不足的地方，明確短期解決方案以及?線行動(dòng)規(guī)劃。
第一次度量實(shí)踐中，對(duì)比本次度量的平均分發(fā)現(xiàn)：易用性與可靠性維度遠(yuǎn)低于平均分，存在明顯的短板。于是，重點(diǎn)針對(duì)短板問(wèn)題，一方面，通過(guò)定性訪談對(duì)具體問(wèn)題歸因，找準(zhǔn)痛點(diǎn)，制定出應(yīng)對(duì)方案；另一方法，調(diào)研先進(jìn)設(shè)計(jì)系統(tǒng)的建設(shè)方法，學(xué)習(xí)管理經(jīng)驗(yàn)，給出具體的改善措施。
通過(guò)半年執(zhí)行改善措施后，再次度量時(shí)，聚焦分值的變化觀測(cè)到：執(zhí)行相應(yīng)的措施和決策后，分值有了明顯的變化。例如，通過(guò)切換Figma工具作為L(zhǎng)ight設(shè)計(jì)系統(tǒng)相關(guān)資產(chǎn)的載體，利用其優(yōu)勢(shì)將設(shè)計(jì)系統(tǒng)內(nèi)容根植到工作流程，使得易用性維度提升幅度非常顯著。在一定程度上，驗(yàn)證了工具切換決策的價(jià)值。但易用性維度分值依舊較低，有可提升空間，還需持續(xù)優(yōu)化。
此外，成立Light設(shè)計(jì)系統(tǒng)維護(hù)小組，制定維護(hù)管理建設(shè)機(jī)制，明確雙周更新通知，統(tǒng)一日志記錄模板，明確各項(xiàng)負(fù)責(zé)人等，推動(dòng)可靠性維度得分提升顯著。通過(guò)PATS設(shè)計(jì)系統(tǒng)度量，既為我們指明了下一步改善的方向，也對(duì)設(shè)計(jì)系統(tǒng)的發(fā)展決策進(jìn)行驗(yàn)證。
總結(jié)：
在建立設(shè)計(jì)系統(tǒng)PATS度量后，實(shí)現(xiàn)了全面并精準(zhǔn)的監(jiān)控和管理，并指引我們提出可提升系統(tǒng)體驗(yàn)的決策與方向。而設(shè)計(jì)系統(tǒng)是復(fù)雜的，也是不斷變化、演進(jìn)的。未來(lái)設(shè)計(jì)系統(tǒng)PATS度量的方法也會(huì)隨設(shè)計(jì)系統(tǒng)的發(fā)展而逐漸豐富，來(lái)獲取更全面的數(shù)據(jù)。最終，幫助團(tuán)隊(duì)更好地推進(jìn)設(shè)計(jì)系統(tǒng)的建設(shè)，提升設(shè)計(jì)系統(tǒng)的成熟度，推進(jìn)設(shè)計(jì)系統(tǒng)向一個(gè)良性循環(huán)的方向前進(jìn)。
作者：百度MEUX 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn