百度小說(shuō)是百度APP內(nèi)的垂直頻道，擁有過(guò)億月活和行業(yè)最全的正版書(shū)籍。隨著著作權(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ì)員專屬的頻道和書(shū)庫(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分鐘、書(shū)架省錢提示、挽留彈窗和降級(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ì)員書(shū)庫(kù)的數(shù)量和類目、拓展會(huì)員權(quán)益，讓用戶閱讀到更加豐富的小說(shuō)內(nèi)容和體驗(yàn)到更多權(quán)益的會(huì)員服務(wù)。小說(shuō)書(shū)庫(kù)的付費(fèi)和免費(fèi)書(shū)數(shù)量大幅擴(kuò)充，且書(shū)籍類型新增了有聲書(shū)和短篇故事，增添了小說(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倍書(shū)幣等權(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ì)( www.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ì)公司
百度酒店以比價(jià)為核心特色，經(jīng)歷多次設(shè)計(jì)探索，初步建立了用戶認(rèn)知。
設(shè)計(jì)中通過(guò)“核心流程分析-明確用戶關(guān)注信息-探索比價(jià)價(jià)值”的方式去制定設(shè)計(jì)策略，并在方案探索與落地階段，通過(guò)思路發(fā)散、多輪數(shù)據(jù)驗(yàn)證與方案迭代，驗(yàn)證了“氛圍感知強(qiáng)化、價(jià)值信息傳達(dá)、聚合比價(jià)”等設(shè)計(jì)手段的作用，希望給服務(wù)和電商等比價(jià)類產(chǎn)品的設(shè)計(jì)師一些啟發(fā)和參考。
一、項(xiàng)目背景
酒店住宿在線預(yù)訂市場(chǎng)中，各個(gè)平臺(tái)基于用戶權(quán)益、運(yùn)營(yíng)補(bǔ)貼等差異進(jìn)行著激烈的價(jià)格競(jìng)爭(zhēng)，導(dǎo)致行業(yè)存在天然的價(jià)差。而在我們進(jìn)行的一次酒店預(yù)訂訪談中發(fā)現(xiàn)，超過(guò)半數(shù)的用戶在預(yù)訂酒店時(shí)會(huì)進(jìn)行比價(jià)，而比價(jià)的用戶中多數(shù)會(huì)使用2個(gè)以上的酒店APP。因此，在市場(chǎng)存在價(jià)差且用戶有比價(jià)訴求的背景下，百度酒店通過(guò)接入多家供給及會(huì)員低價(jià)，旨在建立酒店聚合比價(jià)平臺(tái)，為用戶提供性價(jià)比最高的酒店搜索服務(wù)。
二、設(shè)計(jì)策略與落地觸點(diǎn)
1.目標(biāo)和策略制定
在上述背景下，我們與產(chǎn)品側(cè)對(duì)齊業(yè)務(wù)目標(biāo)，結(jié)合對(duì)用戶訴求的分析，確定了設(shè)計(jì)目標(biāo)。
為了達(dá)成設(shè)計(jì)目標(biāo)，需要明確比價(jià)在酒店預(yù)訂的各個(gè)觸點(diǎn)下對(duì)用戶的價(jià)值是什么，以探索比價(jià)如何發(fā)揮作用。下圖列出了酒店預(yù)訂的核心流程、核心模塊及用戶關(guān)注信息，由于用戶在各個(gè)環(huán)節(jié)關(guān)注的信息不同，比價(jià)所能發(fā)揮的價(jià)值也就不同，因此基于比價(jià)是否影響用戶進(jìn)行選擇和決策，我們又將核心流程分成服務(wù)報(bào)價(jià)選擇前、服務(wù)報(bào)價(jià)選擇時(shí)、服務(wù)報(bào)價(jià)選擇后。
設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)也對(duì)應(yīng)上述3個(gè)環(huán)節(jié)如下圖：
2.明確落地觸點(diǎn)
為了找到一些好的比價(jià)概念和價(jià)值的傳達(dá)方式，以及提升比價(jià)體驗(yàn)的方式，我們進(jìn)行了競(jìng)品調(diào)研，競(jìng)品包含酒店、商品等不同行業(yè)，調(diào)研結(jié)論歸納如下：
結(jié)合競(jìng)品調(diào)研結(jié)論，我們根據(jù)百度酒店的核心流程和觸點(diǎn)進(jìn)行了設(shè)計(jì)策略的拆解，建立了策略和落地的映射關(guān)系。
三、方案探索與落地
1.提升感知-讓用戶知道百度酒店可以比價(jià)
這一環(huán)節(jié)的設(shè)計(jì)目標(biāo)是要讓用戶知道百度酒店可以比價(jià)，以吸引用戶在百度酒店完成下單行為，因此清晰、有吸引力的比價(jià)元素設(shè)計(jì)十分重要。基于競(jìng)品調(diào)研內(nèi)容，我們進(jìn)行了設(shè)計(jì)探索。
1）酒店列表-氛圍感知強(qiáng)化及價(jià)值信息傳達(dá)
下圖所示為酒店列表比價(jià)設(shè)計(jì)的探索過(guò)程，最初的方案，為了保證酒店信息的獲取體驗(yàn)，采用了與傳統(tǒng)酒店預(yù)訂平臺(tái)采用一致的結(jié)構(gòu)和信息優(yōu)先級(jí)，僅結(jié)合圖片區(qū)域和價(jià)格做了比價(jià)信息的結(jié)合，但這種設(shè)計(jì)與傳統(tǒng)酒店預(yù)訂平臺(tái)差異很小，比價(jià)感知和價(jià)值的傳達(dá)效果并不好。因此設(shè)計(jì)側(cè)轉(zhuǎn)變思路，在酒店列表中通過(guò)更強(qiáng)化的模塊來(lái)突出比價(jià)的感知，同時(shí)結(jié)合“比某平臺(tái)低xx”的文案說(shuō)明比價(jià)結(jié)果，傳達(dá)“比價(jià)獲得更低價(jià)”的感知。
酒店列表覆蓋多個(gè)場(chǎng)景，為了建立百度酒店一致的體驗(yàn)和認(rèn)知，我們將列表的設(shè)計(jì)覆蓋到了搜索結(jié)果頁(yè)和小程序的多個(gè)頁(yè)面，如圖所示。
2）房型及服務(wù)報(bào)價(jià)-基于低價(jià)推薦去強(qiáng)化比價(jià)
房型及服務(wù)報(bào)價(jià)模塊對(duì)應(yīng)酒店精準(zhǔn)需求和酒店詳情頁(yè)，與酒店列表思路一致，方案在逐漸與傳統(tǒng)酒店預(yù)訂平臺(tái)產(chǎn)生差異化，去強(qiáng)化比價(jià)、低價(jià)的感知，形成記憶點(diǎn)。
下圖為搜索結(jié)果頁(yè)的方案，最初外露了多個(gè)房型，以滿足用戶的選擇訴求，但從用戶行為數(shù)據(jù)來(lái)看，百度酒店的絕大多數(shù)用戶會(huì)選擇酒店的最低價(jià)房型及報(bào)價(jià)，因此我們調(diào)整設(shè)計(jì)方案，結(jié)合最低報(bào)價(jià)，用模塊式的對(duì)比方式去強(qiáng)化比價(jià)，并通過(guò)“低價(jià)立省xx”的信息去傳達(dá)低價(jià)感知。另外，這一部分的設(shè)計(jì)也和聚合比價(jià)有所結(jié)合，后面會(huì)進(jìn)行詳細(xì)的說(shuō)明。
詳情頁(yè)的主要模塊設(shè)計(jì)與搜索結(jié)果頁(yè)基本一致，如下圖所示，詳情頁(yè)中將最低報(bào)價(jià)作為低價(jià)房型推薦，以建立一致的比價(jià)認(rèn)知同時(shí)便于用戶快捷預(yù)訂低價(jià)。另外，在常規(guī)的報(bào)價(jià)列表中，為了提升用戶查找報(bào)價(jià)的效率，相比于最低價(jià)房型，采用了弱化的形式。最終方案上線后，數(shù)據(jù)上也取得了正向的效果，報(bào)價(jià)展現(xiàn)到預(yù)訂點(diǎn)擊的轉(zhuǎn)化得到了提升。
3）“產(chǎn)品縫隙”中的比價(jià)概念滲透
“產(chǎn)品縫隙”并不像上述列表模塊那樣感知強(qiáng)烈，設(shè)計(jì)的目的是為了進(jìn)一步加深“百度酒店可以比價(jià)”的用戶印象。結(jié)合百度酒店的核心頁(yè)面，我們重新設(shè)計(jì)了酒店列表和房型報(bào)價(jià)列表的加載態(tài)，利用“多資源方交替動(dòng)效+文案說(shuō)明”的方式，構(gòu)建動(dòng)態(tài)的比價(jià)感知，在用戶進(jìn)入頁(yè)面或者進(jìn)行篩選等場(chǎng)景時(shí)會(huì)出現(xiàn)。另外，我們也利用了小程序首頁(yè)和詳情頁(yè)的頁(yè)尾，在閱讀結(jié)束時(shí)去傳達(dá)全網(wǎng)比價(jià)的概念。
2.建立認(rèn)知-聚合比價(jià)模式的構(gòu)建
在競(jìng)品調(diào)研部分，我們提到了聚合比價(jià)模式，百度酒店由于報(bào)價(jià)復(fù)雜，也適合用這種方式去簡(jiǎn)化報(bào)價(jià)。
如圖所示，常規(guī)酒店預(yù)訂平臺(tái)，同一房型（如標(biāo)準(zhǔn)大床房）會(huì)存在不同服務(wù)政策（早餐服務(wù)、取消規(guī)則、支付方式）的報(bào)價(jià)，而在百度酒店中，由于又加入了預(yù)訂平臺(tái)的差異，報(bào)價(jià)會(huì)更加復(fù)雜，數(shù)量更多且同質(zhì)化嚴(yán)重，即服務(wù)政策相同，僅預(yù)訂平臺(tái)不同的報(bào)價(jià)多次出現(xiàn)，這就導(dǎo)致了報(bào)價(jià)列表的查看和選擇效率較低。
聚合比價(jià)模式就是要將這些服務(wù)政策相同的報(bào)價(jià)聚合在一起進(jìn)行比價(jià)，以簡(jiǎn)化報(bào)價(jià)列表提升選擇效率，同時(shí)在服務(wù)相同的情況下，絕大部分用戶會(huì)更傾向于低價(jià)，在報(bào)價(jià)聚合后，可以突出低價(jià)以便用戶預(yù)訂。
我們也在探索如何讓聚合比價(jià)更簡(jiǎn)單，初始方案采用點(diǎn)擊展開(kāi)的形式，用戶可以保持滑動(dòng)瀏覽的交互體驗(yàn)，整個(gè)過(guò)程的交互體驗(yàn)比較流暢，但頁(yè)面的層級(jí)關(guān)系較為復(fù)雜，用戶認(rèn)知成本高。因此我們又嘗試了調(diào)起面板展示比價(jià)詳情，讓用戶聚焦在當(dāng)前報(bào)價(jià)的對(duì)比，并通過(guò)模塊式的設(shè)計(jì)，清晰羅列了每個(gè)平臺(tái)的服務(wù)、優(yōu)惠明細(xì)等差異信息，讓信息的對(duì)比更高效，同時(shí)強(qiáng)化低價(jià)平臺(tái)，與前面的比價(jià)模塊保持認(rèn)知一致。
聚合比價(jià)模式下，存在了兩種用戶路徑，如圖所示。用戶可以直接選擇最低價(jià)資源方完成預(yù)訂，也可以通過(guò)比價(jià)詳情彈層，查看針對(duì)同一服務(wù)的所有平臺(tái)報(bào)價(jià)，對(duì)比平臺(tái)的詳細(xì)服務(wù)、優(yōu)惠差異后再選擇預(yù)訂。
這種預(yù)訂模式的目的，一方面在教育用戶建立百度酒店可以比價(jià)、可以買到低價(jià)的認(rèn)知，另一方面也提升了用戶選擇低價(jià)平臺(tái)的效率。另外，聚合比價(jià)要具有清晰的規(guī)則才能被理解和信任，在比價(jià)詳情中，為了進(jìn)一步降低認(rèn)知成本，我們通過(guò)標(biāo)題突出了聚合項(xiàng)，并增加了比價(jià)說(shuō)明入口，讓聚合規(guī)則更明確。聚合比價(jià)的方案上線后，報(bào)價(jià)的預(yù)訂點(diǎn)擊到成單轉(zhuǎn)化也得到了提升。
另外，前文提到的精準(zhǔn)需求搜索結(jié)果頁(yè)和詳情頁(yè)的低價(jià)房型推薦也利用了這種模式，不過(guò)在比價(jià)感知上做了更強(qiáng)化的處理。用戶可以在詳情頁(yè)直接點(diǎn)擊各個(gè)平臺(tái)報(bào)價(jià)完成預(yù)訂，也可以點(diǎn)擊文字部分查看房型詳情，在頁(yè)面底部的比價(jià)詳情中完成報(bào)價(jià)的對(duì)比和預(yù)訂。
3.強(qiáng)化記憶-比價(jià)價(jià)值感的再次強(qiáng)化
填單場(chǎng)景是在預(yù)訂完成后，這個(gè)環(huán)節(jié)我們可以將比價(jià)的概念和價(jià)值再次展示給用戶，以加深用戶對(duì)比價(jià)的認(rèn)知。這里的設(shè)計(jì)手段與“提升感知”階段類似，如圖所示為一些方案探索，在用戶選擇低價(jià)平臺(tái)預(yù)訂，點(diǎn)擊跳轉(zhuǎn)至填單頁(yè)后，我們會(huì)強(qiáng)化用戶“預(yù)訂到最低價(jià)”以及“為用戶節(jié)省xx元”的感知。另外，在用戶提交訂單時(shí)，會(huì)存在一定的加載時(shí)間，我們也利用了這里的“產(chǎn)品縫隙”，結(jié)合加載態(tài)繼續(xù)傳遞低價(jià)、省錢的認(rèn)知。
四、結(jié)語(yǔ)
回顧百度酒店的比價(jià)設(shè)計(jì)過(guò)程，我們以比價(jià)及低價(jià)感知傳達(dá)、高效預(yù)訂低價(jià)為設(shè)計(jì)目標(biāo)，基于百度酒店的核心預(yù)訂流程，探索比價(jià)在各個(gè)環(huán)節(jié)如何發(fā)揮作用，進(jìn)而將設(shè)計(jì)目標(biāo)的實(shí)現(xiàn)劃分為了“提升感知、建立認(rèn)知、強(qiáng)化記憶”三個(gè)階段，并為業(yè)務(wù)帶來(lái)轉(zhuǎn)化提升。
提升感知過(guò)程結(jié)合流程中的主要模塊，通過(guò)模塊式對(duì)比形式、傳達(dá)比價(jià)價(jià)值感、基于低價(jià)推薦強(qiáng)化比價(jià)、以及利用“產(chǎn)品縫隙”等手段，去吸引用戶了解和使用比價(jià)；建立認(rèn)知過(guò)程利用“聚合比價(jià)”模式去精簡(jiǎn)報(bào)價(jià)，同時(shí)結(jié)合對(duì)低價(jià)報(bào)價(jià)、低價(jià)平臺(tái)的強(qiáng)化，讓用戶更便捷的預(yù)訂低價(jià)；最后強(qiáng)化記憶的環(huán)節(jié)，我們進(jìn)行了一些方案嘗試，再次強(qiáng)調(diào)比價(jià)的價(jià)值。另外，為了建立一致的比價(jià)認(rèn)知，整體的設(shè)計(jì)中也堅(jiān)持一致性的原則。百度酒店的比價(jià)設(shè)計(jì)也在不斷地嘗試和優(yōu)化中，希望能給用戶創(chuàng)造更好的使用體驗(yà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ì)( www.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)品中極其重要的一部分，它能快速將內(nèi)容的狀態(tài)及變化通過(guò)不同的方式傳達(dá)給用戶，以便用戶在收到信息后根據(jù)所傳遞的內(nèi)容及時(shí)做出應(yīng)對(duì)策略。
在這里，有一個(gè)很現(xiàn)實(shí)的問(wèn)題，很多產(chǎn)品喜歡一股腦的把有效的/無(wú)效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么，你的推送渠道真的用對(duì)了嗎？是否做了信息優(yōu)先級(jí)區(qū)分？推送時(shí)間段是否有效？站在用戶角度，下面這些場(chǎng)景你肯定碰到過(guò)：
◇ 手機(jī)屏幕總是頻繁彈出信息，接二連三的震動(dòng)、提示音讓你一怒之下卸載了一些不太常用的APP；
◇ 桌面圖標(biāo)99+、主頁(yè)的消息入口99+、進(jìn)入消息分類還是99+，清理起來(lái)非常麻煩，還不如關(guān)閉幾個(gè)分類通知，少一個(gè)也能緩口氣；
◇ 一天少看了幾個(gè)小視頻，好不容易節(jié)省出來(lái)的流量被通知無(wú)情的消耗，還不如關(guān)閉系統(tǒng)通知權(quán)限來(lái)得快；
◇ 每隔一段時(shí)間，都要在手機(jī)短信中回復(fù)一大堆TD（退訂），想吐的感覺(jué)；
◇ ......
在頻繁地打擾下，用戶關(guān)閉了一個(gè)個(gè)通知權(quán)限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶求留?。ú糠钟脩衾猛ㄖ湍鼙３謱?duì)微信、QQ的控制欲），做的不好就會(huì)起到負(fù)面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個(gè)“度”。
用戶可能因?yàn)橐粭l走心的推送而轉(zhuǎn)化、也可能因?yàn)楸淮驍_而放棄使用，站在設(shè)計(jì)角度，需盡可能打造讓用戶更喜歡的通知系統(tǒng)。那么，對(duì)于不同的業(yè)務(wù)需求及使用場(chǎng)景，又該如何差異化的進(jìn)行消息推送，筆者通過(guò)本文進(jìn)行分析總結(jié)，與大家一起了解。
一、消息推送的基本知識(shí)
二、消息通知渠道
三、讓用戶再次開(kāi)啟通知權(quán)限
四、提高觸達(dá)率的小技巧
五、結(jié)語(yǔ)
消息通知是產(chǎn)品提供的一項(xiàng)服務(wù)，能夠及時(shí)將產(chǎn)品的期待或內(nèi)容的變化、根據(jù)其等級(jí)權(quán)重合理的通過(guò)不同渠道及時(shí)同步給用戶，常見(jiàn)的如互動(dòng)提醒、老用戶召回、活動(dòng)拉新、產(chǎn)品更新或幫助提醒等，通過(guò)站內(nèi)紅點(diǎn)、彈窗、短信、郵件等方式與用戶進(jìn)行信息交換。
用戶層面，方便及時(shí)獲取到想要知道的信息、以及對(duì)信息交換的控制權(quán)。例如：用戶發(fā)布一條新的短視頻想要對(duì)評(píng)論/點(diǎn)贊及時(shí)掌控、給心上人發(fā)了信息想在第一時(shí)間看到回復(fù)...等，產(chǎn)品也是借此用戶對(duì)內(nèi)容的控制欲，利用消息推送提升用戶的使用體驗(yàn)。
產(chǎn)品層面，通過(guò)主動(dòng)推送想讓用戶知道的信息，以達(dá)到新/老用戶轉(zhuǎn)化的目的。例如：通過(guò)手機(jī)短信形式發(fā)放優(yōu)惠券對(duì)老用戶召回、應(yīng)用內(nèi)通知或桌面推送對(duì)用戶拉新...等，以此提高產(chǎn)品收益，獲取更大的商業(yè)價(jià)值。
首先，一個(gè)好的消息系統(tǒng)首先需要將消息內(nèi)容設(shè)計(jì)的全面，以便用戶通過(guò)消息通知能準(zhǔn)確無(wú)誤的了解到對(duì)應(yīng)內(nèi)容；
其次，消息的觸達(dá)方式需合理有效，必須提供便捷的操作入口以供用戶及時(shí)反饋；
另外，為了避免過(guò)于打擾用戶，需選擇合理的推送渠道，提高用戶觸達(dá)概率及反饋效率。
消息通知渠道分為應(yīng)用內(nèi)通知應(yīng)用外通知。應(yīng)用內(nèi)通知主要來(lái)源于消息中心或系統(tǒng)主動(dòng)觸發(fā)的彈窗來(lái)體現(xiàn)，而應(yīng)用外通知包括桌面圖標(biāo)紅點(diǎn)、手機(jī)短信、電子郵件、push、公眾號(hào)信息（需綁定）等渠道推送。
1）消息功能入口
消息功能入口提示也稱為紅點(diǎn)提示，主要有底部Tad欄、首頁(yè)右上角、個(gè)人中心右上角三種形式。當(dāng)有新的通知出現(xiàn)時(shí)，對(duì)應(yīng)圖標(biāo)的右上角會(huì)出現(xiàn)小紅點(diǎn)提示，清晰明了，關(guān)于小紅點(diǎn)設(shè)計(jì)，之前《小紅點(diǎn)篇 | 用好這招，讓用戶的觸達(dá)率大幅度提升！》這篇文章有詳細(xì)說(shuō)明。
紅點(diǎn)提示的用戶觸達(dá)率較高，但需要用戶在登錄狀態(tài)下才能查看，比如訂單狀態(tài)變化、用戶與用戶/產(chǎn)品之間的互動(dòng)消息、產(chǎn)品活動(dòng)通知等。
2）消息列表
當(dāng)產(chǎn)品的消息類型較多時(shí)，點(diǎn)擊消息功能入口即可跳轉(zhuǎn)至二級(jí)分類列表。與上述相比，消息列表的內(nèi)容則更加清晰，通過(guò)第一次消息入口功能的引導(dǎo)觸發(fā)，這里的用戶觸達(dá)率將成倍增加。
3）彈窗通知
以彈窗的形式覆蓋在頁(yè)面內(nèi)容頂層，阻礙用戶的當(dāng)前操作并迫使用戶對(duì)彈窗做出決策，可以是系統(tǒng)主動(dòng)彈出或用戶手動(dòng)觸發(fā)，對(duì)用戶的干擾極大。
彈窗通知最大的優(yōu)勢(shì)在于會(huì)100%被用戶看到，無(wú)法忽略，否則將不能進(jìn)行其他操作，很適合產(chǎn)品的一些重要事件提醒，例如應(yīng)用升級(jí)、活動(dòng)通知、優(yōu)惠券引流等。
4）Toast 通知
Toast通知是用戶在操作之后給出的即時(shí)反饋，與當(dāng)前頁(yè)面內(nèi)容關(guān)聯(lián)性極強(qiáng)，但不會(huì)中斷用戶的操作，出現(xiàn)的時(shí)間很短，一般持續(xù)3秒后自動(dòng)消失，對(duì)用戶的干擾也比較小。
需要注意的是，Toast容易在用戶不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉(zhuǎn)的輕量提示，例如刪除成功、提交成功等。
1）桌面小紅點(diǎn)
小紅點(diǎn)通常以圓點(diǎn)+數(shù)字的形式出現(xiàn)在圖標(biāo)右上角，用來(lái)提示應(yīng)用內(nèi)的未讀消息數(shù)量，進(jìn)入應(yīng)用查看或清除后小紅點(diǎn)則會(huì)消失。桌面小紅點(diǎn)有一個(gè)必備前提，需要同時(shí)開(kāi)啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限方能接收提醒通知。
在部分應(yīng)用中，桌面小紅點(diǎn)具有較大的價(jià)值，能對(duì)用戶產(chǎn)生積極的影響，使用頻率得到進(jìn)一定的提升。例如：社交類應(yīng)用中的私信、評(píng)論、點(diǎn)贊等；商家端的咨詢信息、下單提醒等，用戶在看到后都會(huì)有強(qiáng)烈的點(diǎn)擊欲望，對(duì)一些數(shù)據(jù)的提升起到推動(dòng)作用。
2）PUSH推送
PUSH推送通知常見(jiàn)于設(shè)備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區(qū)域，用戶可從卡片中的內(nèi)容獲取信息類型及重要程度，用以決策是否需要立即打開(kāi)。
這種推送方式，用戶幾乎很難忽略，不處理的話會(huì)長(zhǎng)時(shí)間浮于屏幕之上，非常適合價(jià)值及時(shí)效性較高的消息通知。除視覺(jué)提醒之外，還可通過(guò)聽(tīng)覺(jué)觸達(dá)用戶，例如支付號(hào)、微信的收款信息等，不過(guò)依然要同時(shí)開(kāi)啟設(shè)備和應(yīng)用內(nèi)的通知權(quán)限。
3）手機(jī)短信
短信推送是大家很熟悉的通知渠道了，畢竟現(xiàn)在都是用手機(jī)注冊(cè)賬號(hào)，手機(jī)號(hào)獲取難度幾乎為“0”，常見(jiàn)的有驗(yàn)證碼短信（用戶請(qǐng)求）、營(yíng)銷短信（產(chǎn)品推送）兩種：
驗(yàn)證碼類似“一問(wèn)一答”的互動(dòng)，沒(méi)有什么特別的玩法；
營(yíng)銷類短信對(duì)于拉取新用戶、老用戶召回、節(jié)日/活動(dòng)促銷能起到不可替代作用，產(chǎn)品可通過(guò)短信發(fā)送圖片、文字以及超鏈接，內(nèi)容的時(shí)效性、用戶的觸達(dá)率都相對(duì)較高。
著重說(shuō)明一點(diǎn)，因?yàn)槎绦磐ㄖ某杀据^高，在使用之前需要足夠的思考分析，細(xì)分用戶群體做到精準(zhǔn)投放，避免所花費(fèi)的成本與產(chǎn)生的價(jià)值不成正比。另外，如果需要放超鏈接，那么短信內(nèi)容一定要有足夠的說(shuō)服力及吸引力，總是被用戶當(dāng)做詐騙短信刪除、舉報(bào)的話還不如不放。
為了減少對(duì)用戶的打擾，讓產(chǎn)品更人性化，一般會(huì)在短信結(jié)尾提供TD（退訂）提示，用戶回復(fù)即可取消后續(xù)的推送，但是否真的取消成功，這就得看產(chǎn)品了(???)...
4）電子郵件
電子郵件推送方式使用的并不多，一方面需要產(chǎn)品有web端服務(wù)，純粹的移動(dòng)端APP郵件推送不會(huì)有什么效果；另一方面，絕大多數(shù)的用戶登錄電子郵箱并不頻繁，還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過(guò)超鏈接直達(dá)內(nèi)容出處，相比APP應(yīng)用，免去了下載等一系列操作，還可以長(zhǎng)時(shí)間滯留，便于用戶隨時(shí)查看或添加星標(biāo)，處理時(shí)間段選擇較為靈活，很適合web端服務(wù)。針對(duì)一些商業(yè)化的郵件推送，也需要花費(fèi)一定的經(jīng)濟(jì)成本。
產(chǎn)品獲取用戶郵箱地址的難度較大（郵箱賬號(hào)除外），不難理解，使用手機(jī)號(hào)一鍵登錄、驗(yàn)證碼登錄、第三方賬號(hào)登錄遠(yuǎn)比郵箱地址登錄要方便的多。除此之外，還可以通過(guò)個(gè)人設(shè)置的添加郵箱、問(wèn)卷調(diào)查的郵箱地址預(yù)留來(lái)獲取，不過(guò)這就要看用戶的主動(dòng)意愿了。
5）公眾號(hào)消息
公眾號(hào)背靠社交應(yīng)用，普及程度及用戶觸達(dá)率是極高的，不過(guò)這需要產(chǎn)品利用部分業(yè)務(wù)、活動(dòng)為導(dǎo)向，引導(dǎo)用戶關(guān)注公眾號(hào)后方能接收到消息通知。
目前公眾號(hào)只能向用戶發(fā)送符合部分場(chǎng)景要求的服務(wù)通知，例如刷卡通知、物流軌跡變化、商品購(gòu)買等。如果預(yù)算足夠的話，還可以購(gòu)買公眾號(hào)列表、內(nèi)容詳情頁(yè)、朋友圈等產(chǎn)品廣告位進(jìn)行特定用戶群體推送，無(wú)需用戶關(guān)注也可以看到并進(jìn)行轉(zhuǎn)化。
用戶一旦關(guān)閉通知權(quán)限，對(duì)產(chǎn)品來(lái)說(shuō)無(wú)疑是一個(gè)損失，這意味著沒(méi)有消息通知的推動(dòng)，用戶的使用頻率以及與產(chǎn)品之間的互動(dòng)顯然會(huì)減少（就連夫妻之間都需要時(shí)?；?dòng)與溝通交流，何況對(duì)于有選擇余地的產(chǎn)品），時(shí)間長(zhǎng)了，用戶轉(zhuǎn)投其他產(chǎn)品的“懷抱”也不是不可能。
有沒(méi)有想過(guò)，用戶只是關(guān)閉通知權(quán)限而已，并沒(méi)有卸載APP，真的就沒(méi)辦法了嗎？是不是該做點(diǎn)什么...
用戶之所以還未卸載APP，說(shuō)明還有價(jià)值，歸根結(jié)底，關(guān)閉通知權(quán)限的原因都是因?yàn)橄⒌摹翱褶Z亂炸”帶來(lái)的無(wú)盡騷擾，幾乎沒(méi)有例外，而產(chǎn)品還會(huì)添上一把火，用戶再次打開(kāi)APP時(shí)無(wú)底線的催促用戶再度開(kāi)啟，耗盡用戶最后一點(diǎn)耐心后，或許再也沒(méi)有機(jī)會(huì)了。
這個(gè)時(shí)候，設(shè)計(jì)師考慮的不是頻繁提醒用戶開(kāi)啟，而是用戶關(guān)閉通知的真正原因（“狂轟亂炸”只是概括），細(xì)化各種可能性，然后從中找出機(jī)會(huì)點(diǎn)，但凡有所改進(jìn)都值得試一試，畢竟相比什么都不做不會(huì)更糟。這么解釋似乎毫無(wú)說(shuō)服力，下面舉個(gè)例子：
當(dāng)產(chǎn)品中的某項(xiàng)免費(fèi)服務(wù)突然有一天開(kāi)始收費(fèi)了，但受到了大多數(shù)用戶的抵觸，這個(gè)時(shí)候你該怎么做，是無(wú)視用戶訴求繼續(xù)收費(fèi)、還是恢復(fù)到之前的免費(fèi)？這并不是一個(gè)選擇題，繼續(xù)收費(fèi)會(huì)導(dǎo)致大量用戶流失、恢復(fù)免費(fèi)可能連維持運(yùn)營(yíng)成本都難，所以不經(jīng)思索的選擇草草收?qǐng)觥⑦B下下策都算不上。用戶抵觸的原因可能收費(fèi)過(guò)高或是與實(shí)際價(jià)值不符，有沒(méi)有想過(guò)利用限時(shí)折扣、附加其他增值服務(wù)（成本較?。┗蛘呓M合捆綁銷售也不失為一種策略。
那么，到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶的心呢？
用戶關(guān)閉通知權(quán)限，并非沒(méi)有需求，最典型的就是在某寶、某東加了滿滿一“車”商品等待降價(jià)，然后抱怨消息通知太吵關(guān)掉了通知權(quán)限，最后就是無(wú)法收到折扣通知、還把問(wèn)題怪在了APP身上，著實(shí)太冤。用戶只要還有需求，通知權(quán)限就還有被重新開(kāi)啟的機(jī)會(huì)。
1）損失厭惡/利益引誘
首先，我們需要找出對(duì)應(yīng)的價(jià)值點(diǎn)，利用優(yōu)秀的文案給予用戶思考的余地，用戶每多思考一會(huì)，結(jié)果都有可能發(fā)生改變。
人們都討厭失去，對(duì)于損失的不可控很難接受，在引導(dǎo)用戶開(kāi)啟通知權(quán)限時(shí)，需要強(qiáng)調(diào)不開(kāi)啟會(huì)失去什么，畢竟面對(duì)“得到”和“失去”時(shí)，損失更加讓人難以忍受，例如物流產(chǎn)品告訴用戶“未開(kāi)啟通知，將錯(cuò)過(guò)重要的快遞信息”。還可以通過(guò)激勵(lì)等進(jìn)行利益引誘，如“開(kāi)啟后能及時(shí)獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶重新開(kāi)啟通知權(quán)限。
2）消息分類/分別處理
每種類型的通知都不可能符合所有用戶的“胃口”，針對(duì)社交、電商類產(chǎn)品，可將通知類型分類處理，用戶希望接收哪種類型的消息單獨(dú)開(kāi)啟即可。
例如支付寶將消息拆分為多個(gè)類型；京東還增加了午休免打擾設(shè)置，開(kāi)啟后在12：30-13：30不會(huì)收到任何消息提醒；微信群過(guò)多、消息太吵時(shí)，開(kāi)啟免打擾又擔(dān)心錯(cuò)過(guò)重要人的信息，于是微信在去年上線了開(kāi)啟群消息免打擾后、可設(shè)置群內(nèi)4個(gè)人的消息正常通知，算是比較人性化的設(shè)計(jì)了。
3）提供關(guān)閉/關(guān)不徹底
部分產(chǎn)品提供了關(guān)閉消息通知功能，但又關(guān)不徹底，這是產(chǎn)品基于妥協(xié)的基礎(chǔ)上，依然在低頻推送消息的“流氓”玩法，與用戶完全關(guān)閉相比，已經(jīng)算是不錯(cuò)的結(jié)果了。
常見(jiàn)于PC客戶端，就像很多軟件的插件一樣，不管怎么關(guān)，總是無(wú)法徹底關(guān)閉，甚至還將開(kāi)啟操作偽裝成其他內(nèi)容引導(dǎo)用戶誤觸；手機(jī)短信推送也會(huì)有這種情況，用戶回復(fù)過(guò)“退訂”后依然會(huì)收到相關(guān)短信。
這種方式需謹(jǐn)慎使用，在用戶關(guān)閉通知后，需通過(guò)后續(xù)推送內(nèi)容的質(zhì)量、頻率試探用戶底線，然后逐漸提升，切不可無(wú)視用戶操作。
反復(fù)推送相同的內(nèi)容只會(huì)讓用戶更加反感，回復(fù)退訂、卸載應(yīng)用都可能在這一刻發(fā)生。
很明顯，消息發(fā)出后，如果用戶的觸達(dá)率較高就沒(méi)必要再次推送。反之觸達(dá)率較低，重復(fù)推送會(huì)讓用戶有種被催促、脅迫的感覺(jué)，適得其反，觸達(dá)率低有沒(méi)有可能是文案不夠友好、表達(dá)不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達(dá)方式，如何想辦法重新引起用戶的關(guān)注才是關(guān)鍵點(diǎn)。
中華文字博大精深，且有56個(gè)民族，其性格習(xí)慣各異，特別在利用當(dāng)前社會(huì)熱點(diǎn)、媒介進(jìn)行的營(yíng)銷推送時(shí)，盡可能規(guī)避掉敏感信息，如地域/民族歧視、性暗示等。
很多時(shí)候，消息推送太少無(wú)法滿足產(chǎn)品目標(biāo)、太多則會(huì)惹惱用戶導(dǎo)致通知權(quán)限被徹底關(guān)閉，所以不僅要考慮消息推送頻率，更重要的是對(duì)受眾群體進(jìn)行分類、分別推送，不要每次都一股腦的將消息發(fā)給所有用戶，當(dāng)然，能做到千人千面（成本大）則會(huì)更好。
沒(méi)有用戶愿意在不明所以的情況下來(lái)看長(zhǎng)篇大論的內(nèi)容，需確保消息內(nèi)容簡(jiǎn)單直接、清晰易懂，并符合用戶認(rèn)知習(xí)慣，還得保持友好的語(yǔ)氣以及富有創(chuàng)造力的品牌形象。
處于營(yíng)銷目的時(shí)，可利用感興趣的事件/事物勾起用戶的點(diǎn)擊欲望，例如網(wǎng)絡(luò)熱詞、時(shí)下熱點(diǎn)等，筆者雖然并不提倡“標(biāo)題黨”，但不得不說(shuō)，很多標(biāo)題黨都能起到不錯(cuò)的效果。
消息通知需要一個(gè)有效操作入口，并且在消息內(nèi)容中有對(duì)應(yīng)的指向，點(diǎn)擊應(yīng)用內(nèi)通知切換APP界面、應(yīng)用外推送鏈接跳轉(zhuǎn)至web頁(yè)，從始至終都需要為用戶提供一個(gè)查看更多內(nèi)容或參與的有效途徑。
消息通知設(shè)計(jì)的主要目的是在正確的時(shí)間、以正確的方式將內(nèi)容呈現(xiàn)給用戶，并提高產(chǎn)品的轉(zhuǎn)化率，不管用戶愿不愿意接受，這始終都是一個(gè)呈現(xiàn)信息的不錯(cuò)途徑。
本文主要總結(jié)了消息的通知渠道、常見(jiàn)問(wèn)題處理、提升用戶觸達(dá)率的方法，以幫助新手設(shè)計(jì)師快速掌握完整的消息系統(tǒng)?；蛟S最終的結(jié)果事與愿違，但不能否認(rèn)其魔力，需要做好的是確保消息內(nèi)容質(zhì)量、對(duì)應(yīng)的受眾群體及合理的推送渠道，相信總有一種方式適合你產(chǎn)品。
作者：大漠飛鷹CYSJ 來(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ì)( www.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ì)公司
前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。因?yàn)橐呱瘫?，所以要使用社?？?，之前我記得用社保結(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開(kāi)始幫我點(diǎn)擊操作。
她覺(jué)得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒(méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺(jué)得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。
在B端產(chǎn)品中也有很多類似問(wèn)題，用戶不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些大數(shù)據(jù)產(chǎn)品，專業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請(qǐng)，引導(dǎo)用戶進(jìn)行使用。
邀請(qǐng)就是引導(dǎo)用戶進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在下這個(gè)界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。
例如：飛書(shū)我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請(qǐng)（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請(qǐng)。
另一種方案是任何時(shí)候都顯示邀請(qǐng)，例如：石墨文檔我的桌面，復(fù)選框一直顯示。
靜態(tài)邀請(qǐng)就是通過(guò)直接在頁(yè)面上給出交互提示，可以讓用戶隨時(shí)看到期望的界面功能。
靜態(tài)邀請(qǐng)主要有兩種模式：引導(dǎo)操作邀請(qǐng)、漫游探索邀請(qǐng)
例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟 引導(dǎo)操作會(huì)占據(jù)頁(yè)面較大的空間，同時(shí)也會(huì)吸引用戶的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁(yè)面和信息層。
另一種引導(dǎo)操作邀請(qǐng)叫作白板式引導(dǎo)。 意思很明確：現(xiàn)在只有一個(gè)空白頁(yè)面，需要引導(dǎo)用戶創(chuàng)建內(nèi)容。
利用空白區(qū)域“變廢為寶”，如何對(duì)該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。
與引導(dǎo)操作邀請(qǐng)關(guān)系密切的是漫游探索邀請(qǐng)。假設(shè)你重新設(shè)計(jì)了某個(gè)頁(yè)面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马?yè)面，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶介紹新功能最好的方法。
1、漫游功能用戶可能不想用，所以需要有可選功能，也就是可以跳過(guò)或關(guān)閉；
2、漫游功能不是“創(chuàng)可貼”不要亂用，只有針對(duì)精心設(shè)計(jì)的界面使用才能發(fā)揮價(jià)值；
3、設(shè)計(jì)漫游的關(guān)鍵在于保持簡(jiǎn)單，讓它容易開(kāi)始也容易停止。漫游應(yīng)該只是頁(yè)面本身的一個(gè)演示。脫離頁(yè)面的“教程”式漫游很難起到作用。
靜態(tài)邀請(qǐng)適合提示用戶當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶經(jīng)常不會(huì)閱讀指導(dǎo)說(shuō)明性的文字。而在用戶交互過(guò)程中，在他們需要的時(shí)候提供邀請(qǐng)則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請(qǐng)就是在用戶交互過(guò)程中的某個(gè)點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。
吸引用戶的一種方式是通過(guò)鼠標(biāo)懸停來(lái)顯示邀請(qǐng)
例如：飛書(shū)消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來(lái)吸引用戶，鼠標(biāo)移入上去后提示可以勾選完成，點(diǎn)擊完成后消息移除列表。
1、當(dāng)操作沒(méi)有內(nèi)容重要，而且希望界面整潔時(shí)，使用懸停邀請(qǐng)。
2、在實(shí)現(xiàn)懸停邀請(qǐng)時(shí)，可以通過(guò)改變光標(biāo)、改變背景和顯示提示條共同配合表明所邀請(qǐng)的操作
3、在交互的不同階段，盡量點(diǎn)綴一些用戶熟悉的元素，通過(guò)熟悉的概念引出新概念有助于用戶快速理解新功能。最常見(jiàn)的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標(biāo)。
4、通過(guò)距離表明邀請(qǐng)操作的目標(biāo)對(duì)象。
唐納德·諾曼將這個(gè)術(shù)語(yǔ)引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門(mén)把手，門(mén)把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒(méi)有物理屬性，不過(guò)，由于習(xí)慣、術(shù)語(yǔ)、圖形及一致性等原因，用戶能夠在某種程度上感覺(jué)到他們可以操作這些元素。
例如：第一張圖飛書(shū)文檔sheet頁(yè)“加號(hào)”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請(qǐng)。用戶沒(méi)觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。
預(yù)期功能邀請(qǐng)之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶順利完成一連串操作。
1、通過(guò)人們習(xí)以為常、司空見(jiàn)慣的概念來(lái)引出新的、不熟悉的交互方式。
2、使用可感知的預(yù)期功能來(lái)給出邀請(qǐng)?zhí)崾?例如，用向下的箭頭表示可以打開(kāi)下拉菜單，而用向上的箭頭表示可以關(guān)閉菜單)
3、把邀請(qǐng)安排在適當(dāng)?shù)纳舷挛闹?，特別是要靠近交互的主體。
設(shè)計(jì)邀請(qǐng)時(shí)怎么才能猜測(cè)用戶的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶下一步可能會(huì)執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶想法，那么面臨的困難就會(huì)比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)點(diǎn)后，進(jìn)行第二個(gè)點(diǎn)連接時(shí)，會(huì)有多種可能性，這個(gè)時(shí)候系統(tǒng)也不確定用戶會(huì)怎樣連接，但會(huì)給出對(duì)應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來(lái)輔助用戶進(jìn)行連接。
例如：這種工作流場(chǎng)景個(gè)人覺(jué)得也算是一種，點(diǎn)擊“加號(hào)”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。 這種在交互期間以可見(jiàn)方式向用戶表明系統(tǒng)推斷出的用戶想法被稱為推論邀請(qǐng)。
圖片類型的更多邀請(qǐng)，例如：站酷相關(guān)推薦
文字更多邀請(qǐng)，例如：QQ郵箱右側(cè)最近聯(lián)系人
精心設(shè)計(jì)的應(yīng)用能夠通過(guò)邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無(wú)論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個(gè)交互層次的有效方法。
謝謝觀看！
搜索的本質(zhì)是什么？無(wú)疑是內(nèi)容的召回和信息的推薦。
可隨著時(shí)代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗(yàn)和彩蛋上也是下了不少功夫，從而進(jìn)一步加強(qiáng)自有產(chǎn)品的競(jìng)爭(zhēng)力與用戶黏性。因此今天就來(lái)盤(pán)點(diǎn)一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗(yàn)流
注重提升搜索過(guò)程中的趣味程度，以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說(shuō)是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂(lè)角色：搜索【滅霸】，頁(yè)面右邊會(huì)打響指，相關(guān)字段會(huì)被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點(diǎn)擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時(shí)搜索結(jié)果頁(yè)會(huì)自動(dòng)計(jì)算成42。貌似也只有讀過(guò)《銀河系漫游指南》的人才能明白其中的奧秘。聽(tīng)說(shuō)是生命、宇宙與萬(wàn)事萬(wàn)物的終極解答。
而且在日常的節(jié)日、活動(dòng)、熱點(diǎn)運(yùn)營(yíng)上，谷歌也從不缺席。都會(huì)在搜索框上用【插畫(huà)、動(dòng)效】等形式承載各種活動(dòng)入口、吸引用戶參與，可以已經(jīng)形成一個(gè)穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開(kāi)學(xué)季、母親節(jié)動(dòng)效。而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時(shí)，頁(yè)面上會(huì)出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁(yè)面會(huì)左右翻過(guò)來(lái)
搜索【跳躍】，頁(yè)面會(huì)在上下跳動(dòng)
搜索【失重】，頁(yè)面上的字會(huì)飄起來(lái)?
而在【活動(dòng)運(yùn)營(yíng)】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計(jì)，力求給用戶一種眼前一亮的感覺(jué)。比如每年的愚人節(jié)，搜索結(jié)果頁(yè)上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計(jì)，各種輕松調(diào)皮的畫(huà)風(fēng) 給不少用戶帶來(lái)了新鮮感和趣味性。
還有在【活動(dòng)入口】的設(shè)計(jì)上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動(dòng)入口’嵌套‘在結(jié)果頁(yè)卡片中間，用活動(dòng)里的ip形象-雪人「抬著」結(jié)果頁(yè)卡片和在上面「滾動(dòng)」
用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計(jì)與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動(dòng)。另外，百度搜索框上面的運(yùn)營(yíng)活動(dòng)入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
注重提升搜索過(guò)程中的交互體驗(yàn)，以增加用戶的操作效率與產(chǎn)品易用性。
代表：蘋(píng)果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機(jī)上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計(jì)算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時(shí)會(huì)自動(dòng)計(jì)算對(duì)應(yīng)的結(jié)果。無(wú)需用戶額外打開(kāi)計(jì)算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤(pán)里，可以根據(jù)輸入詞檢測(cè)+搜索對(duì)應(yīng)的手機(jī)號(hào)碼：當(dāng)你輸入 【打+我或通訊錄好友+電話】時(shí)，鍵盤(pán)上會(huì)自動(dòng)顯示自己或好友的電話號(hào)碼，點(diǎn)擊號(hào)碼就能自動(dòng)粘貼在輸入框中。
用戶無(wú)需前往通訊錄就能輕松「獲知+想起」誰(shuí)誰(shuí)的電話號(hào)碼，大大提升操作體驗(yàn)與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時(shí)，系統(tǒng)會(huì)直接把該結(jié)果所對(duì)應(yīng)的頁(yè)面位置調(diào)取出來(lái)并懸浮展示。用戶可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會(huì)以聚光燈的形式展示各個(gè)結(jié)果入口。選擇具體某個(gè)結(jié)果時(shí)，該入口的聚光燈會(huì)更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點(diǎn)擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢(shì)同樣可以喚出搜索框。
降低「需要往上手指移動(dòng)，才能點(diǎn)擊搜索框」的操作成本，讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時(shí)，搜索框下方會(huì)出現(xiàn)一個(gè)滑塊區(qū)。點(diǎn)擊就會(huì)變成長(zhǎng)條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計(jì)案例，可上：有蛋案例 youdananli.com 近千個(gè)行業(yè)/大廠里的創(chuàng)意案例、上百個(gè)知識(shí)模型、設(shè)計(jì)方法。
讓用戶更方便地將光標(biāo)快速移動(dòng)到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會(huì)前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會(huì)以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無(wú)需觸發(fā)搜索、進(jìn)入結(jié)果頁(yè)才能看到想要查詢的信息。
– END
數(shù)據(jù)保存是Web端工具的基礎(chǔ)功能，一般在產(chǎn)品和技術(shù)框架設(shè)計(jì)之初就已經(jīng)確定了數(shù)據(jù)保存的方式，后續(xù)不太會(huì)頻繁更改。
正因?yàn)槿绱?，在日常需求迭代中，設(shè)計(jì)師很容易忽略數(shù)據(jù)保存的過(guò)程，也很少質(zhì)疑當(dāng)前的保存機(jī)制是否合理，但是當(dāng)需要設(shè)計(jì)新模塊或產(chǎn)品時(shí)就會(huì)對(duì)保存有疑惑。
此外，保存也是一個(gè)受技術(shù)限制較大的領(lǐng)域，設(shè)計(jì)師需要對(duì)保存的技術(shù)類型有基礎(chǔ)認(rèn)知，因?yàn)樗鼤?huì)影響保存生效的邏輯和交互形式。
本文將會(huì)基于個(gè)人經(jīng)驗(yàn)，從設(shè)計(jì)表現(xiàn)和技術(shù)實(shí)現(xiàn)的角度聊聊Web端工具的數(shù)據(jù)保存。
對(duì)于Web端工具產(chǎn)品來(lái)說(shuō)，保存的對(duì)象可分為「文件數(shù)據(jù)」、「設(shè)置數(shù)據(jù)」、「用戶行為數(shù)據(jù)」。
「文件數(shù)據(jù)」是相互獨(dú)立的內(nèi)容，比如酷家樂(lè)的一個(gè)方案、Figma的一個(gè)文檔都是文件數(shù)據(jù)，在文件A中觸發(fā)保存并不會(huì)影響到文件B。文件數(shù)據(jù)是最主要的用戶資產(chǎn)，若丟失會(huì)給用戶造成很大的損失。
「設(shè)置數(shù)據(jù)」分不同的維度，主要有用戶級(jí)別、組織級(jí)別、設(shè)備級(jí)別這三種。
用戶級(jí)別：數(shù)據(jù)保存在當(dāng)前用戶的賬號(hào)下，同一個(gè)用戶的所有文檔都會(huì)應(yīng)用該設(shè)置，比如酷家樂(lè)云設(shè)計(jì)工具的偏好設(shè)置。
組織級(jí)別：數(shù)據(jù)保存在組織級(jí)別，可能由組織管理員設(shè)置，同一個(gè)組織下的所有用戶都應(yīng)用該數(shù)據(jù)。
設(shè)備級(jí)別：數(shù)據(jù)保存在設(shè)備（瀏覽器）上，同一個(gè)設(shè)備上的不同賬號(hào)、不同文檔都會(huì)應(yīng)用此數(shù)據(jù)。區(qū)別用戶級(jí)別和設(shè)備級(jí)別的保存很簡(jiǎn)單，只要清空瀏覽器緩存，看看數(shù)據(jù)是否變化即可。
一般來(lái)說(shuō)，「設(shè)置數(shù)據(jù)」也是用戶資產(chǎn)。但是設(shè)備級(jí)別的數(shù)據(jù)存在丟失的可能性，一般情況下不會(huì)存儲(chǔ)大量重要的數(shù)據(jù)。
技術(shù)上經(jīng)常把「用戶是否進(jìn)行過(guò)xx行為」這樣數(shù)據(jù)保存在用戶級(jí)別或設(shè)備級(jí)別，用于差異化的引導(dǎo)、運(yùn)營(yíng)方案。這類數(shù)據(jù)雖然不能被視為用戶資產(chǎn)，但對(duì)于產(chǎn)品設(shè)計(jì)來(lái)說(shuō)至關(guān)重要。
<h2 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin: 8px 8px 16px; font-size: 20px; white-space: normal; line-height: 1.5; letter-spacing: -0.008em; color: rgb(23, 43, 77); border-bottom-color: rgb(255, 255, 255); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" background-color:="" rgb(255,="" 255,="" 255);"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h2-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)數(shù)據(jù)保存的位置，可以分為兩類：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見(jiàn)的保存方式，觸發(fā)保存后，將方案數(shù)據(jù)上傳并存儲(chǔ)在服務(wù)器（云端），需要聯(lián)網(wǎng)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網(wǎng)絡(luò)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數(shù)據(jù)量大時(shí)會(huì)耗性能，可能會(huì)阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數(shù)據(jù)保存在瀏覽器中，一般采用的技術(shù)方案是 indexDB（如Figma)。即使將瀏覽器關(guān)閉，下次打開(kāi)時(shí)仍能夠恢復(fù)數(shù)據(jù)。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（幾百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設(shè)備，且不能清除緩存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時(shí)間上限（大部分瀏覽器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時(shí)保存，即會(huì)話保存（sessionStorage），通常為了方便單次會(huì)話而設(shè)置，例如記住選項(xiàng)狀態(tài)、輸入框的內(nèi)容等，但只要關(guān)閉或刷新標(biāo)簽頁(yè)這些數(shù)據(jù)就會(huì)被清除。從嚴(yán)格意義上來(lái)說(shuō)，會(huì)話保存不是真正的保存，本文不對(duì)此展開(kāi)討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會(huì)以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網(wǎng)絡(luò)或服務(wù)不穩(wěn)定造成的數(shù)據(jù)丟失。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Three」保存的觸發(fā)機(jī)制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發(fā)維度，可以將保存行為分為自動(dòng)保存、手動(dòng)保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據(jù)保存的觸發(fā)條件，可將自動(dòng)保存分為以下3種：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時(shí)觸發(fā)保存以一定的時(shí)間間隔（通常采用幾分鐘 ~ 1 小時(shí)）周期性地自動(dòng)觸發(fā)保存。這是酷家樂(lè)云設(shè)計(jì)工具目前采用的保存方式。這種自動(dòng)保存能減少因軟件崩潰、斷電等特殊原因造成的數(shù)據(jù)丟失的影響，但仍無(wú)法避免數(shù)據(jù)丟失，需要手動(dòng)保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發(fā)保存特定的用戶行為會(huì)觸發(fā)方案自動(dòng)保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發(fā)保存，則要結(jié)合業(yè)務(wù)邏輯和技術(shù)實(shí)現(xiàn)來(lái)共同確定。要注意的是，這類保存通常因技術(shù)原因而采用，用戶對(duì)其沒(méi)有預(yù)期，盡量不要讓它打斷或干擾用戶的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實(shí)時(shí)保存只要數(shù)據(jù)發(fā)生改變，立即觸發(fā)自動(dòng)保存，無(wú)需用戶手動(dòng)保存（盡管一些產(chǎn)品考慮到用戶習(xí)慣，仍會(huì)保留手動(dòng)保存的交互）。部分產(chǎn)品會(huì)用間隔幾秒鐘的自動(dòng)保存（如 Microsoft 365），效果基本等同于實(shí)時(shí)保存。實(shí)時(shí)保存能最大程度避免數(shù)據(jù)丟失，是Web端工具理想的保存觸發(fā)方式。但因?yàn)榧夹g(shù)原因，并非所有工具都能夠做到實(shí)時(shí)保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動(dòng)保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動(dòng)保存指用戶通過(guò)額外的操作觸發(fā)保存，通常為點(diǎn)擊「保存」按鈕或快捷鍵。部分有實(shí)時(shí)保存機(jī)制的工具不需要額外的手動(dòng)保存（如Figma），但對(duì)于沒(méi)有實(shí)時(shí)保存的工具來(lái)說(shuō)，手動(dòng)保存的設(shè)計(jì)至關(guān)重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動(dòng)保存，用戶還是可能忘記保存。當(dāng)用戶離開(kāi)工具或某個(gè)環(huán)境時(shí)，若程序監(jiān)測(cè)到有未保存的內(nèi)容會(huì)丟失，則將此風(fēng)險(xiǎn)暴露給用戶，用戶可以選擇保存或者直接離開(kāi)。如果用戶通過(guò)直接關(guān)閉瀏覽器/標(biāo)簽頁(yè)的方式離開(kāi)，也可以在瀏覽器上設(shè)置類似的兜底提示對(duì)話框，但是對(duì)話框上的文案無(wú)法定制。</span></span>
</p>
那如何選擇保存的觸發(fā)機(jī)制？
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實(shí)時(shí)保存」保障性最好，在技術(shù)允許時(shí)推薦采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術(shù)原因無(wú)法采用「實(shí)時(shí)保存」時(shí)，推薦使用「定時(shí)觸發(fā)保存」 + 「手動(dòng)保存」共同作用，也能較好地保障數(shù)據(jù)；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發(fā)保存」通常是因技術(shù)原因而采用，用戶對(duì)其沒(méi)有預(yù)期，盡量不要讓它打斷或干擾用戶的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數(shù)據(jù)有丟失風(fēng)險(xiǎn)的時(shí)候需要提示用戶保存，可根據(jù)用戶的操作路徑選用工具自身的提示或?yàn)g覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Four」保存的觸發(fā)設(shè)計(jì)<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發(fā)原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開(kāi)始聊具體的設(shè)計(jì)之前，先提出保存的 2 點(diǎn)設(shè)計(jì)原則：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯(cuò)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對(duì)方案數(shù)據(jù)的 最重要的 保障機(jī)制。穩(wěn)定的系統(tǒng)需要有可靠的保存機(jī)制，盡量避免各種原因造成的方案數(shù)據(jù)丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態(tài)可見(jiàn)</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時(shí)有效，讓用戶知道當(dāng)前方案的存儲(chǔ)狀態(tài)，如果有異常也需要第一時(shí)間告知，并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書(shū)中提到的“觸發(fā)器”概念，可以將保存作為一個(gè)觸發(fā)器。觸發(fā)器是啟動(dòng)一系列動(dòng)作的原點(diǎn)，分為系統(tǒng)觸發(fā)器（系統(tǒng)被動(dòng)觸發(fā)）和手動(dòng)觸發(fā)器（用戶主動(dòng)觸發(fā)）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:"">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統(tǒng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)系統(tǒng)觸發(fā)保存來(lái)說(shuō)，主要需確定2個(gè)點(diǎn)，何時(shí)觸發(fā)、觸發(fā)頻率。對(duì)Web端工具來(lái)說(shuō)，有3種主要的觸發(fā)模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時(shí)觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個(gè)獨(dú)立工具一般只有一個(gè)保存觸發(fā)間隔設(shè)置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個(gè)小時(shí)。一般會(huì)暴露給用戶設(shè)置。建議產(chǎn)品設(shè)計(jì)師根據(jù)技術(shù)現(xiàn)狀設(shè)定合理的時(shí)間，如果保存對(duì)性能有較大消耗，過(guò)于頻繁的保存也會(huì)影響用戶體驗(yàn)?？赏ㄟ^(guò)選擇器給用戶幾個(gè)合適的選項(xiàng)，選項(xiàng)之間的時(shí)間間隔依次變大，總選項(xiàng)數(shù)不超過(guò) 5 個(gè)。</span></span>
</p>
某設(shè)計(jì)工具偏好設(shè)置中的保存時(shí)間設(shè)置
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發(fā)</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發(fā)自動(dòng)保存，如酷家樂(lè)云設(shè)計(jì)工具環(huán)境切換、新建樓層，水電工具的智能設(shè)計(jì)等，都會(huì)觸發(fā)方案保存。以下是一些常見(jiàn)的「條件觸發(fā)保存」時(shí)機(jī)，這些時(shí)機(jī)是由技術(shù)能力、業(yè)務(wù)要求共同決定的。設(shè)計(jì)師需要考慮如果這些時(shí)機(jī)觸發(fā)了自動(dòng)保存，對(duì)用戶的操作會(huì)用什么影響。</span></span>
</p>
c.實(shí)時(shí)觸發(fā)
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現(xiàn)在已經(jīng)有很多在線工具（如 Figma）實(shí)現(xiàn)了實(shí)時(shí)觸發(fā)保存，對(duì)用戶來(lái)說(shuō)可以不用再理解保存這個(gè)概念，是一種認(rèn)知上的減負(fù)，并且這種方式對(duì)數(shù)據(jù)保障的效果也最好。但是，仍然有設(shè)計(jì)師提出這種體驗(yàn)上的風(fēng)險(xiǎn)，比如沒(méi)有容錯(cuò)余地、頻繁保存造成的干擾和系統(tǒng)壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動(dòng)觸發(fā)器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對(duì)保存來(lái)說(shuō)，「手動(dòng)觸發(fā)器」一般來(lái)說(shuō)是一個(gè)保存按鈕。在沒(méi)有實(shí)時(shí)保存的創(chuàng)作類工具中，手動(dòng)保存按鈕的設(shè)計(jì)至關(guān)重要，一般會(huì)放在界面上方較顯眼的位置，并設(shè)置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>
酷家樂(lè)云設(shè)計(jì)工具的保存位于頂部欄第一個(gè)分區(qū)
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對(duì)于管理類工具，保存按鈕一般位于頁(yè)面下方，因?yàn)橛脩粢话銖捻?yè)面上到下確認(rèn)完內(nèi)容后再進(jìn)行保存。</span></span></span>
</p>
酷家樂(lè)賬號(hào)設(shè)置頁(yè)面
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
「Chapter Five」保存的反饋設(shè)計(jì)
</h1><h3 data-darkmode-bgcolor-16666872301626="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16666872301626="#fff|rgb(255, 255, 255)" data-darkmode-color-16666872301626="rgb(136, 166, 217)" data-darkmode-original-color-16666872301626="#fff|rgb(23, 43, 77)" data-style="margin-top: 10px; font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin-left:="" 8px;="" margin-right:="" 8px;"="" class="js_darkmode__98" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; font-size: var(--article-h3-size); line-height: 1.8; caret-color: rgb(34, 34, 34); color: rgb(34, 34, 34); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; text-indent: 2em;">
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動(dòng)保存的反饋對(duì)于自動(dòng)保存，當(dāng)保存結(jié)果無(wú)異常時(shí)，盡量減少對(duì)用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場(chǎng)景的做法是在工具某個(gè)固定位置，用圖標(biāo)或文字的狀態(tài)變化作為反饋。</span></span>
</p>
當(dāng)某些條件觸發(fā)保存時(shí)，甚至不需要讓用戶感受到保存的發(fā)生，因?yàn)橛脩魧?duì)保存是沒(méi)有預(yù)期的，建議將保存的過(guò)程與其他過(guò)程合并。
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說(shuō)從云設(shè)計(jì)工具進(jìn)入施工圖時(shí)，因?yàn)榧夹g(shù)原因需要保存方案，但可以將保存方案的進(jìn)程與施工圖加載的進(jìn)程合并。</span></span>
</p>
b.手動(dòng)保存的反饋對(duì)于手動(dòng)保存，當(dāng)保存結(jié)果無(wú)異常時(shí)，可使用全局提示（Toast）告知保存進(jìn)度和保存結(jié)果，也可以用「保存」按鈕的狀態(tài)變化作為反饋。
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:"">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)保存有異常時(shí)，應(yīng)即時(shí)給予且較明顯的異常反饋，并幫助用戶排查問(wèn)題。在設(shè)計(jì)保存異常反饋時(shí)，需注意以下 3 點(diǎn)：</span></span>
</p>
<ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:"font-size:14px;">
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數(shù)據(jù)保存異常，是全局?jǐn)?shù)據(jù)還是個(gè)別模塊的數(shù)據(jù)，是否會(huì)因?yàn)榉呛诵哪K的保存異常而影響到整體用戶進(jìn)程，是否可以通過(guò)其他方式（如前端保存）讓用戶繼續(xù)操作</span></span>
</li>
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么，用戶可以通過(guò)何種操作解決問(wèn)題（檢查網(wǎng)絡(luò)？重新登錄？）</span></span>
</li>
<li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當(dāng)從異?；謴?fù)后，應(yīng)該如何提示用戶</span></span>
</li>
</ul>
圖片a
圖片b
圖片c
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
圖片
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
Figma與保存異常相關(guān)的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異?；謴?fù)提示
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:"">
總結(jié)
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結(jié)一下，當(dāng)我們接手一個(gè)新產(chǎn)品、新模塊、新需求的設(shè)計(jì)時(shí)，應(yīng)該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設(shè)計(jì)保存：</span></span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，確定保存對(duì)象，是文件數(shù)據(jù)、設(shè)置數(shù)據(jù)，還是用戶行為數(shù)據(jù)。一個(gè)完整的產(chǎn)品一般都會(huì)包含以上三者，但對(duì)于某個(gè)具體的需求，可能只涉及其中一兩種。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對(duì)象后，可以與產(chǎn)品、技術(shù)等團(tuán)隊(duì)成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機(jī)制（自動(dòng)保存、手動(dòng)保存、提示保存）。建議根據(jù)用戶流程在不同的觸點(diǎn)用不同的觸發(fā)機(jī)制，以最大程度保障數(shù)據(jù)安全。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來(lái)，根據(jù)保存對(duì)象、保存觸發(fā)機(jī)制，設(shè)計(jì)保存的交互，包含保存的觸發(fā)、保存的規(guī)則和保存的反饋。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:"">
<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用戶使用工具的流程再檢查一遍數(shù)據(jù)的產(chǎn)生和存儲(chǔ)，是否會(huì)有遺漏，設(shè)計(jì)保存兜底。</span></span>
</p>
作者：酷家樂(lè)UED 來(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ì)( www.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ì)公司
對(duì)于產(chǎn)品經(jīng)理、設(shè)計(jì)師和運(yùn)營(yíng)人員，心理學(xué)都是必須要補(bǔ)的一門(mén)課程。
可能很多同學(xué)都犯過(guò)和小摹相同的錯(cuò)誤——在各種商城放“神券”的時(shí)候屯一大堆專業(yè)書(shū)籍。實(shí)際上，心理學(xué)的書(shū)籍你大概只要看到第三本，就會(huì)發(fā)現(xiàn)翻來(lái)覆去講的就是那么幾個(gè)淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。
基礎(chǔ)心理學(xué)（消費(fèi)者心理學(xué)，社會(huì)心理學(xué)，傳播和行為心理學(xué)等）的概念都不難，但如何精妙地運(yùn)用在自己的專業(yè)上則非?？简?yàn)使用者的功力。
為什么產(chǎn)品、設(shè)計(jì)、運(yùn)營(yíng)都需要學(xué)習(xí)心理學(xué)？
因?yàn)樗麄児ぷ鞯谋举|(zhì)都是和“人”打交道——用產(chǎn)品方案、視覺(jué)內(nèi)容和活動(dòng)規(guī)劃來(lái)影響用戶的決策、行為和心理。
你可能會(huì)覺(jué)得“依靠數(shù)據(jù)來(lái)統(tǒng)計(jì)用戶的行為再針對(duì)性決策”會(huì)更客觀，但實(shí)際上想得到靠譜的數(shù)據(jù)和正確的結(jié)論一點(diǎn)也不輕松，甚至很多公司根本不具備開(kāi)展這類型調(diào)研的條件。
在這種情況下唯一的辦法還是洞察用戶并主動(dòng)決策，此時(shí)基礎(chǔ)心理學(xué)原理就是你進(jìn)行判斷的重要依據(jù)。
本文為大家梳理了十大著名的心理學(xué)原理，這些概念來(lái)自于多本心理學(xué)的經(jīng)典名著，小摹進(jìn)行了適當(dāng)整合。
一、懷舊思維
簡(jiǎn)單來(lái)說(shuō)，就是人們?cè)诮^大部分時(shí)候都會(huì)遵循歷史慣性，更愿意相信過(guò)去的結(jié)論。
這也解釋了為什么現(xiàn)代商業(yè)中，品牌一直是一項(xiàng)核心競(jìng)爭(zhēng)力：如果一個(gè)品牌曾經(jīng)贏得了消費(fèi)者的信任，那么消費(fèi)者往往愿意持續(xù)選擇這個(gè)品牌的產(chǎn)品。
在產(chǎn)品設(shè)計(jì)中，懷舊思維有著極其豐富的應(yīng)用場(chǎng)景。比如軟件產(chǎn)品的交互對(duì)于操作上的創(chuàng)新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業(yè)中主流產(chǎn)品一致，會(huì)更容易讓新用戶接受。
比如我們的原型設(shè)計(jì)工具“摹客RP”，界面布局借鑒了國(guó)外的UI工具Figma和Sketch。雖然產(chǎn)品主打的方向并不相同，但遵循業(yè)界已經(jīng)約定俗成的定式設(shè)計(jì)，在新用戶上手的角度有很大的優(yōu)勢(shì)。
二、暈輪效應(yīng)
暈輪效應(yīng)原指人際交往中，人身上表現(xiàn)出的某一方面的特征，掩蓋了其他特征，從而造成人際認(rèn)知的障礙。
比如有的老年人對(duì)青年人的個(gè)別缺點(diǎn)，或衣著打扮、生活習(xí)慣看不順眼，就認(rèn)為他們一定沒(méi)出息；有的青年人由于傾慕朋友的某一可愛(ài)之處，就會(huì)把他看得處處可愛(ài)，真所謂"一俊遮百丑"。
暈輪效應(yīng)是一種以偏概全的主觀心理臆測(cè)，和上面的懷舊思維類似，屬于一種思維的定式，因?yàn)檫@種方式大腦在決策時(shí)會(huì)更輕松。
對(duì)于產(chǎn)品規(guī)劃者，尤其要想清楚自己的核心優(yōu)勢(shì)和賣點(diǎn)是什么，不必完美主義地去追求面面俱到，因?yàn)槿绻钔怀龅膬?yōu)點(diǎn)能打動(dòng)用戶，即使有缺點(diǎn)也很容易被用戶忽略。
三、習(xí)得性無(wú)助
簡(jiǎn)單地說(shuō)，如果用戶在過(guò)程中產(chǎn)生了“無(wú)論如何都無(wú)法改變現(xiàn)狀”的感受，容易陷入深深的絕望和悲哀。
在實(shí)驗(yàn)中，經(jīng)過(guò)訓(xùn)練的狗本可以逃避實(shí)驗(yàn)者加于它的電擊。但是，如果狗以前受到過(guò)不可預(yù)期（不知道什么時(shí)候到來(lái)）且不可控制的電擊（如電擊的中斷與否不依賴于狗的行為），他們就會(huì)徹底躺平并不再逃離。
狗之所以表現(xiàn)出這種狀況，是由于在實(shí)驗(yàn)的早期學(xué)到了一種無(wú)助感。
也就是說(shuō)，它認(rèn)識(shí)到自己無(wú)論做什么都不能控制電擊的終止。
人如果產(chǎn)生了習(xí)得性無(wú)助，將很快拋棄當(dāng)前讓他產(chǎn)生失望感的產(chǎn)品。這個(gè)原理解釋了為什么現(xiàn)在商品或者服務(wù)往往都要為用戶提供非常順暢的溝通方式（比如熱線電話）。
如果你比較了解國(guó)外在線軟件行業(yè)趨勢(shì)，就會(huì)發(fā)現(xiàn)很多的新興產(chǎn)品都已經(jīng)不滿足于提供官方的Email地址，而是直接提供Discord鏈接（可以理解為在線聊天室）。
及時(shí)的直接溝通可以避免用戶產(chǎn)生絕望感，增加產(chǎn)品的生存幾率。
四、貝博規(guī)率
其實(shí)用一個(gè)成語(yǔ)就可以形容這個(gè)規(guī)律：得寸進(jìn)尺。在實(shí)際場(chǎng)景中，只要想辦法讓用戶先接受了一個(gè)小要求，之后就更可能讓他接受一項(xiàng)更大、更不合意的要求。
原始的實(shí)驗(yàn)中，心理學(xué)家讓兩位大學(xué)生訪問(wèn)郊區(qū)的一些家庭主婦。其中一位首先請(qǐng)求家庭主婦將一個(gè)小標(biāo)簽貼在窗戶（這是一個(gè)小的、無(wú)害的要求）。
兩周后，另一位大學(xué)生再次訪問(wèn)家庭主婦，要求她們?cè)谠簝?nèi)豎立一個(gè)呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個(gè)大要求）。
結(jié)果答應(yīng)了第一項(xiàng)請(qǐng)求的人中有55％的人接受這項(xiàng)要求，而那些第一次沒(méi)被訪問(wèn)的家庭主婦中只有17％的人接受了該要求。
這個(gè)實(shí)驗(yàn)說(shuō)明，如果想要用戶達(dá)到最終的目標(biāo)，可以先適當(dāng)設(shè)置一些和最終目標(biāo)相關(guān)，但完成難度小得多的目標(biāo)，循序漸進(jìn)地引導(dǎo)，可以大大提升轉(zhuǎn)化率。
這種原理在各種產(chǎn)品的銷售的場(chǎng)景的可謂是遍地開(kāi)花。
比如汽車、不動(dòng)產(chǎn)等高價(jià)的商品，往往會(huì)給打出“來(lái)訪即送好禮”的方式吸引用戶前往，然后通過(guò)用戶試駕、樣板房體驗(yàn)等環(huán)節(jié)引導(dǎo)用戶去體驗(yàn)和接納，客戶有意向后，也只會(huì)要求付定金（而不是全款）......這樣繁復(fù)的流程都是為了把困難的目標(biāo)拆解得更細(xì)小。
五、主觀性證詞
心理學(xué)研究表明，很多證人提供的證詞都不太準(zhǔn)確，或者說(shuō)是具有明顯的個(gè)人觀點(diǎn)、傾向性和意識(shí)。甚至，證人對(duì)他們的證詞的信心和證詞的準(zhǔn)確性沒(méi)有足夠的相關(guān)性。
結(jié)合這個(gè)原理，就能更好地理解為什么問(wèn)卷或是訪談等經(jīng)典的調(diào)研方法并不一定能收集到足夠準(zhǔn)確的信息，對(duì)于一些主觀性較強(qiáng)的問(wèn)題，個(gè)人的傾向會(huì)極大的影響答案的可信度。
正確的做法是，盡量避免在調(diào)研中出現(xiàn)主觀性過(guò)強(qiáng)的題目，如果無(wú)法避免，盡量將題目拆解為多項(xiàng)能被客觀量化或評(píng)估的問(wèn)題。如果沒(méi)有考慮用戶本身對(duì)于產(chǎn)品的傾向性，很可能被言過(guò)其實(shí)的“證詞”誤導(dǎo)出錯(cuò)誤的結(jié)論。
六、馬太效應(yīng)
馬太效應(yīng)是指好的愈好，壞的愈壞，多的愈多，少的愈少的一種現(xiàn)象，出自圣經(jīng)《新約 | 馬太福音》中的一則寓言。
這個(gè)效應(yīng)常為經(jīng)濟(jì)學(xué)界所借用，反映貧者愈貧，富者愈富，贏家通吃的經(jīng)濟(jì)學(xué)中收入分配不公的現(xiàn)象。
類似的理論還有很多，比如二八定律（20%的頭部公司掌握80%的市場(chǎng)份額，20%的優(yōu)質(zhì)客戶貢獻(xiàn)80%的銷售收入，等等）。
這個(gè)原理告訴我們，要想讓產(chǎn)品在某一個(gè)領(lǐng)域保持優(yōu)勢(shì)，就必須在此領(lǐng)域迅速做大。
當(dāng)你成為某個(gè)領(lǐng)域的領(lǐng)頭羊時(shí)，你也能更輕易地獲得比弱小的同行更大的收益。而若沒(méi)有實(shí)力迅速在某個(gè)領(lǐng)域做大，就要不停地尋找新的發(fā)展領(lǐng)域，才能保證獲得較好的回報(bào)。
七、從眾行為
營(yíng)銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數(shù)人接受的選擇。
我們經(jīng)?？梢钥吹铰愤厓杉也蛷d，一家門(mén)口排滿了等待的食客，另一家卻一桌客人都沒(méi)有，巨大的反差往往讓后面到來(lái)的客人寧愿等待也要選擇人多的餐廳。
關(guān)于這種心理，哲學(xué)家認(rèn)為是人類理性的有限性，社會(huì)學(xué)家認(rèn)為是人類的集體無(wú)意識(shí)，而經(jīng)濟(jì)學(xué)家則從信息不完全、委托代理等角度來(lái)解釋。但需要特別注意的是，從眾行為并非絕對(duì)的，因?yàn)樵谧非髠€(gè)人喜好上，人類往往也有很多個(gè)性的需求，從眾行為和個(gè)性追求往往是同時(shí)存在的。
從眾行為最典型的應(yīng)用方式就是密集推薦或評(píng)價(jià)，現(xiàn)在的書(shū)籍的扉頁(yè)動(dòng)輒幾十條推薦語(yǔ)，在線服務(wù)往往也會(huì)引用大量網(wǎng)友的好評(píng)，來(lái)證明自己的價(jià)值。
新產(chǎn)品在推向市場(chǎng)時(shí)，先多收集一些用戶的正面評(píng)價(jià)，宣傳時(shí)會(huì)非常有利。
八、比較心理
這是消費(fèi)者心理學(xué)最經(jīng)典的原理，簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)200元的產(chǎn)品和一個(gè)100元的看上去差不多的產(chǎn)品擺在一起，你就會(huì)覺(jué)得100元這個(gè)超級(jí)劃算，很容易產(chǎn)生購(gòu)買的沖動(dòng)。
對(duì)于每個(gè)人來(lái)說(shuō)，所有的認(rèn)知，價(jià)值觀和結(jié)論都是建立在【比較】的基礎(chǔ)上得出的，所以，影響一個(gè)人的認(rèn)知，最有效的辦法就是創(chuàng)造對(duì)比的機(jī)會(huì)。
價(jià)格頁(yè)面最喜歡運(yùn)用比較心理，因?yàn)楸容^心理可以幫助他們重新設(shè)定消費(fèi)者的認(rèn)知。
常見(jiàn)的做法比如拉高產(chǎn)品的價(jià)格再做夸張的折扣讓用戶覺(jué)得這個(gè)商品現(xiàn)在超級(jí)劃算；或者在主推產(chǎn)品旁邊放置兩個(gè)明顯性價(jià)比不佳的次品，讓用戶對(duì)主推產(chǎn)品的效果感知更加強(qiáng)烈。
此外，在產(chǎn)品介紹時(shí)也可以將競(jìng)品的參數(shù)列在表格中和自家的產(chǎn)品進(jìn)行對(duì)比（當(dāng)然，這個(gè)表格中的項(xiàng)目都是挑選過(guò)的），這樣更容易體現(xiàn)自家產(chǎn)品的優(yōu)勢(shì)。
九、投射效應(yīng)
人們?cè)谌粘Ｉ钪谐３＜僭O(shè)他人與自己具有相同的屬性、愛(ài)好或傾向等，心理學(xué)家稱這種心理現(xiàn)象為"投射效應(yīng)"。
"以小人之心度君子之腹"就是一種典型的投射效應(yīng)。當(dāng)別人的行為與我們不同時(shí)，我們習(xí)慣用自己的標(biāo)準(zhǔn)去衡量別人的行為，認(rèn)為別人的行為違反常規(guī)。
了解這一點(diǎn)對(duì)于產(chǎn)品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認(rèn)為自己在這個(gè)領(lǐng)域比其他人都專業(yè)得多），但仍然需要被尊重。
所以近年來(lái)特別流行用戶體驗(yàn)、同理心這樣的詞匯，產(chǎn)品應(yīng)該以真實(shí)用戶的體驗(yàn)滿意度作為參考指標(biāo)，設(shè)計(jì)者應(yīng)該盡可能地以設(shè)想自己是一個(gè)目標(biāo)用戶時(shí)，會(huì)有什么反應(yīng)，否則僅靠自己的“臆測(cè)”，創(chuàng)造出來(lái)的產(chǎn)品很可能和真實(shí)需求脫節(jié)。
十、賭博心理
以小博大的感覺(jué)是一種強(qiáng)上癮體驗(yàn)，人們只有在輸?shù)臅r(shí)候才想到離開(kāi)，少有在贏的時(shí)候離開(kāi)。這個(gè)就是賭場(chǎng)盈利的本質(zhì)模式。
由于真金白銀賭博是法律明令禁止的，所以產(chǎn)品設(shè)計(jì)角度一般都是借助積分、代幣等方式來(lái)給用戶制造“抽獎(jiǎng)”的機(jī)會(huì)。
對(duì)于國(guó)內(nèi)而言，氪金手游和盲盒就是典型的兩種應(yīng)用場(chǎng)景，前者往往會(huì)設(shè)定一個(gè)極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費(fèi)者有小概率獲得稀有款式的手辦，引誘顧客購(gòu)買超過(guò)自己需求的商品。
對(duì)于產(chǎn)品設(shè)計(jì)人員來(lái)講，賭博機(jī)制可以說(shuō)是一個(gè)潘多拉魔盒，通常不建議去使用和嘗試。人人都愛(ài)KPI，但也要取之有道，職場(chǎng)人都應(yīng)該有自己的底線。
作者：jongde來(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ì)( www.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ì)公司
在日常使用移動(dòng)端或PC端產(chǎn)品時(shí)，不知你有沒(méi)有這樣的體會(huì)？
推薦一個(gè)比較實(shí)用的設(shè)計(jì)法則，這個(gè)法則已經(jīng)有很多的文章說(shuō)明了，可以說(shuō)現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實(shí)踐，本次主要想以比較多的案列進(jìn)行實(shí)戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個(gè)可用性問(wèn)題的基礎(chǔ)上，提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁(yè)、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，可以指導(dǎo)我們更具價(jià)值的思考界面設(shè)計(jì)。
設(shè)計(jì)原則都可靈活運(yùn)用于各個(gè)地方,可以是交互設(shè)計(jì),也可以是界面設(shè)計(jì),深入了解各種設(shè)計(jì)原則,讓設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候可以找到更好的解決方案,提高用戶的使用體驗(yàn)。
雅各布·尼爾森（Jakob Nielsen）是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士，被譽(yù)為可用性測(cè)試的鼻祖，2006年4月，并被納入美國(guó)計(jì)算機(jī)學(xué)會(huì)人機(jī)交互學(xué)院，被賦予人機(jī)交互實(shí)踐的終身成就獎(jiǎng)。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」，該原則被廣大設(shè)計(jì)師奉為教科書(shū)般的存在。雖然20多年過(guò)去了，但是對(duì)于現(xiàn)今的產(chǎn)品體驗(yàn)設(shè)計(jì)仍然具有很大的參考意義。
人機(jī)交互的基本原則是，讓系統(tǒng)和用戶之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶發(fā)生了什么，預(yù)期是什么，如果系統(tǒng)不能及時(shí)向用戶反饋合適的信息，用戶必然會(huì)感到失控和焦慮，不知道下一步要做什么。
界面狀態(tài)分為兩種：靜態(tài)和動(dòng)態(tài)。
靜態(tài)即用戶通過(guò)界面查閱，明確知道自己的位置、處于何種狀態(tài)，或者知道界面數(shù)據(jù)的狀態(tài)。動(dòng)態(tài)即用戶在進(jìn)行界面操作時(shí)，系統(tǒng)應(yīng)當(dāng)立刻提供反饋，告訴用戶該項(xiàng)操作被系統(tǒng)接受，讓用戶對(duì)操作感知及判斷。
告訴用戶處在系統(tǒng)的什么位置，特別是對(duì)于新用戶，需要提供必要的信息，否則容易迷惑。比如：導(dǎo)航菜單、面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器等等。
相比于C端產(chǎn)品，B端產(chǎn)品在頁(yè)面層級(jí)往往更為復(fù)雜。因此，讓用戶明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。設(shè)計(jì)師在設(shè)計(jì)的過(guò)程中，要注意提供上下文線索，避免用戶迷路。
告知用戶系統(tǒng)運(yùn)行的狀態(tài)信息，比如進(jìn)度、內(nèi)容加載時(shí)，增加用戶掌控感。
最經(jīng)典的案例莫過(guò)于Loading頁(yè)的進(jìn)度條了，無(wú)論是加載頁(yè)面還是下載內(nèi)容，一個(gè)清晰的進(jìn)度條可以讓用戶隨時(shí)掌控進(jìn)度，同時(shí)也可以用具體的數(shù)字更加明確的表示，比如：安裝程序時(shí)顯示進(jìn)度條，并預(yù)估還需要多久結(jié)束，播放音樂(lè)時(shí)顯示進(jìn)度條，并提示預(yù)估剩余時(shí)間。
系統(tǒng)適當(dāng)反饋是用戶界面設(shè)計(jì)的最基本準(zhǔn)則。當(dāng)用戶在與系統(tǒng)進(jìn)行交互時(shí)，應(yīng)當(dāng)在各個(gè)階段為用戶提供必要、積極且即時(shí)的反饋，同時(shí)也要避免過(guò)度反饋打擾用戶?？梢允褂玫男问桨ǖ痪窒抻冢?/span>
操作反饋：點(diǎn)擊頁(yè)面跳轉(zhuǎn)、按鈕點(diǎn)擊狀態(tài)、警告提示、輸入反饋等等；
結(jié)果反饋：非模態(tài)彈窗，輕量化感知系統(tǒng)內(nèi)容反饋。（反饋內(nèi)容應(yīng)盡量不要打斷用戶操作，所以一般采用toast形式，反饋結(jié)果后及時(shí)消失。）
情感反饋：搜索沒(méi)有結(jié)果時(shí)，沒(méi)有數(shù)據(jù)等等空狀態(tài)。
還可以通過(guò)元素的顏色位置、界面元素變化、文字、聲音和震動(dòng)，甚至動(dòng)效等多種形式給予用戶提示反饋。
注意，越是消極的反饋，比如網(wǎng)絡(luò)連接失敗、系統(tǒng)錯(cuò)誤等，越是要及時(shí)告知用戶，同時(shí)提醒用戶采取適當(dāng)措施。比如：1、提交表單時(shí)，如果校驗(yàn)失敗，則在填寫(xiě)有誤的內(nèi)容旁邊提示錯(cuò)誤原因；2、程序未響應(yīng)時(shí)，系統(tǒng)會(huì)讓用戶選擇是關(guān)閉程序還是等待程序響應(yīng)；
系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)，給予用戶適當(dāng)?shù)姆答?，讓用戶了解正在發(fā)生的事情。
當(dāng)系統(tǒng)反饋時(shí)間小于1秒，通常正常反饋即可；相反長(zhǎng)于1秒時(shí)，我們通常會(huì)通過(guò)加載動(dòng)畫(huà)、占位符、分步加載等方式，減緩用戶等待的焦慮感。如果超過(guò)10秒還沒(méi)有得到相應(yīng)，那么通常會(huì)認(rèn)為這次請(qǐng)求是失敗的，需要給用戶失敗提示。
例如：下載提示、刷新提示、支付提示、新頁(yè)面加載提示等。
系統(tǒng)盡可能貼切用戶所在的真實(shí)環(huán)境。把復(fù)雜的系統(tǒng)語(yǔ)言換成用戶看得懂的語(yǔ)言；環(huán)境貼切原則的根本目標(biāo)是讓用戶可以快速上手產(chǎn)品，降低學(xué)習(xí)成本。
《iPhone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實(shí)踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。
這里說(shuō)的語(yǔ)言不僅僅包括文案層面的語(yǔ)言，還包括產(chǎn)品的設(shè)計(jì)語(yǔ)言（圖形、配色、風(fēng)格、動(dòng)效、手勢(shì)等）設(shè)計(jì)語(yǔ)言都應(yīng)該是易于用戶理解和認(rèn)知的。產(chǎn)品使用的語(yǔ)言應(yīng)該是目標(biāo)用戶能夠清晰理解的。如果用戶不能理解，他們會(huì)感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。
從設(shè)計(jì)心理學(xué)角度來(lái)講，用戶在使用產(chǎn)品的過(guò)程中，其大腦會(huì)“優(yōu)待”較常用的記憶內(nèi)容和操作形式，有意抑制那些相似但不常用的內(nèi)容，以便減輕認(rèn)知負(fù)擔(dān)，防止混淆，這種習(xí)慣從某種程度上來(lái)說(shuō)屬于“熟知記憶”。
比如細(xì)分市場(chǎng)的產(chǎn)品，針對(duì)中老年、青年、兒童的產(chǎn)品或商務(wù)、娛樂(lè)的產(chǎn)品，都要分別使用符合自己的定位的語(yǔ)言。
反面案例就是windows系統(tǒng)出錯(cuò)了頁(yè)面，一堆亂碼，看不懂又很慌張，就很不友好。另外還有一點(diǎn)，很多大公司的app都會(huì)針對(duì)他們不同國(guó)家的用戶群體進(jìn)行各種語(yǔ)言的翻譯處理。
為了照顧不同國(guó)家的用戶的使用習(xí)慣對(duì)頁(yè)面結(jié)構(gòu)布局，風(fēng)格，語(yǔ)言，字體，包括交互方式都會(huì)做特殊處理。這就是場(chǎng)景貼合原則。
模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識(shí)，可以顯著的降低用戶的認(rèn)知和學(xué)習(xí)困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計(jì)算器、指南針，微信紅包都是模仿了現(xiàn)實(shí)世界的產(chǎn)品。
從現(xiàn)實(shí)世界中借鑒的設(shè)計(jì)元素可明顯降低用戶的認(rèn)知和學(xué)習(xí)難度，并且增加興趣。最有代表性的就是網(wǎng)易云的音樂(lè)播放界面圖形隱喻表達(dá)。美團(tuán)APP的母嬰類目icon的設(shè)計(jì)非常有趣，且非常容易理解和使用，讓人印象深刻。
使用的操作手勢(shì)，應(yīng)該是用戶自然就能聯(lián)想到的，不要?jiǎng)?chuàng)造、更改操作手勢(shì)的意義。
動(dòng)效的加載樣式應(yīng)符合自然規(guī)律，需要平緩過(guò)渡，而不是生硬的加載效果。比如：網(wǎng)易云音樂(lè)播放時(shí)唱片轉(zhuǎn)動(dòng)、停止播放時(shí)唱片自動(dòng)移開(kāi)，有趣且有效。
用戶在使用產(chǎn)品的過(guò)程中，誤操作是經(jīng)常發(fā)生的事情，系統(tǒng)應(yīng)提供撤銷和重做功能，讓用戶具有對(duì)產(chǎn)品的控制性與自由度。
用戶可控原則的根本目標(biāo)是讓用戶可以在界面自由操作，而且無(wú)需為操作不當(dāng)承擔(dān)責(zé)任。
清晰便捷的導(dǎo)航方式，使用戶可自由控制返回和跳轉(zhuǎn)的頁(yè)面。
由于B端系統(tǒng)的復(fù)雜性，有些功能的層級(jí)會(huì)比較深。彈窗A中的某個(gè)操作可能會(huì)觸發(fā)彈窗B的彈出，如果彈窗A和B承載的功能具有父級(jí)和子級(jí)的關(guān)系，同樣需要考慮「返回」的功能以及清晰的層級(jí)關(guān)系。
用戶在使用系統(tǒng)的過(guò)程也是一個(gè)試錯(cuò)的過(guò)程，系統(tǒng)要讓用戶覺(jué)得自己的行為是可控的，可以犯錯(cuò)，并且在犯錯(cuò)之后可以反悔。用戶在使用產(chǎn)品時(shí)可以自由進(jìn)退，遵循從哪里來(lái)就返回到哪里去的原則。當(dāng)用戶誤操作時(shí)要給用戶提供撤銷、取消、重做等相關(guān)功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的，并且撤回之后還支持重新編輯；對(duì)于我這種打字總是出錯(cuò)的人簡(jiǎn)直就是福利。iphone相冊(cè)刪除照片后，支持在短期內(nèi)找回；在word中編輯文檔時(shí)，支持撤銷和恢復(fù)，保存的同時(shí)，還能查看歷史保存記錄。
回收站功能：讓用戶更有自由度，增加用戶安全感，可控的找回誤刪除資源。
系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶提供二次確認(rèn)或者撤銷的功能，這樣可提高用戶的操作可控性。在產(chǎn)品設(shè)計(jì)上，防止用戶常見(jiàn)的誤操作。比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時(shí)，經(jīng)常會(huì)有彈窗提醒，讓用戶再次確認(rèn)。這樣是防止用戶誤操作帶來(lái)的刪除損失。用戶不用因?yàn)椴僮鲙?lái)心理負(fù)擔(dān)，從而提升操作可控性。
比如iPhone ios系統(tǒng)：
1、常見(jiàn)的二次確認(rèn)主要可以通過(guò)以下方式實(shí)現(xiàn)：通過(guò)文字提示，用戶閱讀后點(diǎn)擊是與否來(lái)進(jìn)行下一步；
2、通過(guò)動(dòng)作，用戶通過(guò)輸入特定字符或者完成驗(yàn)證碼拖拽等操作才可進(jìn)行下一步操作；
3、通過(guò)身份校驗(yàn)，用戶需要提交個(gè)人身份信息以完成校驗(yàn)；
整個(gè)系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導(dǎo)航、用語(yǔ)、色彩、操作行為交互的一致性與標(biāo)準(zhǔn)性，遵循平臺(tái)慣例與行業(yè)標(biāo)準(zhǔn)。我們?cè)谠O(shè)計(jì)中常見(jiàn)的制作平臺(tái)規(guī)范，其實(shí)就是為了保證平臺(tái)設(shè)計(jì)的一致性。
一致性原則的根本目的是保證產(chǎn)品的專業(yè)性，給用戶帶去統(tǒng)一的體驗(yàn)感受。
遵循產(chǎn)品內(nèi)部的慣例，可幫助用戶快速學(xué)習(xí)使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含：產(chǎn)品功能框架、文字、設(shè)計(jì)風(fēng)格、布局、反饋等等。
比如：小熊藝術(shù)app，一款針對(duì)孩子學(xué)習(xí)美術(shù)的app，不管是首頁(yè)、個(gè)人中心以及加載等頁(yè)面，風(fēng)格保持一致性都是主打清新黃色+可愛(ài)icon。黃色小熊更是在不同的合適的時(shí)機(jī)出現(xiàn)，banner、加載，課程動(dòng)畫(huà)中等。不僅風(fēng)格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性，也形成了統(tǒng)一的品牌傳達(dá)。
但是，有時(shí)候?yàn)榱诉_(dá)到產(chǎn)品目標(biāo)，偶爾也會(huì)故意采用不一致的設(shè)計(jì)。
比如：常見(jiàn)的對(duì)話框都將“確定”按鈕放在右邊位置，所以用戶在操作時(shí)，很容易產(chǎn)生條件反射，順手點(diǎn)擊右邊按鈕，然后才突然發(fā)現(xiàn)自己點(diǎn)錯(cuò)了。雖然看起來(lái)有些別扭甚至很多人不喜歡，但是很有效，這種設(shè)計(jì)在軟件卸載、App取消會(huì)員訂閱等操作中非常常見(jiàn)，主要是為了做一些心理暗示和引導(dǎo)，避免用戶卸載或退訂。
交互和用戶的習(xí)慣一致，意味著用戶不再需要重新學(xué)習(xí)，各種應(yīng)用之間的切換沒(méi)有學(xué)習(xí)成本。我們?cè)谇捌谝呀?jīng)培養(yǎng)好用戶的使用習(xí)慣，那么就不要輕易改變，減少用戶的認(rèn)知成本與學(xué)習(xí)成本。
例如：常見(jiàn)的頁(yè)面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
當(dāng)產(chǎn)品線進(jìn)行更新迭代的時(shí)候，應(yīng)該保留用戶既有的交互和操作習(xí)慣，用戶在上一個(gè)版本形成的交互認(rèn)知在下一個(gè)版本是否能被沿用，這對(duì)于用戶來(lái)說(shuō)在產(chǎn)品體驗(yàn)上會(huì)造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒(méi)有變化，就體現(xiàn)了迭代產(chǎn)品的一致性。
Office軟件中包含的各個(gè)產(chǎn)品，其界面布局和設(shè)計(jì)風(fēng)格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級(jí)菜單下所包含功能的排列順序、布局方式乃至圖標(biāo)圖形，都是高度類似的。
遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。確保整個(gè)系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設(shè)計(jì)語(yǔ)言都遵循同一套設(shè)計(jì)規(guī)則。
比如，產(chǎn)品內(nèi)相同顏色的反復(fù)出現(xiàn)，為產(chǎn)品打造視覺(jué)錘符號(hào)，強(qiáng)化產(chǎn)品在用戶心中的記憶點(diǎn)。符合平臺(tái)設(shè)計(jì)規(guī)范，
蘋(píng)果系統(tǒng)參照人機(jī)交互設(shè)計(jì)指南設(shè)計(jì)規(guī)范，安卓系統(tǒng)參照Material Design設(shè)計(jì)規(guī)范，或者直接參照自己團(tuán)隊(duì)的的設(shè)計(jì)規(guī)范，應(yīng)該遵循慣例，并且保持系統(tǒng)的一致感，不要盲目地標(biāo)新立異。
不知道你發(fā)現(xiàn)了沒(méi)，現(xiàn)在的電商、音樂(lè)、社交等等app越來(lái)越一樣了，一樣的交互，一樣的排版設(shè)計(jì)，基本上都遵循著類似的交互邏輯和視覺(jué)元素。
與業(yè)內(nèi)產(chǎn)品保持一致，意味著用戶不再需要重新學(xué)習(xí)，就可以在各種應(yīng)用中自由切換，用戶學(xué)習(xí)成本的降低，也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規(guī)則和流程都被用戶不自覺(jué)地印刻在大腦中，成為一種自然的習(xí)慣，而獨(dú)特的設(shè)計(jì)，截然不同的規(guī)則，則常常會(huì)成為習(xí)慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。
如，在App底部的導(dǎo)航圖標(biāo)中，“首頁(yè)”永遠(yuǎn)排在第一個(gè)，個(gè)人中心（“我的”）永遠(yuǎn)排在最后。并且對(duì)于類似“首頁(yè)”“購(gòu)物車”“訂單”等常見(jiàn)按鈕，不同App的設(shè)計(jì)樣式都非常相似。如下圖三個(gè)不同音樂(lè)app的對(duì)比圖：
如果你特立獨(dú)行地把個(gè)人中心放在第一個(gè)位置，或者采用奇怪的圖標(biāo)作為個(gè)人中心的icon，用戶使用時(shí)肯定會(huì)覺(jué)得別扭。
防錯(cuò)原則的根本目標(biāo)是阻止錯(cuò)誤行為，避免進(jìn)一步犯錯(cuò)，指引用戶正確的完成操作行為。
「防止錯(cuò)誤」主要分為三個(gè)階段：錯(cuò)誤行動(dòng)發(fā)生前，引導(dǎo)用戶向正確的方向前進(jìn)；用戶觸碰到危險(xiǎn)操作時(shí)給予提示；危險(xiǎn)操作發(fā)生之后，提供撤回的入口。
比一個(gè)優(yōu)秀的錯(cuò)誤提醒彈窗更好的設(shè)計(jì)方式，是在這個(gè)錯(cuò)誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯(cuò)的情況，或在用戶提交之前給他一個(gè)確認(rèn)的選項(xiàng)。
通常情況下，按鈕置灰表示對(duì)應(yīng)功能或操作無(wú)法使用，這也是防止錯(cuò)誤的一條有效途徑，因?yàn)橛脩敉ㄟ^(guò)按鈕樣式就可獲知其狀態(tài)，提前規(guī)避無(wú)效的提交操作。當(dāng)然，不是只要功能或操作無(wú)法使用時(shí)，就應(yīng)該將對(duì)應(yīng)的按鈕置灰。其實(shí)更好的做法是填寫(xiě)完標(biāo)題后按鈕不置灰，點(diǎn)擊完成按鈕后定位或高亮必填項(xiàng)，讓用戶更容易識(shí)別錯(cuò)誤點(diǎn)。
比如在登錄時(shí)，只有輸出信息后才可以點(diǎn)擊登錄按鈕，未輸入信息時(shí)，按鈕是不可以點(diǎn)擊的狀態(tài)。通過(guò)系統(tǒng)主動(dòng)對(duì)用戶進(jìn)行操作限制，幫助用戶避免發(fā)生錯(cuò)誤。
限制用戶的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個(gè)很好的策略。再比如輸入驗(yàn)證碼頁(yè)面，為了防止用戶多輸入或者少輸入驗(yàn)證碼，只給到四個(gè)輸入框，讓用戶只能輸入四位數(shù)字，減少輸入錯(cuò)誤的幾率。
提供清晰的提示，防止用戶犯錯(cuò)，提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。利用顏色，動(dòng)效提供警示信息，比如常見(jiàn)的微信退出的按鈕是紅色的，狀態(tài)未完成的標(biāo)簽是紅色的等等。
如：表單填寫(xiě)過(guò)程中讓用戶及時(shí)知道輸入格式，出錯(cuò)原因，避免填寫(xiě)完成后再提醒，浪費(fèi)用戶時(shí)間。
范圍限制：限制用戶的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個(gè)很好的策略。比如：電影購(gòu)票時(shí)，已購(gòu)買的位子不會(huì)再提供選擇，很好的避免了買重的問(wèn)題
特別要注意在用戶操作具有毀滅性結(jié)果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤，需打斷用戶，提示用戶是否要進(jìn)行此操作，讓用戶有更多的思考時(shí)間。所以在一些不可逆的操作中二次確認(rèn)是非常有必要的。
這條原則很重要也很常見(jiàn)。在刪除信息時(shí)，系統(tǒng)會(huì)讓用戶確認(rèn)刪除，也就是我們常說(shuō)的二次確認(rèn)，電商平臺(tái)允許在一定的規(guī)則下取消訂單等等。
易取原則的根本目標(biāo)是提升用戶在界面上的操作效率，系統(tǒng)應(yīng)直觀地協(xié)助用戶完成任務(wù)。
系統(tǒng)應(yīng)協(xié)助用戶進(jìn)行記憶，通過(guò)使元素、操作和選項(xiàng)可見(jiàn)，減少用戶的記憶負(fù)荷，在適合的時(shí)機(jī)給用戶需要獲取的信息。
識(shí)別比回憶要好，對(duì)于路徑較長(zhǎng)的操作，我們更應(yīng)該協(xié)助用戶記憶。比如在淘寶下單的操作路徑，每一個(gè)頁(yè)面頂部導(dǎo)航欄會(huì)盡可能的提醒用戶操作到哪里，用戶所有的操作信息都是可見(jiàn)、易獲取的，減少用戶對(duì)操作目標(biāo)的記憶負(fù)擔(dān)。
用戶心理學(xué)研究發(fā)現(xiàn)，互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀，不是看，而是“掃”。這是互聯(lián)網(wǎng)用戶瀏覽的主要方式。所以我們?cè)谠O(shè)計(jì)的時(shí)候，需要清晰的視覺(jué)層次結(jié)構(gòu)，突出重點(diǎn)，弱化和剔除無(wú)關(guān)信息，降低頁(yè)面干擾，來(lái)減輕用戶閱讀成本。
比起讓用戶輸入，讓用戶選擇更能降低用戶的記憶成本，更好地輔助用戶做決策。如果，有很多的信息或者選項(xiàng)是用戶高頻率會(huì)選擇的，設(shè)計(jì)師不妨給用戶提前做好選擇，提供默認(rèn)選項(xiàng)，如下圖：
通過(guò)智能讀取用戶之前填寫(xiě)過(guò)的信息，或者智能識(shí)別等形式，減少用戶記憶負(fù)擔(dān)與操作負(fù)擔(dān)。
常見(jiàn)的是寄快遞-新增地址，將用戶復(fù)制的文本字符類型進(jìn)行識(shí)別并匹配，將有用的信息內(nèi)容提取出來(lái)，對(duì)體驗(yàn)而言顯得高效又智能。
或者淘寶購(gòu)物確認(rèn)訂單時(shí)，系統(tǒng)會(huì)自動(dòng)為你帶入之前的商品信息，包括選擇的商品規(guī)則、數(shù)量、價(jià)格、默認(rèn)記錄顯示常用的地址等。這些信息雖然之前都選擇過(guò)，但是需要用戶在購(gòu)買前二次確認(rèn)，由于信息比較多，用戶很難記憶，所以確認(rèn)訂單再展示出來(lái)更加合理。
比如：用手機(jī)登錄時(shí)，收到的驗(yàn)證碼直接展示在軟鍵盤(pán)上，用戶無(wú)需記憶也無(wú)需輸入，直接點(diǎn)選即可登錄；
美團(tuán)APP中，當(dāng)用戶選擇商品時(shí)，系統(tǒng)會(huì)自動(dòng)計(jì)算商品價(jià)格和滿減后的價(jià)格，還會(huì)幫用戶記錄選擇了哪些商品以及份數(shù)，不需要用戶自己花時(shí)間去計(jì)算還差多少才能滿減等，減少用戶記憶負(fù)擔(dān)，同時(shí)節(jié)省用戶點(diǎn)外賣的時(shí)間，這也用到了易取原則。
訂單頁(yè)面若某信息需要用戶從一個(gè)頁(yè)面復(fù)制到另一個(gè)頁(yè)面完成查詢或編輯輸入，那就有必要為該信息提供快捷復(fù)制功能，如訂單號(hào)緊跟著一個(gè)復(fù)制按鈕。
我們?cè)谒阉饕粋€(gè)歌名的時(shí)候，記不住完整的歌曲名，我們只要輸入關(guān)鍵的幾個(gè)詞，系統(tǒng)就是幫助我們記憶，出現(xiàn)相關(guān)的搜索。
作為用戶，你不記得的操作，系統(tǒng)可以幫你記錄。為用戶提供歷史記錄，文本創(chuàng)作的過(guò)程中自動(dòng)保存草稿，讓用戶方便查詢自己的進(jìn)程，這就是信息易取原則的設(shè)計(jì)。
保留歷史，最為常見(jiàn)的就是為用戶保留歷史搜索和歷史瀏覽、儲(chǔ)存賬號(hào)和密碼。視頻APP會(huì)詳細(xì)記錄用戶的觀看記錄，當(dāng)用戶沒(méi)有看完某部電影時(shí)，下次進(jìn)入直接從斷點(diǎn)續(xù)播上次播放的位置，無(wú)需用戶記憶上次看到哪里了；
不只是觀看記錄，視頻軟件還會(huì)幫你記錄同一賬號(hào)在不同設(shè)備上的登錄記錄，觀看記錄也會(huì)在不同設(shè)備之間進(jìn)行同步。
將選擇的對(duì)象，動(dòng)作，選項(xiàng)可視化，讓用戶一看就懂。注意圖標(biāo)符號(hào)化能讓人理解，避免引起誤解。
抽象圖形+文字，提供了更多的信息，更加豐富了記憶效果，避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導(dǎo)航欄都是以這種icon和文字相結(jié)合的形式，這就是很符合易取原則的例子。
在用戶使用產(chǎn)品的過(guò)程中，會(huì)有一些需要用戶記憶的內(nèi)容、或者操作路徑，在設(shè)計(jì)的時(shí)候我們要避免用戶記憶，把信息直接提取出來(lái)，送到用戶手里。同時(shí)每個(gè)頁(yè)面?zhèn)鬟f的信息量盡量少，減少用戶的閱讀壓力。
常見(jiàn)的例子是各類優(yōu)惠券，設(shè)計(jì)的時(shí)候會(huì)有明確的位置說(shuō)明限制時(shí)間，類別等等，同時(shí)還會(huì)有清晰的入口引導(dǎo)去使用或者規(guī)則的入口。
這一點(diǎn)其實(shí)也非常好理解，一個(gè)簡(jiǎn)單的動(dòng)作，比打字要輕松得多，常見(jiàn)的就是在設(shè)備解鎖的時(shí)候，用手勢(shì)解鎖替代密碼解鎖。
隨著技術(shù)發(fā)展，有了更多的行為代替輸入的方式，比如指紋識(shí)別和面部識(shí)別，用簡(jiǎn)單的操作，就可以達(dá)到進(jìn)入系統(tǒng)的目的，這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個(gè)交互設(shè)計(jì)原則，也代表了一種軟件產(chǎn)品設(shè)計(jì)理念：系統(tǒng)既要做得簡(jiǎn)單、易用，讓所有用戶用起來(lái)得心應(yīng)手；
靈活易用原則的根本目標(biāo)是保持系統(tǒng)的靈活性，以滿足不同用戶的不同需求。既要提供必要的幫助，讓剛?cè)腴T(mén)的初級(jí)用戶順利上手，還需要支持靈活的個(gè)性化定制，讓高級(jí)用戶能夠快捷高效使用高頻功能，充分發(fā)揮其價(jià)值。
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能，基本上所有軟件都會(huì)提供定制化功能，從快捷鍵設(shè)置，到頁(yè)面布局，再到自定義參數(shù)，軟件系統(tǒng)會(huì)盡量提供全面的個(gè)性化設(shè)置功能，來(lái)滿足不同用戶的使用訴求和習(xí)慣，提升用戶的使用效率和體驗(yàn)。
例如支付寶首頁(yè)，用戶可以自定義首頁(yè)的應(yīng)用。對(duì)于使用頻率比較高的老用戶來(lái)說(shuō)，這是一個(gè)非常方便的功能。
還有一種是系統(tǒng)更具用戶常用自動(dòng)整理歸納，以提升使用效率，減少用戶多余操作。
比如：微信的聊天表情，由于可以選擇的表情很多，正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習(xí)慣往往是循環(huán)使用其中的某幾個(gè)，所以把最近使用的表情展現(xiàn)出來(lái)，會(huì)極大的提升用戶的尋找效率。
除了從新老用戶的角度對(duì)用戶做區(qū)分，還可以從其他維度區(qū)分用戶，針對(duì)不同用戶做不同的功能。比如：微信為了讓中老年用戶使用方便，推出了關(guān)懷模式。在關(guān)懷模式下（下圖）文字更大、色彩更強(qiáng)、按鈕更大，還可以使用“聽(tīng)文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點(diǎn)，讓產(chǎn)品更加靈活易用。
靈活高效原則在交互設(shè)計(jì)中使用會(huì)提高用戶使用效率，例如微信聊天頁(yè)面中，當(dāng)用戶輸入某個(gè)字詞之后，系統(tǒng)會(huì)自動(dòng)幫你匹配相應(yīng)的表情包；
當(dāng)你輸入某個(gè)詞之后，輸入法會(huì)幫你自動(dòng)聯(lián)想接下來(lái)你可能會(huì)輸入的詞；截圖后進(jìn)入微信聊天頁(yè)面后，系統(tǒng)會(huì)將你剛截的圖前置，它會(huì)自動(dòng)判斷你可能想發(fā)送該截圖。如下圖：
通過(guò)用戶快捷跳過(guò)的入口，比如常見(jiàn)的：引導(dǎo)頁(yè)、操作手冊(cè)、還是開(kāi)屏廣告，有“跳過(guò)”或者”立即進(jìn)入“按鈕真的很貼心。
對(duì)于用戶頻繁使用的部分，提供快捷的重復(fù)使用操作，比如：外賣app，用戶可以快捷地再來(lái)一單，同時(shí)保存上一次操作記錄。
在設(shè)計(jì)功能時(shí)，最好能考慮到不同層次用戶的需求，以此來(lái)讓用戶「各取所需」（需要平臺(tái)有多類型用戶）；比如常見(jiàn)的Word、Photoshop等，有一個(gè)“二八定律”，就是說(shuō)80%的功能是給20%的用戶使用的。
設(shè)計(jì)這類產(chǎn)品時(shí)，最常用的20%的功能一定擺在最顯著的位置上，方便所有用戶使用，而80%的高端功能，要適度隱藏，使得整個(gè)產(chǎn)品看起來(lái)盡量簡(jiǎn)潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準(zhǔn)備的。
淘寶的首頁(yè)每個(gè)人推薦的商品都不相同，淘寶后臺(tái)根據(jù)用戶的瀏覽習(xí)慣，購(gòu)買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好，對(duì)商品進(jìn)行千人千面的分發(fā)。
但是切記不要太過(guò)依賴大數(shù)據(jù)算法的判斷，因?yàn)橐坏┬纬蛇@種模式，會(huì)給用戶造成回音壁效應(yīng)，你越喜歡的東西系統(tǒng)就越給你推薦，其他的商品就像回音壁一樣被吸收過(guò)濾，用戶永遠(yuǎn)沒(méi)有辦法發(fā)現(xiàn)新的東西，讓用戶的選擇永遠(yuǎn)都在一個(gè)死循環(huán)，所以做千人千面設(shè)計(jì)時(shí)一定要適度。
優(yōu)美而簡(jiǎn)約原則的根本目標(biāo)是讓用戶快速找到界面的重要信息，引導(dǎo)用戶的視線及操作行為。
UI設(shè)計(jì)應(yīng)該是符合大眾審美的，不需要多么酷炫，而是需要我們注重信息獲取效率，更加聚焦內(nèi)容，刪除多余的視覺(jué)表達(dá)元素，讓界面保持美觀簡(jiǎn)約。
“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設(shè)計(jì)的四大基本原則：親密性、對(duì)齊、重復(fù)、對(duì)比，就是使頁(yè)面優(yōu)美而簡(jiǎn)約的方法。
建立清晰的視覺(jué)層級(jí)，越重要的內(nèi)容越突出，能夠方便用戶無(wú)障礙地瀏覽信息，提高用戶操作與信息獲取效率，各模塊間采用卡片或者間距區(qū)分開(kāi)，加強(qiáng)頁(yè)面層級(jí)區(qū)分。
我們通過(guò)顏色、大小、字體的字重、對(duì)比度、元素的間距、特殊造型、動(dòng)效等來(lái)表現(xiàn)。
避免界面呈現(xiàn)過(guò)多元素，包括動(dòng)效、配圖、icon、按鈕等等，降低用戶的視覺(jué)干擾。保留產(chǎn)品最主要的信息，如果不是優(yōu)先級(jí)最高，要盡一切可能避免去影響產(chǎn)品的簡(jiǎn)潔和美觀，可采用大留白增加頁(yè)面呼吸感，聚焦內(nèi)容。
用戶注意力資源有限，應(yīng)該保持信息精煉，突出重要信息，弱化次要信息。
上面兩個(gè)案例通過(guò)加粗放大、標(biāo)記顏色，從而讓頁(yè)面簡(jiǎn)潔，且突出重要信息。
容錯(cuò)原則的根本目標(biāo)是讓那個(gè)用戶在操作出錯(cuò)后還能挽回錯(cuò)誤的余地，從而給用戶一致產(chǎn)品很安全貼心的感覺(jué)。
系統(tǒng)需幫助用戶識(shí)別、診斷、并為用戶從錯(cuò)誤中恢復(fù)提出建設(shè)性的解決方案。通過(guò)提示性文字或者插圖讓用戶意識(shí)到出錯(cuò)了，比如404頁(yè)面的情感化插圖、彈窗提示用戶出錯(cuò)等。
當(dāng)發(fā)生錯(cuò)誤時(shí)，提示信息一定要直觀，視覺(jué)上能夠引起用戶注意，可視化處理，文案要簡(jiǎn)單概要，并給出解決方案。例如刪除訂單時(shí)，會(huì)提示二次確認(rèn)，避免用戶誤操作。
在出錯(cuò)界面給出解決方案，可以是文字提醒或者按鈕跳轉(zhuǎn)等形式，幫助用戶解決問(wèn)題。比如缺省頁(yè)的設(shè)計(jì)除了配置插圖還會(huì)有提示文案與操作按鈕，引導(dǎo)用戶去操作，去進(jìn)一步解決問(wèn)題。
系統(tǒng)能幫助用戶自動(dòng)甄別錯(cuò)誤，并及時(shí)進(jìn)行糾正時(shí)，將會(huì)給用戶帶來(lái)極大的便利，撤銷或者找回功能，都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯，相冊(cè)的最近刪除、回收站等等功能。
人性化幫助原則的根本目標(biāo)是用戶在使用產(chǎn)品的過(guò)程中有所依循，因?yàn)楫a(chǎn)品已經(jīng)貼心地為他們準(zhǔn)備好了幫助方式，或者即時(shí)提示和反饋，或者客服。
人性化幫助用戶最好的方式分別為：1、無(wú)需提示；2、一次性提示；3、常駐提示；4、幫助文檔。
最好的就是沒(méi)有提示，用戶就能看懂與應(yīng)用產(chǎn)品；其次是一次性提示，提示一次用戶就懂如何使用，比如第一次進(jìn)入app或新功能上線的引導(dǎo)設(shè)計(jì)、通常為氣泡形式。常駐提示需要一直固定在某個(gè)位置實(shí)時(shí)幫助用戶。
最后就是幫助文檔了，一般用于解釋規(guī)則或者熱點(diǎn)問(wèn)題，通常以超鏈接的形式存在于頁(yè)面中，或者以集合形式位于設(shè)置頁(yè)中，此時(shí)需要注意要易于檢索。
幫助文檔的入口容易找到，幫助信息方便用戶查找。常見(jiàn)的方式有：鼠標(biāo)劃過(guò)懸浮文字說(shuō)明，幫助用戶更好地理解。
用戶通過(guò)查看幫助文檔來(lái)學(xué)習(xí)新功能，相對(duì)比較麻煩。如果能將教程和功能放在一起，用戶可以“邊學(xué)邊練”，就更容易讓用戶理解。
提示語(yǔ)避免使用專業(yè)術(shù)語(yǔ)，盡量使用圖片或者圖形，同時(shí)處理文字外還可以使用示意圖，操作步驟等，方便用戶應(yīng)用。
在操作時(shí)的幫助信息，比如幫助懸浮按鈕：一直出現(xiàn)在頁(yè)面固定位置，方便用戶遇到問(wèn)題尋求幫助。
搜索時(shí)，預(yù)搜索詞直觀地顯示出來(lái)，可以讓用戶更快地做出搜索判斷。微信轉(zhuǎn)賬頁(yè)面，當(dāng)用戶輸入金額較大時(shí)，會(huì)在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位，目的是為了避免用戶輸入錯(cuò)誤金額導(dǎo)致資金損失；
復(fù)雜的流程可以通過(guò)分步驟來(lái)引導(dǎo)用戶逐步完成，而不是一次完成所有任務(wù)。個(gè)性化的提示一次就夠了，用戶用過(guò)一次就知道其用法。
現(xiàn)在很多C端產(chǎn)品普遍做了良好的交互設(shè)計(jì)，可以幫助用戶快速學(xué)習(xí)使用，而不用閱讀、理解復(fù)雜的說(shuō)明文檔。
然而，B端產(chǎn)品的復(fù)雜性比C端產(chǎn)品高很多，因?yàn)锽端產(chǎn)品蘊(yùn)含很多業(yè)務(wù)流程的規(guī)則，系統(tǒng)中的一個(gè)按鈕可能代表了一個(gè)復(fù)雜的業(yè)務(wù)處理規(guī)則，如果不了解整個(gè)業(yè)務(wù)場(chǎng)景和處理規(guī)則，是很難理解按鈕的操作含義的。
因此，對(duì)于B端產(chǎn)品，用戶進(jìn)行自助服務(wù)、自助操作的難度高很多，B端產(chǎn)品的幫助文檔依然有存在的必要。產(chǎn)品設(shè)計(jì)人員要盡量在前端交互上做好引導(dǎo)提示，對(duì)于復(fù)雜的規(guī)則和邏輯，可以考慮通過(guò)幫助文檔來(lái)指導(dǎo)用戶。
尼爾森十大可用性原則可靈活運(yùn)用于各個(gè)地方，可以是交互設(shè)計(jì)，也可以是界面設(shè)計(jì)，深入了解該設(shè)計(jì)原則，可以找到更好的解決方案，提高用戶的使用體驗(yàn)。要注意的是，這10項(xiàng)原則是啟發(fā)式（heuristics）的、廣泛的經(jīng)驗(yàn)法則，而不是具體的規(guī)定。
1、狀態(tài)可見(jiàn)原則：位置可見(jiàn)、數(shù)量可見(jiàn)、狀態(tài)可見(jiàn)；
2、環(huán)境貼近原則：語(yǔ)言應(yīng)該是用戶所能理解和習(xí)慣的；
3、用戶可控原則：可見(jiàn)導(dǎo)航、關(guān)閉與返回、撤銷與重做；
4、一致性原則：產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設(shè)計(jì)語(yǔ)言一致、業(yè)內(nèi)產(chǎn)品一致；
5、防錯(cuò)原則：操作前預(yù)警、操作中確認(rèn)、操作后可撤回；
6、易取原則：易掃描、智能獲取、草稿箱和歷史記錄、對(duì)象可視化、選擇代替輸入；
7、靈活高效原則：靈活配置、允許頻繁操作、各取所需；
8、優(yōu)美而簡(jiǎn)約原則：視覺(jué)層次明顯、簡(jiǎn)約且突出重點(diǎn)信息；
9、容錯(cuò)原則：幫助用戶識(shí)別、診斷，并從錯(cuò)誤中恢復(fù)提供方法；
10、人性化幫助原則：無(wú)需提示、一次性提示、常駐提示、幫助文檔。
我準(zhǔn)備了一些常用的設(shè)計(jì)素材送給大家，需要的話免費(fèi)拿走。獲取方式：老規(guī)矩公眾號(hào)后臺(tái)，發(fā)送文字“素材”，就可以獲取了～
文中如有不嚴(yán)謹(jǐn)?shù)牡胤较Ｍ蠹医o予指正，希望大家可以多多點(diǎn)贊評(píng)論鼓勵(lì)一下，最后感謝你的耐心閱讀。
今天與大家分享的是關(guān)于B端頁(yè)面中篩選區(qū)的功能設(shè)計(jì)，本文會(huì)從篩選的展現(xiàn)形式、布局、反饋、設(shè)計(jì)中遇到的問(wèn)題以及設(shè)計(jì)思考這幾個(gè)方面進(jìn)行講述。
篩選，也可以稱作過(guò)濾器，它屬于搜索框架的一部分主要用于內(nèi)容提取，將一類數(shù)據(jù)展示，同時(shí)一類數(shù)據(jù)隱藏，可以整合很多的組件。
在B端產(chǎn)品設(shè)計(jì)中，篩選區(qū)的設(shè)置便于用戶進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)定位，可以快速的按照需要對(duì)數(shù)據(jù)進(jìn)行查詢和篩選；篩選的存在對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的數(shù)據(jù)定位；可以對(duì)表單進(jìn)行快速數(shù)據(jù)按照自己想要的方式進(jìn)行劃分，縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間。
1、篩選區(qū)的展現(xiàn)形式有哪些？
篩選區(qū)常見(jiàn)到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區(qū)，但是二者還是有所差異的。
通過(guò)百度百科我們可以了解到：
搜索，意思指仔細(xì)查找，搜尋。
篩選，篩選是利用篩子使物料中小于篩孔的細(xì)粒物料透過(guò)篩面，而大于篩孔的粗粒物料滯留在篩面上，從而完成粗、細(xì)料分離的過(guò)程。該分離過(guò)程可看作是物料分層和細(xì)粒透篩兩個(gè)階段組成的。物料分層是完成分離的條件，細(xì)粒適篩是分離的目的。
在B端系統(tǒng)界面設(shè)計(jì)中，搜索是通過(guò)指定任意條件，系統(tǒng)對(duì)此條件進(jìn)行的檢索后，展示相對(duì)應(yīng)內(nèi)容，功能偏主動(dòng)性；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容，功能偏被動(dòng)性。
無(wú)論被動(dòng)性還是主動(dòng)性，搜索和篩選這倆個(gè)功能都是讓用戶使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。二者在功能上相輔相成，在B端系統(tǒng)的頁(yè)面中僅靠搜索或者篩選作為內(nèi)容篩選都是不夠的，這就需要組合篩選區(qū)了。
1.1搜索篩選
精確搜索
優(yōu)點(diǎn)：搜索準(zhǔn)確率高，所要即所得。
缺點(diǎn)：需要用戶自己輸入，然后進(jìn)行查詢。需要記憶搜索詳細(xì)信息。輸入框需要有提示輸入的內(nèi)容，方便用戶填寫(xiě)，以及確認(rèn)輸入的類別或格式。
適用場(chǎng)景：適用于用戶有清晰的目標(biāo)，同時(shí)需要有查詢/搜索按鈕，來(lái)執(zhí)行篩選。搜索需要配合篩選固有類一起使用。
模糊搜索
優(yōu)點(diǎn)：模糊搜索可以用于搜索關(guān)鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結(jié)果，減少記憶負(fù)擔(dān)，適用于不明確的信息篩選。
缺點(diǎn)：篩選出很多類似相關(guān)的內(nèi)容，需要查找鑒別所要內(nèi)容，不便捷。
適用場(chǎng)景：用戶對(duì)目標(biāo)模糊，模糊是指不用關(guān)心輸入了什么格式，哪怕錯(cuò)了，系統(tǒng)也會(huì)推薦給用戶相對(duì)正確的；用戶需要瀏覽操作過(guò)濾器提供的信息來(lái)輔助篩選達(dá)到目標(biāo)。搜索需要配合篩選固有類一起使用。
搜索的設(shè)計(jì)原則
關(guān)于搜索，幾乎沒(méi)有人不知道，哪怕是不從事設(shè)計(jì)、產(chǎn)品的人，他們也知道。同時(shí)每一個(gè)產(chǎn)品，隨著規(guī)模變大，搜索一定必不可少。那么如何設(shè)計(jì)好搜索呢？有哪些原則可以借鑒，總結(jié)了以下4個(gè)方面。
漸進(jìn)呈現(xiàn)
在我們?cè)O(shè)計(jì)搜索時(shí)，可以考慮漸進(jìn)呈現(xiàn)的方式。這是指搜索結(jié)果不要一股腦兒都塞給用戶，而是使用逐步擴(kuò)大的方式，讓用戶慢慢進(jìn)入目標(biāo)。但這里要注意，漸進(jìn)的層級(jí)不要太深，漸進(jìn)的內(nèi)容要做到足夠?yàn)橛脩糁搿?/span>
結(jié)構(gòu)化
結(jié)構(gòu)化是指搜索結(jié)果呈現(xiàn)的形式要有歸納和整理的意圖，不能反饋給用戶的是沒(méi)有層次的內(nèi)容。簡(jiǎn)單來(lái)說(shuō)，分類就是結(jié)構(gòu)化呈現(xiàn)的體現(xiàn)，內(nèi)容結(jié)構(gòu)化后用戶查找和定位才會(huì)更快速。
可操作
對(duì)于搜索結(jié)果，我們可以給予操作選擇，例如收藏、分享等，這將會(huì)大大提升用戶與搜索結(jié)果之間的后續(xù)聯(lián)系。
可操作性是最佳優(yōu)先的好伙伴。同時(shí)給搜索結(jié)果添加使用類操作，這會(huì)讓用戶專注于目標(biāo)。
可保存
無(wú)論搜索任何內(nèi)容，用戶都有權(quán)保存自己常用的搜索結(jié)果，保證用戶后續(xù)無(wú)需重復(fù)搜索。這點(diǎn)上已經(jīng)有很多C端產(chǎn)品做的很好了，我們?cè)贐端產(chǎn)品上也可以考慮起來(lái)。
1.2條件篩選
下拉篩選
優(yōu)點(diǎn)：頁(yè)面的空間利用率高，同時(shí)下拉起到了很好的收納作用，不占據(jù)頁(yè)面空間。
缺點(diǎn)：由于下拉的局限性無(wú)法觀看到所有的篩選字段，需要操作點(diǎn)擊查看。
適用場(chǎng)景：下拉的篩選字段選項(xiàng)有限，可以明確的總結(jié)分類時(shí)，一般采用固定選項(xiàng)類。這種操作起來(lái)便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的產(chǎn)品是勾選即執(zhí)行的。主要需要結(jié)合具體的使用場(chǎng)景去判定。
矩陣(平鋪)篩選
優(yōu)點(diǎn)：用戶可以直接看到篩選內(nèi)容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。
缺點(diǎn)：平鋪的篩選類目占據(jù)頁(yè)面空間較大，空間利用率低，信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn)，增加用戶的決策時(shí)間，不適合選項(xiàng)太多的情況。
適用場(chǎng)景：平鋪篩選控件的普適性為最強(qiáng)，當(dāng)沒(méi)有其他更好想法時(shí)，用平鋪總是一個(gè)好的選擇。需要注意的是，篩選條件不要過(guò)多（遵循7±2 法則）。
注意事項(xiàng)：
當(dāng)確實(shí)需要支持大量的篩選條件時(shí)，有兩種解決方案可供參考
1、用戶自行配置篩選條件：對(duì)用戶來(lái)說(shuō)，單次篩選會(huì)用到的條件是有限的；通過(guò)可配置的篩選條件，實(shí)現(xiàn)檢索效率和信息噪音的平衡，對(duì)于用戶自定義項(xiàng)的體驗(yàn)與應(yīng)用都有更好的支持。
2、 隱藏低頻的篩選條件：這種方法需要對(duì)用戶需求有明確的把握，哪些篩選條件是高頻、哪些是低頻需要有明確的分界，優(yōu)點(diǎn)是第一次使用時(shí)用戶能更快上手。
表頭篩選
優(yōu)點(diǎn)：通過(guò)表頭的點(diǎn)擊，簡(jiǎn)潔、直觀的篩選當(dāng)前表格列。
缺點(diǎn)：只能篩選當(dāng)前列的內(nèi)容，篩選字段比較少，篩選形式比較單一。每個(gè)表頭都會(huì)有篩選的icon，影響用戶對(duì)于表頭的識(shí)別。表頭篩選學(xué)習(xí)成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。
適用場(chǎng)景：表頭篩選類似Excel表格的操作，是一種相對(duì)高級(jí)的交互，適合表格列比較單一內(nèi)容的篩選。
注意事項(xiàng)：
一般來(lái)說(shuō)不推薦使用，僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活；
2、用戶可能對(duì)每一列都有篩選需求（如數(shù)據(jù)報(bào)表、Excel）；
3、產(chǎn)品規(guī)劃時(shí)對(duì)于用戶篩選需求不夠明確，也可通過(guò)這種模式先采集數(shù)據(jù)，分析其使用頻次，對(duì)后期的界面優(yōu)化進(jìn)行指導(dǎo)。
TAB標(biāo)簽
優(yōu)點(diǎn)：篩選條件一目了然，交互步驟少，一個(gè)Tab標(biāo)簽代表一個(gè)緯度，平鋪展示篩選內(nèi)容方便識(shí)別，學(xué)習(xí)成本低。
缺點(diǎn)：Tab標(biāo)簽篩選字段數(shù)量有限制，不宜過(guò)多，分類需覆蓋選項(xiàng)，并且保證每一項(xiàng)沒(méi)有交集，空間占用多、不夠靈活，對(duì)用戶自定義項(xiàng)支持較差。
適用場(chǎng)景：Tab標(biāo)簽切換一般用于和時(shí)間、狀態(tài)的流轉(zhuǎn)有關(guān)，且沒(méi)有交集的數(shù)據(jù)內(nèi)容（可以是同性質(zhì)，也可以是不同性質(zhì)）。權(quán)重高，選項(xiàng)值不超過(guò)5個(gè)。
1.3組合篩選
在B端系統(tǒng)表格類頁(yè)面中，字段屬性很多，簡(jiǎn)單的檢索方式很難準(zhǔn)確定位到目標(biāo)數(shù)據(jù)，所以在實(shí)際使用當(dāng)中，常會(huì)將大量非交叉關(guān)系的屬性進(jìn)行羅列，搜索、篩選、TAB標(biāo)簽切換組合出現(xiàn)，形成多屬性的組合檢索。而篩選項(xiàng)互相組合，其展示方式有如下幾種：
平鋪式
平鋪式是將所有篩選項(xiàng)羅列出來(lái)平鋪在頁(yè)面上，可以兼容多種數(shù)據(jù)格式比如數(shù)字、文本、標(biāo)簽、枚舉值、布爾值等，包含但不限于日期選擇期、標(biāo)簽切換、單選框、復(fù)選框等多種控件。
優(yōu)點(diǎn)：用戶能直接看到選項(xiàng)內(nèi)容，方便用戶識(shí)別選項(xiàng)，且提高了用戶篩選的效率（節(jié)省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問(wèn)題。
缺點(diǎn)：篩選項(xiàng)多會(huì)占據(jù)大量頁(yè)面空間，信息量過(guò)多都是重點(diǎn)等于沒(méi)有重點(diǎn)，增加用戶的決策時(shí)間，不利于表格數(shù)據(jù)的直觀展示，此類型一般配合“勾選即執(zhí)行”使用。
適用場(chǎng)景：普適性為最強(qiáng)，當(dāng)沒(méi)有其他更好想法時(shí)，用平鋪總是一個(gè)好的選擇。適用于從各個(gè)緯度篩選的場(chǎng)景，多維度篩選對(duì)信息篩選的顆粒度需求不一致，同時(shí)希望備選項(xiàng)被選中。
折疊式
折疊式篩選是平鋪式篩選的改進(jìn)，一種簡(jiǎn)單直接的篩選形式，對(duì)平鋪的篩選項(xiàng)進(jìn)行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過(guò)折疊的方式將這部分篩選字段隱藏起來(lái)，高頻篩選字段外露。
優(yōu)點(diǎn)：高頻篩條件可優(yōu)先快速篩選、一定程度上減少用戶的認(rèn)知負(fù)荷，同時(shí)占用空間較小。
缺點(diǎn)：不好劃分不同用戶的高頻篩選項(xiàng)，當(dāng)高頻篩選項(xiàng)過(guò)多時(shí)，頁(yè)面同樣會(huì)出現(xiàn)信息冗雜、空間占比大等問(wèn)題。
適用場(chǎng)景：折疊低頻篩選，顯示高頻篩選，能滿足大多場(chǎng)景下不占用太多空間。針對(duì)有更多篩選需求的用戶也有更好的引導(dǎo)性。
從位置上來(lái)說(shuō)，組合篩選一般有如下幾種常見(jiàn)類型：上下布局水平篩選區(qū)、左右布局的垂直側(cè)邊篩選區(qū)、 內(nèi)嵌的的表頭篩選區(qū)。
上下布局水平篩選區(qū)
最常用的上下布局，篩選區(qū)放置在表格頁(yè)面的上方，方便用戶識(shí)別選項(xiàng)，提高了用戶篩選的效率，明確哪些數(shù)據(jù)是用戶所需的。上下布局的篩選區(qū)也方便用戶進(jìn)行閱讀，對(duì)于那些由不同數(shù)據(jù)結(jié)構(gòu)組成的頁(yè)面，是一個(gè)很好的選擇。
上下布局的篩選區(qū)的可擴(kuò)展性差，當(dāng)篩選項(xiàng)目少于五個(gè)的情況下，最常使用的就是上下布局，而當(dāng)篩選項(xiàng)目多的時(shí)候，會(huì)占據(jù)大量頁(yè)面空間，內(nèi)容在較多時(shí)，推薦增加收起功能，這樣保證篩選整體面積不會(huì)很大，提升屏效比。
左右布局的垂直側(cè)邊篩選區(qū)
左右布局的篩選區(qū)一般是以字段選擇進(jìn)行篩選，篩選區(qū)的位置較固定，不會(huì)因?yàn)楹Y選項(xiàng)過(guò)多而影響頁(yè)面中主要內(nèi)容的位置，可擴(kuò)展性強(qiáng)，可在收起部分嵌套更多的字段值。
左右布局的好處就是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái)，可以適應(yīng)很多場(chǎng)景，但是這種類型篩選器可以影響整個(gè)頁(yè)面。我們需要確保頁(yè)面上的每個(gè)元素都有效地受到篩選的影響，避免造成混亂。
內(nèi)嵌的表頭篩選區(qū)
表頭篩選是一種復(fù)雜的篩選形式，常見(jiàn)于列表中，是一種列表內(nèi)置篩選形式，適合表格列比較單一內(nèi)容的篩選，其最開(kāi)始是源于Excel的篩選形式，點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。
篩選區(qū)有兩種不同的反饋模式：數(shù)據(jù)實(shí)時(shí)更新反饋和數(shù)據(jù)手動(dòng)更新反饋。
數(shù)據(jù)實(shí)時(shí)更新反饋
界面將與所有設(shè)置的篩選相匹配并對(duì)結(jié)果進(jìn)行實(shí)時(shí)更新。
這種模式的優(yōu)點(diǎn)是在執(zhí)行篩選時(shí)為用戶提供了一種方便簡(jiǎn)單的體驗(yàn)，可以在每次點(diǎn)擊后立即看到結(jié)果。適用于較低風(fēng)險(xiǎn)的交互，一旦處理多選過(guò)濾器或更復(fù)雜的輸入時(shí)可能會(huì)造成混亂。當(dāng)然還需要考慮處理數(shù)據(jù)的多少，如果應(yīng)用中數(shù)據(jù)量巨大，每次更新時(shí)間較長(zhǎng)，反而會(huì)降低用戶的使用效率。
手動(dòng)更新反饋
在手動(dòng)更新反饋模式下，過(guò)濾結(jié)果只有在用戶點(diǎn)擊查詢時(shí)才會(huì)更新。如果用戶想在每次更改后查看結(jié)果，必須單擊查詢按鈕。
這種模式適合多緯度復(fù)雜的篩選，所有篩選字段設(shè)置完畢之后，統(tǒng)一執(zhí)行操作，和實(shí)時(shí)反饋結(jié)果相比降低篩選等待時(shí)間，尤其是在大量數(shù)據(jù)進(jìn)行篩選中，優(yōu)化了用戶體驗(yàn)。
什么情況不適合用篩選？
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號(hào)碼，注冊(cè)用戶郵箱這種無(wú)明顯規(guī)則的就不適合用篩選組件去查找，用搜索會(huì)更好。
篩選分類條件有什么要求？
一是分類需符合大眾認(rèn)知的條件。如：按照年月日的認(rèn)知來(lái)選擇，地理位置按照省市區(qū)街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時(shí)候是否清晰無(wú)困惑。
高頻篩選操作怎么樣方便用戶操作？
首先高頻篩選操作不是產(chǎn)研團(tuán)隊(duì)自己主觀臆斷出來(lái)的，需要有數(shù)據(jù)支撐。很多產(chǎn)品為了滿足用戶快捷操作，會(huì)在篩選區(qū)幫用戶集成常用的快捷操作入口。比如很多電商產(chǎn)品的新品、包郵等快捷篩選。根據(jù)不同產(chǎn)品用戶習(xí)慣下操作整理出快捷操作入口能提高用戶體驗(yàn)方便度。
篩選和搜索的區(qū)別？
主要區(qū)別在于用戶對(duì)目標(biāo)的清晰度不同，需要選用不同組件功能來(lái)達(dá)到其目的。
在B端系統(tǒng)界面設(shè)計(jì)中，搜索是通過(guò)指定任意條件，系統(tǒng)對(duì)此條件進(jìn)行的檢索后，展示相對(duì)應(yīng)內(nèi)容；篩選是系統(tǒng)提供指定各種條件縮小范圍，可以選擇查找不同條件的內(nèi)容。
搜索和篩選都是讓用戶使用某個(gè)條件對(duì)內(nèi)容進(jìn)行區(qū)分，從而找到用戶想要的內(nèi)容。
在設(shè)計(jì)組合篩選的時(shí)候，篩選區(qū)的設(shè)計(jì)需要根據(jù)業(yè)務(wù)實(shí)際情況進(jìn)行設(shè)計(jì)，考慮每個(gè)篩選字段和業(yè)務(wù)場(chǎng)景，來(lái)安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式？我們?cè)谠O(shè)計(jì)篩選的時(shí)候可以如何思考？顯然，使用頻率和界面空間是兩個(gè)非常重要的評(píng)判維度。除此之外，我們還可以以可見(jiàn)性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。
頻率
使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素，我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。同理，對(duì)于篩選模式，我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。頻率除了影響使用什么模式外，還會(huì)影響篩選條件及篩選項(xiàng)的排列順序，這里就不多敘述了。
界面空間
一些界面模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過(guò)的事。
可見(jiàn)性太弱，當(dāng)篩選條件都被收納在一個(gè)個(gè)小小的入口按鈕時(shí)，它的可見(jiàn)性也會(huì)隨之降低，尤其在PC端，一個(gè)大屏幕下更難發(fā)現(xiàn)。
可見(jiàn)性
既然說(shuō)到可見(jiàn)性，不妨展開(kāi)講講。可見(jiàn)性是一項(xiàng)重要的設(shè)計(jì)原則之一。一個(gè)明顯的道理是，可見(jiàn)總比不可見(jiàn)好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？
針對(duì)篩選模式的可見(jiàn)性，我們可以分三個(gè)要點(diǎn)去考慮：
1、篩選條件本身的可見(jiàn)性：
用戶越難發(fā)現(xiàn)，即可見(jiàn)性越低。通常，我們都可以以使用頻率來(lái)決定篩選條件的可見(jiàn)程度。但有時(shí)候也會(huì)失效，因?yàn)檎缟衔乃峒埃搅撕Y選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對(duì)信息的需求就越不一致。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價(jià)格，有人希望按顏色，我們很難判斷哪個(gè)頻率更高。面對(duì)這種情況，只能將所有的篩選條件平鋪出來(lái)供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會(huì)使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。
2、篩選項(xiàng)的可見(jiàn)性：
篩選項(xiàng)的可見(jiàn)性同樣影響模式的選擇。頁(yè)簽式和矩陣式篩選的可見(jiàn)性比下拉式更高，因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見(jiàn)嗎？對(duì)于這個(gè)問(wèn)題，可直接以篩選項(xiàng)的多少去決策（少則可見(jiàn)，多則不可見(jiàn)），比如一些B端產(chǎn)品，如果將備選項(xiàng)都全平鋪出來(lái)可能一個(gè)屏幕都放不下，所以只能將所有篩選項(xiàng)收起。但這是一種極端的情況，缺乏說(shuō)服力。
用戶對(duì)備選項(xiàng)是否足夠熟悉？比如對(duì)于一個(gè)尺碼的下拉框，我很清楚自己能選擇什么，但對(duì)于一個(gè)衣服風(fēng)格的下拉框，由于我對(duì)風(fēng)格不熟悉，不能預(yù)判這個(gè)篩選條件能起什么作用，很可能會(huì)將其忽略。
3、選中項(xiàng)的可見(jiàn)性：
選中項(xiàng)的可見(jiàn)性，即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。
性能
數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會(huì)有性能問(wèn)題。在不同場(chǎng)景下，用戶會(huì)發(fā)生不同的行為，對(duì)性能的要求也會(huì)不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會(huì)帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會(huì)即時(shí)刷新，而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒(méi)有“確認(rèn)”按鈕。這分別對(duì)應(yīng)著兩種不同的場(chǎng)景。
第一種場(chǎng)景，如B端產(chǎn)品中的查詢報(bào)表場(chǎng)景。我需要找出符合條件A、B、C的所有信息，并進(jìn)行對(duì)比分析，那么我就會(huì)設(shè)置篩選條件A、B、C后一并篩選出來(lái)，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認(rèn)”按鈕的篩選模式更符合此場(chǎng)景。反而即時(shí)刷新會(huì)在我設(shè)置篩選條件時(shí)造成干擾。
另外一種場(chǎng)景，常見(jiàn)于B端產(chǎn)品中的查詢列表場(chǎng)景。如果我想找到信息α，通過(guò)篩選A后得出10個(gè)信息，那么憑肉眼即可找出信息α，任務(wù)結(jié)束，但如果篩選A后得出1000個(gè)信息，我可能會(huì)再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。換句話說(shuō)，這時(shí)候我的心理模式是即時(shí)滿足的，只要信息縮窄到一定范圍我就會(huì)停止添加篩選條件，否則我會(huì)繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場(chǎng)景，但與此同時(shí)就需要考慮到性能問(wèn)題。
另外，我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。
變更頻次是指用戶反復(fù)使用篩選的次數(shù)，變更概率是指用戶使用篩選的可能性，一般來(lái)說(shuō)，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對(duì)性能的要求是不同的。還是以報(bào)表和列表為例，在列表中，雖然很大概率會(huì)使用篩選來(lái)尋找信息，但由于用戶是即時(shí)滿足的，而且滿足即可，所以不會(huì)重復(fù)變更篩選條件。而在報(bào)表中，雖然用戶會(huì)一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會(huì)高頻更換篩選項(xiàng)，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競(jìng)品的日活月活等數(shù)據(jù)時(shí)，是不是會(huì)高頻地切換數(shù)據(jù)來(lái)分析比對(duì)？所以，高頻次的篩選就會(huì)對(duì)性能有更強(qiáng)的要求，而為了避免性能問(wèn)題，往往也會(huì)加上“確認(rèn)”按鈕。
用戶認(rèn)知
最難解決的其實(shí)是用戶的認(rèn)知問(wèn)題，尤其在模式相對(duì)固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。我們想出一些創(chuàng)新性的篩選模式時(shí)，不要忽略用戶的認(rèn)知。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn