// 寫在前面

端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品，帶來使用量的提升，從而實(shí)現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務(wù)快速增長，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣，依托各端流量實(shí)現(xiàn)矩陣產(chǎn)品間的導(dǎo)流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗(yàn)升級的項(xiàng)目為例，分享導(dǎo)流增長探索的設(shè)計(jì)思路與實(shí)踐經(jīng)驗(yàn)。

// 為什么要做導(dǎo)流

導(dǎo)流的目的

對于業(yè)務(wù)本身而言，隨著移動互聯(lián)網(wǎng)流量紅利期的結(jié)束，獲取新用戶的成本越來越高，不管是新產(chǎn)品還是成熟型產(chǎn)品，都需要通過導(dǎo)流的手段來持續(xù)擴(kuò)充新用戶。其次，對于有駕產(chǎn)品生態(tài)而言，需要各端產(chǎn)品間的相互聯(lián)動，協(xié)同發(fā)揮優(yōu)勢，實(shí)現(xiàn)流量價(jià)值最大化。

導(dǎo)流的優(yōu)勢

• 成本低，相較于投放、活動等渠道流量獲取方式，矩陣導(dǎo)流成本低；

• 高意向，用戶購車意向明確更容易實(shí)現(xiàn)商業(yè)轉(zhuǎn)化；

• 可共享，用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。

// 如何做好導(dǎo)流設(shè)計(jì)

1.問題分析

通過梳理核心場景的4種導(dǎo)流條，發(fā)現(xiàn)各個(gè)場景導(dǎo)流形式各異，用戶缺乏統(tǒng)一認(rèn)知，導(dǎo)流引導(dǎo)語單一內(nèi)容吸引力弱。在用戶在瀏覽頁面時(shí)，點(diǎn)擊功能入口或想要繼續(xù)查看更多內(nèi)容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：

• 缺乏統(tǒng)一認(rèn)知：視覺表達(dá)形式不成體系，用戶感知不夠；

• 內(nèi)容吸引力弱：內(nèi)容單一缺乏吸引力，用戶沒有點(diǎn)擊欲望；

• 阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗(yàn)。

從導(dǎo)流鏈路的用戶行為來看，整個(gè)流程下載路徑過長，發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點(diǎn)：

• 從小程序落地頁到下載頁：在進(jìn)入小程序?yàn)g覽頁面時(shí)，用戶沒有注意到導(dǎo)流條就滑走了；

• 點(diǎn)擊導(dǎo)流條進(jìn)入下載頁：點(diǎn)擊導(dǎo)流條會先調(diào)起導(dǎo)流彈窗，點(diǎn)擊確認(rèn)后再進(jìn)入到下載頁，用戶未選擇下載就退出了。

2.明確設(shè)計(jì)方向

針對導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認(rèn)知，內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題，我們搭建了一個(gè)完整的導(dǎo)流鏈路圖，根據(jù)用戶增長模型，把用戶生命周期各節(jié)點(diǎn)的用戶行為與產(chǎn)品觸點(diǎn)一一羅列出來，找到增長路徑的設(shè)計(jì)機(jī)會點(diǎn)。

通過以上的問題分析，如何建立用戶和產(chǎn)品的鏈接，保障友好的體驗(yàn)，是本次導(dǎo)流升級要解決的問題。根據(jù)用戶關(guān)鍵行為，我們可以將整個(gè)導(dǎo)流鏈路拆分為3個(gè)階段來挖掘主要機(jī)會點(diǎn)：

• 下載前：興趣激發(fā)導(dǎo)流吸引，建立用戶穩(wěn)定認(rèn)知；

• 下載中：強(qiáng)化用戶轉(zhuǎn)化動機(jī)，刺激用戶完成下載；

• 下載后：保障還原體驗(yàn)暢通，提升首次使用體驗(yàn)。

下面將分別介紹導(dǎo)流下載前階段的設(shè)計(jì)落地實(shí)踐，以及下載中、下載后階段的延伸設(shè)計(jì)思考。

// 下載前

1.強(qiáng)化觸點(diǎn)吸引

是否能成功引起用戶注意，是轉(zhuǎn)化開始的第一步，統(tǒng)一的視覺風(fēng)格和滿足用戶訴求的內(nèi)容，有利于增強(qiáng)導(dǎo)流條的吸引力。

1）收斂導(dǎo)流條類型

針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉(zhuǎn)預(yù)期的體驗(yàn)問題，下線了阻斷式和截?cái)嗍絻煞N體驗(yàn)不友好的導(dǎo)流類型，將原來4種導(dǎo)流類型收斂為2種，僅保留通用導(dǎo)流條和功能延展導(dǎo)流條，基于這2種導(dǎo)流形態(tài)進(jìn)行深入的設(shè)計(jì)探索。

2）建立通用視覺標(biāo)準(zhǔn)

針對【缺乏統(tǒng)一認(rèn)知】視覺表達(dá)形式不成體系、用戶感知不夠的視覺問題，建立了通用導(dǎo)流條標(biāo)準(zhǔn)化規(guī)范。統(tǒng)一視覺形態(tài)，優(yōu)化為頁面內(nèi)通欄嵌入式，同時(shí)融入品牌色強(qiáng)化用戶感知，根據(jù)頁面布局制定了不同的展示規(guī)則。

上線后，內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下，導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平，為了進(jìn)一步提升導(dǎo)流的點(diǎn)擊效果，開始探索場景化定制提轉(zhuǎn)的設(shè)計(jì)方向。

3）定制場景化內(nèi)容

針對【內(nèi)容吸引力弱】內(nèi)容單一缺乏吸引力、用戶沒有點(diǎn)擊欲望的內(nèi)容問題，在通用標(biāo)準(zhǔn)化形態(tài)的基礎(chǔ)上，根據(jù)不同場景用戶訴求點(diǎn)，豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強(qiáng)化3個(gè)方向驗(yàn)證對轉(zhuǎn)化的影響。

• 內(nèi)容定制：豐富導(dǎo)流利益點(diǎn)、場景化內(nèi)容更能激發(fā)用戶興趣，促進(jìn)轉(zhuǎn)化達(dá)成；

• 按鈕文案：轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點(diǎn)匹配，可以助力按鈕轉(zhuǎn)化提升；

• 氛圍強(qiáng)化：導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導(dǎo)流條點(diǎn)擊。

2.拓展場景擴(kuò)量

復(fù)利通用標(biāo)準(zhǔn)導(dǎo)流條的成功經(jīng)驗(yàn)，應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗(yàn)證有效性，從產(chǎn)品價(jià)值點(diǎn)出發(fā)，挖掘高流量場景的機(jī)會點(diǎn)從而帶來轉(zhuǎn)化增量。

1）價(jià)值傳遞

根據(jù)小程序和APP兩端各自的不同點(diǎn)，分別從功能差異及體驗(yàn)差異兩個(gè)方向進(jìn)行優(yōu)化。

• APP特有功能：APP完善的功能體驗(yàn)可以更好滿足用戶訴求，例如參配瀏覽場景下，引導(dǎo)用戶體驗(yàn)搜索及橫屏查看的高頻功能，對于導(dǎo)流轉(zhuǎn)化有正向幫助；

• 各端體驗(yàn)差異：小程序和APP兩端體驗(yàn)存在差異，例如圖片瀏覽場景下，APP清晰流暢的瀏覽體驗(yàn)及放大全屏查看圖片的交互體驗(yàn)，能夠刺激用戶轉(zhuǎn)化。

2）價(jià)值延續(xù)

當(dāng)用戶完成核心內(nèi)容消費(fèi)后，是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容，進(jìn)而引導(dǎo)用戶下載呢？

• 服務(wù)透傳：平臺服務(wù)內(nèi)容傳遞，例如在內(nèi)容落地頁文末增加品牌廣告導(dǎo)流條，幫助用戶建立品牌認(rèn)知；

• 相關(guān)推薦：引導(dǎo)相關(guān)內(nèi)容消費(fèi)，例如在文章或視頻頁增加相關(guān)推薦導(dǎo)流條，引導(dǎo)用戶瀏覽更多相似內(nèi)容。

// 下載中

當(dāng)用戶通過導(dǎo)流條進(jìn)入到下載流程時(shí)，還有哪些手段可以刺激用戶激活減少流失呢？

• 強(qiáng)化下載動機(jī)：下載頁前置APP落地頁內(nèi)容，例如將通用下載頁優(yōu)化為場景化下載頁，給用戶超前產(chǎn)品體驗(yàn)吸引轉(zhuǎn)化；

• 減少用戶流失：縮短鏈路簡化流程，例如可在下載中間頁完成應(yīng)用下載，同時(shí)退出下載頁時(shí)增加挽留。

// 下載后

當(dāng)用戶在應(yīng)用商店下載完成后，我們還能做哪些提升首次啟動APP的體驗(yàn)?zāi)兀?

• 還原鏈路暢通：提升場景還原成功率，減少頻繁提示信息干擾；

• 建立用戶心智：引導(dǎo)新用戶探索功能，根據(jù)用戶興趣推薦適合的內(nèi)容。

以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計(jì)思考，為大家提供可以繼續(xù)探索的方向。

// 寫在最后

總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗(yàn)設(shè)計(jì)要點(diǎn)：

• 全鏈路洞察，對導(dǎo)流鏈路進(jìn)行拆解，通過盤點(diǎn)導(dǎo)流鏈路的用戶行為，明確每個(gè)節(jié)點(diǎn)的設(shè)計(jì)方向；

• 降低廣告干擾性，減少用戶瀏覽過程中的阻斷感，適度弱化廣告氛圍；

• 用戶的視角引導(dǎo)，讓用戶專注于產(chǎn)品本身傳遞的價(jià)值，引領(lǐng)用戶完成對產(chǎn)品的探索從而完成下載激活。

作者：百度MEUX
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

什么是“有駕”

【有駕】是百度旗下的汽車信息與服務(wù)平臺，累計(jì)用戶超5.3億，致力于為用戶提供真實(shí)、可靠的看選買車服務(wù)，以及為車企和經(jīng)銷商提供從品牌到效果的一站式互聯(lián)網(wǎng)營銷解決方案。

現(xiàn)狀分析

有駕品牌在孵化初期，重點(diǎn)是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強(qiáng)化用戶的感知。

但是隨著品牌持續(xù)運(yùn)營進(jìn)入新的階段，我們發(fā)現(xiàn)現(xiàn)有的設(shè)計(jì)無法滿足后續(xù)的運(yùn)營訴求了，主要體現(xiàn)在：

品牌logo：不能體現(xiàn)汽車的行業(yè)屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時(shí)下潮流的年輕配色體系。

品牌活動：品牌關(guān)聯(lián)度弱，活動維度單一。

項(xiàng)目概述

因此，我們重新梳理有駕的品牌定位與調(diào)性，借助本次品牌升級，打造有駕差異化風(fēng)格，形成獨(dú)有的視覺印記。

因?yàn)橛脩魧τ谂f的logo已有一定的認(rèn)知。所以此次改版的目標(biāo)在保持固有用戶認(rèn)知，在原有基礎(chǔ)上進(jìn)行品牌標(biāo)識的探索及應(yīng)用，以強(qiáng)化品牌感知，提升品牌的競爭力，整合業(yè)務(wù)資源做心智觸達(dá)。

前期分析

前期我們對汽車垂類的競品進(jìn)行了一輪調(diào)研，并且結(jié)合有駕的用戶群里，尋找有駕品牌的差異點(diǎn)。

有駕用戶群體年輕化為主，普遍具有高學(xué)歷，集中在新一線二線城市。

通過以上在用戶、行業(yè)及行業(yè)趨勢等多唯獨(dú)的信息搜集后，我們確定了有駕品牌設(shè)計(jì)的四個(gè)核心關(guān)鍵詞：年輕、科技、未來、專業(yè)。

建立體系

在明確設(shè)計(jì)方向后，我們梳理了線上線下的所有品牌觸點(diǎn)，結(jié)合前期的調(diào)研結(jié)論，匯總出了有駕設(shè)計(jì)系統(tǒng)的完整框架，以確保品牌設(shè)計(jì)的完整性和靈活適用性。

設(shè)計(jì)落地

基于前期分析洞察結(jié)論，我們在繼承圓形和車形的基礎(chǔ)上，對品牌符號與icon進(jìn)行了大量的方案探索。從圖形、質(zhì)感等方面切入，簡化圖形形態(tài)，嘗試不同的形態(tài)呈現(xiàn)的視覺感受和氣質(zhì)。最終確定了全新品牌logo方案。

相對于升級前，新版的logo加入汽車元素，解決升級前l(fā)ogo的行業(yè)屬性不明確的問題，讓產(chǎn)品app的行業(yè)屬性更加直觀。同時(shí)增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強(qiáng)化有駕的品牌基因。

符號提煉

確定品牌logo后，為了確保品牌能夠更好的拓展應(yīng)用，進(jìn)行了品牌符號的提煉。并為了延續(xù)之前的品牌調(diào)性。所以輔助圖形延續(xù)了之前的圓環(huán)造型，造型偏向輪胎；在不破壞原有型的基礎(chǔ)上，加入一些折角的質(zhì)感的變化，使圖形變化更加豐富，更有識別度。

設(shè)計(jì)語言

為了更好的觸達(dá)到各業(yè)務(wù)場景，所以我們對視覺風(fēng)格進(jìn)行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結(jié)合有駕的年輕化，科技感的設(shè)計(jì)目標(biāo)，探索出以下三種質(zhì)感呈現(xiàn)：

符號拓展

在提取的形狀基礎(chǔ)上進(jìn)行變形，增加折疊細(xì)節(jié)。在大事件活動，海報(bào)等場景使用，增加品牌關(guān)聯(lián)度。

設(shè)計(jì)字體

結(jié)合全新的品牌定位，我們也優(yōu)化了有駕的品牌字體，從細(xì)節(jié)出透出有駕的品牌感知。

品牌手冊

新的品牌需要一套更全面的品牌系統(tǒng)來滿足不同場景下的業(yè)務(wù)拓展需求。

目前我們也對現(xiàn)有的品牌手冊進(jìn)行拓展和完善，同步到業(yè)務(wù)方，以便更好的保證各業(yè)務(wù)場景觸點(diǎn)下品牌的認(rèn)知和統(tǒng)一，達(dá)到提質(zhì)增效的目的。

品牌落地

除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運(yùn)營、品牌海報(bào)等各維度場景中，讓有駕品牌形象更加立體多元。

結(jié)語

目前有駕品牌升級已經(jīng)取得階段性成果，沉淀出更加完善的品牌資產(chǎn)，不僅提升設(shè)計(jì)效率保證全鏈路的品牌曝光，也為業(yè)務(wù)規(guī)?；蛳禄A(chǔ)。之后我們也將不斷完善和擴(kuò)充品牌資產(chǎn)，將設(shè)計(jì)成果不斷落地到業(yè)務(wù)中，細(xì)化業(yè)務(wù)目標(biāo)并與設(shè)計(jì)目標(biāo)緊密結(jié)合，多維度助力業(yè)務(wù)的高速發(fā)展。

---

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

本文講述了“峰終定律”的定義，并結(jié)合筆者生活中的兩個(gè)例子做了圖文分析，最后通過學(xué)習(xí)海底撈的案例，然后結(jié)合顧客角度將一次糟糕的活動進(jìn)行了改進(jìn)。

一、峰終定律定義：

峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經(jīng)濟(jì)學(xué)獎獲得者，心理學(xué)家）提出的——他發(fā)現(xiàn)人們對體驗(yàn)（體驗(yàn)事物或者產(chǎn)品）的記憶由兩個(gè)因素決定：

• 第一個(gè)因素是體驗(yàn)最高峰時(shí)的感覺（最高峰分為正的最高峰和負(fù)的最高峰）。
• 第二個(gè)因素是體驗(yàn)結(jié)束時(shí)的感覺。

即，除了峰值和終值時(shí)之外的其他體驗(yàn)，無論好與不好體驗(yàn)的比重是多少，體驗(yàn)時(shí)間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。

概念講完，下面筆者結(jié)合去飯店買飯的故事，使用“峰終定律”進(jìn)行圖文分析，為什么一家飯店給我的體驗(yàn)非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。

二、兩個(gè)故事

1. 第一家體驗(yàn)不好的店：某燒臘飯店

之前有一段時(shí)間飯店聯(lián)合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。

我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務(wù)員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個(gè)角度拍完又換一個(gè)角度。最后，飯店的服務(wù)員才把那份飯給我，當(dāng)時(shí)我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時(shí)間就一個(gè)小時(shí)，為了能睡好點(diǎn)還要吃得快點(diǎn)。

這家店給我的體驗(yàn)就是，不把用戶當(dāng)用戶，心里非常不是滋味。

而當(dāng)我向同事說起這家店時(shí)，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時(shí)，我還會說上面的故事給同事，最后評價(jià)道：可以試試的，另外，出餐質(zhì)量有問題他們也會給你換一份的。

當(dāng)我說完這次的經(jīng)歷給同事聽，同事并沒有表示會去嘗試一次，因?yàn)槲艺f的故事，又因?yàn)閮r(jià)格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費(fèi)的，這是給用戶留下第一印象的關(guān)鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。

那么使用“峰終定律”去分析這次糟糕的就餐體驗(yàn)就是：

峰值有兩個(gè)，正峰值是廣州第一手撕雞的“口味”，負(fù)峰值是“員工服務(wù)”。負(fù)峰值的出現(xiàn)，說明了店家在活動開始前并沒有設(shè)計(jì)好活動流程，服務(wù)員也就沒有足夠的授權(quán)去處理和應(yīng)對。

終值是“離店”時(shí)的不爽，店家并沒有作出任何的正面回應(yīng)，沒有表達(dá)歉意，沒有意識到這樣做會給顧客造成怎樣的影響。

“員工服務(wù)”是直接突破了我的忍耐底線，“離店”時(shí)店家的不作為再次挑戰(zhàn)了我的忍耐底線。短時(shí)間內(nèi)兩次挑戰(zhàn)我的忍耐底線，店家不但“失去”了我，我的幾個(gè)同事也不會是潛在客戶了。

忍耐底線不是卡尼曼教授的理論，是我結(jié)合了梁寧老師講過的內(nèi)容，然后加到了這張“用戶體驗(yàn)?zāi)Ｐ汀眻D上。

梁寧老師講的是：“PC時(shí)代用戶等待一個(gè)頁面打開的忍耐底線平均數(shù)是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰(zhàn)用戶的忍耐底線?！?

2. 第二家體驗(yàn)好的店：某粥粉面飯店

某天中午我發(fā)現(xiàn)寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個(gè)菜用什么材料做，哪個(gè)湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發(fā)現(xiàn)真合我胃口。

上兩周有兩天中午休息時(shí)都到店里想點(diǎn)肉餅飯，但是連續(xù)兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預(yù)約下單，第二天上班我早早的就預(yù)約了肉餅飯，到店之后老板已經(jīng)打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當(dāng)給人推薦這家店時(shí)就說的一句話：“這是我們專門給您留的肉餅飯?！?

當(dāng)我笑著回應(yīng)謝謝的時(shí)候我也在想，這飯是我在小程序上面早早預(yù)定的，老板還說是專門我留的；因?yàn)槲蚁雀跺X了，所以老板不賣給別人了。

我又想到，這家店的老板是愿意站在顧客的角度來提供對應(yīng)的服務(wù)的，并且我也確實(shí)感受到了老板的真誠、熱情。

于是我把這家店介紹給了幾個(gè)同事，他們都表示下次沒有自己帶午餐的時(shí)候會試一下，并且有兩個(gè)同事聽了我的推薦后去下單了，其中有一位同事表示會回購。

這家店給我的體驗(yàn)就是，不把用戶當(dāng)流量，心里有用戶，產(chǎn)品可以，用戶自然會安利給身邊人嘗試一下。

使用“峰終定律”去分析這次就餐體驗(yàn)就是：

有兩個(gè)正峰值，第一個(gè)正峰值是讓我感受到店家心里有顧客的“員工服務(wù)”。第二個(gè)正峰值是“口味”，這里甚至有一點(diǎn)點(diǎn)主觀上的小驚喜：當(dāng)時(shí)抱著不知道會不會踩雷，試試新店的心態(tài)，當(dāng)我試到肉餅飯時(shí)，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。

小結(jié)：

當(dāng)我跟同事同事說起第一家飯店體驗(yàn)不好的時(shí)候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關(guān)系，只做一桿子買賣。于是他們并不注重維護(hù)客情關(guān)系，當(dāng)他們把合過影的手撕雞飯遞給我時(shí)，連安撫情緒的話都沒有，就餐體驗(yàn)自然就糟糕透了。

那么如果我是這家燒臘飯店的主理人，那我會如何設(shè)計(jì)本次活動？

我們先看看餐飲行業(yè)的巨頭都是怎么做的，因服務(wù)被大家口口相傳的海底撈就是非常值的學(xué)習(xí)的對象。

三、使用“峰終定律”分析最近一次我去海底撈時(shí)的體驗(yàn)

通過模型，我有以下幾點(diǎn)感悟：

• 排隊(duì)時(shí)海底撈提供的各種免費(fèi)服務(wù)及零食飲料，目的是降低顧客等待叫號的無聊感，甚至讓顧客心甘情愿地等待叫號就餐，進(jìn)而提高顧客滿意度。
• 海底撈從顧客排隊(duì)，到顧客就餐，最后離店，打造了一套密集的正峰值的服務(wù)觸點(diǎn)。因此人們講到海底撈最先想起的就是海底撈服務(wù)。
• 上圖列舉的點(diǎn)無明顯的負(fù)峰值，并且有很多服務(wù)觸點(diǎn)都是免費(fèi)的，這就要求海底撈必須投入相應(yīng)的資源，那么成本必然會少不了。
• 關(guān)于資源與成本。理想情況下，每一個(gè)服務(wù)觸點(diǎn)都需要妥善處理。但實(shí)際情況是，我們不可能讓用戶在所有服務(wù)觸點(diǎn)都達(dá)到預(yù)期，我們必須在有限的資源下，換取用戶更多的正峰值與更好的終值，因此如何控制成本，合理配置有限的資源非常重要。

服務(wù)觸點(diǎn)：用戶為了完成目標(biāo)，需要做一系列連續(xù)的行為，而這一連串行為中會涉及到一個(gè)一個(gè)的用戶與產(chǎn)品完成交互的觸點(diǎn)，這就是服務(wù)觸。比如上圖所示的，海底撈出于提高轉(zhuǎn)化率、降低顧客等待叫號時(shí)的無聊感等原因，在顧客排隊(duì)時(shí)可以體驗(yàn)免費(fèi)的美甲服務(wù)、免費(fèi)擦鞋服務(wù)等。

四、燒臘飯店活動改進(jìn)方案

帶著學(xué)習(xí)完海底撈得出的感悟，下面我來嘗試思考一下，我現(xiàn)在是這家燒臘飯店的主理人，那我會這樣設(shè)計(jì)本次活動：

首先需要了解我們的顧客：

1、顧客畫像

附近街坊、附近上班族，方便快捷解決午/晚餐。

2、顧客預(yù)期

選擇符合自己口味的菜品，店內(nèi)就餐/打包回公司吃；店家穩(wěn)定出餐（口味穩(wěn)定、不要有異物等）；不希望排長龍。

3、服務(wù)觸點(diǎn)

點(diǎn)餐時(shí)、支付時(shí)、等待出餐時(shí)（排隊(duì)）、（打包完）出餐時(shí)、離店時(shí)。

其次，才到本次活動的設(shè)計(jì)：

1、背景

贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費(fèi)即送天地壹號一瓶。

2、目的

幫助合作伙伴宣傳的同時(shí)，吸引新的顧客，回饋老顧客，提升營業(yè)額。

3、具體方案

3.1、制作印有“12.1~12.3日，消費(fèi)即送天地壹號一瓶，送完即止”的宣傳海報(bào)，并且放置在店鋪門口。

3.2、完善服務(wù)流程。（請看下圖）

3.3、設(shè)置幾種異常情況的應(yīng)對方案。（請看下圖）

完善好服務(wù)流程，提前設(shè)置好幾個(gè)異常情況的應(yīng)對方案，相比于海底撈一連串的各種免費(fèi)服務(wù)，其實(shí)花不了多少實(shí)際的金錢成本。但是卻能用最少的資源，最大程度的避免“負(fù)峰值”的出現(xiàn)。

另外，天地壹號的工作人員提出合影，飯店應(yīng)該用自己的員工餐，而不是用顧客的。這其實(shí)不是異常情況的應(yīng)對方案，而是作為服務(wù)行業(yè)從業(yè)人員該有的覺悟。

本文到此結(jié)束，朋友們?nèi)绻O(shè)計(jì)/體驗(yàn)了好的“峰終體驗(yàn)”的案例，麻煩在評論區(qū)告知我一聲，讓我也去體驗(yàn)一把~

作者：我是Berwin
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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í)間對于我們每個(gè)人來說都極為重要和珍貴。隨著生活節(jié)奏的加速，很多產(chǎn)品也都開始注重和考慮對于用戶時(shí)間的節(jié)省和分配。本文重點(diǎn)分享三種在交互設(shè)計(jì)中幫助用戶「同時(shí)做幾件事」的設(shè)計(jì)方法，以及其對應(yīng)的優(yōu)秀案例：

• 分割屏幕的布局
• 更容易再續(xù)操作
• 忽略非重要操作

希望會為你帶來更多的設(shè)計(jì)靈感。

01 分割屏幕的布局

通過將屏幕的布局進(jìn)行分割處理，可同時(shí)呈現(xiàn)多項(xiàng)內(nèi)容，讓用戶自由選擇任務(wù)主次，同時(shí)處理多項(xiàng)任務(wù)。分屏設(shè)計(jì)很常見，但其中的體驗(yàn)細(xì)節(jié)卻依舊值得研究和優(yōu)化。

案例1

微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時(shí)支持分屏功能，還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機(jī)尺寸，體驗(yàn)順暢，看視頻、接微信兩不誤：

案例 2

bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式，正在播的視頻，在被臨時(shí)打斷退出視頻后，還可以用音頻的方式繼續(xù)播放：

案例 3

微信的新功能，在你閱讀文章時(shí)依舊能看到朋友發(fā)來的微信消息，可以直接在當(dāng)前頁面回復(fù)消息，避免你在看文章時(shí)閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”，一會兒再做處理：

案例4

微信視頻號改版后，點(diǎn)擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當(dāng)前正在播放的視頻會漸漸呈現(xiàn)小屏播放，視頻內(nèi)容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內(nèi)容：

案例 5

在微信訂閱號中展示的視頻內(nèi)容可以通過劃到右下角變成小窗播放音頻，既可以聽內(nèi)容，也不影響你繼續(xù)瀏覽訂閱號的其他內(nèi)容：

02 更容易再續(xù)操作

產(chǎn)品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續(xù)，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時(shí)進(jìn)行。

案例 1

釘釘?shù)囊苿佣烁〈肮δ?，向右滑動退出正在操作的頁面時(shí)，就會出現(xiàn)添加浮窗區(qū)域，用于收錄未做完的操作。同時(shí)顯示出已添加浮窗的內(nèi)容數(shù)量，最多添加 5 個(gè)：

案例2

微信的浮窗功能也可以幫助用戶更快捷地收錄未及時(shí)閱讀的內(nèi)容，在打開時(shí)還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時(shí)間來閱讀長篇文章，可以更合理地掌控閱讀節(jié)奏：

案例3

微信讀書 App 會在你跳讀到其他章節(jié)時(shí)，在頁面下方顯示“返回原進(jìn)度”的按鈕，方便你在跳讀后回來繼續(xù)閱讀：

案例4

網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點(diǎn)開一封郵件，頁面上方會增加一個(gè)類似瀏覽器標(biāo)簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時(shí)，同時(shí)又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續(xù)編寫剛才的郵件：

案例5

使用釘釘發(fā)起會議邀請，如果中途退出，系統(tǒng)幫助你自動保存。再發(fā)起會議邀請時(shí)也會給出上次操作的提示，幫你續(xù)寫內(nèi)容：

03 忽略非重要操作

用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù)，將更多的時(shí)間用在其他事情而非無法控制的等待上。

案例1

iOS 系統(tǒng)中，當(dāng)你在不同 App 之間傳遞文件時(shí)，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點(diǎn)擊后可以繼續(xù)做其他操作，并不妨礙后臺的文件傳輸。

案例2

微信在接收超大文件時(shí)，增加了“發(fā)送給朋友”的選項(xiàng)，你不必等待文件在自己這邊下載完成后再發(fā)送，可以直接發(fā)送源文件給對方，同時(shí)下載：

案例3

微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態(tài)，緩解無聊的等待，也為即將進(jìn)行的語音聊天提供了話題：

作者：元堯
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

01 前言

你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。

當(dāng)我看完上百個(gè)動態(tài)后，找到了更有趣的方式...

02 App底部導(dǎo)航構(gòu)成

通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動態(tài)設(shè)計(jì)時(shí)則是針對這3部分。

03 Tab Bar動態(tài)類型

• 圖標(biāo)動態(tài)
• 裝飾元素動態(tài)
• 底板卡片動態(tài)

動態(tài)效果由弱到強(qiáng)，視覺層級由低到高依次排序：圖標(biāo)動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。（根據(jù)本文案例效果來排序，但效果不同會有所差異）

▍圖標(biāo)動態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。

• 在底部導(dǎo)航中，假如圖標(biāo)選中前后都是線性風(fēng)格

最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長。

但只是單色修剪，看起來很單調(diào)。我們可以在這個(gè)動畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。

也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。

如果你覺得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。

• 假如選中圖標(biāo)是面型風(fēng)格

通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說，可能會顯得有些普通。

我們可以考慮使用遮罩來制作動態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。

在一些特殊的時(shí)間，設(shè)計(jì)師們可能會技癢，而將圖標(biāo)繪制的更加豐富，來營造氛圍。

對于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場動畫。

（物理狀態(tài)：該物體在現(xiàn)實(shí)場景下的狀態(tài)，上圖獎杯真實(shí)世界狀態(tài)通常是放置地面，所以出場方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場方向是從上到下）

當(dāng)然如果去掉高光和投影，在制作一些動態(tài)時(shí)會更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎杯的距離，并記錄關(guān)鍵幀，然后整體再移動一個(gè)獎杯距離。耳朵則調(diào)整路徑來完成移動和變形，這樣便能營造出3d旋轉(zhuǎn)的錯覺。

• 假如選中圖標(biāo)是線面風(fēng)格

對于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。

▍裝飾元素動態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會用線或點(diǎn)來替代文字，讓整體更簡潔。
國外設(shè)計(jì)師Tubik，通過讓點(diǎn)元素在移動時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。

通過動態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。

• 基于這種思路，我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產(chǎn)品嗎？

又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動。最后通過蒙版來控制整體動畫顯示范圍，這個(gè)方案看起來適合科技或游戲類產(chǎn)品。

• 裝飾元素還可以放在上方

通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。

• 裝飾元素還可以放在中間

假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。

▍底板卡片動態(tài)?
這類動態(tài)少見的原因在于其動態(tài)效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過卡片凸起效果。

• 當(dāng)選中圖標(biāo)時(shí)，讓卡片凸起

在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。

我們有更簡單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大?。?/span>

完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。

目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。

• 除了凸起，還可以凹陷

這個(gè)效果靈感來源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。

此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。

看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動方式，便能帶來不一樣的感受。

或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。

---

最后再說兩句：

每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動態(tài)效果也有強(qiáng)有弱。好的動態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對的答案。
本文演示了不同類型圖標(biāo)用什么動態(tài)，并不代表只能這樣用。動態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動態(tài)屬性組合方式，所以請不要局限你的想法。

作者：幺零三
鏈接：https://www.zcool.com.cn/article/ZMTQ5OTgwOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

作者：幺零三      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司 

01 前言

在產(chǎn)品設(shè)計(jì)中，當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會給予用戶提示。常見的有小紅點(diǎn)、角標(biāo)、黑色遮罩+文字提示等這類靜態(tài)提示。

而人類是視覺生物，相比于靜態(tài)內(nèi)容，我們的注意力更容易被動態(tài)內(nèi)容吸引。

今天來聊一下頁面中常見的動態(tài)引導(dǎo)。

02 一個(gè)小案例

當(dāng)你看到這個(gè)頁面時(shí)

我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據(jù)閱讀習(xí)慣從上到下，從左到右，依次查看其他內(nèi)容。（大致如下圖）

而當(dāng)頁面元素都賦予細(xì)節(jié)時(shí)

假如我想讓你關(guān)注到其中某個(gè)較小元素

其實(shí)只需要為它添加動態(tài)，便能使其脫穎而出，這就是產(chǎn)品設(shè)計(jì)中的動態(tài)引導(dǎo)。

03 動態(tài)引導(dǎo)的作用

• 新功能提示
• 重要內(nèi)容強(qiáng)調(diào)
• 誘導(dǎo)用戶操作
• 操作教學(xué)指引
• 信息高效傳遞

▍新功能提示 ?

當(dāng)產(chǎn)品上線新功能時(shí)，設(shè)計(jì)師們都會根據(jù)功能重要程度，來決定使用什么形式讓入口元素和其他元素區(qū)分開來。常見的有小紅點(diǎn)、標(biāo)簽、氣泡這類靜態(tài)點(diǎn)綴元素（通常這類形式只出現(xiàn)一次，當(dāng)用戶點(diǎn)擊后就會消失）。當(dāng)然，也有將上述點(diǎn)綴元素動態(tài)處理的。如果入口是圖標(biāo)，甚至可以為圖標(biāo)制作動畫，這在很多電商產(chǎn)品的品類區(qū)經(jīng)?？梢钥吹?。

動態(tài)處理的形式，比原本的靜態(tài)更容易引起用戶對元素的注意力（與動態(tài)方式有關(guān)），甚至傳遞某種情緒。由于是循環(huán)播放的動畫，因此可以持續(xù)吸引用戶注意力。

ps：據(jù)說，每當(dāng)頁面多出一個(gè)會動的元素，后臺就會多出這樣一些留言，捅了開發(fā)窩了[Doge]。

▍誘導(dǎo)用戶操作 ?

動態(tài)引導(dǎo)還常常被設(shè)計(jì)師用來強(qiáng)調(diào)重要內(nèi)容（有可能被產(chǎn)品、運(yùn)營拿刀架脖子），來達(dá)成某些數(shù)據(jù)指標(biāo)，通過利用動態(tài)誘導(dǎo)用戶操作。

例如：在會員卡片中添加光效、在廣告中讓按鈕進(jìn)行縮放、為簽到入口圖標(biāo)設(shè)置動畫。

這些都能充分引起用戶注意，甚至提升功能點(diǎn)擊率。

▍隱藏功能提示 ?

我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設(shè)計(jì)師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。

對于這些不可見的功能，在初次使用時(shí)需要進(jìn)行引導(dǎo)，才能被用戶感知與使用。

▍操作教學(xué)指引 ?

講到引導(dǎo)，還必須要提的是手勢引導(dǎo)，通過動態(tài)直觀展示不同手勢的作用，提示用戶如何與產(chǎn)品進(jìn)行交互。

這在游戲教學(xué)中就常常使用，它可以幫助用戶快速理解游戲玩法。

回到視頻 App 中，你是否留意到，當(dāng)你第一打開視頻時(shí)， App 會提醒你雙擊屏幕可以點(diǎn)贊，上下滑動可以切換視頻。

在產(chǎn)品交互設(shè)計(jì)中，如果使用到一些新穎的交互方式，這類引導(dǎo)可以大幅降低用戶學(xué)習(xí)成本，幫助用戶快速上手。

▍信息高效傳遞 ?

動態(tài)敘述的直觀性，使得我們可以減少對復(fù)雜信息進(jìn)行大量文字描述。通過動態(tài)設(shè)計(jì)，我們可以創(chuàng)建視覺故事，這有助于將復(fù)雜信息以更簡單、清晰的方式進(jìn)行傳遞，從而幫助用戶快速完成任務(wù)。

也因此，在一些含有復(fù)雜操作的彈窗中，漸漸開始應(yīng)用。

但是需要注意的是，上述這些大多都只在第一次使用時(shí)才會觸發(fā)。

當(dāng)然有特例，例如：

在 App Store 每次下載應(yīng)用進(jìn)行驗(yàn)證時(shí)（面容解鎖的情況下），系統(tǒng)會通過動態(tài)提醒用戶電源鍵位置，并告知用戶需要雙擊進(jìn)行人臉識別。

在掃碼時(shí)，弱光場景下出現(xiàn)的手電筒，通過動態(tài)引起用戶注意，指引用戶使用。

以及作為動態(tài)演示，幫助用戶理解如何使用手掌滑動截屏

如何進(jìn)行NFC感應(yīng)等等..

04 總結(jié)

動態(tài)引導(dǎo)像是設(shè)計(jì)師用來控制我們眼睛的法寶，有的人用它改善產(chǎn)品體驗(yàn)，有的人用它提升商業(yè)轉(zhuǎn)化。

但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。

感謝大家看到這里，我是幺零三，咱們下期見...

作者：幺零三
鏈接：https://www.zcool.com.cn/article/ZMTQ2MTI0OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

作者：幺零三      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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端平臺中經(jīng)常遇到對統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。

可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經(jīng)常遇到對統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們設(shè)計(jì)師在設(shè)計(jì)圖表的過程中，如果沒有系統(tǒng)的可視化知識，會出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對你的設(shè)計(jì)過程有所幫助。

// 為什么要數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。

舉個(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)化視覺層次，圖表響應(yīng)式適配。

一、選擇適合的圖表

數(shù)據(jù)可視化的圖表種類繁多，當(dāng)我們真的開始作圖，往往會遇到一個(gè)困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過分析數(shù)據(jù)關(guān)系來選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。

1. 分析數(shù)據(jù)關(guān)系

根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對應(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ù)為例，常見的還有流轉(zhuǎn)關(guān)系。

構(gòu)成關(guān)系

構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來為總數(shù)。如果只是想對比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。

常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級結(jié)構(gòu)，還會用矩形樹圖或旭日圖等特殊結(jié)構(gòu)圖表。

關(guān)鍵詞：“占比、比例、百分比”

比較關(guān)系

比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過對兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類對比用于比較數(shù)據(jù)規(guī)模。

常用圖表：趨勢對比常用圖表有折線圖、散點(diǎn)圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。

關(guān)鍵詞：“增減、升降、漲跌、波動”

分布關(guān)系

利用空間分區(qū)來展示數(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)系，它可以動態(tài)的體現(xiàn)相關(guān)路徑下對象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動量或流動強(qiáng)度。

常用圖表：關(guān)系圖、桑基圖、漏斗圖、進(jìn)度圖等

關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”

2. 分析數(shù)據(jù)特征

按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有：變量特征、維度特征、層級特征、流程特征。

變量特征

分辨一個(gè)指標(biāo)通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。

• 連續(xù)型數(shù)據(jù)：指在一定區(qū)間內(nèi)可以任意取值的數(shù)據(jù)叫連續(xù)數(shù)據(jù)，其數(shù)值是連續(xù)不斷的。如身高、體重等帶有時(shí)間因素變量的數(shù)據(jù)等，通常用折線圖體現(xiàn)變化趨勢。
• 離散型數(shù)據(jù)：指其數(shù)值只能用自然數(shù)或整數(shù)單位計(jì)算的數(shù)據(jù)。如當(dāng)天銷量、進(jìn)店人數(shù)等表示分類類型的數(shù)據(jù)，用柱圖表現(xiàn)更加體現(xiàn)變量的特征。

維度特征

多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類

• 根據(jù)分析視角選擇圖表：對于多維度變量的數(shù)據(jù)我們需要明確分析的視角，去找準(zhǔn)對應(yīng)的數(shù)據(jù)映射。如案例中多個(gè)班級的科目成績的這組數(shù)據(jù)，如需要全局視角查看個(gè)班的綜合素質(zhì)，推薦使用雷達(dá)圖；對比單科成績的變化分布，則推薦使用堆積圖。

層級特征

多層級數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：

• 矩形樹圖：突出子層級占比大小。最初是用來顯示計(jì)算機(jī)硬盤驅(qū)動器上文件的結(jié)構(gòu)和大小，它以面積的形式突出展現(xiàn)各個(gè)子層級節(jié)點(diǎn)的占比，可幫助用戶看到數(shù)據(jù)的層次結(jié)構(gòu)以及各層級之間的關(guān)系。

例如：上圖顯示了市場銷售額的來源結(jié)構(gòu)。長方形的大小取決于各國家的平均銷售額，通過色調(diào)來區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對比一般結(jié)構(gòu)樹圖表，它的優(yōu)勢在于可以有效利用空間。

• 旭日圖：突出細(xì)分層級關(guān)系。由多個(gè)圓環(huán)圖嵌套而成，也稱為徑向樹圖，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。常用于細(xì)分分析方法，將事物從大到小進(jìn)行拆解。每個(gè)級別的數(shù)據(jù)通過1個(gè)圓環(huán)表示，離原點(diǎn)越近代表圓環(huán)級別越高。 旭日圖在顯示一個(gè)環(huán)如何被劃分為多個(gè)層級時(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)化視覺層次

選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。

1. 強(qiáng)化數(shù)據(jù)特性

使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差

• 趨勢易感知：折線圖數(shù)值如過于平均導(dǎo)致趨勢平緩，有時(shí)候無法體現(xiàn)偏差；在強(qiáng)調(diào)數(shù)據(jù)趨勢的場景下，推薦用動態(tài)取值范圍讓波動保持在一定范圍內(nèi)，放大波動占比更突出趨勢。

• 展示更準(zhǔn)確：柱狀圖依靠柱體面積體現(xiàn)最終數(shù)值，使用動態(tài)范圍截?cái)鄬?dǎo)致數(shù)據(jù)解讀不完整；始終將 y 軸從 0 開始，才能更準(zhǔn)確的反映柱圖中的值。

2. 色彩視覺傳達(dá)

除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會影響我們對數(shù)據(jù)的感知，錯誤的取色會讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。

我們在之前的文章里有介紹過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：

• 定性型-分類色板：用于區(qū)分不同的類型，又稱為無序色板。適合區(qū)分沒有內(nèi)在順序的類別
• 定量分歧型-發(fā)散色板：通過兩邊互補(bǔ)色來體現(xiàn)，具有明亮的中間值，然后以不同的色調(diào)在刻度的兩端變暗。通常用于可視化負(fù)值和正值
• 定量順序型-順序色板：從亮到暗或相反的漸變。適合可視化從低到高的數(shù)字。

那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。

定性型：使用色調(diào)來進(jìn)行分類

數(shù)據(jù)內(nèi)在沒有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國家、行業(yè)等類型。如果希望圖表看起來更加專業(yè)，以下有幾項(xiàng)分類色板的小建議：

• 選取盡量少的色調(diào)：取色時(shí)無需使用整個(gè)色環(huán)，使用鄰近色或互補(bǔ)色的取色方式顯得更加專業(yè)。

• 色板適度明暗交替：一些視障人士無法區(qū)分色相，主要靠顏色的明暗差異來識別，通過飽和度和暗度的調(diào)整，創(chuàng)造明暗交替的色板。

定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序

如果在同一個(gè)分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來突出他們內(nèi)在的順序，使圖表更加易讀。

• 順序色板-選擇合適的插值：根據(jù)數(shù)據(jù)的分布情況選擇不同的的插值斷點(diǎn)，突出數(shù)據(jù)的差異。如以下案例中，根據(jù)統(tǒng)計(jì)學(xué)概念設(shè)定不同的取值區(qū)間，左側(cè)示例使用的是平均線性差值，反映的是數(shù)據(jù)的集中趨勢；右側(cè)示例使用的是中位數(shù)插值，能更好的體現(xiàn)數(shù)據(jù)分布的形態(tài)。

• 發(fā)散色板-關(guān)注對比色的識別性：盡量避免紅綠配色，如需使用綠色，偏黃或偏藍(lán)的綠色更易分辨，對視障人士也更加友好。

三、圖表中的響應(yīng)式設(shè)計(jì)

B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁或移動端上動態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。

1. 布局框架適配

在網(wǎng)頁端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。

如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。

2. 圖表元素適配

要適配移動端，網(wǎng)頁端橫向延展的顯示方式需要適應(yīng)移動端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。

• 信息浮層：在圖表中，信息卡元素是傳達(dá)信息內(nèi)容的重要組件，在網(wǎng)頁端中懸浮展示，通常會占據(jù)很大空間；圖表適配移動端后，信息浮層改動到圖表上方常駐顯示，并跟隨手指的滑動變化響應(yīng)數(shù)值，完整展示信息的同時(shí)也避免了頁面抖動。

• 坐標(biāo)軸標(biāo)簽：過長的坐標(biāo)標(biāo)簽在適配過程中會產(chǎn)生重疊，而省略也會造成信息展示的不完整。我們需要針對不同的坐標(biāo)軸類型給出響應(yīng)的規(guī)范。如文本類軸標(biāo)簽我們可以采用省略、換行、旋轉(zhuǎn)等方式適配，避免信息的缺失。針對有連續(xù)型的數(shù)據(jù)類坐標(biāo)軸我們可以使用抽樣、轉(zhuǎn)化單位等方式適配，精簡空間避免堆疊。

3. 極值適配

因B端平臺的特性，我們無法預(yù)知客戶傳入的數(shù)據(jù)量，可能會遇到因數(shù)據(jù)量過多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問題。這種情況下，提前考慮數(shù)據(jù)極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。

• 縮放和平移：在數(shù)據(jù)范圍過多時(shí)增加取值范圍的縮略軸組件，通過限制展示范圍讓數(shù)據(jù)量顯示可控。

• 互動切換視圖：如果折線的類別過多且無法省略的，建議分組查看。默認(rèn)狀態(tài)僅當(dāng)前組折線高亮，其他數(shù)據(jù)以淺色顯示，通過切換的方式查看其他組別的信息。

• 懸浮鼠標(biāo)高亮：在分類過多不好分辨時(shí)，可使用懸浮高亮的交互方式突出相關(guān)聯(lián)的數(shù)據(jù)組。

還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。

// 結(jié)語

數(shù)據(jù)可視化在B端設(shè)計(jì)場景中發(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án)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

通過構(gòu)建伙伴認(rèn)知、滿足情感互動、增強(qiáng)沉浸體驗(yàn)等手段，增強(qiáng)AI伙伴的曝光率，進(jìn)一步向用戶傳達(dá)智能搜索感知，促進(jìn)搜索行為轉(zhuǎn)化。

一、項(xiàng)目背景

語音搜索場景在功能不斷迭代的同時(shí)，也在探索更年輕化的玩法、傳遞更多元的體驗(yàn)感受。在產(chǎn)品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經(jīng)實(shí)現(xiàn)，但從產(chǎn)品形態(tài)以及用戶反饋上看，還沒有達(dá)到可情感互動的效果。所以在本次迭代上，我們著重從情感聯(lián)結(jié)、閑聊互動的維度，對語音搜索進(jìn)行創(chuàng)新性嘗試。

二、設(shè)計(jì)挑戰(zhàn)與目標(biāo)

圍繞項(xiàng)目背景，從現(xiàn)在語音搜索的用戶行為與框架來看，有幾個(gè)比較明確的問題：

• 數(shù)字人引入后，發(fā)現(xiàn)用戶對人物的點(diǎn)擊行為和聊天訴求均有增加，但由于功能受限，數(shù)字人沒有辦法給到及時(shí)回應(yīng)。用戶情感抒發(fā)得不到反饋；
• 用戶一搜即走，不會停留在語音搜索場景探索其他可玩功能。

因?yàn)榍捌谠谡Z音搜索的優(yōu)化中，已經(jīng)嘗試在面板中引入AI形象，上線后用戶反響強(qiáng)烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時(shí)語音搜索引入AI伙伴是體現(xiàn)同行業(yè)差異化的有力創(chuàng)新點(diǎn)，從行業(yè)報(bào)告《2021年中國智能語音市場分析報(bào)告》中，也闡述了打造沉浸感語音搜索體驗(yàn)與引入AI是目前智能語音市場的發(fā)展趨勢。

綜合以上原因，設(shè)計(jì)團(tuán)隊(duì)在與產(chǎn)品討論過后，達(dá)成本次升級的核心目標(biāo)：

• 構(gòu)建伙伴認(rèn)知：強(qiáng)化“AI伙伴”認(rèn)知，激發(fā)語音搜索行為。
• 滿足情感互動：完善語音搜索場景情感化互動體驗(yàn)，滿足用戶期待。
• 增強(qiáng)沉浸體驗(yàn)：打造可搜索、可互動、可操控、可定制等沉浸式語音搜索場景。

三、設(shè)計(jì)舉措

1、構(gòu)建認(rèn)知 - 語音搜索基礎(chǔ)框架升級

在舊頁面中，語音面板限制了人物與按鈕的展現(xiàn)，人物既要承載功能反饋又需要作為物理操作按鍵進(jìn)行點(diǎn)擊操作，與用戶認(rèn)知相悖且也不利于功能擴(kuò)展。因此在新版本設(shè)計(jì)中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關(guān)系。

我們將語音搜索頁面框架分為主要功能與輔助功能區(qū)。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發(fā)起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強(qiáng)情緒傳遞感的同時(shí)保證框架可拓展性。

同時(shí)，將原堆積在面板中的功能與信息按優(yōu)先級歸位，確保頁面信息清晰易讀、功能操作熱區(qū)無重疊、信息反饋區(qū)無干擾。新框架上線后，AI伙伴互動與語音搜索的認(rèn)知關(guān)系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導(dǎo)流增加，面板退出率下降。

2、引入情感 - 全場景情感化體驗(yàn)提升

