按鈕設計是我們經常會遇到的一個類型，一個好的按鈕其最重要的就是激起點擊欲，讓人忍不住去戳戳戳。
我們來看看下面這個按鈕：
很普通，處處都很常見的一種按鈕，沒有任何點擊欲。
那我們應該怎么做出她的點擊欲呢？
其實就是要讓按鈕更有立體感，話不多說直接上干貨！
可以用不同的顏色，放大一圈，形成對比：
上下錯開一些讓按鈕的造型飽滿立體一些，從原來的單一一層變?yōu)閮蓪樱?
為了讓按鈕更立體我們可以把這兩層個復制一層，往下移動幾個像素：
這樣按鈕是不是就已經立體多了？別急，還有呢！
這里細節(jié)就比較多，想把按鈕做到晶瑩剔透可不容易，給大家好好講一下。
先給圖形加上一個內發(fā)光：
使用剪切蒙版，涂顏色或者再來一層內發(fā)光，加強這個效果：
復制一層，選用更深的顏色，向下移動，剪切蒙版到里面去，把按鈕有一個明顯的明暗分割線，形成這種光的層次和厚度：
沿著造型刻畫高光，和邊緣有些間隔：
在白色的底座上加入按鈕的投影：
這樣一個剔透，立體感強的按鈕造型就完成啦！
那還能不能讓點擊欲更強一些呢？
放上文案看看：
就還是有點單對吧。
這種時候我們就可以從按鈕的文案出發(fā)，加入一些圖案，讓它更生動！
比如這里的文案是“發(fā)射”，就聯想到了火箭，我們可以繪制一個火箭出來。
把它加入到按鈕上：
這樣一個豐富且有點擊欲的按鈕就完成了！
并可以用同樣的邏輯去延展別的按鈕，讓他們保持統一性：
增強按鈕的點擊欲的方式，其實就是讓它變得立體且豐富。
1.層次：單獨的一個色塊，會很單薄，增加層次增加其在造型上的豐富度。
2.厚度：厚度可以讓按鈕變得更立體。
3.光影：讓按鈕富有變化，更立體和吸引人。
4.表像圖形：一個關聯文案信息的點綴圖案，可以讓人更有食欲。
作者：菜心輕量文 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天和大家分享用了幾年的一個社交軟件Instagram。發(fā)現這款軟件整體的設計與體驗有值得學習的地方，從10個維度分享分享，希望大家喜歡啦～～
下圖是關于Instagram的從2010-2022整個圖標變化的過程，從中能發(fā)現：
1.圖標從擬物的風格慢慢變成扁平的風格。
2.從具象的相機變成更加簡約線形的相機圖標。
3.顏色越來越艷麗、明亮，給人年輕、炫彩、簡約的設計感受。
4.從logo的變化中能看出頁面將從擬物的時代跨進了扁平時代，也能折射Instagram界面必將是往極簡、炫彩的方向走。
我重新臨摹Instagram啟動圖標，發(fā)現里面有許多的設計小知識點值得學習。
例如：圖標背景顏色有黃色、紅色、紫紅色、紫色，相鄰的兩個顏色互為鄰近色，使得繪制出的背景自然而炫彩，非常不錯的設計，漸變的融入也很自然。
當我們自己做漸變的圖標背景時可以用兩兩相鄰的顏色，讓漸變融入的更自然。
明顯的發(fā)現Instagram顏色跟色譜的規(guī)律一致，顏色從左到右色相的變化值在50度左右，4種顏色都是用的高飽和度、高明度的色彩，非常艷麗、明亮，利用漸變附在英文上做出英文版的logo。
iPhone 14的字體漸變也是用的這種方法，利用兩兩相鄰的顏色來做漸變。連蘋果、Instagram都在用，趕緊學起來吧，你也可以的～～
1.通過自己仔細的觀察發(fā)現Instagram攝像頭圖標圓角是帶有平滑過度的圓角，和普通的圓角不一樣。
2.平滑圓角給用戶的感受會更舒適、平滑、有活力，而普通的圓角顯得更加生硬、不自然。
3.蘋果的主題圖標都是帶有平滑過度的圓角而不是一個普通圓角，使得圖標顯得更加自然。
4.可以去看看之前原研哉幫小米設計的logo，會發(fā)現他們的logo給人干凈會更加有活力、生命力，而不是使用這種普通圓角，而是一種平滑過度的圓角～
1.從Instagram的啟動頁面看出，Instagram追求的是簡約、突出品牌色的方向。
2.主界面主要以用戶發(fā)的圖片為主而不是文字，往往圖片比文字更容易產生閱讀與反饋。
3.整體的界面簡約、素白，圖標都是統一用黑色線條的描邊。
4.當自己關注的用戶，發(fā)了一些視頻，頭像上附帶Instagram的品牌色的圓形，在白色的界面用品牌色進行了點綴，讓單調的界面更具有識別性。
Instagram的發(fā)現頁面做的很不錯，我重新繪制了這個頁面，發(fā)現系統想推送給你的圖片或者視頻會做等比放大2倍處理，一屏顯示圖片或者視頻至少有一個最大顯示，給用戶的感受是有主次。同時開發(fā)也能很好實現這種布局，具有一定的規(guī)律性。
在Instagram界面當用戶發(fā)的圖片超出5張時，圖片下方的輪播點會出現變化，有大有小。
我重新繪制了一個用戶發(fā)的7張圖片的示例，當用戶在左右滑動圖片時，輪播的點會跟著動，同時會有大小的顯示，暗示用戶后面或者前面還有多張圖片，有近大遠小的感覺，非常細節(jié)的設計～（可以利用在自己的一些設計上）
1.在Instagram的用戶界面，視頻、多張圖片、單張圖片和置頂4種狀態(tài)右上角有個圖標的標識，讓用戶清晰知道圖片的內容狀態(tài)，提前給用戶有個心理預期與區(qū)分。
2.當用戶點擊進去類似抖音的布局，可以進行上下滑動切換視頻內容，雙擊可給該視頻點贊，整體的體驗很絲滑，沒有任何的卡頓與拖沓。同時界面圖標用線性的形式，布局統一、和諧。
Instagram整體的圖標設計是線性的圖標，線性圖標給人的感覺是可點擊、可操作的，同時感覺簡潔明快的氣質。圖標的統一讓每一個界面的視覺感受都是一致的。
這個界面放在你面前可能都會知道是Instagram這個應用，這個界面框架已經形成品牌意識。 Instagram幾年一直沒有更改這個布局，非常經典的設計，沒有太多花里胡哨的圖標與信息，只有簡約的線性圖標與用戶發(fā)布的圖片，克制的設計。也有很多相機應用、戶外廣告都借鑒了Instagram布局，已經在用戶的心智里面了～
1.越來越多的企業(yè)的品牌色往鮮艷的方向走，突出品牌形象。
2.圖片的排版不一定是同樣大小的，可以有大有小，取決于更想給用戶傳達什么。
3.圖標的統一性很重要，當整個app的圖標風格都一致時，給用戶的體驗的感受也是一致的。
4.不斷重復一個設計框架、設計組件時，會形成品牌意識，讓用戶記得你的產品。
百度小說是百度APP內的垂直頻道，擁有過億月活和行業(yè)最全的正版書籍。隨著著作權保護意識逐步上升，越來越多的用戶愿意為優(yōu)質的資源和閱讀體驗付費。2019年底，為了滿足用戶消費升級所產生的一系列需求，百度小說初步建立了會員體系。經過兩年多的打磨，我們不斷提升會員的服務體驗，并進行了多次優(yōu)化升級，現在將我們的設計經驗分享給大家。
一、設計背景
2021年我國數字閱讀用戶規(guī)模達到5.06億，同比增長2.43%，半數以上用戶愿意為電子閱讀付費，占比最重的人群為19~25歲用戶，達到44.63%（數據來源《中國數字閱讀報告》），“Z世代”已經成為我國數字閱讀的主要群體。隨著消費升級，用戶對服務的需求不斷提升，更看重信息之上的附加價值，如認同感、歸屬感和儀式感。
二、改版原因
2019年，由于時間緊、任務重，我們完成了小說會員從無到有、從0-1的基礎場景搭建。但隨著設計趨勢的變化，當時小說會員的設計風格與主流用戶的喜好不完全匹配，在使用場景中也存在易用性不足、內容缺乏吸引力等問題。下圖是2019年小說會員的界面。
同時，我們對小說用戶進行了視頻訪談，搜集了用戶在使用會員服務中遇到的問題，如會員福利少、找不到會員專屬內容、購買過程有卡頓等，最終梳理為的三大核心問題：身份感知弱、購買路徑長和資源內容少。
三、設計目標
在小說會員亟待改版的背景下，我們結合業(yè)務目標、舊版核心問題和用戶訴求，推導出了本次改版的設計目標—品牌化、鏈路化和服務化。
1、品牌化—強化會員品牌
小說會員作為百度APP眾多會員之一，設計團隊希望能帶給閱讀用戶一些不同的品牌記憶點。
1）設計關鍵詞
基于會員的主流用戶、產品屬性和用戶訴求，我們衍生出以下關鍵詞：年輕、品質、尊貴、超值。年輕用戶群體的占比越來越高，新版的設計風格力求更好滿足年輕用戶的審美需求。
2）會員符號
符號是最直觀的視覺元素之一，能夠以最快的方式傳遞產品記憶點。在會員品牌符號設計的草圖階段，我們從字母V、VIP、鉆石、王冠和小說IP白嘟嘟等多個方向進行了方案發(fā)散。最終采用了白嘟嘟圖形與尊貴感的V形符號相結合的形式。該方案既延續(xù)了小說的視覺符號，又與競品的會員標識形成差異，從而加深用戶的品牌感知和視覺記憶。
3）會員色彩
為了確定更加獨特的品牌色，設計團隊搜集了大量的尊貴氛圍圖片，提煉出了玫瑰金，牙金，赤墨等8個具有品質感的顏色。在視覺初稿階段，我們選擇了玫瑰金和黃金兩種主色進行了方案嘗試。最終根據整體效果確定主色為明亮、高貴的玫瑰金，輔色為黑茶棕，深支子和漆黑的配色方案。新的配色方案讓用戶感受到新穎、現代，煥然一新。
4）會員圖標
在圖形元素上，為了增強親和感，我們選擇了圓潤的面形圖標樣式，通過大圓弧和小圓角的細節(jié)處理，傳遞給用戶一種年輕、品質的品牌印記。
5）信息傳達
我們對會員購買頁和權益詳情頁進行了布局重構，采用深色的背景襯托卡片信息，使得產品框架層和內容信息層更加明確，突出核心內容。
在各類場景中，我們通過會員品牌色彩、圖形、符號和IP形象的滲透，強化會員品牌印記。
經過分析研究和實踐，我們完成了主場景的設計升級。
2、鏈路化—精細化運營
就會員體驗而言，我們需要關注用戶在各種時間和各類場合下的需求，因此我們將會員的全鏈路狀態(tài)分為時機、場景和人群三個維度。
1）時機
在不同的時機狀態(tài)下，我們需要傳遞給用戶不同的信息。只有深入剖析不同狀態(tài)下的用戶訴求，才能為其提供更好的服務。接下來我們從購買前、購買中、購買后和即將過期四個階段闡述：
①購買前—權益/優(yōu)惠信息引導
在用戶購買前，我們強化了低價和省錢信息，讓用戶直觀的感受到購買會員后的價格福利。為此我們從三個方向上進行優(yōu)化，在開通購買頁，外露省錢金額，幫助用戶了解開通會員可享受的收益；在會員頻道頁，采用外露多項權益，讓用戶快速了解會員權益；在章節(jié)購買頁，采用突出會員折扣和會員優(yōu)惠價，讓用戶感受到開通會員的折扣福利。
②購買中—優(yōu)化路徑流程
在用戶購買中，我們在會員購買鏈路環(huán)節(jié)進行簡化，采用當前頁彈出半層面板替代跳轉至會員聚合頁的方式，縮短等待加載時間；在章節(jié)付費鏈路環(huán)節(jié)，將商品選擇區(qū)信息結構進行優(yōu)化，減少多章購買的頁面跳轉，使得用戶能夠更流暢的完成支付，提升付費體驗。
③購買后—強化權益感知
在用戶購買后，鑒于付費用戶對商品和服務品質有著更高追求，為此我們通過在各類重要入口展示會員權益，包括省錢金額、去廣告次數以及各類場景VIP狀態(tài)提示等方法，以達到強化用戶的權益感知。
④即將過期—輕引導續(xù)費
在即將過期前，為了避免對用戶造成強付費的不友好感知。過期前3天，我們采用了輕量化的形式告知用戶續(xù)費，通過各類引導信息的提示，讓用戶知曉會員服務期限屆滿。
2）場景
我們在入口和功能場景中也進行了精細化設計，讓用戶更便捷地使用會員服務。為了突出會員優(yōu)質內容和服務，我們設置了會員專屬的頻道和書庫，方便用戶選擇。
在各類功能場景中，為了方便用戶在使用功能的過程中隨時購買，我們設置了多個功能場景的會員開通入口。讓用戶快捷享受會員服務。
3）人群
通過小說用戶數據分析，我們將用戶人群分為會員用戶、潛在用戶、新用戶和過期用戶。
為了讓會員用戶能夠體驗到區(qū)分于普通用戶的尊貴感，我們在付費頁、批量離線、TTS播放頁和簽到頁等場景均采用了會員定制化的配色方案和引導提示，這樣使得會員用戶在體驗服務的各類場景中有更強的身份專屬性。
所謂潛在用戶，是指仍在猶豫是否購買會員的用戶。我們通過限時優(yōu)惠券、激勵視頻試用15分鐘、書架省錢提示、挽留彈窗和降級版免廣告權益等方式，讓潛在用戶不僅可以先試后買了解會員權益，而且可以通過各類信息提示通曉會員體驗，更好地判斷是否通過會員服務減少付費金額和提升閱讀體驗。
我們針對新用戶建立了新人見面禮活動，用戶在新手福利活動期內可享受超值折扣開通會員，低價體驗會員權益。而針對已過期的用戶，我們通過下發(fā)優(yōu)惠券、強化特權等形式喚醒用戶，以免錯過各類福利和特權。
3、服務化—提升會員服務
在內容為王的時代背景下，為了增加會員產品的核心競爭力，我們持續(xù)擴充會員書庫的數量和類目、拓展會員權益，讓用戶閱讀到更加豐富的小說內容和體驗到更多權益的會員服務。小說書庫的付費和免費書數量大幅擴充，且書籍類型新增了有聲書和短篇故事，增添了小說資源的多樣性。
在權益上，對內我們持續(xù)拓展會員特權，從最初的4項擴展為10項，新增了有聲免費聽、免費讀故事、整本離線、專屬字體、簽到1.5倍書幣等權益；對外我們聯合其他產品，推出了會員贈禮和聯合會員服務，用戶可以根據自己的需求進行購買，享受組合購買的優(yōu)惠。
通過多個版本的迭代，我們完成了會員體系的設計升級和落地，用戶體驗得到了顯著提升。
四、未來規(guī)劃
提升付費產品的用戶體驗是一個體系化的研究課題，需要各個角色通力合作，合力同行，開拓革新。將來我們還會不斷探索，通過不斷優(yōu)化體驗細節(jié)，不斷增加用戶權益感知，不斷嘗試方案創(chuàng)新，形成設計組合拳，為用戶提供更好的服務。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
百度酒店以比價為核心特色，經歷多次設計探索，初步建立了用戶認知。
設計中通過“核心流程分析-明確用戶關注信息-探索比價價值”的方式去制定設計策略，并在方案探索與落地階段，通過思路發(fā)散、多輪數據驗證與方案迭代，驗證了“氛圍感知強化、價值信息傳達、聚合比價”等設計手段的作用，希望給服務和電商等比價類產品的設計師一些啟發(fā)和參考。
一、項目背景
酒店住宿在線預訂市場中，各個平臺基于用戶權益、運營補貼等差異進行著激烈的價格競爭，導致行業(yè)存在天然的價差。而在我們進行的一次酒店預訂訪談中發(fā)現，超過半數的用戶在預訂酒店時會進行比價，而比價的用戶中多數會使用2個以上的酒店APP。因此，在市場存在價差且用戶有比價訴求的背景下，百度酒店通過接入多家供給及會員低價，旨在建立酒店聚合比價平臺，為用戶提供性價比最高的酒店搜索服務。
二、設計策略與落地觸點
1.目標和策略制定
在上述背景下，我們與產品側對齊業(yè)務目標，結合對用戶訴求的分析，確定了設計目標。
為了達成設計目標，需要明確比價在酒店預訂的各個觸點下對用戶的價值是什么，以探索比價如何發(fā)揮作用。下圖列出了酒店預訂的核心流程、核心模塊及用戶關注信息，由于用戶在各個環(huán)節(jié)關注的信息不同，比價所能發(fā)揮的價值也就不同，因此基于比價是否影響用戶進行選擇和決策，我們又將核心流程分成服務報價選擇前、服務報價選擇時、服務報價選擇后。
設計目標的實現也對應上述3個環(huán)節(jié)如下圖：
2.明確落地觸點
為了找到一些好的比價概念和價值的傳達方式，以及提升比價體驗的方式，我們進行了競品調研，競品包含酒店、商品等不同行業(yè)，調研結論歸納如下：
結合競品調研結論，我們根據百度酒店的核心流程和觸點進行了設計策略的拆解，建立了策略和落地的映射關系。
三、方案探索與落地
1.提升感知-讓用戶知道百度酒店可以比價
這一環(huán)節(jié)的設計目標是要讓用戶知道百度酒店可以比價，以吸引用戶在百度酒店完成下單行為，因此清晰、有吸引力的比價元素設計十分重要?；诟偲氛{研內容，我們進行了設計探索。
1）酒店列表-氛圍感知強化及價值信息傳達
下圖所示為酒店列表比價設計的探索過程，最初的方案，為了保證酒店信息的獲取體驗，采用了與傳統酒店預訂平臺采用一致的結構和信息優(yōu)先級，僅結合圖片區(qū)域和價格做了比價信息的結合，但這種設計與傳統酒店預訂平臺差異很小，比價感知和價值的傳達效果并不好。因此設計側轉變思路，在酒店列表中通過更強化的模塊來突出比價的感知，同時結合“比某平臺低xx”的文案說明比價結果，傳達“比價獲得更低價”的感知。
酒店列表覆蓋多個場景，為了建立百度酒店一致的體驗和認知，我們將列表的設計覆蓋到了搜索結果頁和小程序的多個頁面，如圖所示。
2）房型及服務報價-基于低價推薦去強化比價
房型及服務報價模塊對應酒店精準需求和酒店詳情頁，與酒店列表思路一致，方案在逐漸與傳統酒店預訂平臺產生差異化，去強化比價、低價的感知，形成記憶點。
下圖為搜索結果頁的方案，最初外露了多個房型，以滿足用戶的選擇訴求，但從用戶行為數據來看，百度酒店的絕大多數用戶會選擇酒店的最低價房型及報價，因此我們調整設計方案，結合最低報價，用模塊式的對比方式去強化比價，并通過“低價立省xx”的信息去傳達低價感知。另外，這一部分的設計也和聚合比價有所結合，后面會進行詳細的說明。
詳情頁的主要模塊設計與搜索結果頁基本一致，如下圖所示，詳情頁中將最低報價作為低價房型推薦，以建立一致的比價認知同時便于用戶快捷預訂低價。另外，在常規(guī)的報價列表中，為了提升用戶查找報價的效率，相比于最低價房型，采用了弱化的形式。最終方案上線后，數據上也取得了正向的效果，報價展現到預訂點擊的轉化得到了提升。
3）“產品縫隙”中的比價概念滲透
“產品縫隙”并不像上述列表模塊那樣感知強烈，設計的目的是為了進一步加深“百度酒店可以比價”的用戶印象。結合百度酒店的核心頁面，我們重新設計了酒店列表和房型報價列表的加載態(tài)，利用“多資源方交替動效+文案說明”的方式，構建動態(tài)的比價感知，在用戶進入頁面或者進行篩選等場景時會出現。另外，我們也利用了小程序首頁和詳情頁的頁尾，在閱讀結束時去傳達全網比價的概念。
2.建立認知-聚合比價模式的構建
在競品調研部分，我們提到了聚合比價模式，百度酒店由于報價復雜，也適合用這種方式去簡化報價。
如圖所示，常規(guī)酒店預訂平臺，同一房型（如標準大床房）會存在不同服務政策（早餐服務、取消規(guī)則、支付方式）的報價，而在百度酒店中，由于又加入了預訂平臺的差異，報價會更加復雜，數量更多且同質化嚴重，即服務政策相同，僅預訂平臺不同的報價多次出現，這就導致了報價列表的查看和選擇效率較低。
聚合比價模式就是要將這些服務政策相同的報價聚合在一起進行比價，以簡化報價列表提升選擇效率，同時在服務相同的情況下，絕大部分用戶會更傾向于低價，在報價聚合后，可以突出低價以便用戶預訂。
我們也在探索如何讓聚合比價更簡單，初始方案采用點擊展開的形式，用戶可以保持滑動瀏覽的交互體驗，整個過程的交互體驗比較流暢，但頁面的層級關系較為復雜，用戶認知成本高。因此我們又嘗試了調起面板展示比價詳情，讓用戶聚焦在當前報價的對比，并通過模塊式的設計，清晰羅列了每個平臺的服務、優(yōu)惠明細等差異信息，讓信息的對比更高效，同時強化低價平臺，與前面的比價模塊保持認知一致。
聚合比價模式下，存在了兩種用戶路徑，如圖所示。用戶可以直接選擇最低價資源方完成預訂，也可以通過比價詳情彈層，查看針對同一服務的所有平臺報價，對比平臺的詳細服務、優(yōu)惠差異后再選擇預訂。
這種預訂模式的目的，一方面在教育用戶建立百度酒店可以比價、可以買到低價的認知，另一方面也提升了用戶選擇低價平臺的效率。另外，聚合比價要具有清晰的規(guī)則才能被理解和信任，在比價詳情中，為了進一步降低認知成本，我們通過標題突出了聚合項，并增加了比價說明入口，讓聚合規(guī)則更明確。聚合比價的方案上線后，報價的預訂點擊到成單轉化也得到了提升。
另外，前文提到的精準需求搜索結果頁和詳情頁的低價房型推薦也利用了這種模式，不過在比價感知上做了更強化的處理。用戶可以在詳情頁直接點擊各個平臺報價完成預訂，也可以點擊文字部分查看房型詳情，在頁面底部的比價詳情中完成報價的對比和預訂。
3.強化記憶-比價價值感的再次強化
填單場景是在預訂完成后，這個環(huán)節(jié)我們可以將比價的概念和價值再次展示給用戶，以加深用戶對比價的認知。這里的設計手段與“提升感知”階段類似，如圖所示為一些方案探索，在用戶選擇低價平臺預訂，點擊跳轉至填單頁后，我們會強化用戶“預訂到最低價”以及“為用戶節(jié)省xx元”的感知。另外，在用戶提交訂單時，會存在一定的加載時間，我們也利用了這里的“產品縫隙”，結合加載態(tài)繼續(xù)傳遞低價、省錢的認知。
四、結語
回顧百度酒店的比價設計過程，我們以比價及低價感知傳達、高效預訂低價為設計目標，基于百度酒店的核心預訂流程，探索比價在各個環(huán)節(jié)如何發(fā)揮作用，進而將設計目標的實現劃分為了“提升感知、建立認知、強化記憶”三個階段，并為業(yè)務帶來轉化提升。
提升感知過程結合流程中的主要模塊，通過模塊式對比形式、傳達比價價值感、基于低價推薦強化比價、以及利用“產品縫隙”等手段，去吸引用戶了解和使用比價；建立認知過程利用“聚合比價”模式去精簡報價，同時結合對低價報價、低價平臺的強化，讓用戶更便捷的預訂低價；最后強化記憶的環(huán)節(jié)，我們進行了一些方案嘗試，再次強調比價的價值。另外，為了建立一致的比價認知，整體的設計中也堅持一致性的原則。百度酒店的比價設計也在不斷地嘗試和優(yōu)化中，希望能給用戶創(chuàng)造更好的使用體驗。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
通知是產品中極其重要的一部分，它能快速將內容的狀態(tài)及變化通過不同的方式傳達給用戶，以便用戶在收到信息后根據所傳遞的內容及時做出應對策略。
在這里，有一個很現實的問題，很多產品喜歡一股腦的把有效的/無效的、重要的/不重要的、用戶想知道的/不想知道的等所有信息通通推送給用戶。那么，你的推送渠道真的用對了嗎？是否做了信息優(yōu)先級區(qū)分？推送時間段是否有效？站在用戶角度，下面這些場景你肯定碰到過：
◇ 手機屏幕總是頻繁彈出信息，接二連三的震動、提示音讓你一怒之下卸載了一些不太常用的APP；
◇ 桌面圖標99+、主頁的消息入口99+、進入消息分類還是99+，清理起來非常麻煩，還不如關閉幾個分類通知，少一個也能緩口氣；
◇ 一天少看了幾個小視頻，好不容易節(jié)省出來的流量被通知無情的消耗，還不如關閉系統通知權限來得快；
◇ 每隔一段時間，都要在手機短信中回復一大堆TD（退訂），想吐的感覺；
◇ ......
在頻繁地打擾下，用戶關閉了一個個通知權限、甚至一度卸載APP。不難看出，好的消息通知能巧妙的將用戶求留?。ú糠钟脩衾猛ㄖ湍鼙３謱ξ⑿拧Q的控制欲），做的不好就會起到負面作用、失去了消息通知的初衷，這里面最需要把控就是推送的一個“度”。
用戶可能因為一條走心的推送而轉化、也可能因為被打擾而放棄使用，站在設計角度，需盡可能打造讓用戶更喜歡的通知系統。那么，對于不同的業(yè)務需求及使用場景，又該如何差異化的進行消息推送，筆者通過本文進行分析總結，與大家一起了解。
一、消息推送的基本知識
二、消息通知渠道
三、讓用戶再次開啟通知權限
四、提高觸達率的小技巧
五、結語
消息通知是產品提供的一項服務，能夠及時將產品的期待或內容的變化、根據其等級權重合理的通過不同渠道及時同步給用戶，常見的如互動提醒、老用戶召回、活動拉新、產品更新或幫助提醒等，通過站內紅點、彈窗、短信、郵件等方式與用戶進行信息交換。
用戶層面，方便及時獲取到想要知道的信息、以及對信息交換的控制權。例如：用戶發(fā)布一條新的短視頻想要對評論/點贊及時掌控、給心上人發(fā)了信息想在第一時間看到回復...等，產品也是借此用戶對內容的控制欲，利用消息推送提升用戶的使用體驗。
產品層面，通過主動推送想讓用戶知道的信息，以達到新/老用戶轉化的目的。例如：通過手機短信形式發(fā)放優(yōu)惠券對老用戶召回、應用內通知或桌面推送對用戶拉新...等，以此提高產品收益，獲取更大的商業(yè)價值。
首先，一個好的消息系統首先需要將消息內容設計的全面，以便用戶通過消息通知能準確無誤的了解到對應內容；
其次，消息的觸達方式需合理有效，必須提供便捷的操作入口以供用戶及時反饋；
另外，為了避免過于打擾用戶，需選擇合理的推送渠道，提高用戶觸達概率及反饋效率。
消息通知渠道分為應用內通知應用外通知。應用內通知主要來源于消息中心或系統主動觸發(fā)的彈窗來體現，而應用外通知包括桌面圖標紅點、手機短信、電子郵件、push、公眾號信息（需綁定）等渠道推送。
1）消息功能入口
消息功能入口提示也稱為紅點提示，主要有底部Tad欄、首頁右上角、個人中心右上角三種形式。當有新的通知出現時，對應圖標的右上角會出現小紅點提示，清晰明了，關于小紅點設計，之前《小紅點篇 | 用好這招，讓用戶的觸達率大幅度提升！》這篇文章有詳細說明。
紅點提示的用戶觸達率較高，但需要用戶在登錄狀態(tài)下才能查看，比如訂單狀態(tài)變化、用戶與用戶/產品之間的互動消息、產品活動通知等。
2）消息列表
當產品的消息類型較多時，點擊消息功能入口即可跳轉至二級分類列表。與上述相比，消息列表的內容則更加清晰，通過第一次消息入口功能的引導觸發(fā)，這里的用戶觸達率將成倍增加。
3）彈窗通知
以彈窗的形式覆蓋在頁面內容頂層，阻礙用戶的當前操作并迫使用戶對彈窗做出決策，可以是系統主動彈出或用戶手動觸發(fā)，對用戶的干擾極大。
彈窗通知最大的優(yōu)勢在于會100%被用戶看到，無法忽略，否則將不能進行其他操作，很適合產品的一些重要事件提醒，例如應用升級、活動通知、優(yōu)惠券引流等。
4）Toast 通知
Toast通知是用戶在操作之后給出的即時反饋，與當前頁面內容關聯性極強，但不會中斷用戶的操作，出現的時間很短，一般持續(xù)3秒后自動消失，對用戶的干擾也比較小。
需要注意的是，Toast容易在用戶不注意的情況下被遺漏，所以適合用于操作后不影響大局、且不可二次操作、不可逆轉的輕量提示，例如刪除成功、提交成功等。
1）桌面小紅點
小紅點通常以圓點+數字的形式出現在圖標右上角，用來提示應用內的未讀消息數量，進入應用查看或清除后小紅點則會消失。桌面小紅點有一個必備前提，需要同時開啟設備和應用內的通知權限方能接收提醒通知。
在部分應用中，桌面小紅點具有較大的價值，能對用戶產生積極的影響，使用頻率得到進一定的提升。例如：社交類應用中的私信、評論、點贊等；商家端的咨詢信息、下單提醒等，用戶在看到后都會有強烈的點擊欲望，對一些數據的提升起到推動作用。
2）PUSH推送
PUSH推送通知常見于設備頂部橫幅（幾秒后消失）、通知中心以及鎖屏后的中部區(qū)域，用戶可從卡片中的內容獲取信息類型及重要程度，用以決策是否需要立即打開。
這種推送方式，用戶幾乎很難忽略，不處理的話會長時間浮于屏幕之上，非常適合價值及時效性較高的消息通知。除視覺提醒之外，還可通過聽覺觸達用戶，例如支付號、微信的收款信息等，不過依然要同時開啟設備和應用內的通知權限。
3）手機短信
短信推送是大家很熟悉的通知渠道了，畢竟現在都是用手機注冊賬號，手機號獲取難度幾乎為“0”，常見的有驗證碼短信（用戶請求）、營銷短信（產品推送）兩種：
驗證碼類似“一問一答”的互動，沒有什么特別的玩法；
營銷類短信對于拉取新用戶、老用戶召回、節(jié)日/活動促銷能起到不可替代作用，產品可通過短信發(fā)送圖片、文字以及超鏈接，內容的時效性、用戶的觸達率都相對較高。
著重說明一點，因為短信通知的成本較高，在使用之前需要足夠的思考分析，細分用戶群體做到精準投放，避免所花費的成本與產生的價值不成正比。另外，如果需要放超鏈接，那么短信內容一定要有足夠的說服力及吸引力，總是被用戶當做詐騙短信刪除、舉報的話還不如不放。
為了減少對用戶的打擾，讓產品更人性化，一般會在短信結尾提供TD（退訂）提示，用戶回復即可取消后續(xù)的推送，但是否真的取消成功，這就得看產品了(???)...
4）電子郵件
電子郵件推送方式使用的并不多，一方面需要產品有web端服務，純粹的移動端APP郵件推送不會有什么效果；另一方面，絕大多數的用戶登錄電子郵箱并不頻繁，還容易被用戶一鍵清理或誤刪。
電子郵件唯一的好處就是用戶可通過超鏈接直達內容出處，相比APP應用，免去了下載等一系列操作，還可以長時間滯留，便于用戶隨時查看或添加星標，處理時間段選擇較為靈活，很適合web端服務。針對一些商業(yè)化的郵件推送，也需要花費一定的經濟成本。
產品獲取用戶郵箱地址的難度較大（郵箱賬號除外），不難理解，使用手機號一鍵登錄、驗證碼登錄、第三方賬號登錄遠比郵箱地址登錄要方便的多。除此之外，還可以通過個人設置的添加郵箱、問卷調查的郵箱地址預留來獲取，不過這就要看用戶的主動意愿了。
5）公眾號消息
公眾號背靠社交應用，普及程度及用戶觸達率是極高的，不過這需要產品利用部分業(yè)務、活動為導向，引導用戶關注公眾號后方能接收到消息通知。
目前公眾號只能向用戶發(fā)送符合部分場景要求的服務通知，例如刷卡通知、物流軌跡變化、商品購買等。如果預算足夠的話，還可以購買公眾號列表、內容詳情頁、朋友圈等產品廣告位進行特定用戶群體推送，無需用戶關注也可以看到并進行轉化。
用戶一旦關閉通知權限，對產品來說無疑是一個損失，這意味著沒有消息通知的推動，用戶的使用頻率以及與產品之間的互動顯然會減少（就連夫妻之間都需要時?；优c溝通交流，何況對于有選擇余地的產品），時間長了，用戶轉投其他產品的“懷抱”也不是不可能。
有沒有想過，用戶只是關閉通知權限而已，并沒有卸載APP，真的就沒辦法了嗎？是不是該做點什么...
用戶之所以還未卸載APP，說明還有價值，歸根結底，關閉通知權限的原因都是因為消息的“狂轟亂炸”帶來的無盡騷擾，幾乎沒有例外，而產品還會添上一把火，用戶再次打開APP時無底線的催促用戶再度開啟，耗盡用戶最后一點耐心后，或許再也沒有機會了。
這個時候，設計師考慮的不是頻繁提醒用戶開啟，而是用戶關閉通知的真正原因（“狂轟亂炸”只是概括），細化各種可能性，然后從中找出機會點，但凡有所改進都值得試一試，畢竟相比什么都不做不會更糟。這么解釋似乎毫無說服力，下面舉個例子：
當產品中的某項免費服務突然有一天開始收費了，但受到了大多數用戶的抵觸，這個時候你該怎么做，是無視用戶訴求繼續(xù)收費、還是恢復到之前的免費？這并不是一個選擇題，繼續(xù)收費會導致大量用戶流失、恢復免費可能連維持運營成本都難，所以不經思索的選擇草草收場、連下下策都算不上。用戶抵觸的原因可能收費過高或是與實際價值不符，有沒有想過利用限時折扣、附加其他增值服務（成本較?。┗蛘呓M合捆綁銷售也不失為一種策略。
那么，到底該如何做既能愉快的發(fā)送消息通知、還能能挽回用戶的心呢？
用戶關閉通知權限，并非沒有需求，最典型的就是在某寶、某東加了滿滿一“車”商品等待降價，然后抱怨消息通知太吵關掉了通知權限，最后就是無法收到折扣通知、還把問題怪在了APP身上，著實太冤。用戶只要還有需求，通知權限就還有被重新開啟的機會。
1）損失厭惡/利益引誘
首先，我們需要找出對應的價值點，利用優(yōu)秀的文案給予用戶思考的余地，用戶每多思考一會，結果都有可能發(fā)生改變。
人們都討厭失去，對于損失的不可控很難接受，在引導用戶開啟通知權限時，需要強調不開啟會失去什么，畢竟面對“得到”和“失去”時，損失更加讓人難以忍受，例如物流產品告訴用戶“未開啟通知，將錯過重要的快遞信息”。還可以通過激勵等進行利益引誘，如“開啟后能及時獲取紅包卡券、折扣通知”等，并提供快捷通道，促使用戶重新開啟通知權限。
2）消息分類/分別處理
每種類型的通知都不可能符合所有用戶的“胃口”，針對社交、電商類產品，可將通知類型分類處理，用戶希望接收哪種類型的消息單獨開啟即可。
例如支付寶將消息拆分為多個類型；京東還增加了午休免打擾設置，開啟后在12：30-13：30不會收到任何消息提醒；微信群過多、消息太吵時，開啟免打擾又擔心錯過重要人的信息，于是微信在去年上線了開啟群消息免打擾后、可設置群內4個人的消息正常通知，算是比較人性化的設計了。
3）提供關閉/關不徹底
部分產品提供了關閉消息通知功能，但又關不徹底，這是產品基于妥協的基礎上，依然在低頻推送消息的“流氓”玩法，與用戶完全關閉相比，已經算是不錯的結果了。
常見于PC客戶端，就像很多軟件的插件一樣，不管怎么關，總是無法徹底關閉，甚至還將開啟操作偽裝成其他內容引導用戶誤觸；手機短信推送也會有這種情況，用戶回復過“退訂”后依然會收到相關短信。
這種方式需謹慎使用，在用戶關閉通知后，需通過后續(xù)推送內容的質量、頻率試探用戶底線，然后逐漸提升，切不可無視用戶操作。
反復推送相同的內容只會讓用戶更加反感，回復退訂、卸載應用都可能在這一刻發(fā)生。
很明顯，消息發(fā)出后，如果用戶的觸達率較高就沒必要再次推送。反之觸達率較低，重復推送會讓用戶有種被催促、脅迫的感覺，適得其反，觸達率低有沒有可能是文案不夠友好、表達不夠清晰或者吸引力不夠？即便同一件事情，也盡量使用不同的表達方式，如何想辦法重新引起用戶的關注才是關鍵點。
中華文字博大精深，且有56個民族，其性格習慣各異，特別在利用當前社會熱點、媒介進行的營銷推送時，盡可能規(guī)避掉敏感信息，如地域/民族歧視、性暗示等。
很多時候，消息推送太少無法滿足產品目標、太多則會惹惱用戶導致通知權限被徹底關閉，所以不僅要考慮消息推送頻率，更重要的是對受眾群體進行分類、分別推送，不要每次都一股腦的將消息發(fā)給所有用戶，當然，能做到千人千面（成本大）則會更好。
沒有用戶愿意在不明所以的情況下來看長篇大論的內容，需確保消息內容簡單直接、清晰易懂，并符合用戶認知習慣，還得保持友好的語氣以及富有創(chuàng)造力的品牌形象。
處于營銷目的時，可利用感興趣的事件/事物勾起用戶的點擊欲望，例如網絡熱詞、時下熱點等，筆者雖然并不提倡“標題黨”，但不得不說，很多標題黨都能起到不錯的效果。
消息通知需要一個有效操作入口，并且在消息內容中有對應的指向，點擊應用內通知切換APP界面、應用外推送鏈接跳轉至web頁，從始至終都需要為用戶提供一個查看更多內容或參與的有效途徑。
消息通知設計的主要目的是在正確的時間、以正確的方式將內容呈現給用戶，并提高產品的轉化率，不管用戶愿不愿意接受，這始終都是一個呈現信息的不錯途徑。
本文主要總結了消息的通知渠道、常見問題處理、提升用戶觸達率的方法，以幫助新手設計師快速掌握完整的消息系統?；蛟S最終的結果事與愿違，但不能否認其魔力，需要做好的是確保消息內容質量、對應的受眾群體及合理的推送渠道，相信總有一種方式適合你產品。
作者：大漠飛鷹CYSJ 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前幾天眼睛不太舒服，去醫(yī)院做了一個檢查（視疲勞導致）。因為要走商保，所以要使用社?？?，之前我記得用社保結算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保，要我掃她胸前掛的碼（可以快速到達電子社保二維碼界面），掃完她就開始幫我點擊操作。
她覺得我應該不會操作，所以讓我看一遍，其實這個操作并不難，只是因為我不知道自助機上可以用，自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。
在B端產品中也有很多類似問題，用戶不知道有這個功能、也不知道這個功能怎么使用，特別是一些大數據產品，專業(yè)性比較強。產品、技術都認為用戶和他們一樣都懂，實際上并不是，這個時候你需要提供一些邀請，引導用戶進行使用。
邀請就是引導用戶進行操作前的提醒和暗示，通常包括實時的提示信息和預期功能，以表明在下這個界面或下個界面可以做什么，這是成功的交互式界面關鍵所在。
例如：飛書我的空間，當鼠標停留在可編輯區(qū)域上時，就會實時地顯示邀請（復選框），這個例子的缺點是鼠標如果不處于相應區(qū)域上，就不會顯示邀請。
另一種方案是任何時候都顯示邀請，例如：石墨文檔我的桌面，復選框一直顯示。
靜態(tài)邀請就是通過直接在頁面上給出交互提示，可以讓用戶隨時看到期望的界面功能。
靜態(tài)邀請主要有兩種模式：引導操作邀請、漫游探索邀請
例如：華為云HECS服務器產品就給出1、2、3操作步驟 引導操作會占據頁面較大的空間，同時也會吸引用戶的眼球。所以在設計時需要思考一下，你希望引導用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設計出明晰的頁面和信息層。
另一種引導操作邀請叫作白板式引導。 意思很明確：現在只有一個空白頁面，需要引導用戶創(chuàng)建內容。
利用空白區(qū)域“變廢為寶”，如何對該區(qū)域應有的功能給出提示，是誘導用戶創(chuàng)建內容（填補空白）的有效方式。
與引導操作邀請關系密切的是漫游探索邀請。假設你重新設計了某個頁面并添加了一組全新的功能，怎樣才能保證用戶恰當地使用新頁面，同時發(fā)現新添加的功能呢？漫游邀請是向用戶介紹新功能最好的方法。
1、漫游功能用戶可能不想用，所以需要有可選功能，也就是可以跳過或關閉；
2、漫游功能不是“創(chuàng)可貼”不要亂用，只有針對精心設計的界面使用才能發(fā)揮價值；
3、設計漫游的關鍵在于保持簡單，讓它容易開始也容易停止。漫游應該只是頁面本身的一個演示。脫離頁面的“教程”式漫游很難起到作用。
靜態(tài)邀請適合提示用戶當前界面中包含什么功能。然而，許多調查試驗表明，用戶經常不會閱讀指導說明性的文字。而在用戶交互過程中，在他們需要的時候提供邀請則是一種不錯的方式。動態(tài)邀請就是在用戶交互過程中的某個點上吸引用戶，并引導他們繼續(xù)下一步操作。
吸引用戶的一種方式是通過鼠標懸停來顯示邀請
例如：飛書消息列表鼠標移入后， 背景變化的同時會有一個“勾”圖標來吸引用戶，鼠標移入上去后提示可以勾選完成，點擊完成后消息移除列表。
1、當操作沒有內容重要，而且希望界面整潔時，使用懸停邀請。
2、在實現懸停邀請時，可以通過改變光標、改變背景和顯示提示條共同配合表明所邀請的操作
3、在交互的不同階段，盡量點綴一些用戶熟悉的元素，通過熟悉的概念引出新概念有助于用戶快速理解新功能。最常見的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標。
4、通過距離表明邀請操作的目標對象。
唐納德·諾曼將這個術語引入到設計領域。最經典的例子是門把手，門把手的預期功能是可以抓握、扭轉或按壓。屏幕元素可感知的預期功能沒有物理屬性，不過，由于習慣、術語、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。
例如：第一張圖飛書文檔sheet頁“加號”圖標與第二張圖“三個點”圖標，就是一種預期功能邀請。用戶沒觸發(fā)之前就能猜到觸發(fā)后會是什么效果。
預期功能邀請之所以有效，是因為利用人們已知的習慣與認知引入交互，從而讓用戶順利完成一連串操作。
1、通過人們習以為常、司空見慣的概念來引出新的、不熟悉的交互方式。
2、使用可感知的預期功能來給出邀請?zhí)崾?例如，用向下的箭頭表示可以打開下拉菜單，而用向上的箭頭表示可以關閉菜單)
3、把邀請安排在適當的上下文中，特別是要靠近交互的主體。
設計邀請時怎么才能猜測用戶的想法，也是一項重要挑戰(zhàn)。如果用戶下一步可能會執(zhí)行多種操作，而事實上又不可能準確判斷用戶想法，那么面臨的困難就會比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當鼠標點擊某個點后，進行第二個點連接時，會有多種可能性，這個時候系統也不確定用戶會怎樣連接，但會給出對應的提示，比如：端點、中點、背面、側面等點位來輔助用戶進行連接。
例如：這種工作流場景個人覺得也算是一種，點擊“加號”右側會滑出面板，給出你可以添加的動作。 這種在交互期間以可見方式向用戶表明系統推斷出的用戶想法被稱為推論邀請。
圖片類型的更多邀請，例如：站酷相關推薦
文字更多邀請，例如：QQ郵箱右側最近聯系人
精心設計的應用能夠通過邀請體現出各自的細微差別，無論是靜態(tài)還是動態(tài)，都是引導用戶順利進入下一個交互層次的有效方法。
謝謝觀看！
搜索的本質是什么？無疑是內容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內卷，不少公司除了持續(xù)優(yōu)化搜索結果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內置了很多搜索關鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結果比如搜：is google down（谷歌關閉了嗎），搜索結果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節(jié)日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復活節(jié)、開學季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應該是搜索【黑洞】時，頁面上會出現黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來?
而在【活動運營】上，百度也是很有心地進行著創(chuàng)新設計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié)，搜索結果頁上都有‘調戲’用戶的創(chuàng)意設計，各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設計上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動入口’嵌套‘在結果頁卡片中間，用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」
用這種充滿創(chuàng)意+應景的的入口設計與引導方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產品易用性。
代表：蘋果產品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據輸入詞檢測+搜索對應的手機號碼：當你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關幫助時，系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統偏好設置’里搜索幫助，在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時，該入口的聚光燈會更清晰些，特別容易找到搜索結果。
夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準地觸達搜索。
而且在輸入網址或英文等字段時，搜索框下方會出現一個滑塊區(qū)。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標位置。
而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
讓用戶更方便地將光標快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結果， 比如在搜索框中輸入“某城市+天氣”的關鍵詞，上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無需觸發(fā)搜索、進入結果頁才能看到想要查詢的信息。
– END
數據保存是Web端工具的基礎功能，一般在產品和技術框架設計之初就已經確定了數據保存的方式，后續(xù)不太會頻繁更改。
正因為如此，在日常需求迭代中，設計師很容易忽略數據保存的過程，也很少質疑當前的保存機制是否合理，但是當需要設計新模塊或產品時就會對保存有疑惑。
此外，保存也是一個受技術限制較大的領域，設計師需要對保存的技術類型有基礎認知，因為它會影響保存生效的邏輯和交互形式。
本文將會基于個人經驗，從設計表現和技術實現的角度聊聊Web端工具的數據保存。
對于Web端工具產品來說，保存的對象可分為「文件數據」、「設置數據」、「用戶行為數據」。
「文件數據」是相互獨立的內容，比如酷家樂的一個方案、Figma的一個文檔都是文件數據，在文件A中觸發(fā)保存并不會影響到文件B。文件數據是最主要的用戶資產，若丟失會給用戶造成很大的損失。
「設置數據」分不同的維度，主要有用戶級別、組織級別、設備級別這三種。
用戶級別：數據保存在當前用戶的賬號下，同一個用戶的所有文檔都會應用該設置，比如酷家樂云設計工具的偏好設置。
組織級別：數據保存在組織級別，可能由組織管理員設置，同一個組織下的所有用戶都應用該數據。
設備級別：數據保存在設備（瀏覽器）上，同一個設備上的不同賬號、不同文檔都會應用此數據。區(qū)別用戶級別和設備級別的保存很簡單，只要清空瀏覽器緩存，看看數據是否變化即可。
一般來說，「設置數據」也是用戶資產。但是設備級別的數據存在丟失的可能性，一般情況下不會存儲大量重要的數據。
技術上經常把「用戶是否進行過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;">后端保存是最常見的保存方式，觸發(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;">局限性：</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），通常為了方便單次會話而設置，例如記住選項狀態(tà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端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網絡或服務不穩(wěn)定造成的數據丟失。</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ā)機制
</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ā)維度，可以將保存行為分為自動保存、手動保存、提示保存。</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;">根據保存的觸發(fā)條件，可將自動保存分為以下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. 定時觸發(fā)保存以一定的時間間隔（通常采用幾分鐘 ~ 1 小時）周期性地自動觸發(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;">b. 條件觸發(fā)保存特定的用戶行為會觸發(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ā)保存，則要結合業(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. 實時保存只要數據發(fā)生改變，立即觸發(fā)自動保存，無需用戶手動保存（盡管一些產品考慮到用戶習慣，仍會保留手動保存的交互）。部分產品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實時保存。實時保存能最大程度避免數據丟失，是Web端工具理想的保存觸發(fā)方式。但因為技術原因，并非所有工具都能夠做到實時保存。</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;">手動保存指用戶通過額外的操作觸發(fā)保存，通常為點擊「保存」按鈕或快捷鍵。部分有實時保存機制的工具不需要額外的手動保存（如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;">即便有手動保存，用戶還是可能忘記保存。當用戶離開工具或某個環(huán)境時，若程序監(jiān)測到有未保存的內容會丟失，則將此風險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關閉瀏覽器/標簽頁的方式離開，也可以在瀏覽器上設置類似的兜底提示對話框，但是對話框上的文案無法定制。</span></span>
</p>
那如何選擇保存的觸發(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;">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. 因技術原因無法采用「實時保存」時，推薦使用「定時觸發(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;">c. 「條件觸發(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;">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」保存的觸發(fā)設計<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;">在開始聊具體的設計之前，先提出保存的 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;">保存是對方案數據的 最重要的 保障機制。穩(wě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:"">
</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)可見</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;">保存的反饋需及時有效，讓用戶知道當前方案的存儲狀態(tà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;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書中提到的“觸發(fā)器”概念，可以將保存作為一個觸發(fā)器。觸發(fā)器是啟動一系列動作的原點，分為系統觸發(fā)器（系統被動觸發(fā)）和手動觸發(fā)器（用戶主動觸發(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 系統觸發(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;">對系統觸發(fā)保存來說，主要需確定2個點，何時觸發(fā)、觸發(fā)頻率。對Web端工具來說，有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.定時觸發(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ā)間隔設置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設置。建議產品設計師根據技術現狀設定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗?？赏ㄟ^選擇器給用戶幾個合適的選項，選項之間的時間間隔依次變大，總選項數不超過 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.條件觸發(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ā)自動保存，如酷家樂云設計工具環(huán)境切換、新建樓層，水電工具的智能設計等，都會觸發(fā)方案保存。以下是一些常見的「條件觸發(fā)保存」時機，這些時機是由技術能力、業(yè)務要求共同決定的。設計師需要考慮如果這些時機觸發(fā)了自動保存，對用戶的操作會用什么影響。</span></span>
</p>
c.實時觸發(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;">現在已經有很多在線工具（如 Figma）實現了實時觸發(fā)保存，對用戶來說可以不用再理解保存這個概念，是一種認知上的減負，并且這種方式對數據保障的效果也最好。但是，仍然有設計師提出這種體驗上的風險，比如沒有容錯余地、頻繁保存造成的干擾和系統壓力。</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 手動觸發(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;">對保存來說，「手動觸發(fā)器」一般來說是一個保存按鈕。在沒有實時保存的創(chuàng)作類工具中，手動保存按鈕的設計至關重要，一般會放在界面上方較顯眼的位置，并設置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>
酷家樂云設計工具的保存位于頂部欄第一個分區(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;">而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認完內容后再進行保存。</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) 反饋。比較場景的做法是在工具某個固定位置，用圖標或文字的狀態(tài)變化作為反饋。</span></span>
</p>
當某些條件觸發(fā)保存時，甚至不需要讓用戶感受到保存的發(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;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設計工具進入施工圖時，因為技術原因需要保存方案，但可以將保存方案的進程與施工圖加載的進程合并。</span></span>
</p>
b.手動保存的反饋對于手動保存，當保存結果無異常時，可使用全局提示（Toast）告知保存進度和保存結果，也可以用「保存」按鈕的狀態(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;">當保存有異常時，應即時給予且較明顯的異常反饋，并幫助用戶排查問題。在設計保存異常反饋時，需注意以下 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;">哪些數據保存異常，是全局數據還是個別模塊的數據，是否會因為非核心模塊的保存異常而影響到整體用戶進程，是否可以通過其他方式（如前端保存）讓用戶繼續(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;">保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網絡？重新登錄？）</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>
</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;">列出保存對象后，可以與產品、技術等團隊成員一起確定保存的位置（云端、瀏覽器）和保存的觸發(fā)機制（自動保存、手動保存、提示保存）。建議根據用戶流程在不同的觸點用不同的觸發(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ā)機制，設計保存的交互，包含保存的觸發(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;">最后，以用戶使用工具的流程再檢查一遍數據的產生和存儲，是否會有遺漏，設計保存兜底。</span></span>
</p>
作者：酷家樂UED 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.bouu.cn