百度小說是百度APP內的垂直頻道，擁有過億月活和行業最全的正版書籍。隨著著作權保護意識逐步上升，越來越多的用戶愿意為優質的資源和閱讀體驗付費。2019年底，為了滿足用戶消費升級所產生的一系列需求，百度小說初步建立了會員體系。經過兩年多的打磨，我們不斷提升會員的服務體驗，并進行了多次優化升級，現在將我們的設計經驗分享給大家。
一、設計背景
2021年我國數字閱讀用戶規模達到5.06億，同比增長2.43%，半數以上用戶愿意為電子閱讀付費，占比最重的人群為19~25歲用戶，達到44.63%（數據來源《中國數字閱讀報告》），“Z世代”已經成為我國數字閱讀的主要群體。隨著消費升級，用戶對服務的需求不斷提升，更看重信息之上的附加價值，如認同感、歸屬感和儀式感。
二、改版原因
2019年，由于時間緊、任務重，我們完成了小說會員從無到有、從0-1的基礎場景搭建。但隨著設計趨勢的變化，當時小說會員的設計風格與主流用戶的喜好不完全匹配，在使用場景中也存在易用性不足、內容缺乏吸引力等問題。下圖是2019年小說會員的界面。
同時，我們對小說用戶進行了視頻訪談，搜集了用戶在使用會員服務中遇到的問題，如會員福利少、找不到會員專屬內容、購買過程有卡頓等，最終梳理為的三大核心問題：身份感知弱、購買路徑長和資源內容少。
三、設計目標
在小說會員亟待改版的背景下，我們結合業務目標、舊版核心問題和用戶訴求，推導出了本次改版的設計目標—品牌化、鏈路化和服務化。
1、品牌化—強化會員品牌
小說會員作為百度APP眾多會員之一，設計團隊希望能帶給閱讀用戶一些不同的品牌記憶點。
1）設計關鍵詞
基于會員的主流用戶、產品屬性和用戶訴求，我們衍生出以下關鍵詞：年輕、品質、尊貴、超值。年輕用戶群體的占比越來越高，新版的設計風格力求更好滿足年輕用戶的審美需求。
2）會員符號
符號是最直觀的視覺元素之一，能夠以最快的方式傳遞產品記憶點。在會員品牌符號設計的草圖階段，我們從字母V、VIP、鉆石、王冠和小說IP白嘟嘟等多個方向進行了方案發散。最終采用了白嘟嘟圖形與尊貴感的V形符號相結合的形式。該方案既延續了小說的視覺符號，又與競品的會員標識形成差異，從而加深用戶的品牌感知和視覺記憶。
3）會員色彩
為了確定更加獨特的品牌色，設計團隊搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個具有品質感的顏色。在視覺初稿階段，我們選擇了玫瑰金和黃金兩種主色進行了方案嘗試。最終根據整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現代，煥然一新。
4）會員圖標
在圖形元素上，為了增強親和感，我們選擇了圓潤的面形圖標樣式，通過大圓弧和小圓角的細節處理，傳遞給用戶一種年輕、品質的品牌印記。
5）信息傳達
我們對會員購買頁和權益詳情頁進行了布局重構，采用深色的背景襯托卡片信息，使得產品框架層和內容信息層更加明確，突出核心內容。
在各類場景中，我們通過會員品牌色彩、圖形、符號和IP形象的滲透，強化會員品牌印記。
經過分析研究和實踐，我們完成了主場景的設計升級。
2、鏈路化—精細化運營
就會員體驗而言，我們需要關注用戶在各種時間和各類場合下的需求，因此我們將會員的全鏈路狀態分為時機、場景和人群三個維度。
1）時機
在不同的時機狀態下，我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態下的用戶訴求，才能為其提供更好的服務。接下來我們從購買前、購買中、購買后和即將過期四個階段闡述：
①購買前—權益/優惠信息引導
在用戶購買前，我們強化了低價和省錢信息，讓用戶直觀的感受到購買會員后的價格福利。為此我們從三個方向上進行優化，在開通購買頁，外露省錢金額，幫助用戶了解開通會員可享受的收益；在會員頻道頁，采用外露多項權益，讓用戶快速了解會員權益；在章節購買頁，采用突出會員折扣和會員優惠價，讓用戶感受到開通會員的折扣福利。
②購買中—優化路徑流程
在用戶購買中，我們在會員購買鏈路環節進行簡化，采用當前頁彈出半層面板替代跳轉至會員聚合頁的方式，縮短等待加載時間；在章節付費鏈路環節，將商品選擇區信息結構進行優化，減少多章購買的頁面跳轉，使得用戶能夠更流暢的完成支付，提升付費體驗。
③購買后—強化權益感知
在用戶購買后，鑒于付費用戶對商品和服務品質有著更高追求，為此我們通過在各類重要入口展示會員權益，包括省錢金額、去廣告次數以及各類場景VIP狀態提示等方法，以達到強化用戶的權益感知。
④即將過期—輕引導續費
在即將過期前，為了避免對用戶造成強付費的不友好感知。過期前3天，我們采用了輕量化的形式告知用戶續費，通過各類引導信息的提示，讓用戶知曉會員服務期限屆滿。
2）場景
我們在入口和功能場景中也進行了精細化設計，讓用戶更便捷地使用會員服務。為了突出會員優質內容和服務，我們設置了會員專屬的頻道和書庫，方便用戶選擇。
在各類功能場景中，為了方便用戶在使用功能的過程中隨時購買，我們設置了多個功能場景的會員開通入口。讓用戶快捷享受會員服務。
3）人群
通過小說用戶數據分析，我們將用戶人群分為會員用戶、潛在用戶、新用戶和過期用戶。
為了讓會員用戶能夠體驗到區分于普通用戶的尊貴感，我們在付費頁、批量離線、TTS播放頁和簽到頁等場景均采用了會員定制化的配色方案和引導提示，這樣使得會員用戶在體驗服務的各類場景中有更強的身份專屬性。
所謂潛在用戶，是指仍在猶豫是否購買會員的用戶。我們通過限時優惠券、激勵視頻試用15分鐘、書架省錢提示、挽留彈窗和降級版免廣告權益等方式，讓潛在用戶不僅可以先試后買了解會員權益，而且可以通過各類信息提示通曉會員體驗，更好地判斷是否通過會員服務減少付費金額和提升閱讀體驗。
我們針對新用戶建立了新人見面禮活動，用戶在新手福利活動期內可享受超值折扣開通會員，低價體驗會員權益。而針對已過期的用戶，我們通過下發優惠券、強化特權等形式喚醒用戶，以免錯過各類福利和特權。
3、服務化—提升會員服務
在內容為王的時代背景下，為了增加會員產品的核心競爭力，我們持續擴充會員書庫的數量和類目、拓展會員權益，讓用戶閱讀到更加豐富的小說內容和體驗到更多權益的會員服務。小說書庫的付費和免費書數量大幅擴充，且書籍類型新增了有聲書和短篇故事，增添了小說資源的多樣性。
在權益上，對內我們持續拓展會員特權，從最初的4項擴展為10項，新增了有聲免費聽、免費讀故事、整本離線、專屬字體、簽到1.5倍書幣等權益；對外我們聯合其他產品，推出了會員贈禮和聯合會員服務，用戶可以根據自己的需求進行購買，享受組合購買的優惠。
通過多個版本的迭代，我們完成了會員體系的設計升級和落地，用戶體驗得到了顯著提升。
四、未來規劃
提升付費產品的用戶體驗是一個體系化的研究課題，需要各個角色通力合作，合力同行，開拓革新。將來我們還會不斷探索，通過不斷優化體驗細節，不斷增加用戶權益感知，不斷嘗試方案創新，形成設計組合拳，為用戶提供更好的服務。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
百度酒店以比價為核心特色，經歷多次設計探索，初步建立了用戶認知。
設計中通過“核心流程分析-明確用戶關注信息-探索比價價值”的方式去制定設計策略，并在方案探索與落地階段，通過思路發散、多輪數據驗證與方案迭代，驗證了“氛圍感知強化、價值信息傳達、聚合比價”等設計手段的作用，希望給服務和電商等比價類產品的設計師一些啟發和參考。
一、項目背景
酒店住宿在線預訂市場中，各個平臺基于用戶權益、運營補貼等差異進行著激烈的價格競爭，導致行業存在天然的價差。而在我們進行的一次酒店預訂訪談中發現，超過半數的用戶在預訂酒店時會進行比價，而比價的用戶中多數會使用2個以上的酒店APP。因此，在市場存在價差且用戶有比價訴求的背景下，百度酒店通過接入多家供給及會員低價，旨在建立酒店聚合比價平臺，為用戶提供性價比最高的酒店搜索服務。
二、設計策略與落地觸點
1.目標和策略制定
在上述背景下，我們與產品側對齊業務目標，結合對用戶訴求的分析，確定了設計目標。
為了達成設計目標，需要明確比價在酒店預訂的各個觸點下對用戶的價值是什么，以探索比價如何發揮作用。下圖列出了酒店預訂的核心流程、核心模塊及用戶關注信息，由于用戶在各個環節關注的信息不同，比價所能發揮的價值也就不同，因此基于比價是否影響用戶進行選擇和決策，我們又將核心流程分成服務報價選擇前、服務報價選擇時、服務報價選擇后。
設計目標的實現也對應上述3個環節如下圖：
2.明確落地觸點
為了找到一些好的比價概念和價值的傳達方式，以及提升比價體驗的方式，我們進行了競品調研，競品包含酒店、商品等不同行業，調研結論歸納如下：
結合競品調研結論，我們根據百度酒店的核心流程和觸點進行了設計策略的拆解，建立了策略和落地的映射關系。
三、方案探索與落地
1.提升感知-讓用戶知道百度酒店可以比價
這一環節的設計目標是要讓用戶知道百度酒店可以比價，以吸引用戶在百度酒店完成下單行為，因此清晰、有吸引力的比價元素設計十分重要?；诟偲氛{研內容，我們進行了設計探索。
1）酒店列表-氛圍感知強化及價值信息傳達
下圖所示為酒店列表比價設計的探索過程，最初的方案，為了保證酒店信息的獲取體驗，采用了與傳統酒店預訂平臺采用一致的結構和信息優先級，僅結合圖片區域和價格做了比價信息的結合，但這種設計與傳統酒店預訂平臺差異很小，比價感知和價值的傳達效果并不好。因此設計側轉變思路，在酒店列表中通過更強化的模塊來突出比價的感知，同時結合“比某平臺低xx”的文案說明比價結果，傳達“比價獲得更低價”的感知。
酒店列表覆蓋多個場景，為了建立百度酒店一致的體驗和認知，我們將列表的設計覆蓋到了搜索結果頁和小程序的多個頁面，如圖所示。
2）房型及服務報價-基于低價推薦去強化比價
房型及服務報價模塊對應酒店精準需求和酒店詳情頁，與酒店列表思路一致，方案在逐漸與傳統酒店預訂平臺產生差異化，去強化比價、低價的感知，形成記憶點。
下圖為搜索結果頁的方案，最初外露了多個房型，以滿足用戶的選擇訴求，但從用戶行為數據來看，百度酒店的絕大多數用戶會選擇酒店的最低價房型及報價，因此我們調整設計方案，結合最低報價，用模塊式的對比方式去強化比價，并通過“低價立省xx”的信息去傳達低價感知。另外，這一部分的設計也和聚合比價有所結合，后面會進行詳細的說明。
詳情頁的主要模塊設計與搜索結果頁基本一致，如下圖所示，詳情頁中將最低報價作為低價房型推薦，以建立一致的比價認知同時便于用戶快捷預訂低價。另外，在常規的報價列表中，為了提升用戶查找報價的效率，相比于最低價房型，采用了弱化的形式。最終方案上線后，數據上也取得了正向的效果，報價展現到預訂點擊的轉化得到了提升。
3）“產品縫隙”中的比價概念滲透
“產品縫隙”并不像上述列表模塊那樣感知強烈，設計的目的是為了進一步加深“百度酒店可以比價”的用戶印象。結合百度酒店的核心頁面，我們重新設計了酒店列表和房型報價列表的加載態，利用“多資源方交替動效+文案說明”的方式，構建動態的比價感知，在用戶進入頁面或者進行篩選等場景時會出現。另外，我們也利用了小程序首頁和詳情頁的頁尾，在閱讀結束時去傳達全網比價的概念。
2.建立認知-聚合比價模式的構建
在競品調研部分，我們提到了聚合比價模式，百度酒店由于報價復雜，也適合用這種方式去簡化報價。
如圖所示，常規酒店預訂平臺，同一房型（如標準大床房）會存在不同服務政策（早餐服務、取消規則、支付方式）的報價，而在百度酒店中，由于又加入了預訂平臺的差異，報價會更加復雜，數量更多且同質化嚴重，即服務政策相同，僅預訂平臺不同的報價多次出現，這就導致了報價列表的查看和選擇效率較低。
聚合比價模式就是要將這些服務政策相同的報價聚合在一起進行比價，以簡化報價列表提升選擇效率，同時在服務相同的情況下，絕大部分用戶會更傾向于低價，在報價聚合后，可以突出低價以便用戶預訂。
我們也在探索如何讓聚合比價更簡單，初始方案采用點擊展開的形式，用戶可以保持滑動瀏覽的交互體驗，整個過程的交互體驗比較流暢，但頁面的層級關系較為復雜，用戶認知成本高。因此我們又嘗試了調起面板展示比價詳情，讓用戶聚焦在當前報價的對比，并通過模塊式的設計，清晰羅列了每個平臺的服務、優惠明細等差異信息，讓信息的對比更高效，同時強化低價平臺，與前面的比價模塊保持認知一致。
聚合比價模式下，存在了兩種用戶路徑，如圖所示。用戶可以直接選擇最低價資源方完成預訂，也可以通過比價詳情彈層，查看針對同一服務的所有平臺報價，對比平臺的詳細服務、優惠差異后再選擇預訂。
這種預訂模式的目的，一方面在教育用戶建立百度酒店可以比價、可以買到低價的認知，另一方面也提升了用戶選擇低價平臺的效率。另外，聚合比價要具有清晰的規則才能被理解和信任，在比價詳情中，為了進一步降低認知成本，我們通過標題突出了聚合項，并增加了比價說明入口，讓聚合規則更明確。聚合比價的方案上線后，報價的預訂點擊到成單轉化也得到了提升。
另外，前文提到的精準需求搜索結果頁和詳情頁的低價房型推薦也利用了這種模式，不過在比價感知上做了更強化的處理。用戶可以在詳情頁直接點擊各個平臺報價完成預訂，也可以點擊文字部分查看房型詳情，在頁面底部的比價詳情中完成報價的對比和預訂。
3.強化記憶-比價價值感的再次強化
填單場景是在預訂完成后，這個環節我們可以將比價的概念和價值再次展示給用戶，以加深用戶對比價的認知。這里的設計手段與“提升感知”階段類似，如圖所示為一些方案探索，在用戶選擇低價平臺預訂，點擊跳轉至填單頁后，我們會強化用戶“預訂到最低價”以及“為用戶節省xx元”的感知。另外，在用戶提交訂單時，會存在一定的加載時間，我們也利用了這里的“產品縫隙”，結合加載態繼續傳遞低價、省錢的認知。
四、結語
回顧百度酒店的比價設計過程，我們以比價及低價感知傳達、高效預訂低價為設計目標，基于百度酒店的核心預訂流程，探索比價在各個環節如何發揮作用，進而將設計目標的實現劃分為了“提升感知、建立認知、強化記憶”三個階段，并為業務帶來轉化提升。
提升感知過程結合流程中的主要模塊，通過模塊式對比形式、傳達比價價值感、基于低價推薦強化比價、以及利用“產品縫隙”等手段，去吸引用戶了解和使用比價；建立認知過程利用“聚合比價”模式去精簡報價，同時結合對低價報價、低價平臺的強化，讓用戶更便捷的預訂低價；最后強化記憶的環節，我們進行了一些方案嘗試，再次強調比價的價值。另外，為了建立一致的比價認知，整體的設計中也堅持一致性的原則。百度酒店的比價設計也在不斷地嘗試和優化中，希望能給用戶創造更好的使用體驗。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前幾天眼睛不太舒服，去醫院做了一個檢查（視疲勞導致）。因為要走商保，所以要使用社?？?，之前我記得用社保結算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保，要我掃她胸前掛的碼（可以快速到達電子社保二維碼界面），掃完她就開始幫我點擊操作。
她覺得我應該不會操作，所以讓我看一遍，其實這個操作并不難，只是因為我不知道自助機上可以用，自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。
在B端產品中也有很多類似問題，用戶不知道有這個功能、也不知道這個功能怎么使用，特別是一些大數據產品，專業性比較強。產品、技術都認為用戶和他們一樣都懂，實際上并不是，這個時候你需要提供一些邀請，引導用戶進行使用。
邀請就是引導用戶進行操作前的提醒和暗示，通常包括實時的提示信息和預期功能，以表明在下這個界面或下個界面可以做什么，這是成功的交互式界面關鍵所在。
例如：飛書我的空間，當鼠標停留在可編輯區域上時，就會實時地顯示邀請（復選框），這個例子的缺點是鼠標如果不處于相應區域上，就不會顯示邀請。
另一種方案是任何時候都顯示邀請，例如：石墨文檔我的桌面，復選框一直顯示。
靜態邀請就是通過直接在頁面上給出交互提示，可以讓用戶隨時看到期望的界面功能。
靜態邀請主要有兩種模式：引導操作邀請、漫游探索邀請
例如：華為云HECS服務器產品就給出1、2、3操作步驟 引導操作會占據頁面較大的空間，同時也會吸引用戶的眼球。所以在設計時需要思考一下，你希望引導用戶執行什么操作，用戶是否可以多次查看，這樣有利于設計出明晰的頁面和信息層。
另一種引導操作邀請叫作白板式引導。 意思很明確：現在只有一個空白頁面，需要引導用戶創建內容。
利用空白區域“變廢為寶”，如何對該區域應有的功能給出提示，是誘導用戶創建內容（填補空白）的有效方式。
與引導操作邀請關系密切的是漫游探索邀請。假設你重新設計了某個頁面并添加了一組全新的功能，怎樣才能保證用戶恰當地使用新頁面，同時發現新添加的功能呢？漫游邀請是向用戶介紹新功能最好的方法。
1、漫游功能用戶可能不想用，所以需要有可選功能，也就是可以跳過或關閉；
2、漫游功能不是“創可貼”不要亂用，只有針對精心設計的界面使用才能發揮價值；
3、設計漫游的關鍵在于保持簡單，讓它容易開始也容易停止。漫游應該只是頁面本身的一個演示。脫離頁面的“教程”式漫游很難起到作用。
靜態邀請適合提示用戶當前界面中包含什么功能。然而，許多調查試驗表明，用戶經常不會閱讀指導說明性的文字。而在用戶交互過程中，在他們需要的時候提供邀請則是一種不錯的方式。動態邀請就是在用戶交互過程中的某個點上吸引用戶，并引導他們繼續下一步操作。
吸引用戶的一種方式是通過鼠標懸停來顯示邀請
例如：飛書消息列表鼠標移入后， 背景變化的同時會有一個“勾”圖標來吸引用戶，鼠標移入上去后提示可以勾選完成，點擊完成后消息移除列表。
1、當操作沒有內容重要，而且希望界面整潔時，使用懸停邀請。
2、在實現懸停邀請時，可以通過改變光標、改變背景和顯示提示條共同配合表明所邀請的操作
3、在交互的不同階段，盡量點綴一些用戶熟悉的元素，通過熟悉的概念引出新概念有助于用戶快速理解新功能。最常見的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標。
4、通過距離表明邀請操作的目標對象。
唐納德·諾曼將這個術語引入到設計領域。最經典的例子是門把手，門把手的預期功能是可以抓握、扭轉或按壓。屏幕元素可感知的預期功能沒有物理屬性，不過，由于習慣、術語、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。
例如：第一張圖飛書文檔sheet頁“加號”圖標與第二張圖“三個點”圖標，就是一種預期功能邀請。用戶沒觸發之前就能猜到觸發后會是什么效果。
預期功能邀請之所以有效，是因為利用人們已知的習慣與認知引入交互，從而讓用戶順利完成一連串操作。
1、通過人們習以為常、司空見慣的概念來引出新的、不熟悉的交互方式。
2、使用可感知的預期功能來給出邀請提示(例如，用向下的箭頭表示可以打開下拉菜單，而用向上的箭頭表示可以關閉菜單)
3、把邀請安排在適當的上下文中，特別是要靠近交互的主體。
設計邀請時怎么才能猜測用戶的想法，也是一項重要挑戰。如果用戶下一步可能會執行多種操作，而事實上又不可能準確判斷用戶想法，那么面臨的困難就會比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當鼠標點擊某個點后，進行第二個點連接時，會有多種可能性，這個時候系統也不確定用戶會怎樣連接，但會給出對應的提示，比如：端點、中點、背面、側面等點位來輔助用戶進行連接。
例如：這種工作流場景個人覺得也算是一種，點擊“加號”右側會滑出面板，給出你可以添加的動作。 這種在交互期間以可見方式向用戶表明系統推斷出的用戶想法被稱為推論邀請。
圖片類型的更多邀請，例如：站酷相關推薦
文字更多邀請，例如：QQ郵箱右側最近聯系人
精心設計的應用能夠通過邀請體現出各自的細微差別，無論是靜態還是動態，都是引導用戶順利進入下一個交互層次的有效方法。
謝謝觀看！
搜索的本質是什么？無疑是內容的召回和信息的推薦。
可隨著時代的發展和行業公司的內卷，不少公司除了持續優化搜索結果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產品印象/口碑。行業代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內置了很多搜索關鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結果比如搜：is google down（谷歌關閉了嗎），搜索結果優先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經形成一個穩定、具有品牌感的企業文化了。
如各種復活節、開學季、母親節動效。而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應該是搜索【黑洞】時，頁面上會出現黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來?
而在【活動運營】上，百度也是很有心地進行著創新設計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節，搜索結果頁上都有‘調戲’用戶的創意設計，各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設計上也是特別有想法：在某年的圣誕節上，百度創新性地將活動入口’嵌套‘在結果頁卡片中間，用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」
用這種充滿創意+應景的的入口設計與引導方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產品易用性。
代表：蘋果產品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據輸入詞檢測+搜索對應的手機號碼：當你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關幫助時，系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統偏好設置’里搜索幫助，在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時，該入口的聚光燈會更清晰些，特別容易找到搜索結果。
夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準地觸達搜索。
而且在輸入網址或英文等字段時，搜索框下方會出現一個滑塊區。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標位置。
而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。
讓用戶更方便地將光標快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結果， 比如在搜索框中輸入“某城市+天氣”的關鍵詞，上方就會以卡片的形式顯示該地區最近一周的天氣。
用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息。
– END
數據保存是Web端工具的基礎功能，一般在產品和技術框架設計之初就已經確定了數據保存的方式，后續不太會頻繁更改。
正因為如此，在日常需求迭代中，設計師很容易忽略數據保存的過程，也很少質疑當前的保存機制是否合理，但是當需要設計新模塊或產品時就會對保存有疑惑。
此外，保存也是一個受技術限制較大的領域，設計師需要對保存的技術類型有基礎認知，因為它會影響保存生效的邏輯和交互形式。
本文將會基于個人經驗，從設計表現和技術實現的角度聊聊Web端工具的數據保存。
對于Web端工具產品來說，保存的對象可分為「文件數據」、「設置數據」、「用戶行為數據」。
「文件數據」是相互獨立的內容，比如酷家樂的一個方案、Figma的一個文檔都是文件數據，在文件A中觸發保存并不會影響到文件B。文件數據是最主要的用戶資產，若丟失會給用戶造成很大的損失。
「設置數據」分不同的維度，主要有用戶級別、組織級別、設備級別這三種。
用戶級別：數據保存在當前用戶的賬號下，同一個用戶的所有文檔都會應用該設置，比如酷家樂云設計工具的偏好設置。
組織級別：數據保存在組織級別，可能由組織管理員設置，同一個組織下的所有用戶都應用該數據。
設備級別：數據保存在設備（瀏覽器）上，同一個設備上的不同賬號、不同文檔都會應用此數據。區別用戶級別和設備級別的保存很簡單，只要清空瀏覽器緩存，看看數據是否變化即可。
一般來說，「設置數據」也是用戶資產。但是設備級別的數據存在丟失的可能性，一般情況下不會存儲大量重要的數據。
技術上經常把「用戶是否進行過xx行為」這樣數據保存在用戶級別或設備級別，用于差異化的引導、運營方案。這類數據雖然不能被視為用戶資產，但對于產品設計來說至關重要。
<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;">根據數據保存的位置，可以分為兩類：后端保存和前端保存。</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;">后端保存是最常見的保存方式，觸發保存后，將方案數據上傳并存儲在服務器（云端），需要聯網。</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.數據量大時會耗性能，可能會阻塞操作</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) 的方式將數據保存在瀏覽器中，一般采用的技術方案是 indexDB（如Figma)。即使將瀏覽器關閉，下次打開時仍能夠恢復數據。</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.必須要同設備，且不能清除緩存；</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.有時間上限（大部分瀏覽器最多可以保存 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;">還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設置，例如記住選項狀態、輸入框的內容等，但只要關閉或刷新標簽頁這些數據就會被清除。從嚴格意義上來說，會話保存不是真正的保存，本文不對此展開討論。</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端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網絡或服務不穩定造成的數據丟失。</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」保存的觸發機制
</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></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 自動保存</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;">根據保存的觸發條件，可將自動保存分為以下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. 定時觸發保存以一定的時間間隔（通常采用幾分鐘 ~ 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;">b. 條件觸發保存特定的用戶行為會觸發方案自動保存。</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;">c. 實時保存只要數據發生改變，立即觸發自動保存，無需用戶手動保存（盡管一些產品考慮到用戶習慣，仍會保留手動保存的交互）。部分產品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實時保存。實時保存能最大程度避免數據丟失，是Web端工具理想的保存觸發方式。但因為技術原因，并非所有工具都能夠做到實時保存。</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 手動保存</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;">手動保存指用戶通過額外的操作觸發保存，通常為點擊「保存」按鈕或快捷鍵。部分有實時保存機制的工具不需要額外的手動保存（如Figma），但對于沒有實時保存的工具來說，手動保存的設計至關重要。</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;">即便有手動保存，用戶還是可能忘記保存。當用戶離開工具或某個環境時，若程序監測到有未保存的內容會丟失，則將此風險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關閉瀏覽器/標簽頁的方式離開，也可以在瀏覽器上設置類似的兜底提示對話框，但是對話框上的文案無法定制。</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.「實時保存」保障性最好，在技術允許時推薦采用；</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. 因技術原因無法采用「實時保存」時，推薦使用「定時觸發保存」 + 「手動保存」共同作用，也能較好地保障數據；</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. 「條件觸發保存」通常是因技術原因而采用，用戶對其沒有預期，盡量不要讓它打斷或干擾用戶的操作；</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. 在數據有丟失風險的時候需要提示用戶保存，可根據用戶的操作路徑選用工具自身的提示或瀏覽器的提示。</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」保存的觸發設計<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 觸發原則</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;">在開始聊具體的設計之前，先提出保存的 2 點設計原則：</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;">防錯</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;">保存是對方案數據的 最重要的 保障機制。穩定的系統需要有可靠的保存機制，盡量避免各種原因造成的方案數據丟失。</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;">狀態可見</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;">保存的反饋需及時有效，讓用戶知道當前方案的存儲狀態，如果有異常也需要第一時間告知，并給出可行的解決方案。</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>》一書中提到的“觸發器”概念，可以將保存作為一個觸發器。觸發器是啟動一系列動作的原點，分為系統觸發器（系統被動觸發）和手動觸發器（用戶主動觸發）。</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 系統觸發器</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;">對系統觸發保存來說，主要需確定2個點，何時觸發、觸發頻率。對Web端工具來說，有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.定時觸發</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;">一個獨立工具一般只有一個保存觸發間隔設置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設置。建議產品設計師根據技術現狀設定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗?？赏ㄟ^選擇器給用戶幾個合適的選項，選項之間的時間間隔依次變大，總選項數不超過 5 個。</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.條件觸發</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>
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:"">
<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;">現在已經有很多在線工具（如 Figma）實現了實時觸發保存，對用戶來說可以不用再理解保存這個概念，是一種認知上的減負，并且這種方式對數據保障的效果也最好。但是，仍然有設計師提出這種體驗上的風險，比如沒有容錯余地、頻繁保存造成的干擾和系統壓力。</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 手動觸發器</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;">對保存來說，「手動觸發器」一般來說是一個保存按鈕。在沒有實時保存的創作類工具中，手動保存按鈕的設計至關重要，一般會放在界面上方較顯眼的位置，并設置快捷鍵 (Ctrl+S)，方便用戶操作。</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;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;">而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認完內容后再進行保存。</span></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 Five」保存的反饋設計
</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.自動保存的反饋對于自動保存，當保存結果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標或文字的狀態變化作為反饋。</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:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設計工具進入施工圖時，因為技術原因需要保存方案，但可以將保存方案的進程與施工圖加載的進程合并。</span></span>
</p>
b.手動保存的反饋對于手動保存，當保存結果無異常時，可使用全局提示（Toast）告知保存進度和保存結果，也可以用「保存」按鈕的狀態變化作為反饋。
<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;">當保存有異常時，應即時給予且較明顯的異常反饋，并幫助用戶排查問題。在設計保存異常反饋時，需注意以下 3 點：</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;">哪些數據保存異常，是全局數據還是個別模塊的數據，是否會因為非核心模塊的保存異常而影響到整體用戶進程，是否可以通過其他方式（如前端保存）讓用戶繼續操作</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;">保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網絡？重新登錄？）</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;">當從異?；謴秃螅瑧撊绾翁崾居脩?lt;/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與保存異常相關的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異?；謴吞崾? </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:"">
總結
</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;">最后總結一下，當我們接手一個新產品、新模塊、新需求的設計時，應該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設計保存：</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;">首先，確定保存對象，是文件數據、設置數據，還是用戶行為數據。一個完整的產品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。</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;">接下來，根據保存對象、保存觸發機制，設計保存的交互，包含保存的觸發、保存的規則和保存的反饋。</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;">最后，以用戶使用工具的流程再檢查一遍數據的產生和存儲，是否會有遺漏，設計保存兜底。</span></span>
</p>
作者：酷家樂UED 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
對于產品經理、設計師和運營人員，心理學都是必須要補的一門課程。
可能很多同學都犯過和小摹相同的錯誤——在各種商城放“神券”的時候屯一大堆專業書籍。實際上，心理學的書籍你大概只要看到第三本，就會發現翻來覆去講的就是那么幾個淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。
基礎心理學（消費者心理學，社會心理學，傳播和行為心理學等）的概念都不難，但如何精妙地運用在自己的專業上則非常考驗使用者的功力。
為什么產品、設計、運營都需要學習心理學？
因為他們工作的本質都是和“人”打交道——用產品方案、視覺內容和活動規劃來影響用戶的決策、行為和心理。
你可能會覺得“依靠數據來統計用戶的行為再針對性決策”會更客觀，但實際上想得到靠譜的數據和正確的結論一點也不輕松，甚至很多公司根本不具備開展這類型調研的條件。
在這種情況下唯一的辦法還是洞察用戶并主動決策，此時基礎心理學原理就是你進行判斷的重要依據。
本文為大家梳理了十大著名的心理學原理，這些概念來自于多本心理學的經典名著，小摹進行了適當整合。
一、懷舊思維
簡單來說，就是人們在絕大部分時候都會遵循歷史慣性，更愿意相信過去的結論。
這也解釋了為什么現代商業中，品牌一直是一項核心競爭力：如果一個品牌曾經贏得了消費者的信任，那么消費者往往愿意持續選擇這個品牌的產品。
在產品設計中，懷舊思維有著極其豐富的應用場景。比如軟件產品的交互對于操作上的創新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業中主流產品一致，會更容易讓新用戶接受。
比如我們的原型設計工具“摹客RP”，界面布局借鑒了國外的UI工具Figma和Sketch。雖然產品主打的方向并不相同，但遵循業界已經約定俗成的定式設計，在新用戶上手的角度有很大的優勢。
二、暈輪效應
暈輪效應原指人際交往中，人身上表現出的某一方面的特征，掩蓋了其他特征，從而造成人際認知的障礙。
比如有的老年人對青年人的個別缺點，或衣著打扮、生活習慣看不順眼，就認為他們一定沒出息；有的青年人由于傾慕朋友的某一可愛之處，就會把他看得處處可愛，真所謂"一俊遮百丑"。
暈輪效應是一種以偏概全的主觀心理臆測，和上面的懷舊思維類似，屬于一種思維的定式，因為這種方式大腦在決策時會更輕松。
對于產品規劃者，尤其要想清楚自己的核心優勢和賣點是什么，不必完美主義地去追求面面俱到，因為如果最突出的優點能打動用戶，即使有缺點也很容易被用戶忽略。
三、習得性無助
簡單地說，如果用戶在過程中產生了“無論如何都無法改變現狀”的感受，容易陷入深深的絕望和悲哀。
在實驗中，經過訓練的狗本可以逃避實驗者加于它的電擊。但是，如果狗以前受到過不可預期（不知道什么時候到來）且不可控制的電擊（如電擊的中斷與否不依賴于狗的行為），他們就會徹底躺平并不再逃離。
狗之所以表現出這種狀況，是由于在實驗的早期學到了一種無助感。
也就是說，它認識到自己無論做什么都不能控制電擊的終止。
人如果產生了習得性無助，將很快拋棄當前讓他產生失望感的產品。這個原理解釋了為什么現在商品或者服務往往都要為用戶提供非常順暢的溝通方式（比如熱線電話）。
如果你比較了解國外在線軟件行業趨勢，就會發現很多的新興產品都已經不滿足于提供官方的Email地址，而是直接提供Discord鏈接（可以理解為在線聊天室）。
及時的直接溝通可以避免用戶產生絕望感，增加產品的生存幾率。
四、貝博規率
其實用一個成語就可以形容這個規律：得寸進尺。在實際場景中，只要想辦法讓用戶先接受了一個小要求，之后就更可能讓他接受一項更大、更不合意的要求。
原始的實驗中，心理學家讓兩位大學生訪問郊區的一些家庭主婦。其中一位首先請求家庭主婦將一個小標簽貼在窗戶（這是一個小的、無害的要求）。
兩周后，另一位大學生再次訪問家庭主婦，要求她們在院內豎立一個呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個大要求）。
結果答應了第一項請求的人中有55％的人接受這項要求，而那些第一次沒被訪問的家庭主婦中只有17％的人接受了該要求。
這個實驗說明，如果想要用戶達到最終的目標，可以先適當設置一些和最終目標相關，但完成難度小得多的目標，循序漸進地引導，可以大大提升轉化率。
這種原理在各種產品的銷售的場景的可謂是遍地開花。
比如汽車、不動產等高價的商品，往往會給打出“來訪即送好禮”的方式吸引用戶前往，然后通過用戶試駕、樣板房體驗等環節引導用戶去體驗和接納，客戶有意向后，也只會要求付定金（而不是全款）......這樣繁復的流程都是為了把困難的目標拆解得更細小。
五、主觀性證詞
心理學研究表明，很多證人提供的證詞都不太準確，或者說是具有明顯的個人觀點、傾向性和意識。甚至，證人對他們的證詞的信心和證詞的準確性沒有足夠的相關性。
結合這個原理，就能更好地理解為什么問卷或是訪談等經典的調研方法并不一定能收集到足夠準確的信息，對于一些主觀性較強的問題，個人的傾向會極大的影響答案的可信度。
正確的做法是，盡量避免在調研中出現主觀性過強的題目，如果無法避免，盡量將題目拆解為多項能被客觀量化或評估的問題。如果沒有考慮用戶本身對于產品的傾向性，很可能被言過其實的“證詞”誤導出錯誤的結論。
六、馬太效應
馬太效應是指好的愈好，壞的愈壞，多的愈多，少的愈少的一種現象，出自圣經《新約 | 馬太福音》中的一則寓言。
這個效應常為經濟學界所借用，反映貧者愈貧，富者愈富，贏家通吃的經濟學中收入分配不公的現象。
類似的理論還有很多，比如二八定律（20%的頭部公司掌握80%的市場份額，20%的優質客戶貢獻80%的銷售收入，等等）。
這個原理告訴我們，要想讓產品在某一個領域保持優勢，就必須在此領域迅速做大。
當你成為某個領域的領頭羊時，你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實力迅速在某個領域做大，就要不停地尋找新的發展領域，才能保證獲得較好的回報。
七、從眾行為
營銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數人接受的選擇。
我們經常可以看到路邊兩家餐廳，一家門口排滿了等待的食客，另一家卻一桌客人都沒有，巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。
關于這種心理，哲學家認為是人類理性的有限性，社會學家認為是人類的集體無意識，而經濟學家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是，從眾行為并非絕對的，因為在追求個人喜好上，人類往往也有很多個性的需求，從眾行為和個性追求往往是同時存在的。
從眾行為最典型的應用方式就是密集推薦或評價，現在的書籍的扉頁動輒幾十條推薦語，在線服務往往也會引用大量網友的好評，來證明自己的價值。
新產品在推向市場時，先多收集一些用戶的正面評價，宣傳時會非常有利。
八、比較心理
這是消費者心理學最經典的原理，簡單來說就是把一個200元的產品和一個100元的看上去差不多的產品擺在一起，你就會覺得100元這個超級劃算，很容易產生購買的沖動。
對于每個人來說，所有的認知，價值觀和結論都是建立在【比較】的基礎上得出的，所以，影響一個人的認知，最有效的辦法就是創造對比的機會。
價格頁面最喜歡運用比較心理，因為比較心理可以幫助他們重新設定消費者的認知。
常見的做法比如拉高產品的價格再做夸張的折扣讓用戶覺得這個商品現在超級劃算；或者在主推產品旁邊放置兩個明顯性價比不佳的次品，讓用戶對主推產品的效果感知更加強烈。
此外，在產品介紹時也可以將競品的參數列在表格中和自家的產品進行對比（當然，這個表格中的項目都是挑選過的），這樣更容易體現自家產品的優勢。
九、投射效應
人們在日常生活中常常假設他人與自己具有相同的屬性、愛好或傾向等，心理學家稱這種心理現象為"投射效應"。
"以小人之心度君子之腹"就是一種典型的投射效應。當別人的行為與我們不同時，我們習慣用自己的標準去衡量別人的行為，認為別人的行為違反常規。
了解這一點對于產品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認為自己在這個領域比其他人都專業得多），但仍然需要被尊重。
所以近年來特別流行用戶體驗、同理心這樣的詞匯，產品應該以真實用戶的體驗滿意度作為參考指標，設計者應該盡可能地以設想自己是一個目標用戶時，會有什么反應，否則僅靠自己的“臆測”，創造出來的產品很可能和真實需求脫節。
十、賭博心理
以小博大的感覺是一種強上癮體驗，人們只有在輸的時候才想到離開，少有在贏的時候離開。這個就是賭場盈利的本質模式。
由于真金白銀賭博是法律明令禁止的，所以產品設計角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機會。
對于國內而言，氪金手游和盲盒就是典型的兩種應用場景，前者往往會設定一個極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費者有小概率獲得稀有款式的手辦，引誘顧客購買超過自己需求的商品。
對于產品設計人員來講，賭博機制可以說是一個潘多拉魔盒，通常不建議去使用和嘗試。人人都愛KPI，但也要取之有道，職場人都應該有自己的底線。
作者：jongde來源： 站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在日常使用移動端或PC端產品時，不知你有沒有這樣的體會？
推薦一個比較實用的設計法則，這個法則已經有很多的文章說明了，可以說現在的任何互聯網產品都能看到這些理論的實踐，本次主要想以比較多的案列進行實戰分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上，提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是，這10項原則是啟發式（heuristics）的、廣泛的經驗法則，可以指導我們更具價值的思考界面設計。
設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。
雅各布·尼爾森（Jakob Nielsen）是畢業于哥本哈根的丹麥技術大學的人機交互博士，被譽為可用性測試的鼻祖，2006年4月，并被納入美國計算機學會人機交互學院，被賦予人機交互實踐的終身成就獎。
尼爾森于1995年1月1日發表了「十大可用性原則」，該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了，但是對于現今的產品體驗設計仍然具有很大的參考意義。
人機交互的基本原則是，讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什么，預期是什么，如果系統不能及時向用戶反饋合適的信息，用戶必然會感到失控和焦慮，不知道下一步要做什么。
界面狀態分為兩種：靜態和動態。
靜態即用戶通過界面查閱，明確知道自己的位置、處于何種狀態，或者知道界面數據的狀態。動態即用戶在進行界面操作時，系統應當立刻提供反饋，告訴用戶該項操作被系統接受，讓用戶對操作感知及判斷。
告訴用戶處在系統的什么位置，特別是對于新用戶，需要提供必要的信息，否則容易迷惑。比如：導航菜單、面包屑、標簽頁、步驟條、分頁器等等。
相比于C端產品，B端產品在頁面層級往往更為復雜。因此，讓用戶明確當前所處的位置尤為重要，這也就突顯出了導航的重要性。設計師在設計的過程中，要注意提供上下文線索，避免用戶迷路。
告知用戶系統運行的狀態信息，比如進度、內容加載時，增加用戶掌控感。
最經典的案例莫過于Loading頁的進度條了，無論是加載頁面還是下載內容，一個清晰的進度條可以讓用戶隨時掌控進度，同時也可以用具體的數字更加明確的表示，比如：安裝程序時顯示進度條，并預估還需要多久結束，播放音樂時顯示進度條，并提示預估剩余時間。
系統適當反饋是用戶界面設計的最基本準則。當用戶在與系統進行交互時，應當在各個階段為用戶提供必要、積極且即時的反饋，同時也要避免過度反饋打擾用戶?？梢允褂玫男问桨ǖ痪窒抻冢?/span>
操作反饋：點擊頁面跳轉、按鈕點擊狀態、警告提示、輸入反饋等等；
結果反饋：非模態彈窗，輕量化感知系統內容反饋。（反饋內容應盡量不要打斷用戶操作，所以一般采用toast形式，反饋結果后及時消失。）
情感反饋：搜索沒有結果時，沒有數據等等空狀態。
還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動，甚至動效等多種形式給予用戶提示反饋。
注意，越是消極的反饋，比如網絡連接失敗、系統錯誤等，越是要及時告知用戶，同時提醒用戶采取適當措施。比如：1、提交表單時，如果校驗失敗，則在填寫有誤的內容旁邊提示錯誤原因；2、程序未響應時，系統會讓用戶選擇是關閉程序還是等待程序響應；
系統應該在合理的時間內，給予用戶適當的反饋，讓用戶了解正在發生的事情。
當系統反饋時間小于1秒，通常正常反饋即可；相反長于1秒時，我們通常會通過加載動畫、占位符、分步加載等方式，減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應，那么通常會認為這次請求是失敗的，需要給用戶失敗提示。
例如：下載提示、刷新提示、支付提示、新頁面加載提示等。
系統盡可能貼切用戶所在的真實環境。把復雜的系統語言換成用戶看得懂的語言；環境貼切原則的根本目標是讓用戶可以快速上手產品，降低學習成本。
《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應該使用易懂和約定俗成的表達。
這里說的語言不僅僅包括文案層面的語言，還包括產品的設計語言（圖形、配色、風格、動效、手勢等）設計語言都應該是易于用戶理解和認知的。產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解，他們會感到被忽視和受挫敗，許多人將選擇其他產品完成目標。
從設計心理學角度來講，用戶在使用產品的過程中，其大腦會“優待”較常用的記憶內容和操作形式，有意抑制那些相似但不常用的內容，以便減輕認知負擔，防止混淆，這種習慣從某種程度上來說屬于“熟知記憶”。
比如細分市場的產品，針對中老年、青年、兒童的產品或商務、娛樂的產品，都要分別使用符合自己的定位的語言。
反面案例就是windows系統出錯了頁面，一堆亂碼，看不懂又很慌張，就很不友好。另外還有一點，很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。
為了照顧不同國家的用戶的使用習慣對頁面結構布局，風格，語言，字體，包括交互方式都會做特殊處理。這就是場景貼合原則。
模仿現實世界的產品或者使用映射，能夠利用人們現有的知識，可以顯著的降低用戶的認知和學習困難，并增加他們的使用興趣。
比較好的案例就是iOS原生的計算器、指南針，微信紅包都是模仿了現實世界的產品。
從現實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度，并且增加興趣。最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣，且非常容易理解和使用，讓人印象深刻。
使用的操作手勢，應該是用戶自然就能聯想到的，不要創造、更改操作手勢的意義。
動效的加載樣式應符合自然規律，需要平緩過渡，而不是生硬的加載效果。比如：網易云音樂播放時唱片轉動、停止播放時唱片自動移開，有趣且有效。
用戶在使用產品的過程中，誤操作是經常發生的事情，系統應提供撤銷和重做功能，讓用戶具有對產品的控制性與自由度。
用戶可控原則的根本目標是讓用戶可以在界面自由操作，而且無需為操作不當承擔責任。
清晰便捷的導航方式，使用戶可自由控制返回和跳轉的頁面。
由于B端系統的復雜性，有些功能的層級會比較深。彈窗A中的某個操作可能會觸發彈窗B的彈出，如果彈窗A和B承載的功能具有父級和子級的關系，同樣需要考慮「返回」的功能以及清晰的層級關系。
用戶在使用系統的過程也是一個試錯的過程，系統要讓用戶覺得自己的行為是可控的，可以犯錯，并且在犯錯之后可以反悔。用戶在使用產品時可以自由進退，遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的，并且撤回之后還支持重新編輯；對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后，支持在短期內找回；在word中編輯文檔時，支持撤銷和恢復，保存的同時，還能查看歷史保存記錄。
回收站功能：讓用戶更有自由度，增加用戶安全感，可控的找回誤刪除資源。
系統在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能，這樣可提高用戶的操作可控性。在產品設計上，防止用戶常見的誤操作。比如很多產品在涉及到內容的刪除操作時，經常會有彈窗提醒，讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔，從而提升操作可控性。
比如iPhone ios系統：
1、常見的二次確認主要可以通過以下方式實現：通過文字提示，用戶閱讀后點擊是與否來進行下一步；
2、通過動作，用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作；
3、通過身份校驗，用戶需要提交個人身份信息以完成校驗；
整個系統要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性，遵循平臺慣例與行業標準。我們在設計中常見的制作平臺規范，其實就是為了保證平臺設計的一致性。
一致性原則的根本目的是保證產品的專業性，給用戶帶去統一的體驗感受。
遵循產品內部的慣例，可幫助用戶快速學習使用產品功能。產品內部的一致性包含：產品功能框架、文字、設計風格、布局、反饋等等。
比如：小熊藝術app，一款針對孩子學習美術的app，不管是首頁、個人中心以及加載等頁面，風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現，banner、加載，課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性，也形成了統一的品牌傳達。
但是，有時候為了達到產品目標，偶爾也會故意采用不一致的設計。
比如：常見的對話框都將“確定”按鈕放在右邊位置，所以用戶在操作時，很容易產生條件反射，順手點擊右邊按鈕，然后才突然發現自己點錯了。雖然看起來有些別扭甚至很多人不喜歡，但是很有效，這種設計在軟件卸載、App取消會員訂閱等操作中非常常見，主要是為了做一些心理暗示和引導，避免用戶卸載或退訂。
交互和用戶的習慣一致，意味著用戶不再需要重新學習，各種應用之間的切換沒有學習成本。我們在前期已經培養好用戶的使用習慣，那么就不要輕易改變，減少用戶的認知成本與學習成本。
例如：常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
當產品線進行更新迭代的時候，應該保留用戶既有的交互和操作習慣，用戶在上一個版本形成的交互認知在下一個版本是否能被沿用，這對于用戶來說在產品體驗上會造成很大的干擾。
比如微信的多年的迭代，底部tab功能一直都是這樣，主要功能入口一致沒有變化，就體現了迭代產品的一致性。
Office軟件中包含的各個產品，其界面布局和設計風格都保持了高度一致，如下圖所示是PowerPoint和Word的界面，可以看出，二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形，都是高度類似的。
遵循統一的產品設計規范／邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規則。
比如，產品內相同顏色的反復出現，為產品打造視覺錘符號，強化產品在用戶心中的記憶點。符合平臺設計規范，
蘋果系統參照人機交互設計指南設計規范，安卓系統參照Material Design設計規范，或者直接參照自己團隊的的設計規范，應該遵循慣例，并且保持系統的一致感，不要盲目地標新立異。
不知道你發現了沒，現在的電商、音樂、社交等等app越來越一樣了，一樣的交互，一樣的排版設計，基本上都遵循著類似的交互邏輯和視覺元素。
與業內產品保持一致，意味著用戶不再需要重新學習，就可以在各種應用中自由切換，用戶學習成本的降低，也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中，成為一種自然的習慣，而獨特的設計，截然不同的規則，則常常會成為習慣以外的東西，引起混亂，讓初次上手的用戶感到受挫和沮喪。
如，在App底部的導航圖標中，“首頁”永遠排在第一個，個人中心（“我的”）永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕，不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖：
如果你特立獨行地把個人中心放在第一個位置，或者采用奇怪的圖標作為個人中心的icon，用戶使用時肯定會覺得別扭。
防錯原則的根本目標是阻止錯誤行為，避免進一步犯錯，指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段：錯誤行動發生前，引導用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發生之后，提供撤回的入口。
比一個優秀的錯誤提醒彈窗更好的設計方式，是在這個錯誤發生之前就避免它。它可以幫助用戶排除一些容易出錯的情況，或在用戶提交之前給他一個確認的選項。
通常情況下，按鈕置灰表示對應功能或操作無法使用，這也是防止錯誤的一條有效途徑，因為用戶通過按鈕樣式就可獲知其狀態，提前規避無效的提交操作。當然，不是只要功能或操作無法使用時，就應該將對應的按鈕置灰。其實更好的做法是填寫完標題后按鈕不置灰，點擊完成按鈕后定位或高亮必填項，讓用戶更容易識別錯誤點。
比如在登錄時，只有輸出信息后才可以點擊登錄按鈕，未輸入信息時，按鈕是不可以點擊的狀態。通過系統主動對用戶進行操作限制，幫助用戶避免發生錯誤。
限制用戶的選擇并不是一個好主意，但是如果有明確的規則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗證碼頁面，為了防止用戶多輸入或者少輸入驗證碼，只給到四個輸入框，讓用戶只能輸入四位數字，減少輸入錯誤的幾率。
提供清晰的提示，防止用戶犯錯，提示包括標簽、文字、顏色、以及反饋狀態等。利用顏色，動效提供警示信息，比如常見的微信退出的按鈕是紅色的，狀態未完成的標簽是紅色的等等。
如：表單填寫過程中讓用戶及時知道輸入格式，出錯原因，避免填寫完成后再提醒，浪費用戶時間。
范圍限制：限制用戶的選擇并不是一個好主意，但是如果有明確的規則來定義可接受的選項，那么限制用戶可以輸入的類型是一個很好的策略。比如：電影購票時，已購買的位子不會再提供選擇，很好的避免了買重的問題
特別要注意在用戶操作具有毀滅性結果的功能時要有提示，防止用戶犯不可挽回的錯誤，需打斷用戶，提示用戶是否要進行此操作，讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。
這條原則很重要也很常見。在刪除信息時，系統會讓用戶確認刪除，也就是我們常說的二次確認，電商平臺允許在一定的規則下取消訂單等等。
易取原則的根本目標是提升用戶在界面上的操作效率，系統應直觀地協助用戶完成任務。
系統應協助用戶進行記憶，通過使元素、操作和選項可見，減少用戶的記憶負荷，在適合的時機給用戶需要獲取的信息。
識別比回憶要好，對于路徑較長的操作，我們更應該協助用戶記憶。比如在淘寶下單的操作路徑，每一個頁面頂部導航欄會盡可能的提醒用戶操作到哪里，用戶所有的操作信息都是可見、易獲取的，減少用戶對操作目標的記憶負擔。
用戶心理學研究發現，互聯網用戶瀏覽網頁的動作不是讀，不是看，而是“掃”。這是互聯網用戶瀏覽的主要方式。所以我們在設計的時候，需要清晰的視覺層次結構，突出重點，弱化和剔除無關信息，降低頁面干擾，來減輕用戶閱讀成本。
比起讓用戶輸入，讓用戶選擇更能降低用戶的記憶成本，更好地輔助用戶做決策。如果，有很多的信息或者選項是用戶高頻率會選擇的，設計師不妨給用戶提前做好選擇，提供默認選項，如下圖：
通過智能讀取用戶之前填寫過的信息，或者智能識別等形式，減少用戶記憶負擔與操作負擔。
常見的是寄快遞-新增地址，將用戶復制的文本字符類型進行識別并匹配，將有用的信息內容提取出來，對體驗而言顯得高效又智能。
或者淘寶購物確認訂單時，系統會自動為你帶入之前的商品信息，包括選擇的商品規則、數量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過，但是需要用戶在購買前二次確認，由于信息比較多，用戶很難記憶，所以確認訂單再展示出來更加合理。
比如：用手機登錄時，收到的驗證碼直接展示在軟鍵盤上，用戶無需記憶也無需輸入，直接點選即可登錄；
美團APP中，當用戶選擇商品時，系統會自動計算商品價格和滿減后的價格，還會幫用戶記錄選擇了哪些商品以及份數，不需要用戶自己花時間去計算還差多少才能滿減等，減少用戶記憶負擔，同時節省用戶點外賣的時間，這也用到了易取原則。
訂單頁面若某信息需要用戶從一個頁面復制到另一個頁面完成查詢或編輯輸入，那就有必要為該信息提供快捷復制功能，如訂單號緊跟著一個復制按鈕。
我們在搜索一個歌名的時候，記不住完整的歌曲名，我們只要輸入關鍵的幾個詞，系統就是幫助我們記憶，出現相關的搜索。
作為用戶，你不記得的操作，系統可以幫你記錄。為用戶提供歷史記錄，文本創作的過程中自動保存草稿，讓用戶方便查詢自己的進程，這就是信息易取原則的設計。
保留歷史，最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄，當用戶沒有看完某部電影時，下次進入直接從斷點續播上次播放的位置，無需用戶記憶上次看到哪里了；
不只是觀看記錄，視頻軟件還會幫你記錄同一賬號在不同設備上的登錄記錄，觀看記錄也會在不同設備之間進行同步。
將選擇的對象，動作，選項可視化，讓用戶一看就懂。注意圖標符號化能讓人理解，避免引起誤解。
抽象圖形+文字，提供了更多的信息，更加豐富了記憶效果，避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導航欄都是以這種icon和文字相結合的形式，這就是很符合易取原則的例子。
在用戶使用產品的過程中，會有一些需要用戶記憶的內容、或者操作路徑，在設計的時候我們要避免用戶記憶，把信息直接提取出來，送到用戶手里。同時每個頁面傳遞的信息量盡量少，減少用戶的閱讀壓力。
常見的例子是各類優惠券，設計的時候會有明確的位置說明限制時間，類別等等，同時還會有清晰的入口引導去使用或者規則的入口。
這一點其實也非常好理解，一個簡單的動作，比打字要輕松得多，常見的就是在設備解鎖的時候，用手勢解鎖替代密碼解鎖。
隨著技術發展，有了更多的行為代替輸入的方式，比如指紋識別和面部識別，用簡單的操作，就可以達到進入系統的目的，這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個交互設計原則，也代表了一種軟件產品設計理念：系統既要做得簡單、易用，讓所有用戶用起來得心應手；
靈活易用原則的根本目標是保持系統的靈活性，以滿足不同用戶的不同需求。既要提供必要的幫助，讓剛入門的初級用戶順利上手，還需要支持靈活的個性化定制，讓高級用戶能夠快捷高效使用高頻功能，充分發揮其價值。
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能，基本上所有軟件都會提供定制化功能，從快捷鍵設置，到頁面布局，再到自定義參數，軟件系統會盡量提供全面的個性化設置功能，來滿足不同用戶的使用訴求和習慣，提升用戶的使用效率和體驗。
例如支付寶首頁，用戶可以自定義首頁的應用。對于使用頻率比較高的老用戶來說，這是一個非常方便的功能。
還有一種是系統更具用戶常用自動整理歸納，以提升使用效率，減少用戶多余操作。
比如：微信的聊天表情，由于可以選擇的表情很多，正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習慣往往是循環使用其中的某幾個，所以把最近使用的表情展現出來，會極大的提升用戶的尋找效率。
除了從新老用戶的角度對用戶做區分，還可以從其他維度區分用戶，針對不同用戶做不同的功能。比如：微信為了讓中老年用戶使用方便，推出了關懷模式。在關懷模式下（下圖）文字更大、色彩更強、按鈕更大，還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點，讓產品更加靈活易用。
靈活高效原則在交互設計中使用會提高用戶使用效率，例如微信聊天頁面中，當用戶輸入某個字詞之后，系統會自動幫你匹配相應的表情包；
當你輸入某個詞之后，輸入法會幫你自動聯想接下來你可能會輸入的詞；截圖后進入微信聊天頁面后，系統會將你剛截的圖前置，它會自動判斷你可能想發送該截圖。如下圖：
通過用戶快捷跳過的入口，比如常見的：引導頁、操作手冊、還是開屏廣告，有“跳過”或者”立即進入“按鈕真的很貼心。
對于用戶頻繁使用的部分，提供快捷的重復使用操作，比如：外賣app，用戶可以快捷地再來一單，同時保存上一次操作記錄。
在設計功能時，最好能考慮到不同層次用戶的需求，以此來讓用戶「各取所需」（需要平臺有多類型用戶）；比如常見的Word、Photoshop等，有一個“二八定律”，就是說80%的功能是給20%的用戶使用的。
設計這類產品時，最常用的20%的功能一定擺在最顯著的位置上，方便所有用戶使用，而80%的高端功能，要適度隱藏，使得整個產品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。
淘寶的首頁每個人推薦的商品都不相同，淘寶后臺根據用戶的瀏覽習慣，購買/收藏記錄等大數據智能判斷用戶的喜好，對商品進行千人千面的分發。
但是切記不要太過依賴大數據算法的判斷，因為一旦形成這種模式，會給用戶造成回音壁效應，你越喜歡的東西系統就越給你推薦，其他的商品就像回音壁一樣被吸收過濾，用戶永遠沒有辦法發現新的東西，讓用戶的選擇永遠都在一個死循環，所以做千人千面設計時一定要適度。
優美而簡約原則的根本目標是讓用戶快速找到界面的重要信息，引導用戶的視線及操作行為。
UI設計應該是符合大眾審美的，不需要多么酷炫，而是需要我們注重信息獲取效率，更加聚焦內容，刪除多余的視覺表達元素，讓界面保持美觀簡約。
“快掃”是互聯網用戶瀏覽的主要方式。我們熟知的產品設計的四大基本原則：親密性、對齊、重復、對比，就是使頁面優美而簡約的方法。
建立清晰的視覺層級，越重要的內容越突出，能夠方便用戶無障礙地瀏覽信息，提高用戶操作與信息獲取效率，各模塊間采用卡片或者間距區分開，加強頁面層級區分。
我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。
避免界面呈現過多元素，包括動效、配圖、icon、按鈕等等，降低用戶的視覺干擾。保留產品最主要的信息，如果不是優先級最高，要盡一切可能避免去影響產品的簡潔和美觀，可采用大留白增加頁面呼吸感，聚焦內容。
用戶注意力資源有限，應該保持信息精煉，突出重要信息，弱化次要信息。
上面兩個案例通過加粗放大、標記顏色，從而讓頁面簡潔，且突出重要信息。
容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地，從而給用戶一致產品很安全貼心的感覺。
系統需幫助用戶識別、診斷、并為用戶從錯誤中恢復提出建設性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了，比如404頁面的情感化插圖、彈窗提示用戶出錯等。
當發生錯誤時，提示信息一定要直觀，視覺上能夠引起用戶注意，可視化處理，文案要簡單概要，并給出解決方案。例如刪除訂單時，會提示二次確認，避免用戶誤操作。
在出錯界面給出解決方案，可以是文字提醒或者按鈕跳轉等形式，幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕，引導用戶去操作，去進一步解決問題。
系統能幫助用戶自動甄別錯誤，并及時進行糾正時，將會給用戶帶來極大的便利，撤銷或者找回功能，都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯，相冊的最近刪除、回收站等等功能。
人性化幫助原則的根本目標是用戶在使用產品的過程中有所依循，因為產品已經貼心地為他們準備好了幫助方式，或者即時提示和反饋，或者客服。
人性化幫助用戶最好的方式分別為：1、無需提示；2、一次性提示；3、常駐提示；4、幫助文檔。
最好的就是沒有提示，用戶就能看懂與應用產品；其次是一次性提示，提示一次用戶就懂如何使用，比如第一次進入app或新功能上線的引導設計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。
最后就是幫助文檔了，一般用于解釋規則或者熱點問題，通常以超鏈接的形式存在于頁面中，或者以集合形式位于設置頁中，此時需要注意要易于檢索。
幫助文檔的入口容易找到，幫助信息方便用戶查找。常見的方式有：鼠標劃過懸浮文字說明，幫助用戶更好地理解。
用戶通過查看幫助文檔來學習新功能，相對比較麻煩。如果能將教程和功能放在一起，用戶可以“邊學邊練”，就更容易讓用戶理解。
提示語避免使用專業術語，盡量使用圖片或者圖形，同時處理文字外還可以使用示意圖，操作步驟等，方便用戶應用。
在操作時的幫助信息，比如幫助懸浮按鈕：一直出現在頁面固定位置，方便用戶遇到問題尋求幫助。
搜索時，預搜索詞直觀地顯示出來，可以讓用戶更快地做出搜索判斷。微信轉賬頁面，當用戶輸入金額較大時，會在第一位數字下方提示轉賬金額的人民幣單位，目的是為了避免用戶輸入錯誤金額導致資金損失；
復雜的流程可以通過分步驟來引導用戶逐步完成，而不是一次完成所有任務。個性化的提示一次就夠了，用戶用過一次就知道其用法。
現在很多C端產品普遍做了良好的交互設計，可以幫助用戶快速學習使用，而不用閱讀、理解復雜的說明文檔。
然而，B端產品的復雜性比C端產品高很多，因為B端產品蘊含很多業務流程的規則，系統中的一個按鈕可能代表了一個復雜的業務處理規則，如果不了解整個業務場景和處理規則，是很難理解按鈕的操作含義的。
因此，對于B端產品，用戶進行自助服務、自助操作的難度高很多，B端產品的幫助文檔依然有存在的必要。產品設計人員要盡量在前端交互上做好引導提示，對于復雜的規則和邏輯，可以考慮通過幫助文檔來指導用戶。
尼爾森十大可用性原則可靈活運用于各個地方，可以是交互設計，也可以是界面設計，深入了解該設計原則，可以找到更好的解決方案，提高用戶的使用體驗。要注意的是，這10項原則是啟發式（heuristics）的、廣泛的經驗法則，而不是具體的規定。
1、狀態可見原則：位置可見、數量可見、狀態可見；
2、環境貼近原則：語言應該是用戶所能理解和習慣的；
3、用戶可控原則：可見導航、關閉與返回、撤銷與重做；
4、一致性原則：產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業內產品一致；
5、防錯原則：操作前預警、操作中確認、操作后可撤回；
6、易取原則：易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入；
7、靈活高效原則：靈活配置、允許頻繁操作、各取所需；
8、優美而簡約原則：視覺層次明顯、簡約且突出重點信息；
9、容錯原則：幫助用戶識別、診斷，并從錯誤中恢復提供方法；
10、人性化幫助原則：無需提示、一次性提示、常駐提示、幫助文檔。
我準備了一些常用的設計素材送給大家，需要的話免費拿走。獲取方式：老規矩公眾號后臺，發送文字“素材”，就可以獲取了～
文中如有不嚴謹的地方希望大家給予指正，希望大家可以多多點贊評論鼓勵一下，最后感謝你的耐心閱讀。
今天與大家分享的是關于B端頁面中篩選區的功能設計，本文會從篩選的展現形式、布局、反饋、設計中遇到的問題以及設計思考這幾個方面進行講述。
篩選，也可以稱作過濾器，它屬于搜索框架的一部分主要用于內容提取，將一類數據展示，同時一類數據隱藏，可以整合很多的組件。
在B端產品設計中，篩選區的設置便于用戶進行數據查詢和數據定位，可以快速的按照需要對數據進行查詢和篩選；篩選的存在對于整個表單來說是非常重要的，它可以幫助用戶在表單茫茫多的數據當中進行快速的數據定位；可以對表單進行快速數據按照自己想要的方式進行劃分，縮短用戶對于數據的尋找時間。
1、篩選區的展現形式有哪些？
篩選區常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區，但是二者還是有所差異的。
通過百度百科我們可以了解到：
搜索，意思指仔細查找，搜尋。
篩選，篩選是利用篩子使物料中小于篩孔的細粒物料透過篩面，而大于篩孔的粗粒物料滯留在篩面上，從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件，細粒適篩是分離的目的。
在B端系統界面設計中，搜索是通過指定任意條件，系統對此條件進行的檢索后，展示相對應內容，功能偏主動性；篩選是系統提供指定各種條件縮小范圍，可以選擇查找不同條件的內容，功能偏被動性。
無論被動性還是主動性，搜索和篩選這倆個功能都是讓用戶使用某個條件對內容進行區分，從而找到用戶想要的內容。二者在功能上相輔相成，在B端系統的頁面中僅靠搜索或者篩選作為內容篩選都是不夠的，這就需要組合篩選區了。
1.1搜索篩選
精確搜索
優點：搜索準確率高，所要即所得。
缺點：需要用戶自己輸入，然后進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的內容，方便用戶填寫，以及確認輸入的類別或格式。
適用場景：適用于用戶有清晰的目標，同時需要有查詢/搜索按鈕，來執行篩選。搜索需要配合篩選固有類一起使用。
模糊搜索
優點：模糊搜索可以用于搜索關鍵字的同義詞，提高搜索的精確性。字段匹配推薦搜索結果，減少記憶負擔，適用于不明確的信息篩選。
缺點：篩選出很多類似相關的內容，需要查找鑒別所要內容，不便捷。
適用場景：用戶對目標模糊，模糊是指不用關心輸入了什么格式，哪怕錯了，系統也會推薦給用戶相對正確的；用戶需要瀏覽操作過濾器提供的信息來輔助篩選達到目標。搜索需要配合篩選固有類一起使用。
搜索的設計原則
關于搜索，幾乎沒有人不知道，哪怕是不從事設計、產品的人，他們也知道。同時每一個產品，隨著規模變大，搜索一定必不可少。那么如何設計好搜索呢？有哪些原則可以借鑒，總結了以下4個方面。
漸進呈現
在我們設計搜索時，可以考慮漸進呈現的方式。這是指搜索結果不要一股腦兒都塞給用戶，而是使用逐步擴大的方式，讓用戶慢慢進入目標。但這里要注意，漸進的層級不要太深，漸進的內容要做到足夠為用戶著想。
結構化
結構化是指搜索結果呈現的形式要有歸納和整理的意圖，不能反饋給用戶的是沒有層次的內容。簡單來說，分類就是結構化呈現的體現，內容結構化后用戶查找和定位才會更快速。
可操作
對于搜索結果，我們可以給予操作選擇，例如收藏、分享等，這將會大大提升用戶與搜索結果之間的后續聯系。
可操作性是最佳優先的好伙伴。同時給搜索結果添加使用類操作，這會讓用戶專注于目標。
可保存
無論搜索任何內容，用戶都有權保存自己常用的搜索結果，保證用戶后續無需重復搜索。這點上已經有很多C端產品做的很好了，我們在B端產品上也可以考慮起來。
1.2條件篩選
下拉篩選
優點：頁面的空間利用率高，同時下拉起到了很好的收納作用，不占據頁面空間。
缺點：由于下拉的局限性無法觀看到所有的篩選字段，需要操作點擊查看。
適用場景：下拉的篩選字段選項有限，可以明確的總結分類時，一般采用固定選項類。這種操作起來便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的產品是勾選即執行的。主要需要結合具體的使用場景去判定。
矩陣(平鋪)篩選
優點：用戶可以直接看到篩選內容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。
缺點：平鋪的篩選類目占據頁面空間較大，空間利用率低，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不適合選項太多的情況。
適用場景：平鋪篩選控件的普適性為最強，當沒有其他更好想法時，用平鋪總是一個好的選擇。需要注意的是，篩選條件不要過多（遵循7±2 法則）。
注意事項：
當確實需要支持大量的篩選條件時，有兩種解決方案可供參考
1、用戶自行配置篩選條件：對用戶來說，單次篩選會用到的條件是有限的；通過可配置的篩選條件，實現檢索效率和信息噪音的平衡，對于用戶自定義項的體驗與應用都有更好的支持。
2、 隱藏低頻的篩選條件：這種方法需要對用戶需求有明確的把握，哪些篩選條件是高頻、哪些是低頻需要有明確的分界，優點是第一次使用時用戶能更快上手。
表頭篩選
優點：通過表頭的點擊，簡潔、直觀的篩選當前表格列。
缺點：只能篩選當前列的內容，篩選字段比較少，篩選形式比較單一。每個表頭都會有篩選的icon，影響用戶對于表頭的識別。表頭篩選學習成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。
適用場景：表頭篩選類似Excel表格的操作，是一種相對高級的交互，適合表格列比較單一內容的篩選。
注意事項：
一般來說不推薦使用，僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活；
2、用戶可能對每一列都有篩選需求（如數據報表、Excel）；
3、產品規劃時對于用戶篩選需求不夠明確，也可通過這種模式先采集數據，分析其使用頻次，對后期的界面優化進行指導。
TAB標簽
優點：篩選條件一目了然，交互步驟少，一個Tab標簽代表一個緯度，平鋪展示篩選內容方便識別，學習成本低。
缺點：Tab標簽篩選字段數量有限制，不宜過多，分類需覆蓋選項，并且保證每一項沒有交集，空間占用多、不夠靈活，對用戶自定義項支持較差。
適用場景：Tab標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容（可以是同性質，也可以是不同性質）。權重高，選項值不超過5個。
1.3組合篩選
在B端系統表格類頁面中，字段屬性很多，簡單的檢索方式很難準確定位到目標數據，所以在實際使用當中，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、TAB標簽切換組合出現，形成多屬性的組合檢索。而篩選項互相組合，其展示方式有如下幾種：
平鋪式
平鋪式是將所有篩選項羅列出來平鋪在頁面上，可以兼容多種數據格式比如數字、文本、標簽、枚舉值、布爾值等，包含但不限于日期選擇期、標簽切換、單選框、復選框等多種控件。
優點：用戶能直接看到選項內容，方便用戶識別選項，且提高了用戶篩選的效率（節省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。
缺點：篩選項多會占據大量頁面空間，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不利于表格數據的直觀展示，此類型一般配合“勾選即執行”使用。
適用場景：普適性為最強，當沒有其他更好想法時，用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一致，同時希望備選項被選中。
折疊式
折疊式篩選是平鋪式篩選的改進，一種簡單直接的篩選形式，對平鋪的篩選項進行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式將這部分篩選字段隱藏起來，高頻篩選字段外露。
優點：高頻篩條件可優先快速篩選、一定程度上減少用戶的認知負荷，同時占用空間較小。
缺點：不好劃分不同用戶的高頻篩選項，當高頻篩選項過多時，頁面同樣會出現信息冗雜、空間占比大等問題。
適用場景：折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。
從位置上來說，組合篩選一般有如下幾種常見類型：上下布局水平篩選區、左右布局的垂直側邊篩選區、 內嵌的的表頭篩選區。
上下布局水平篩選區
最常用的上下布局，篩選區放置在表格頁面的上方，方便用戶識別選項，提高了用戶篩選的效率，明確哪些數據是用戶所需的。上下布局的篩選區也方便用戶進行閱讀，對于那些由不同數據結構組成的頁面，是一個很好的選擇。
上下布局的篩選區的可擴展性差，當篩選項目少于五個的情況下，最常使用的就是上下布局，而當篩選項目多的時候，會占據大量頁面空間，內容在較多時，推薦增加收起功能，這樣保證篩選整體面積不會很大，提升屏效比。
左右布局的垂直側邊篩選區
左右布局的篩選區一般是以字段選擇進行篩選，篩選區的位置較固定，不會因為篩選項過多而影響頁面中主要內容的位置，可擴展性強，可在收起部分嵌套更多的字段值。
左右布局的好處就是能夠將篩選的所有條件都直接的展示出來，可以適應很多場景，但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響，避免造成混亂。
內嵌的表頭篩選區
表頭篩選是一種復雜的篩選形式，常見于列表中，是一種列表內置篩選形式，適合表格列比較單一內容的篩選，其最開始是源于Excel的篩選形式，點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。
篩選區有兩種不同的反饋模式：數據實時更新反饋和數據手動更新反饋。
數據實時更新反饋
界面將與所有設置的篩選相匹配并對結果進行實時更新。
這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗，可以在每次點擊后立即看到結果。適用于較低風險的交互，一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少，如果應用中數據量巨大，每次更新時間較長，反而會降低用戶的使用效率。
手動更新反饋
在手動更新反饋模式下，過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果，必須單擊查詢按鈕。
這種模式適合多緯度復雜的篩選，所有篩選字段設置完畢之后，統一執行操作，和實時反饋結果相比降低篩選等待時間，尤其是在大量數據進行篩選中，優化了用戶體驗。
什么情況不適合用篩選？
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼，注冊用戶郵箱這種無明顯規則的就不適合用篩選組件去查找，用搜索會更好。
篩選分類條件有什么要求？
一是分類需符合大眾認知的條件。如：按照年月日的認知來選擇，地理位置按照省市區街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。
高頻篩選操作怎么樣方便用戶操作？
首先高頻篩選操作不是產研團隊自己主觀臆斷出來的，需要有數據支撐。很多產品為了滿足用戶快捷操作，會在篩選區幫用戶集成常用的快捷操作入口。比如很多電商產品的新品、包郵等快捷篩選。根據不同產品用戶習慣下操作整理出快捷操作入口能提高用戶體驗方便度。
篩選和搜索的區別？
主要區別在于用戶對目標的清晰度不同，需要選用不同組件功能來達到其目的。
在B端系統界面設計中，搜索是通過指定任意條件，系統對此條件進行的檢索后，展示相對應內容；篩選是系統提供指定各種條件縮小范圍，可以選擇查找不同條件的內容。
搜索和篩選都是讓用戶使用某個條件對內容進行區分，從而找到用戶想要的內容。
在設計組合篩選的時候，篩選區的設計需要根據業務實際情況進行設計，考慮每個篩選字段和業務場景，來安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式？我們在設計篩選的時候可以如何思考？顯然，使用頻率和界面空間是兩個非常重要的評判維度。除此之外，我們還可以以可見性、系統性能和用戶認知等維度去深入思考，下面將逐一分析。
頻率
使用頻率是界面設計的一個重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理，對于篩選模式，我們也會依據篩選條件的高低頻進行設計。頻率除了影響使用什么模式外，還會影響篩選條件及篩選項的排列順序，這里就不多敘述了。
界面空間
一些界面模式的出現就為了應對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
可見性太弱，當篩選條件都被收納在一個個小小的入口按鈕時，它的可見性也會隨之降低，尤其在PC端，一個大屏幕下更難發現。
可見性
既然說到可見性，不妨展開講講。可見性是一項重要的設計原則之一。一個明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？
針對篩選模式的可見性，我們可以分三個要點去考慮：
1、篩選條件本身的可見性：
用戶越難發現，即可見性越低。通常，我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效，因為正如上文所提及，到了篩選這一步通常是顆粒度比較細的分類，否則我們可以用導航解決。但顆粒度越細，用戶對信息的需求就越不一致。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價格，有人希望按顏色，我們很難判斷哪個頻率更高。面對這種情況，只能將所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商產品往往會使用矩陣式的篩選，而一些數據格式更多樣的B端產品則直接使用輸入式的篩選。
2、篩選項的可見性：
篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎？對于這個問題，可直接以篩選項的多少去決策（少則可見，多則不可見），比如一些B端產品，如果將備選項都全平鋪出來可能一個屏幕都放不下，所以只能將所有篩選項收起。但這是一種極端的情況，缺乏說服力。
用戶對備選項是否足夠熟悉？比如對于一個尺碼的下拉框，我很清楚自己能選擇什么，但對于一個衣服風格的下拉框，由于我對風格不熟悉，不能預判這個篩選條件能起什么作用，很可能會將其忽略。
3、選中項的可見性：
選中項的可見性，即當我選中某幾項后再次查看選中項的難易程度。
性能
數據量大才需要篩選，而數據量大必然會有性能問題。在不同場景下，用戶會發生不同的行為，對性能的要求也會不一樣。我們能經常發現一些篩選模式會帶有“確認”按鈕，當用戶設置完篩選條件后不會即時刷新，而需點擊按鈕才能觸發。而有的篩選模式則沒有“確認”按鈕。這分別對應著兩種不同的場景。
第一種場景，如B端產品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息，并進行對比分析，那么我就會設置篩選條件A、B、C后一并篩選出來，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認”按鈕的篩選模式更符合此場景。反而即時刷新會在我設置篩選條件時造成干擾。
另外一種場景，常見于B端產品中的查詢列表場景。如果我想找到信息α，通過篩選A后得出10個信息，那么憑肉眼即可找出信息α，任務結束，但如果篩選A后得出1000個信息，我可能會再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。換句話說，這時候我的心理模式是即時滿足的，只要信息縮窄到一定范圍我就會停止添加篩選條件，否則我會繼續添加篩選條件。所以即時刷新能更符合此場景，但與此同時就需要考慮到性能問題。
另外，我們也可從變更頻次和變更概率這兩個維度進行思考。
變更頻次是指用戶反復使用篩選的次數，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例，在列表中，雖然很大概率會使用篩選來尋找信息，但由于用戶是即時滿足的，而且滿足即可，所以不會重復變更篩選條件。而在報表中，雖然用戶會一次性設置篩選條件，但需要分析的數據不只一種，所以會高頻更換篩選項，回想一下我們去分析自己產品或競品的日活月活等數據時，是不是會高頻地切換數據來分析比對？所以，高頻次的篩選就會對性能有更強的要求，而為了避免性能問題，往往也會加上“確認”按鈕。
用戶認知
最難解決的其實是用戶的認知問題，尤其在模式相對固定的當下，讓用戶適應并習慣新的模式并非易事。我們想出一些創新性的篩選模式時，不要忽略用戶的認知。
什么是交互設計？
交互設計是針對流程進行的設計，為確保用戶與產品接觸時有符合的行為習慣，保持操作過程的流暢邏輯，需要通過交互設計來引導行為，設計整個行為流程。
流程中需要考慮接觸前的信息顯示，接觸過程中的體驗反饋，以及接觸后的結果反饋，來給予我們下一步的行為指示。交互流程的目的以提升用戶使用產品過程的體驗感受為目標。
那么我們應該根據用戶習慣設計功能？還是設計可以改變用戶原有使用習慣？
產品設計該以什么樣的交互方式呈現？我們的設計又是否為用戶帶來愉悅的使用體驗？
在《俞軍產品方法論》中關于用戶行為背后原理的闡述，在行為發生前，用戶會接受一個情境的刺激，然后用戶會根據已有的認知經驗去產生一個主觀的期望效果，并產生與之對應的行為。行為產生的結果反饋又會成為認知經驗，從而可能對用戶的下一次行為產生影響。
用戶的行為認知具有可塑性，會根據每次行為的反饋積累經驗來完善認知模型，每次的結果反饋也會影響用戶下一次產生相應行為的判斷?？梢娪脩粜袨槠鋵嵰彩且粋€不斷學習和適應的過程。
用戶行為受以往經驗影響，即在使用產品前就會根據認知去引導行為的產生。不只在同一產品中會有這種行為，用戶同樣會把認知經驗也代入到相似產品上，繼而有著相同的使用期望和操作行為。
這與尼爾森提出的雅各布定律有著相同的理論結果，作為10大可用性原則的提出者，他通過研究發現用戶更善于根據已積累的經驗來使用產品。
雅各布定律用戶將大部分時間花在其他網站上。這意味著用戶更喜歡您的網站與他們已經知道的所有其他網站相同的方式工作。為用戶習慣的模式設計。
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed
遇到新事物時，當產品概念與用戶認知不匹配，用戶在使用產品的過程中就會由于不一樣的理解方式而產生困惑，甚至產生持續性的錯誤操作，所以在設計思考中應盡量考慮用戶原有認知習慣。
舉個較簡單的例子，在抖音習慣了豎屏沉浸式瀏覽短視頻的行為后，在相應視頻類產品也會產生同樣需求的場景，提供對應的功能滿足用戶需求，有助于用戶使用產品提升平臺內容的消費曝光，相同的交互方式和內容信息展示也有助于降低用戶理解成本，提升使用體驗。
（1）認知負荷
為什么用戶更喜歡根據已有經驗來使用產品？這就需要了解另一個概念，認知負荷。
認知負荷是指一個人工作記憶中正在使用的注意力或者精神力總量。
人對信息的理解、短時記憶存儲是有容量限制的，當我們的大腦接收的信息超過了上限, 就會減慢大腦信息處理的效率，在短時間內處理大量信息必然會增加大腦的認知負荷，進而影響到判斷與決策。
而用戶在操作任務時，相關信息又會存儲在大腦的短期記憶中，在理解頁面信息時，需要識別、思考、記憶越多就會產生負荷。
表現在用戶自身上的就會覺得復雜，“這個是什么意思？”、“接下來要做什么”等等問題都會轉變成負向的情緒反饋。
所以用戶行為的習慣性是因為行為反饋符合自身認知，這樣讓產品使用起來更“簡單”。好的設計不需要讓用戶過多思考，這也指導我們設計師在方案思考的時候要可能降低用戶學習成本。
（2）習慣遷移
既然用戶行為習慣如此重要，那么就無法改變了嗎？
一般來說，舊的行為體驗越久，形成的沉沒成本越高，由于損失厭惡心理的存在，用戶接受新體驗方式的意愿會越低，沉沒成本是指過去的決策所產生的不可挽回的成本，包括時間、金錢和精力等等。
用戶和產品的關系在于價值互換，如果一個產品對用戶來說沒有價值，即使體驗再好也不會去用，而當用戶因為需求價值來使用產品時，如果體驗足夠好就可能留下來，用戶習慣遷移的最迫切問題就是怎樣讓新的產品（體驗）所能提供的用戶使用價值，足夠忽略沉沒成本的損失。
在《俞軍產品方法論》中，給出了提升用戶價值有三種方式：讓新體驗最大化，讓舊體驗最小化，降低替換成本，三者互相影響。
在產品設計中，我認為盡可能的根據用戶行為習慣去設計可以幫助用戶更好的理解和使用產品，為用戶習慣設計不是簡單的對競品模仿復制功能使用，而是更多關注用戶自身的行為需求去提供更多的產品價值，提升使用過程中的體驗，做到有價值的設計創新。
抖音目前的成功毋庸置疑，它改變了原有的視頻瀏覽方式，通過沉浸式內容展示提升了用戶專注度，滑動切換視頻保證了視頻瀏覽的延續性，將音樂當成視頻素材進行二次創作等等一系列創新都提升了產品價值。
所有的行為習慣都需要學習，但是好的習慣用戶只需要學習一次，上滑手勢的交互動作幾乎不需要什么成本，對視頻流內容獲取也有著很強的成癮性，很容易形成行為習慣。
作為抖音前身的Musically，創始人朱駿通過觀察當代年輕人在手機上的使用，將原本教育平臺的構想轉向做娛樂化平臺適應人群行為習慣。
年輕人有著極強的個性表現需求，并且已經在諸如YouTube，Snapchat等平臺懂得如何剪輯，拍攝視頻，內容生產不需要有過多的學習成本。但即便如此，還是發現了平臺用戶的上傳頻率不高，用戶很難保持高活躍的產出。
后來為了養成用戶隨時隨地創作內容的習慣，將產品價值調整為專業對口型APP，順應當時一個對口型挑戰的節目觀眾的模仿需求，進一步降低了內容生產門檻，優化了原本普遍認知下的上傳拍好的視頻片段到軟件，再添加音樂進行剪輯的流程，這也極大的提升了內容生產效率。
我很認同他說的，一個產品成功的核心，其實是因為他的一個功能很能打，不在于一直增加功能。
商業產品開發最終都是為實現商業價值，循序漸進地培養用戶行為習慣，有助于更高的留存，對于用戶行為設計、習慣設計，本質上都是通過一系列優秀的體驗來強化行為習慣，加強用戶需求與產品價值間的關聯，讓用戶自然而然的形成品牌認知，比如當用戶想打車或者想購物時心中所浮現的產品。
在行為設計中，有諸多因素會影響用戶是否會去使用產品/功能，福格模型將影響用戶行為的因素總結成以下概念：
B=MAP
這個概念看似簡單，但是適用于所有類型的行為，并且有很強的通用性，這個概念由行為科學家福格提出來，為各個領域的行為設計提供解決方案。
福格行為模型當動機（M）、能力（A）和提示（P）同時出現時，就會發生行為（B）
Behavior（B）happenswhenMotivation（M），Ability（A），andaPrompt（P）cometogetheratthesamemoment.
希望用戶具有哪些行為，用策略進行引導，設計滿足三個條件的方案或制造條件滿足，福格模型對我們的設計方向也提供了更多的想法。
總的來說，為觸發用戶對產品的使用行為，需要給予用戶足夠的動機，幫助用戶獲得能力，設計足夠明顯的提示。
在動機方面可以考慮用戶自身想要的內在需求，或通過外界獲得利益激勵，也可以根據用戶心理需求形成用戶間競爭、跟風、群聚等羈絆。
我們在設計上極可能地降低使用門檻，降低復雜程度，幫助用戶減輕心理負擔或解除憂慮。
考慮當下場景給予明顯的提示，做到“需要什么的時候剛好出現什么”，符合自身行為需求，保持用戶產品使用流程的連續性也有助于體驗的提升。
用戶行為是指用戶與產品進行交互的方式，設計師根據用戶行為特征進行設計，來提升產品使用過程中的用戶體驗，通過福格模型我們可以有更多的方案思考方向，在產品行為設計上比較常用的方式可以分成引導和預判兩種類型。
引導設計需要讓用戶明確當前的狀態，知道下一步能做的事情，避免用戶行為中斷；而預判類型主要需要考慮用戶下一步的行為，當用戶有明確的行為目標時，輔助用戶高效完成。
（1）未完成效應
利用心理學上的蔡格尼克記憶效應來提升用戶對未完成狀態的關注度，比如以進度條形式的任務類型。部分遮擋的內容信息設計方式也可以傳達給用戶，滑動可以查看更多內容的行為引導。
（2）信息提示
在用戶操作過程中，通過信息提示可以讓用戶明確不同操作行為的結果反饋，引導用戶做出符合自己預期的行為，降低不確定性和誤操作。
比如通過下拉操作出現的淘寶二樓，和微信中語音信息的發送都進行了信息提示。
（3）視覺動線
通過對用戶視線方向進行引導，達到傳達提示作用，在游戲設計中比較常用于方向指引。
如光遇中，用戶行進方向錯誤時，會有些微的鏡頭偏移到正確方向來進行提示，或者如原神中，直接以道路的行進方向來提示位置信息。
（4）物理映射
通過隱喻設計的方式，讓用戶聯想與物理環境中相似事物的特征，通過擬物的方式建立聯系，將現實生活中的認知代入產品中，以達到降低理解成本的作用。
比如在好好住中，利用陀螺儀來模擬物體掉落的重力感，增強了徽章的真實感和趣味性，網易云音樂模擬了黑膠唱片換盤、播放暫停等操作，儀式感滿滿。
（1）符合情境
產品設計的一個值得關注的點是合時宜，在不同的情境中，用戶的行為和意圖也會有所不同，針對性的進行區分設計才會更符合用戶預期。
比如在美團外賣中，在午間或晚間不同時間段打開的內容推薦也會有所差異，會根據時間段區分不同的內容展示。
（2）高頻行為
用戶與產品的關系是，用戶通過產品的使用來解決自身需求。在支付寶中，作為支付平臺，用戶間的高頻行為是轉賬、發紅包等交易行為，給予更多顯示可以降低查找成本。
騰訊視頻作為內容平臺，內容推薦的優先級也受用戶喜好等因素影響，在一般情況下，用戶手動標記的追劇內容會比單純平臺內容推薦更有播放需求，也更容易觸達用戶提升播放動機。
（3）臨時反饋
在一些流程設計中可能存在較強的上下步驟連續性，在系列行為完成前，用戶的關注度會更高。當原流程中，若短時間內重要的反饋信息需要強調時，將信息以成本最低的方式直接曝光給用戶，可以提升在整個流程中的高效率體驗。
餓了么作為外賣應用，當用戶下單后到收到外賣之前，再次使用APP，關注度最高的是當前訂單配送的位置時效，收貨后訂單狀態的優先級就會被降低，通過臨時狀態的顯示規則，可以靈活的解決信息顯示優先級的不同狀態。
同樣在iOS短信驗證碼的獲取過程中，因為驗證碼的獲取和輸入有著較強的關聯，收到短信后直接顯示便于填寫，輸入之后信息的需求降低，可以間隔時間或操作后自動消失。
（4）簡化流程
在功能使用中，設計師應該在功能使用，有符合用戶行為認知的前提下，盡可能不需要讓用戶頻繁操作，應該縮短操作路徑，減少多余思考成本。
在微博首頁的信息流中，當沒有評論數時點擊，會在當前頁面直接顯示進入評論流程，不中斷當前信息瀏覽的狀態；當有評論時點擊，會進入詳情頁的評論區。
一般來說，簽到都是為了提升用戶活躍的功能，通過外部獎勵養成啟動APP的習慣。樸樸中用戶點擊簽到入口，跳轉到簽到頁時，會自動進行簽到，在用戶目的明確的情況下減少了還需手動再次觸發點擊的行為。
在設計方案的分析中，我們會設想最理想的用戶行為路徑來思考，但用戶實際的產品使用過程有時候會與我們設想的有所差異。
在設計之初就需要考慮到用戶的行為路徑可能不只是一個線性活動，需要考慮多種行為路徑的情況加以權衡。并且我們所做的設計是針對某一類群體的行為，而非獨立的某一個用戶，考慮這類群體的行為共通性，才避免陷入過于過于絕對的細節判斷。
為了設計更符合用戶行為的方案，用戶調研應貫穿整個流程，通過定性和定量分析相結合來輔助我們做設計決策。
定性分析一般可以通過用戶訪談的方式來來了解用戶體驗的具體反饋和原因。
定量分析通過埋點數據來驗證群體行為的普遍特征，常用的數據主要關注以下兩種類型：
使用數據：
藍藍設計的小編 http://www.syprn.cn