除了通過框架層面進(jìn)行認(rèn)知優(yōu)化之外，為營造更貼合“人”的互動體驗(yàn)與情感建立，我們又根據(jù)語音場景對每個(gè)狀態(tài)進(jìn)行了情感體驗(yàn)升級。改版上線后，用戶閑聊訴求和互動點(diǎn)擊行為均有所提升，從而驗(yàn)證情感化的體驗(yàn)提升，滿足了用戶互動訴求。

1）情感化引導(dǎo)提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實(shí)體，同時(shí)使用年輕化的引導(dǎo)語氣拉近與用戶間的距離，增加數(shù)字人曝光，建立新用戶心理預(yù)期，激發(fā)興趣點(diǎn)提轉(zhuǎn)化。

2）互動提示規(guī)則升級：圍繞“人”的真實(shí)情感，通過彈出氣泡的方式模擬AI伙伴狀態(tài)，比如聽歌、讀書、游戲。以此引發(fā)用戶點(diǎn)擊或進(jìn)行互動行為嘗試。并且配合AI伙伴升級引導(dǎo)規(guī)則，使引導(dǎo)能夠根據(jù)不同場景進(jìn)行適配，保證其既可以承接語音常規(guī)引導(dǎo)功能，又可以承接負(fù)一樓聊天互動，點(diǎn)擊氣泡可跳轉(zhuǎn)對應(yīng)負(fù)一樓場景、聯(lián)動數(shù)字人語境內(nèi)容，避免造成場景情感化割裂。 

3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態(tài)反饋，想要模擬更真實(shí)的“人”的狀態(tài)，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態(tài)、指令響應(yīng)、引導(dǎo)等5種狀態(tài)。對應(yīng)不同的狀態(tài)，規(guī)劃相應(yīng)的數(shù)字人反饋動作或組合使用方式，可復(fù)用拓展其他相關(guān)場景，為設(shè)計(jì)與開發(fā)提效。

3、感知升級 - 營造沉浸視覺氛圍

確定了產(chǎn)品主要改版方向后，通過對目標(biāo)的提煉，提取設(shè)計(jì)關(guān)鍵點(diǎn)「年輕化」與「情感化」，配合AI伙伴形象，需要呈現(xiàn)出輕松活力的氛圍感，設(shè)計(jì)中運(yùn)用了大面積的毛玻璃質(zhì)感，使場景更加輕盈、沉浸。通過對色彩的運(yùn)用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設(shè)計(jì)突破。

1）定義視覺風(fēng)格：圍繞改版目標(biāo)，定義設(shè)計(jì)關(guān)鍵詞，由關(guān)鍵詞延伸設(shè)計(jì)風(fēng)格要點(diǎn)。

2）形色字構(gòu)質(zhì)動：從「形色字質(zhì)構(gòu)」5個(gè)方面提煉設(shè)計(jì)特征。

基于視覺方向及特征提煉，在質(zhì)感、形狀、顏色三個(gè)設(shè)計(jì)中改動最大的方向詳細(xì)描述。

• 質(zhì)感：設(shè)計(jì)趨勢不斷變化，半透明磨砂質(zhì)感是近期流行的視覺風(fēng)格，透過表層可看到背景模糊形態(tài)，有強(qiáng)化品質(zhì)感、突出層級以及營銷氛圍感的特點(diǎn)，同時(shí)匹配視覺方向「輕盈」的特征。

• 形狀：在形狀的設(shè)計(jì)上，整體界面元素保持大量帶有弧度的形狀運(yùn)用，提高面板、按鈕、圖標(biāo)、彈窗等元素的曲線比例，讓界面始終保持年輕態(tài)，給人圓潤、親和的感受。

• 顏色：顏色的運(yùn)用為本次改版的重中之重，是打造年輕化氛圍感知的基石。

考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應(yīng)，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。

①基礎(chǔ)色彩范圍制定：

以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進(jìn)行歸類處理，從中提取主題色系，從搜索色庫中對應(yīng)選出主題色環(huán)。

②如何在數(shù)字人裝扮中提取主體色：

我們需要把色彩量化，建立特定場景取色規(guī)則，根據(jù)規(guī)則層層篩選，我們可以從中獲取N種主體侯選色。

③校正主體色，與搜索智庫色彩形成映射關(guān)系：

通過對數(shù)字人裝扮的色彩分類，我們以H值為標(biāo)準(zhǔn)，通過調(diào)整S值與B值，劃分了12個(gè)色相，設(shè)定對應(yīng)色系的H值區(qū)間范圍，如智能取色色值在該色相區(qū)間范圍內(nèi)，且吸取到的候選色個(gè)數(shù)最多，就在對應(yīng)的色庫卡中選取主體色。

校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度

④建立輔助色搭配規(guī)則：

為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點(diǎn)，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調(diào)的一致性，其次利用對比色和互補(bǔ)色，選擇更加豐富多元的色相，制造更強(qiáng)烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。

⑤組件化思維拆解頁面元素：

在梳理了智能取色機(jī)制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現(xiàn)，那么在做到視覺減負(fù)的同時(shí)，如何能靈活的替換對應(yīng)元素呢？

我們以組件化思維去拆分設(shè)計(jì)，進(jìn)行立體化的分層，將引導(dǎo)層（熱詞推薦引導(dǎo)關(guān)注）、信息展示層（承接語音各類狀態(tài)與信息）、形象層（強(qiáng)化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據(jù)需要進(jìn)行顏色延展，保證視覺樣式達(dá)成橫向統(tǒng)一，呈現(xiàn)出更加豐富的視覺內(nèi)容，避免審美疲勞。

總結(jié)本次語音搜索的改版升級，我們通過“構(gòu)建伙伴認(rèn)知、滿足情感互動、增強(qiáng)沉浸體驗(yàn)”等手段，增強(qiáng)AI伙伴的曝光率，進(jìn)一步向用戶傳達(dá)智能搜索的感知，從而促進(jìn)搜索行為轉(zhuǎn)化。

構(gòu)建認(rèn)知過程中強(qiáng)化AI伙伴形象，增強(qiáng)語音搜索功能拓展性；同時(shí)結(jié)合“情感化”等全場景引導(dǎo)手段，營造更貼合“人”的互動體驗(yàn)與情感建立，對每個(gè)狀態(tài)進(jìn)行了情感體驗(yàn)升級；最后重新定制視覺風(fēng)格，圍繞「年輕化」關(guān)鍵點(diǎn)對整體氛圍進(jìn)行強(qiáng)化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗(yàn)也得到了顯著提升。

四、寫在最后

我們正處于數(shù)字化快速變革的時(shí)代，傳統(tǒng)工具的基礎(chǔ)功能已不再滿足用戶的訴求，人們的感官也從現(xiàn)實(shí)空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個(gè)信息輸入-結(jié)果輸出的傳統(tǒng)搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達(dá)、情感和學(xué)習(xí)能力，滿足人們更高層次的情感訴求的同時(shí)，也可以讓搜索更加簡單有趣。

未來我們持續(xù)對語音搜索進(jìn)行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗(yàn)，創(chuàng)造出更多有趣的、創(chuàng)新的、別出心裁的年輕化設(shè)計(jì)。

---

作者：百度MEUX
鏈接：https://www.zcool.com.cn/article/ZMTQ5NTc3Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

作者：百度MEUX      來源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司