一、前言
視頻播放器中承載著極其豐富的內容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設計不但可為界面“減負”，還可幫助用戶更快捷觸達功能、提升操控便捷性。
視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知，如「單擊 →暫?！?、「雙擊→點贊」、「長按→快進」、「橫滑→導航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規通用手勢認知的基礎上，進一步對視頻場景中的手勢交互進行擴容升級？這也是我們接下來在手勢進階交互上的重點探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。
二、什么是「組合手勢」
「組合手勢」是基于常規手勢的組合擴展，其通常由兩種或兩種以上的常規基礎手勢所構成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規手勢為例，其觸發機制一般可分為兩個階段：step1交互信號→step2執行任務，即用戶通過某一基礎手勢發出交互信號，系統收到信號確認后便可立即執行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現有常規手勢兩階段觸發機制的基礎上，嘗試引入「意圖識別」環節，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發一般可分為三個階段：step1交互信號→step2意圖識別→step3執行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。
由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口，因此，其差異化創新具有較大設計靈活度，尤其需根據具體的使用場景進行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。
2.競品調研及選型
通過對競品進行調研，我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型， 分別為：長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。
選型A
「長按觸發獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發浮層播控選項」：通過長按手勢可觸發置于視窗上層的浮層選項入口，一定程度上可延續視頻觀看的沉浸體驗，但浮層擴展性有限；
選型C
「長按觸發特定播控功能」：通過長按手勢觸發特定的某個播控功能（如長按“快進”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設計方案
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經過和業務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
step1：以“長按手勢”創建一個新模式，即發出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統默認開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標功能項以選擇功能；
step3：用戶滑選錨定至目標功能后，松手釋放即可完成最后的功能執行確認。
「長按+向上滑選」快捷觸發對應功能項；
「長按+向下滑選」快捷觸發“快進”（一定程度上兼容老用戶對于此功能的使用習慣）。
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產生滑選行為便松手，則松手后依然可通過點選的方式觸發對應播控功能項。
3）易用性打磨
差異化的創新設計形式在前期總會面臨質疑和挑戰，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優化。
我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發現仍有部分易用性細節可進一步打磨優化。
3.1 ）擴展觸發熱區：
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發熱區，屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外，其它大面積區域熱區均可支持長按觸發快捷菜單，以降低觸發難度、提升易用性。
3.2 ）支持跟手觸發：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應反饋：
靈活判斷當前手勢觸控狀態（如滑入選擇 / 松手觸發），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發機制。
方案上線及驗證
以AB實驗對本次設計方案進行定量測試驗證：
「對照組」效果：長按觸發“快進”（各播控功能入口仍歸置于基礎菜單面板之中）；
「實驗組」效果：長按觸發“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經過近半個月的觀察，大盤指標穩定、播放完成率等滿意度指標穩步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發訴求。
「實驗組」的“快進”雖多了一步觸發步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高，通過滑選觸發“快進”的操作習慣也快速被培養起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口，隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
如今人們出行都離不開手機，都通過手機接觸過互聯網地圖，手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢，形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前，讓我們先看看地圖的發展歷程。
地圖擁有著古老的歷史，記錄了人類對世界認知的演進過程，經歷過泥板、壁畫、羊皮、紙張等載體，依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。
隨著照相機和飛機的發展，出現了航空攝影測量技術，讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展，讓紙媒地圖開始融入人們的生活，地圖的平面設計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。
再隨著衛星影像、瓦片地圖技術和互聯網的發展，人們可以日常地使用電子地圖。受限于網絡速度的限制，矢量地圖應運而生，在特定范圍顯示相應的矢量瓦片信息，讓互聯網地圖的形狀趨向統一化。
iPhone革命性的觸屏體驗，通過手勢與地圖進行直觀自然的交互體驗，結合內置GPS、陀螺儀傳感器，小藍點成為地圖定位的通用標志，激發更多地圖的功能和創意。
二、手機地圖的創新體驗
手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢，結合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。
手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換，幫助人們更好的映射到真實世界。
可視化信息是互聯網地圖的主要優勢之一，將數據轉化為可視化圖形，歸類在不同的數據層，可以單個或多個層級疊加在地圖上展示，傳達位置上的數據。
底圖是手機地圖的基礎，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內容不斷細化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內容。
觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。
單指拖動
拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。
單指劃動
當用戶想快速翻閱時會撥走要略過的內容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區域，是比拖動要快速的瀏覽方式。
雙指拖動縮放
物理控件只能讓地圖根據屏幕中心進行縮放，而觸屏縮放能讓地圖根據兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認知。
雙指劃動縮放
劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標位置。
單指快捷縮放
為了讓用戶能單手并可控地縮放地圖，不少地圖都設計了自己獨有的縮放方式。 zenly，通過屏幕兩側的邊緣，直接完成地圖的最大和最小縮放跨度。
snapchat拖動右側邊可緣喚起縮放滑塊，并使用emoji來表達距離，充滿幽默感。
騰訊地圖，通過劃動右側的滑塊，實現單手順滑地縮放，滑塊也支持劃動手勢。
百度地圖，通過點擊一個縮放控件，讓地圖以當前中心點進行分段縮放。
無限循環的地圖
地球是圓的，可以無限巡航，一些應用將縮到最小的世界地圖做循環處理，以呼應地球的循環轉動體驗。
方向視角切換
在陌生的環境用戶未必能分得清楚南北方向，利用手機的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉到用戶面向的方向，有助于用戶二次確認自己的定位。
更多地圖使用了2D/3D視角的切換方式，2D是南北向的標準地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對應物理空間。
旋轉方向
可通過雙指或陀螺儀旋轉地圖，地圖上的文字也做出相應調整，保持水平、沿道路方向調整，以保證可讀性。
3D的旋轉也一樣，在保持水平和沿道路方向的同時，文字保持垂直。
當縮小到足夠遠時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。
雙指拖動調整視角
地圖3D視角也支持自由調節，通過雙指平行的上下滑動，可以平順調整3D視圖鳥瞰的角度。
在地圖的最低視角做回彈處理，生動不呆板。
遠近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進時有俯沖的感覺。
四、可視化信息：生動呈現地圖動態數據
從古代開始，人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記，地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢，就是能提供實時的信息數據。將數據標記在相應位置的坐標上，并分別歸類在不同的層級，疊加在地圖上查看。
地圖的常用數據形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內容。
點數據
點數據是單個地理坐標上的標記，代表該位置上的信息，是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型，使用頻率越高的樣式越簡潔，地標建筑做形象化圖形標識。
聚合圖在地圖上呈現也是點數據，它實質是顯示一定區域內的信息聚合，但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多，在地圖上信息過于密集。
百度的充電樁地圖就是以區域聚合充電樁數量，根據縮放調整數據的聚合。
騰訊地圖的文博地圖也是聚合圖，并根據文物的類型做了快速篩選。
線數據
線數據在地圖上呈現為線性，一般都沿著可行道路展示信息。導航路線是最常用的線數據，它提供具體行駛路線方案，并實時展示線路行駛的進度與方向。
也有粗略表示進度的線路數據，如快遞的物流進度路線就不需要具體的實際線路，只需要示意大致進程。
街景地圖則僅展示有全景圖的道路范圍，不提供進度與方向。
面數據
面數據要展示地圖上的具體區域，疫情環境下出現了區域風控需求，需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。
zenly使用了反向的面數據，根據用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。
熱力圖
熱力圖以特殊的高亮梯度顯示地圖上區域的熱度，熱力圖的數據不會指向地圖上具體的位置，它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。
高德地圖的空氣質量地圖，使用聚合圖作為空氣質量評分，熱力圖作為空氣質量范圍。
snapchat使用熱力圖來表現該區域用戶發布動態的熱度，引導用戶發現內容，由于熱力圖不指向具體位置，能更好的保護用戶隱私。
熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數據，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經地點。
路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。
讓數據動起來
地圖是安靜的，但真實世界是忙碌的，讓數據動起來，給地圖增添更多情感化設計，緩解用戶的等待壓力。
忙碌的商家
外賣小哥端午節雨中送餐
公交努力奔來
五、底圖：為更好呈現信息的色彩系統
手機地圖的底圖最常使用矢量瓦片地圖，因為數據體積小，在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域，不展示具體細節，因此需要通過顏色去傳達不同區域的屬性或功能。
人們對于顏色和環境是能建立一定的聯想的，如綠色想到大自然，藍色想到水，紅色想到警示。根據人們對色彩的聯想，給矢量地圖中不同屬性的區域進行配色，幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出700多種顏色，最后簡化為25個顏色，形成了地圖的色彩系統。
工具類地圖應用以地圖為核心基礎，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的，各地圖廠商的標準地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關心的數據。
而一些垂直場景的應用，地圖區域功能的描述相對次要，通常會對地圖的用色進行大幅度精簡。以打車應用為例，地圖用色少且色調相近，突出核心的打車狀態信息顏色，同時體現應用的品牌特色。
不少運用地圖的概念設計中，會更極致的使用單色系地圖，僅突出數據信息的顏色，充滿未來感。
六、未來的地圖
隨著網絡速度的提升，手機硬件的升級，順應AR/VR技術的發展，地圖逐步進入3D和全真時代。蘋果地圖在現有的地圖的3D視圖下，已對地標建筑賦予更多細節，并在夜間模式模擬了燈光效果。
3D地圖就像是虛擬世界中的基礎建設一樣，蘋果地圖添加精細地標模型后，同時應用到Carplay的導航中，在駕駛時可直觀看到與現實世界對應的3D地標。
谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。
同時全真模擬日照和天氣系統，和現實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。
隨著地圖的立體全真化，地圖的數據也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助AR設備，人們無需對照地圖即可完成導航。
結語
地圖歷來是人們借助藝術的手法，以極具想象力的方式對世界進行再現，它遵循科學測量的法則，使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知，而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球，而是呈現人們眼中的世界，它寄托著人們對美好生活的想象，更好的認識、探索和規劃世界。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
我們在談用戶需求的時候往往帶出來一句，你有沒有考慮用戶場景？那什么是用戶場景呢？
用戶場景是由人物、地點、時間、動機、行為五大要素構成的。我們通過這些要素分析用戶，來辨別需求真偽，深刻理解產品需求，幫助理清強弱場景。
“人機交互系統模型”主要用于對“行為”的梳理。舉一個例子來理解“行動”元素：A打開賓館房門，屋內一片黑暗。他走進去打開了電燈。通常我們會這么理解其中“行為”：“打開房門”、“走進去”、“打開電燈”。
但是實際的情況要復雜得多。比如“打開電燈”這個行為，實際情況可能是：
可以看出一般我們對行為的理解比較粗略，沒有以小顆粒度的視角理解人的行為?！叭藱C交互系統模型”是著眼于以較小的顆粒度，梳理出用戶使用流程及心理活動再進行分析的工具。
人機交互系統中，一般的工作循環過程可由下圖所示。人在操作過程中，機器通過輸入設備（如顯示器、喇叭等）將信息傳遞給人的感知系統（如視覺、聽覺等），經中樞神經信息的感知處理對信息進行傳遞，思維處理器對信息進行處理和儲存后，再經反應處理器指揮人的反應系統（如手指、嘴等）操縱機器的輸入設備，控制機器的信息處理，然后循環往復，直到完成目標任務。
核心：以較小的顆粒度，梳理出用戶使用流程及心理活動。
尼爾森·諾曼在《設計心理學》中提出了行動的七個階段：目標、計劃、確認、執行、感知、詮釋、對比。而《GB/T 29836-2013 系統與軟件易用性》中人機交互系統模型是參考了“行動的七個階段”。并對它進行了簡化，以更好地應用在實際項目中。
映兔app中原本應該出現商家后臺上傳的圖片文字介紹部分內容，但實際顯示“上傳中”，某個地方出現了問題。
借助測試的幫助判斷這是前端問題，后端問題還是設計問題。測試反饋，因為用戶在使用“網絡圖片”上傳圖片的時候，使用了錯誤的地址，導致無法正常得顯示圖片。這屬于設計需要解決的問題。
從人機交互系統模型中，我們可以把這一連續的過程分為“感知”、“認知”、“反應”、“反饋”四個方面。下面就從這四個方面，來分析用戶在輸入“網絡圖片”信息前后的使用流程及心理活動。
步驟一：眼睛瀏覽到“上傳圖片”、“網絡圖片”和“插入代碼”三個上傳方式（感知）
步驟二：在三個方案中比較哪一個更好（認知）
步驟三：判斷“網絡圖片”在三個里面最方便（認知）
步驟四：把鼠標移動到“網絡圖片”按鈕（反應）
步驟五：跳出Popover（反饋）
步驟六：看見出現的Popover彈窗，看見一個input和“插入”按鈕（感知）
步驟七：理解input要的內容，理解“插入”按鈕（認知）
步驟八：往input中輸入內容（反應）
步驟九：輸入完后，點擊“插入”按鈕（反應）
步驟十：下方出現圖片內容（反饋）
步驟十一：看到下面的網絡圖片內容（感知）
步驟十二：認知下面的網絡圖片內容是否符合需求（認知）
步驟十三：完成確認后，點擊“提交”按鈕（反應）
步驟十四：顯示創建成功（反饋）
用戶可能在什么地方出了問題，導致輸入了“非圖片地址”？從“感知”、“認知”、“反應”三個元素分析。只需要考慮步驟五到步驟十四，因為用戶既然使用了“網絡圖片”上傳，一定已經進行到步驟五了。
1）看見出現的Popover彈窗，看見一個輸入框和“插入”按鈕（感知）
看法：能明顯看見，即使看不見也不會導致輸入錯誤圖片地址情況。非相關。
2）看到下面的網絡圖片內容（感知）
看法：出錯的情況下，可能不容易看見“非正?！钡膱D標。弱相關，可以進一步分析。
1）理解input要的內容，理解“插入”按鈕（認知）
看法：用戶可能不理解要輸入的內容。強相關，可以進一步分析。
2）認知下面的網絡圖片內容是否符合需求（認知）
看法：用戶對現有圖片的“非正?！狈答?，認為是正確的。需要更明確告知用戶，現在是錯誤的。強相關，可以進一步分析。
1）輸入完后，點擊“插入”按鈕（反應）
看法：點擊錯誤可能造成效率上的問題，和填寫錯誤的鏈接無關。非相關。
2）完成確認后，點擊“提交”按鈕（反應）
看法：同上。
1）針對認知1，要讓用戶理解輸入的內容是什么。
2）針對認知2，當出現錯誤的時候，要更明確告訴用戶上傳出錯。
3）針對感知2，可以把非正常上傳的圖標明顯化。
從易用性的角度理解，認知對應的是“易理解性”，感知對應的是“易發現性”。我們可以用對應的方式來增強易理解性和易發現性來解決問題。以下方案僅從易用性的角度考慮，不考慮視覺效果以及開發實現。
方案一：
給出更多的提示內容。下面是在“商品詳情”下使用了線索說明，提醒用戶網絡圖片的錯誤情況。
方案二：
給出更多的提示內容。下面是在“網絡圖片”下使用了線索說明。相比于方案一，與上傳“網絡圖片”的操作區域更加靠近。
方案三：
從“頁面實際瀏覽效果”的文案來提醒用戶，現在的是非正常上傳。并且信息所在的尺寸更像手機上瀏覽的效果，進一步強化這種感覺。
方案四：
從技術上判斷所填寫的圖片鏈接是不是“可用的”。如果檢測到不可用，就使用message/error提醒用戶上傳鏈接錯誤。
方案五：
也可以強調非正常上傳的圖標，甚至到一個離奇的尺寸。用戶不得不看到它，然后意識到現在上傳的狀況不對。哈哈。
人機交互系統模型作為思考問題的模型，能夠幫助我們從認知心理學的角度對問題進行細致地拆解。在使用的過程中，我們會獲得許多細節。而這些細節的地方就會有對應解決方案，再從這些方案中進行篩選，最終得出優秀的方案。
值得注意的是，當我把它運用在實際的工作中，因為它顆粒度過小，所以在使用的時候會耗費大量時間。因此人機交互系統模型要用在核心的問題上，次要的問題可能并不適用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
百度小說是百度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咨詢、用戶體驗公司、軟件界面設計公司
前幾天眼睛不太舒服，去醫院做了一個檢查（視疲勞導致）。因為要走商保，所以要使用社?？ǎ拔矣浀糜蒙绫＝Y算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保，要我掃她胸前掛的碼（可以快速到達電子社保二維碼界面），掃完她就開始幫我點擊操作。
她覺得我應該不會操作，所以讓我看一遍，其實這個操作并不難，只是因為我不知道自助機上可以用，自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。
在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;">當從異?；謴秃?，應該如何提示用戶</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%的銷售收入，等等）。
這個原理告訴我們，要想讓產品在某一個領域保持優勢，就必須在此領域迅速做大。
當你成為某個領域的領頭羊時，你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實力迅速在某個領域做大，就要不停地尋找新的發展領域，才能保證獲得較好的回報。
七、從眾行為
營銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數人接受的選擇。
我們經?？梢钥吹铰愤厓杉也蛷d，一家門口排滿了等待的食客，另一家卻一桌客人都沒有，巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。
關于這種心理，哲學家認為是人類理性的有限性，社會學家認為是人類的集體無意識，而經濟學家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是，從眾行為并非絕對的，因為在追求個人喜好上，人類往往也有很多個性的需求，從眾行為和個性追求往往是同時存在的。
從眾行為最典型的應用方式就是密集推薦或評價，現在的書籍的扉頁動輒幾十條推薦語，在線服務往往也會引用大量網友的好評，來證明自己的價值。
新產品在推向市場時，先多收集一些用戶的正面評價，宣傳時會非常有利。
八、比較心理
這是消費者心理學最經典的原理，簡單來說就是把一個200元的產品和一個100元的看上去差不多的產品擺在一起，你就會覺得100元這個超級劃算，很容易產生購買的沖動。
對于每個人來說，所有的認知，價值觀和結論都是建立在【比較】的基礎上得出的，所以，影響一個人的認知，最有效的辦法就是創造對比的機會。
價格頁面最喜歡運用比較心理，因為比較心理可以幫助他們重新設定消費者的認知。
常見的做法比如拉高產品的價格再做夸張的折扣讓用戶覺得這個商品現在超級劃算；或者在主推產品旁邊放置兩個明顯性價比不佳的次品，讓用戶對主推產品的效果感知更加強烈。
此外，在產品介紹時也可以將競品的參數列在表格中和自家的產品進行對比（當然，這個表格中的項目都是挑選過的），這樣更容易體現自家產品的優勢。
九、投射效應
人們在日常生活中常常假設他人與自己具有相同的屬性、愛好或傾向等，心理學家稱這種心理現象為"投射效應"。
"以小人之心度君子之腹"就是一種典型的投射效應。當別人的行為與我們不同時，我們習慣用自己的標準去衡量別人的行為，認為別人的行為違反常規。
了解這一點對于產品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認為自己在這個領域比其他人都專業得多），但仍然需要被尊重。
所以近年來特別流行用戶體驗、同理心這樣的詞匯，產品應該以真實用戶的體驗滿意度作為參考指標，設計者應該盡可能地以設想自己是一個目標用戶時，會有什么反應，否則僅靠自己的“臆測”，創造出來的產品很可能和真實需求脫節。
十、賭博心理
以小博大的感覺是一種強上癮體驗，人們只有在輸的時候才想到離開，少有在贏的時候離開。這個就是賭場盈利的本質模式。
由于真金白銀賭博是法律明令禁止的，所以產品設計角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機會。
對于國內而言，氪金手游和盲盒就是典型的兩種應用場景，前者往往會設定一個極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費者有小概率獲得稀有款式的手辦，引誘顧客購買超過自己需求的商品。
對于產品設計人員來講，賭博機制可以說是一個潘多拉魔盒，通常不建議去使用和嘗試。人人都愛KPI，但也要取之有道，職場人都應該有自己的底線。
作者：jongde來源： 站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn