本次針對百度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.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本文講述了“峰終定律”的定義，并結合筆者生活中的兩個例子做了圖文分析，最后通過學習海底撈的案例，然后結合顧客角度將一次糟糕的活動進行了改進。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經濟學獎獲得者，心理學家）提出的——他發現人們對體驗（體驗事物或者產品）的記憶由兩個因素決定：
即，除了峰值和終值時之外的其他體驗，無論好與不好體驗的比重是多少，體驗時間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。
概念講完，下面筆者結合去飯店買飯的故事，使用“峰終定律”進行圖文分析，為什么一家飯店給我的體驗非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時間飯店聯合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個角度拍完又換一個角度。最后，飯店的服務員才把那份飯給我，當時我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時間就一個小時，為了能睡好點還要吃得快點。
這家店給我的體驗就是，不把用戶當用戶，心里非常不是滋味。
而當我向同事說起這家店時，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時，我還會說上面的故事給同事，最后評價道：可以試試的，另外，出餐質量有問題他們也會給你換一份的。
當我說完這次的經歷給同事聽，同事并沒有表示會去嘗試一次，因為我說的故事，又因為價格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費的，這是給用戶留下第一印象的關鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗就是：
峰值有兩個，正峰值是廣州第一手撕雞的“口味”，負峰值是“員工服務”。負峰值的出現，說明了店家在活動開始前并沒有設計好活動流程，服務員也就沒有足夠的授權去處理和應對。
終值是“離店”時的不爽，店家并沒有作出任何的正面回應，沒有表達歉意，沒有意識到這樣做會給顧客造成怎樣的影響。
“員工服務”是直接突破了我的忍耐底線，“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線，店家不但“失去”了我，我的幾個同事也不會是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結合了梁寧老師講過的內容，然后加到了這張“用戶體驗模型”圖上。
梁寧老師講的是：“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰用戶的忍耐底線。”
某天中午我發現寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個菜用什么材料做，哪個湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發現真合我胃口。
上兩周有兩天中午休息時都到店里想點肉餅飯，但是連續兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預約下單，第二天上班我早早的就預約了肉餅飯，到店之后老板已經打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當給人推薦這家店時就說的一句話：“這是我們專門給您留的肉餅飯?！?
當我笑著回應謝謝的時候我也在想，這飯是我在小程序上面早早預定的，老板還說是專門我留的；因為我先付錢了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來提供對應的服務的，并且我也確實感受到了老板的真誠、熱情。
于是我把這家店介紹給了幾個同事，他們都表示下次沒有自己帶午餐的時候會試一下，并且有兩個同事聽了我的推薦后去下單了，其中有一位同事表示會回購。
這家店給我的體驗就是，不把用戶當流量，心里有用戶，產品可以，用戶自然會安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗就是：
有兩個正峰值，第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”，這里甚至有一點點主觀上的小驚喜：當時抱著不知道會不會踩雷，試試新店的心態，當我試到肉餅飯時，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。
小結：
當我跟同事同事說起第一家飯店體驗不好的時候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關系，只做一桿子買賣。于是他們并不注重維護客情關系，當他們把合過影的手撕雞飯遞給我時，連安撫情緒的話都沒有，就餐體驗自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會如何設計本次活動？
我們先看看餐飲行業的巨頭都是怎么做的，因服務被大家口口相傳的海底撈就是非常值的學習的對象。
通過模型，我有以下幾點感悟：
服務觸點：用戶為了完成目標，需要做一系列連續的行為，而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點，這就是服務觸。比如上圖所示的，海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因，在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。
帶著學習完海底撈得出的感悟，下面我來嘗試思考一下，我現在是這家燒臘飯店的主理人，那我會這樣設計本次活動：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預期
選擇符合自己口味的菜品，店內就餐/打包回公司吃；店家穩定出餐（口味穩定、不要有異物等）；不希望排長龍。
3、服務觸點
點餐時、支付時、等待出餐時（排隊）、（打包完）出餐時、離店時。
其次，才到本次活動的設計：
1、背景
贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費即送天地壹號一瓶。
2、目的
幫助合作伙伴宣傳的同時，吸引新的顧客，回饋老顧客，提升營業額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費即送天地壹號一瓶，送完即止”的宣傳海報，并且放置在店鋪門口。
3.2、完善服務流程。（請看下圖）
3.3、設置幾種異常情況的應對方案。（請看下圖）
完善好服務流程，提前設置好幾個異常情況的應對方案，相比于海底撈一連串的各種免費服務，其實花不了多少實際的金錢成本。但是卻能用最少的資源，最大程度的避免“負峰值”的出現。
另外，天地壹號的工作人員提出合影，飯店應該用自己的員工餐，而不是用顧客的。這其實不是異常情況的應對方案，而是作為服務行業從業人員該有的覺悟。
本文到此結束，朋友們如果設計/體驗了好的“峰終體驗”的案例，麻煩在評論區告知我一聲，讓我也去體驗一把~
作者：我是Berwin
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
時間對于我們每個人來說都極為重要和珍貴。隨著生活節奏的加速，很多產品也都開始注重和考慮對于用戶時間的節省和分配。本文重點分享三種在交互設計中幫助用戶「同時做幾件事」的設計方法，以及其對應的優秀案例：
希望會為你帶來更多的設計靈感。
通過將屏幕的布局進行分割處理，可同時呈現多項內容，讓用戶自由選擇任務主次，同時處理多項任務。分屏設計很常見，但其中的體驗細節卻依舊值得研究和優化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時支持分屏功能，還能夠調整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸，體驗順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內或外呈現小窗模式，正在播的視頻，在被臨時打斷退出視頻后，還可以用音頻的方式繼續播放：
案例 3
微信的新功能，在你閱讀文章時依舊能看到朋友發來的微信消息，可以直接在當前頁面回復消息，避免你在看文章時閱讀不了微信消息。你還可以將信息“標記未讀”，一會兒再做處理：
案例4
微信視頻號改版后，點擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當前正在播放的視頻會漸漸呈現小屏播放，視頻內容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內容：
案例 5
在微信訂閱號中展示的視頻內容可以通過劃到右下角變成小窗播放音頻，既可以聽內容，也不影響你繼續瀏覽訂閱號的其他內容：
產品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時進行。
案例 1
釘釘的移動端浮窗功能，向右滑動退出正在操作的頁面時，就會出現添加浮窗區域，用于收錄未做完的操作。同時顯示出已添加浮窗的內容數量，最多添加 5 個：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內容，在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章，可以更合理地掌控閱讀節奏：
案例3
微信讀書 App 會在你跳讀到其他章節時，在頁面下方顯示“返回原進度”的按鈕，方便你在跳讀后回來繼續閱讀：
案例4
網易163 郵箱側重于為你呈現工作的多線程。每點開一封郵件，頁面上方會增加一個類似瀏覽器標簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當你在寫郵件時，同時又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續編寫剛才的郵件：
案例5
使用釘釘發起會議邀請，如果中途退出，系統幫助你自動保存。再發起會議邀請時也會給出上次操作的提示，幫你續寫內容：
用戶可以選擇忽略或隱藏并不重要的、正在進程中的任務，將更多的時間用在其他事情而非無法控制的等待上。
案例1
iOS 系統中，當你在不同 App 之間傳遞文件時，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點擊后可以繼續做其他操作，并不妨礙后臺的文件傳輸。
案例2
微信在接收超大文件時，增加了“發送給朋友”的選項，你不必等待文件在自己這邊下載完成后再發送，可以直接發送源文件給對方，同時下載：
案例3
微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態，緩解無聊的等待，也為即將進行的語音聊天提供了話題：
作者：元堯
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
正如題目所說：細節決定成敗，微交互就是利用細節提升產品體驗和設立品牌標志。
直到今天，人機交互已經有很長時間的發展。從例如烤面包機的簡單產品到銀行應用程序類的復雜數字產品，我們每天進行上百次的交互。這些交互轉化為產品的可用性，最終轉化成用戶滿意度、信任度和產品整體體驗。
在過去的二十年里，設計師們一直在關注這些交互（按鈕、滾動、長按等）。從電腦大屏幕到移動設備、智能手表以及現在的可折疊設備，交互也在不斷地發展。本文研究了微交互的結構及其與交互模型的關系，審美體驗的不同驅動力，以及我們如何通過改變微交互的元素來優化體驗。最后，我們討論了自下而上的產品構建方法。
自燈泡、收音機、門鈴等電氣設備出現以來，微交互一直存在于我們的生活。微交互和技術共同出現、發展。在我們的日常生活中充滿了與周圍物體的微交互，例如使用烤面包機、解鎖手機、將手機切換到靜音模式、控制音量等。
從簡單的按下按鈕到搖動手腕激活智能手表，微交互隨著技術的進步而不斷發展。像復制文本或移動文件這類我們如今習以為常的、無形之中的微交互，都曾是新穎的微交互。觀察微交互有助于設計師改進產品。
有趣的是，設計師將現實生活場景投射到產品來建立微交互，如剪切-粘貼、放大-縮小等。這些細節不僅提高了產品的可用性，也通過直觀的互動降低用戶學習難度。
我們如何準確定義什么是微交互，什么是交互？
論文《開啟移動微交互》（Ashbrook，2010）將微交互定義為“接觸設備開始到完成的時間不超過4秒的互動”。而《微交互》一書（Saffer，2013）將其定義為：“微交互是圍繞著單個用例的產品使用場景——它們有一個主要任務。”整個應用程序或產品可能只是一個微交互，例如，天氣應用程序（圖1.1）或烤面包機，因為它們只關注一件事。
圖1.1 天氣應用程序能被看作是一個微交互，因為它只顯示天氣。
圖1.2 LinkedIn 的“喜歡”按鈕由兩個微交互組成，（a）當你長按“喜歡”按鈕時，它會打開一個空間展示多個表情符號以供選擇（b）你選擇表情符號發送給帖子。
一個功能可以由多個微交互構成，例如LinkedIn的“喜歡”按鈕（圖1.2），人們可以對帖子發送不同的表情符號。因此，微交互是一個功能模塊，或者是整個產品。與產品互動時，微交互也許能幫助用戶了解做什么，如何做，后續是怎樣。精心設計的微交互使產品變得直觀，優化了產品的用戶體驗。
當微交互打造了與品牌產生共鳴的特殊體驗時，它化身為了品牌標志。專業術語稱之為“標志性時刻——產品或服務中給人留下持久而難忘印象的突出互動”（Janhagen, Leitch & Judelson, 2020）。
Facebook的“喜歡”按鈕是它的標志性時刻。微交互并不僅僅局限于視覺，它們可以是聲音、觸覺、實體硬件或手勢交互。Snapchat的通知作為產品的標志性時刻是因其獨特的聲音。同樣地，iPhone有一個中心按鈕作為蘋果的標志，它有多個微交互方式。
微交互通常首選（Narvhus, J.M. 2016）：
我們將在之后的章節中研究一些微交互案例。
在進入交互模型之前，我們將嘗試研究心智和心智表征，以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器：感知處理器、認知處理器和運動處理器是如何工作以理解周圍世界。
認知處理器與長期記憶和工作記憶一起工作，從現有的知識中提取物體、感覺、行動等的表征，以理解來自知覺處理器的輸入。一旦認知處理器完成處理，它就會向運動處理器發出信號，以特定方式對特定情況采取行動。心智表征是現實世界中事物如何運作的心智模型或理解。
唐-諾曼的七個行為階段（諾曼，2013）（圖2）是一種更清晰的心智學形式，解釋了人類如何與物體互動以實現目標。目標可能是打開一盞燈或在移動應用程序上進行在線交易。讓我們把手機解鎖的簡單目標分解成七個行動階段。
在這個循環的每個階段，都有一個輸入->處理->輸出的過程。在宏觀層面上，我們也在遵循同樣的過程來達到我們的目標。我們可以從行動模型的七個階段推導出互動周期（Norman, 2013）（圖3）。
交互周期包括執行過程和評估過程，前者是行動所需信息差，后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距，使產品變得直觀?，F在讓我們看看微交互的基礎結構，了解它們如何幫助消除信息差。
微交互之所以強大，不僅僅是因為它們的細微交互差別或迷你尺寸，還因為它們構建的方式。微交互的結構包括四個部分（圖4）（Saffer，2013）：開啟微交互的觸發器，決定微交互如何運作的規則，以及影響微互動的元規則——闡明規則、循環和模式的反饋。
觸發器可以由用戶觸發，例如點擊圖標、填寫表格等，觸發器也可以由系統產生，例如低電量提示框，通知用戶電池電量不足。
讓我們以Duo應用中驗證用戶的微交互為例。
現在當我們解構微交互并理解其結構時，微交互的結構支持行動七階段理論，最終幫助消除執行和評估之間的鴻溝。精心設計的觸發器便于用戶進行計劃->指定->執行行動，精心設計的規則和反饋便于用戶進行感知->解釋->對比結果確認完成目標。我們將在下一節中談論觸發器、規則和反饋的設計，以了解微交互如何有效構建所需的用戶體驗。
我們回看心智部分，認知處理器不僅包含了不同事物如何工作的心智模型，并且隨著我們在日常生活中對新物體的體驗而不斷地發展。從這些心智模型中，設計師可以創建概念模型。作為關于產品和功能運作的高級計劃，概念模型一旦被建立就能被轉化為行動模型的七個階段，從而幫助我們創建對用戶來說很直觀的微交互。這是一種自下而上的方法，用于建立交互 -> 功能 -> 產品。
在上一節中，我們談到了交互模型和微交互的結構，并探討了它們如何攜手使產品變得直觀好用?，F在我們將關注動態審美體驗，以及微交互如何在產品的微觀層面建立體驗。
審美體驗的韻律之舞有一個內在的、動態的結構。杜威指出了體驗建立的相關過程，如累積、保存、緊張張力和預期，來指稱體驗的內部動態（McCarthy & Wright, 2004）。
完整的用戶體驗是這些動態的集合，它可以根據用戶過往經驗和知識認知而變化。過往經驗和任何審美經驗都取決于上下文：用戶的過往和能力，人工制品的技術，以及互動發生的任一物理、社會空間（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。當我們與物體/產品互動時，觸覺、嗅覺、視覺和聽覺都會喚起體驗。
在過去的幾十年里，設計師們一直在關注這些觸發奇跡的交互。交互不應該僅僅是傳達內容和完成任務，它應該引人思考，并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態微交互案例。
1）積累：指伴隨著體驗時間展開的積聚。我認為谷歌支付作為微交互建立了用戶體驗，并包含非常優秀的展開界面和支付完成音效。
這個之所以判定為其微交互，是因為它只專注于一件事，而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成（圖6）。動畫和音效帶來了一步步徐徐展開的體驗感受。
2）留存：指保留一些過往事物的趨勢，不論體驗還是內容。文本或信息的保存對優秀用戶體驗來說確實是必要的，畢竟這樣能減少認知負擔。在網站和應用程序上填寫表格時，許多微交互都保留了之前的填寫信息。
這類微交互的一個非常簡單的例子是，當你復制一個鏈接并試圖將其輸入網絡瀏覽器時，瀏覽器會顯示直接粘貼鏈接的選項，甚至顯示你復制的內容（圖7）。我們在這此觀察到與微交互的結構不同的是重點更多地放在了交互的反饋上，它傳達的狀態是：你復制的內容已保存，并可以用來搜索網頁瀏覽器。這是一個展示了我們如何調整微交互側重點來優化體驗的優秀案例。
3）張力：指體驗內和參與體驗的人之間的關聯。這是社交媒體和流媒體平臺使用的一種技術，當用戶期待在短時間內快速閱覽內容時，用戶不斷下滑來反復觸發刷新的微交互（圖8.） 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足，讓用戶在想快速瀏覽內容時耐心等待。
這個特殊的微交互的重點是方式：即在內容加載之前顯示一個加載器。
4）預期：它包含兩個時間階段。第一階段是用戶在交互中開始期待，第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵（圖9）。
這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發生，即使期望沒有發生。若是期望發生，那期待就是值得的。支付完成后，用戶進入刮刮卡獎勵界面，對刮獎產生期待，點擊卡片進行刮獎。刮獎微交互的重點是動作的觸發上，兼具有趣性和參與感，觸發本來可以只是一個點擊按鈕，但他們設計了一個刮擦動作作為觸發。
上文提到的各種例子可看出：通過調整微交互的元素來優化體驗。微交互小而強的原因在于：它們是產品的差異化細節。好的微交互能讓產品提升一個等級。
我們認識了精心設計的微交互在創造美好體驗方面的力量，現在讓我們來探討一下，如果糟糕的微交互可能會引發什么問題。
我想到的案例是手機通知。并不是說通知很糟糕，而是它設計得如此之好，以至于它有違用戶的意愿。通知是由系統發起的觸發器，它僅顯示部分信息來吸引用戶點擊。
每個人都會遇到這樣的情況：明明只是想看看時間，但在看到通知時點擊進入信息，無聲無息之中半個小時就耗費了。這不僅僅耗費了時間，更嚴重的是人們在駕駛時也會分心看通知。
另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設計的微互動，是 Facebook 的標志，但沒有人意識到一個微互動可以對人們的生活產生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數，因為它對用戶行為產生了負面影響。上面的例子也顯示出：小事情可以產生大影響。
微交互也會令人討厭，例如，在填寫表單最后點擊提交時，彈出一個對話框（圖10），說表單填寫中存在錯誤。這里的觸發器是提交按鈕，規則是顯示一個對話框，反饋是靜態文本——“有填寫有誤”。
這里的微交互形式是錯誤的，如果填寫有誤，提示應該在出錯點附近。而且這里的反饋是糟糕的靜態文本，對用戶沒有任何用處，因為它沒有說明出錯的位置和類型。因此，微交互的使用和場景真的很重要。
縱觀全文，我們探討了什么是微交互，以及如何創建符合交互模型的微交互來消除執行和評估之間的差距。接下來，我們研究了動態審美體驗，以及我們如何在產品的微觀層面上用微交互創造美好體驗。
設計師有幾種方法來創建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個產品看成是一個微交互，如果你想增加另一個功能，那么就把它看成是另一個只包含一個微交互的產品。
我相信谷歌支付是以這種方式創建的，因為它是從支付開始，且只專注于支付，后來才引入了獎勵和其他內容。
微交互有助于建立一個品牌標志和提升用戶體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。
作者：三分設
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多情況下，用戶選擇一個產品的理由是有沒有某個功能，但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗，成了影響B端產品用戶續約的一個關鍵因素。
(1）流程越短越好。 我們在上班、逛街的時候，傾向選擇一條最短的路線，希望用最少的時間到達目的地。用戶操作系統時也希望這樣。
(2）整合功能場景。 某個功能由誰、在什么場景下操作，以及可能會遇到什么問題、需要什么關聯功能來解決，如果功能點相互獨立， 關聯很少，會讓用戶用起來很不順手，有種斷層的感覺。
（3）有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立，基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下， 可能不知道該怎么操作。這時，需要要提示用戶按具體步驟操作來順利完成任務。
交互體驗，對上承接了業務，對下承接了視覺。好的交互體驗能讓業務流程簡捷，更關注用戶習慣。 B端產品的交互和C端產品差異較大，C端常用的移動客戶端屏幕小，可顯示的內容較少，需要不停地跳轉完成操作，但B端產品大多用電腦來操作，一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點：
(1）少跳轉。曾有用戶反饋，說某個功能操作流程太長了，操作起來很麻煩。通過走查發現流程其實是沒有問題的，不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致，用戶在操作時去了另一個界面，然后再返回來，讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗，彈窗里面操作完點擊關閉即可， 改后用戶覺得流程縮短了，操作效率更高了。
B 端產品能用彈窗的時候，不要跳轉，哪怕彈窗里面加彈窗，只要不跳出這個頁面，用戶都會覺得沒有阻斷他的操作。雖然，從交互的角度講，彈窗里再加彈窗不符合規范，但在實用性面前是可以商榷的。
(2）少彈窗。 相比彈窗，在某些場景下，有更好的處理方式。比如，直接放頁面上。 彈窗是點擊按鈕觸發的，自動完成操作后關閉，或者用戶手動關閉。雖然比跳轉好，但比不上在頁面上直接呈現高效。
頁面上直接呈現是理想狀態。但是往往因為內容太多，很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求，原則是高頻且重點的內容外露。
（3）交互形式統一。 整個系統里面的交互規則要保持一致，大到彈窗的出現形式是居中彈出還是右側滑出，小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性， 需要對控件做個性化處理，但不要影響整體的一致性。
(1）信息清晰。 信息清晰不僅指信息結構的層次，還包括頁面的內容，最好讓用戶一眼就能看到上面寫了什么，有什么功能。有些設計師不喜歡加黑、大、粗的字， 覺得不夠高級，而是根據自己的美感把字體設計為一些個性化字體，且字號不大。
很多時候B端用戶的操作時間比C端用戶長，他們需要長時間盯著頁面，所以頁面信息清晰就能減少他們的疲勞。
(2）信息緊湊。 當頁面上想要呈現的內容較多時，設計師一定要壓縮空間，使布局合理緊湊。
(3）少用圖標。 有時候，設計師會使用圖標來代替文字表達，并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見，一是為了節省空間，二是為了美觀。但在B端產品中，大多數情況下，圖標越少越好，有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。
B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率，轉而影響到軟件的續約率。 為打造好的用戶體驗，我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候，有些好的交互方案會受到技術框架的限制，導致方案無法實施。
但是為了產品獲得更好的用戶體驗，首要考慮的依然是用戶的使用流暢度、易用性，而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決，把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品設計中，理解并設計好流程，對產品的體驗非常重要。通常涉及到有三個方面的流程：業務流程、審批流程、操作流程。
在企業的日常經營中，為了對業務過程進行更好的管理，企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作，使企業效率更高。對于 B端產品，設計師首先要讀懂業務流程，然后才能設計好產品。 業務流程，是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動?；顒又g不僅有嚴格的先后順序限定，而且活動的內容、方式、責任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進行流轉交接。
下圖是某企業的采購流程，涉及了五個部門、多個崗位角色、多個業務活動。
業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的，在業務上具有一定的通用性，但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔，可以說“流程 + 單據=業務”， 每個環節的工作形成一張單據，記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后，進入到下一個環節的工作時，單據也會隨之流轉到下一個系統中對應的功能節點，并形成一張新的單據，記錄新的信息。
下圖是某企業采購流程中從采購到結算部分涉及的單據：
除讀懂業務流程外，我們還需要應用“場景驅動的設計”方法，整理出每個環節中涉及的用戶、場景，以及作業的特征，并大膽地通過設計來改造流程，最后通過設計減少人員工作量，減少流程中的多余環帶， 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程，要經過到貨簽收、質檢、 收貨入庫等過程，每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖：
經過對場景和可行性分析后，設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄，并全自動質檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成，作為用戶體驗設計師在調研的過程中發現有好的流程優化方法，或者看到好的競品值得參考，可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。
在企業中，出于對重點業務的管理需求，除了會制定固定的業務流程方便大家協作，還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時，將重要結果發給相應業務管理者審批。但是，由于一些企業組織機構復雜，管理嚴格，為了保證業務的合規與安全，需要多個角色、多個環節的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統中是提交單據)。
(2）各環節審批者會根據流程分別對材料進行審批。
(3）審批通過后會自動進行到下一步。
(4）審批不通過，就此流程結束。
(5）退回則打回到流程起點，待改進后重新走流程。
(6）審批都通過后，審批流程結束。
在實際應用中，可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當前審批人將審批材料轉給其他人。
(2）加簽：增加審批的步驟，在一些企業中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業或者國企，流程和功能更復雜。當面對復雜而多變的審批需求時，需要將審批流程設計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設計得更加模塊化，可以在任何一個業務環節中加入審批過程。
在審批流程的設計中， 根據企業制定的審批規則，自動判斷是否符合標準，自動審批。尤其對一些每天都在發生、經常重復而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發業務流程，以此來提高審批效率。
前面兩個流程主要基于企業業務制定，在企業沒有信息化前就已經存在了，在改造優化上還有一些阻力和困難。作為用戶體驗設計師，可以通過對操作流程的優化來改進用戶體驗。
以上文中的收貨案例為例子：
（1）系統中收到若干個質檢任務。
(2）逐一打印質檢單。
（3）帶著質檢單來到倉庫，尋找需要質檢的貨品。
(4）找到貨品，逐箱打開進行檢查，業務操作不熟練的還需要詢問老員工。
(5） 將質檢結果隨時記在打印出的質檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據實際工作中的業務場景，對操作流程進行了優化如下：
整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程，并簡化了“尋找單據”的過程及記錄結果的過程。
在對操作流程的設計過程中，也應遵循“場景驅動設計”的方法，并將物理實體、數字實體統一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復雜度。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、前言
視頻播放器中承載著極其豐富的內容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔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.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天來分享幾個設計案例，主要聊聊以下四個話題：
· 信息處理
· 裝飾元素的擺放
· 長頁面設計 模塊間要有差異
· 空間利用率
首先看這個彈窗需求，產品經理給我們提供的原型圖是這樣的：
先不要急著開始畫，理解需求是最重要的一步。
這個彈窗最想要傳達給用戶什么信息？
「小窩準備完成，寵物到家了」顯然是最重要的信息。排的時候就要使勁凸顯。
在經過一些嘗試后，我們挑選出了以下兩版：
對于這個彈窗，版本 2 的層級會更舒服。
于是對版本 2 進一步優化。
1. 同樣的字號下，英文看著會比中文小。這上面用英文的「TA」不如直接寫中文，看著也會更加整齊：
2. 字體也是有性格的，它能夠影響頁面的風格。所以將字體換成圓體，讓頁面更活潑可愛。
3. 盡量使上下兩段文字長短不一，看著會更有節奏感。
4. 標點符號的細節很重要：有的字體標點符號與文字看著不在一條線上，記得一定要對齊！
5. 標題有點單調，我們再增加設計樣式，讓頁面更精致！
這樣就完成了，但是還是差了點什么：
是整個頁面太安靜了，少了一些熱鬧慶祝的氛圍，那就加一些彩帶裝飾吧。
在添加時，需注意大小對比、前后層次、造型差異化，才能加的自然好看。
1. 大小對比，有的彩帶大些長些，有些則小點短點。
2. 前后層次，有的在卡片前面，有的在卡片后方。
3. 造型差異化，除了彩帶再來點其他元素。
在一個長長長頁面里，相同的排版會沒有新鮮感，容易產生視覺疲勞。
我們可以通過兩種方式，讓設計模塊有差異。
1.排版不一
2.視覺不一
比如這個例子，同樣都是聽音樂，但是會用不同的排版穿插展示。
就算是同樣的排版，我們也可以在其中用不同的視覺。
比如以下這個案例：一開始它從頭到尾都是運用的一種視覺，排版也十分相似，頁面整體結構也沒有主次。
在我們對不同模塊的卡片處理后，就好很多。
頁面的空間可以站在三維的角度去看，分為 x 軸、y軸、z 軸。
頁面的空間是十分寶貴的，當頁面承載的內容越來越多，我們不能只在 y 軸（高度）上一直增加頁面的高度。學會利用 x 軸（寬度）和 z 軸（深度）的空間能有效減短 y 軸（高度）。
4.1 利用 x 軸的空間
我們來看下面這個例子，他一開始采用的豎排方式：
如果我們將它改成橫排、滑動查看后，頁面就能夠展示更多的內容，就越可能捕捉到用戶想看的信息。
這就是減少了 y 軸的空間，利用了 x 軸的空間。
4.2 利用 z 軸空間
z 軸空間就是利用深度、前后的空間，就像我們經?？吹降摹疙撁娑恰梗吕撁婧?，在頁面的后面出現一些內容：
這個 banner 的滑動也是利用了 z 軸空間：
以上就是我在空間利用率上面的收獲，大家心里留個印象，說不定之后就能解決一些相關的問題～
不知道今天分享的大家get到了嗎？總結一下～
1.信息處理：明確信息的層級關系，有助于信息處理。
2.裝飾元素：有大有小、有前有后、造型不同，會讓裝飾元素更自然
3.長頁面設計：模塊與模塊間要排版或視覺不一
4.空間利用率：把頁面當成三維空間，除了 y 軸，也要考慮到 x 軸和 z 軸的空間利用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：花菜 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
最近幾年的產品體驗設計中，已經不再僅僅看重單次的交易，而是會更加關注持續的交易效果，以及與用戶形成長久的協作，為用戶帶來長期的價值。
那么，最好的觀察用戶長期價值的工具，就是構建用戶生命周期了。否則，很難系統化地理解商業狀態，就更不要提做好體驗設計了。
對于用戶生命周期，可以簡單理解為，就是用戶在我們的產品里是如何開始使用的、如何生長的，以及最后是如何離開的。研究透徹用戶在每一個階段的特征，是制定體驗設計整體策略的依據。
舉個例子，比如一個瑜伽產品，那么根據用戶使用的生命周期，可以把用戶分成幾個關鍵階段：
1.不了解瑜伽；
2.了解瑜伽但沒有開始；
3.躍躍欲試；
4.新手，第一次使用；
5.持續的練習者；
6.暫時放棄練習，但還關注瑜伽內容；
7.完全放棄。
明確了用戶使用產品時可能出現的這 8 個階段，基本就清楚了用戶使用產品的全貌，進而就可以根據這些階段，進行整體的策劃及針對每個階段的體驗主題細節的設計。
比如，前三個階段應當是以宣傳和引導為主，從第四到第六階段應當是以一個用戶成長階梯的體驗設計為主，最后兩個周期應當去努力理解用戶放棄的原因及設計召回的緩解策略。
所以可以發現，用戶生命周期就是用戶從接觸產品到離開產品的狀態集合，它也是我們觀察用戶整體創造價值總量的尺子。用戶生命周期的整個過程，就像是一棵自然界的植物，從一粒種子開始，逐漸生長成熟再到最后凋謝。如果把產品中各個層級的用戶生命周期整合在一起，就可以用全局性的視角來關注產品的健康度。
而現在，又因為有了技術工具，可以將用戶的生命周期數據化，并可以結合動態的算法，根據每個用戶所在的周期以及他的個性化選擇，來動態地做到定制化運營策略。這也已經是未來體驗設計的趨勢。
比如，在順風車的車主生命周期的分層工具里，可以根據大數據系統來預測一個車主何時放棄順風車的數據模型，然后就可以根據這個數據模型，配合流量獎勵、匹配獎勵、紅包獎勵等動作，促使該車主能夠產生持續拉單的動力。另外，在面對不同的沉默用戶時，系統也會根據用戶的畫像，不斷進行召回策略的嘗試等等。
所以說，只有用數據工具做到個性化的用戶生命周期運營，產品才能在這個時代獲得優秀的競爭力。
那么，要如何來劃分用戶生命周期，并為每個周期制定體驗策略呢？下面我們就具體看看吧。
用戶引入期：為第一次接觸而設計
顧名思義，用戶引入期就是用戶從聽說了我們的產品，到 TA 初次進來使用產品的階段。這個階段主要包括用戶了解產品、下載注冊、登錄并開始使用產品提供的服務及功能，等等。在這個階段，用戶并沒有與產品有深入的接觸。
不過要明確的是，所有的產品，都要為用戶的第一次使用而設計。
我們應該都會有這樣的經歷，每當開始使用一個新的 App 時，基本上都會有一個新手教程。
但其實光有新手教程還不夠，還要有為用戶第一次使用的運營動作，比如新手紅包、介紹動畫，還要能引導用戶找到自己的朋友，等等，以此保證用戶可以順利地和產品發生第一次交互。
這有點兒像工業設計產品的外形和引導，好的設計總能在你第一次使用的時候，就可以讓你意識到自己離不開它了。比如說戴森的吸塵器，當你握住它開始工作的第一瞬間，你吸塵的過程你就會體會到一種戰士用槍消滅敵人的感覺。
比如有些像影視劇和游戲產品，初始的體驗非常重要，它們能不能用 3~5 分鐘就迅速把用戶抓住，并且能夠交代清晰整個故事體驗的核心矛盾，是非常關鍵的。
所以說，第一次使用，是用戶定義一個產品的關鍵時刻。這個時候，要想清楚以下這幾個問題：
· 用戶畫像：即是誰在使用我們的產品？
· 接觸場景：TA 是在什么場景下接觸到我們的產品的，是手機還是 PC 或是線下體驗？
· 用戶預期：用戶的預期是怎樣的，TA 是有目的，還是隨便逛逛，或者是抱著好奇心態才進來的？
· 產品完成情況：面對不同的用戶，如何讓我們的產品能夠最大化地達成用戶預期，以此抓住用戶？
· 鼓勵與設計：如何鼓勵用戶向下探索，用什么價值交換的好處來讓他進行下一步動作？
成就信任的關鍵，是雙方成功協作后獲得的良好體驗。所以為第一次使用而設計就是初步建立用戶信任的設計策略。
用戶生長期：綜合分析用戶場景和畫像
用戶生長期，就是指用戶已經進入產品正常使用的循環，已經可以半熟練地在場景內成功使用產品，并逐漸地成為一個成熟用戶。
每個產品對不同的用戶，都會產生不同的粘性效果。除了基礎利益需求的共性，每個用戶都會對不同的體驗“上癮”。
所以，處在生長期的用戶會以不同的留存程度來使用產品。有的人會永遠不再打開，有的會卸載掉，而有的則會每天都來，這取決于用戶場景的特性和產品設計的水平。
場景特性指的是我們業務的用戶實際狀況。
舉個例子，即使一個人很喜歡賣二手產品，但 TA 必須要有足夠多的換物需求場景，這樣 TA 才會去使用，比如搬家、換手機場景等等。所以它的使用頻率必然是和用戶本身的生活特性有關。
產品設計水平指的是我們的產品能否適配好用戶的使用場景。
比如書店，用戶來書店，不僅是有買書的需求，還會有坐下閱讀的需求，所以咖啡店的設計就非常符合用戶需求，這樣的設計就增加了用戶來書店的頻率。
所以，在用戶生長期，要綜合分析用戶的場景和畫像，進而分析用戶從第一次打開以后的使用狀況，包括每日的打開時間、使用時長、完成交易狀況，到每周、每月的使用頻率，為用戶分層，以此找到對于產品最有價值的用戶人群，并通過分析用戶場景和畫像，確定產品改進的方向。
用戶穩定期：延長用戶使用的生命長度
處在穩定期的用戶，可以理解為是已經產生了多次付費行為的成熟用戶。當用戶熟悉了產品以后，就會有一個穩健地使用產品的時期。這個時期可長可短。
用戶生活基礎類的剛需效率產品，會穩定地生長在用戶生活里的一個場景當中，比如地圖、打車、效率型電商等等；而體驗型的產品，則要看產品持續為用戶提供成癮體驗的能力，比如電影、劇集、游樂場、游戲等等。
那么據此，就可以分析預測出用戶穩定期的長短，并作出相應的體驗設計來延長用戶的使用周期，同時也提升服務能力。
在前面這個例子中，用戶生活基礎類的剛需效率產品，在通常情況下穩定期會比體驗型產品更長。也就是說，要在用戶的需求點上不斷提升效率，并且增加附加服務，來高效閉環用戶的整個場景。就好像滴滴，逐漸發展出了出行的各個產品維度，來滿足用戶出行中的各個場景。
另外，還要分析出用戶放棄的原因，同時也要分析用戶的遷移成本，來明確我們的長期壁壘是什么等等，這樣就可以最大化地修正產品體驗的漏洞，改進產品和服務，同時積累復利價值。不同的產品，用戶遷移成本都不同，比如社交產品是關系鏈，硬件產品是生活習慣和數據積累，出行產品是網絡效應的供應效率，等等。
除此之外，還要在用戶穩定期，盡量地延長成熟用戶的生命長度。當然，這也需要利用種種運營和內容手段，拉近產品與穩定期用戶的關系，并促使他們愿意發展更多的新用戶進入我們的商業體。
如果企業要善于利用口碑營銷，并能做好用戶運營，那么穩定期用戶的價值就是巨大的，口碑能力以及自己的私域流量，都會大大幫助產品做好增長。
用戶衰退期：分析原因與改進場景
每個產品都會有用戶衰退期，比如用戶生活習慣的遷移、支付能力的變化、城市地點的遷移等，這些都會讓用戶退出產品，很長一段時間都不會再使用。
另外，更好的競爭對手提供的方案、新技術帶來的市場變遷、其它市場產生的跨維度競爭產品等，也都會導致用戶的離開。所以要具體情況具體分析，有一些衰退是自然的，比如一部電影，自然就是看過以后就不再有新鮮感了。但有一些則是自己的產品逐漸落后了，用戶過早地進入衰退期，那就需要好好研究。
還是拿前面提到過的順風車案例，展開介紹一下。順風車的大多數車主在嘗試了產品以后，都會偶爾拉一拉順風車，也有一些車主會成為核心車主，大部分的 GMV 都是由他們貢獻的，但其一般使用的周期都只能維持在 2 年左右。
所以，就需要制定了一個為期兩年的全生命周期的運營策略。針對車主第一次、第一周、第一個月、第一個半年、第一年的使用時長，來分別進行運營手段的設計，并且會同時根據一個車主貢獻的平均 GMV，來分出一部分收益放到車主服務里面，促使車主因為服務更多地回到 App 里，共享出行，進而拉長其生命周期。
要知道，很多時候，商業的總體 GMV 雖然看上去還不錯，但如果用戶都進入了衰退期，那將是很可怕的狀況。一旦商業大部分進入了用戶的衰退期而不自知，就會像一個高血壓患者，身有疾病而不自知，所以要借助工具，給企業“量血壓”。
不過，對于衰退期的用戶，要認真地研究場景與原因，而不是一股腦地花錢去挽留?？傊?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">創造自然的場景來延展用戶的使用周期，要比生硬的運營手段刺激有價值的多。
用戶喚醒期：革新產品迭代品牌
當用戶衰退以后，其實還是有可能回潮的，比如說重大產品革新或市場發生變化。這就是用戶喚醒期。比如一些老品牌革新產品，在推向市場時就重新煥發了青春。
對于處在這個階段的用戶，以往很多企業所采取的方式都非常簡單粗暴，比如說狂發優惠短信等等。但召回用戶，絕對不是猛用活動和短信進行轟炸，而是真的要在產品上有相應的變化，以及設計出對用戶有好處的服務或功能，這樣才能夠起到比較好的效果。
比如中國品牌的國潮風就是一個很好的例子，從李寧產品品牌的再設計，到推出多個國潮服裝與球鞋，并重新設計了 Logo 與品牌策略，讓李寧的整個產品線擁有了全新的氣質，不僅召回了老用戶，還開發了很多新的用戶。
喚醒用戶，革新產品與迭代品牌才能有真正的長期效果。
用戶喚醒就好像重新和用戶簽訂“服務契約”，那必然要帶著誠意，效果才會好。畢竟，這個世界不缺乏套路和生硬的營銷，但缺乏硬核的誠意。要明白，要想和用戶做長期的朋友，是需要真誠的產品策略的。因為在這些沉默的用戶中，可能存在著大量的潛在需求沒有被滿足的用戶，時刻等待著我們的進化，他們就能即刻加入。
所以，不要輕易放棄那些沉默的用戶。
產品體驗設計與用戶永遠是共生關系
可以把產品理解為一個用戶花園，一朵花就是一個用戶，而在他們生長的時間里，會不斷貢獻 GMV。那么，就需要觀察、培育這些生長在花園里的生命，為不同的花朵提供不同的服務和運營策略。如果做得好，花朵就會多貢獻價值。如果做得不好，花朵就會死掉、離開或者對我們的動作充耳不聞。
同時，也要觀察商業環境，就像一年四季的天氣，環境好的時候就要多澆水，環境不好的時候就要保護我們的花園。
總而言之，做用戶體驗的核心就是要看清楚，和用戶之間的服務關系和互惠價值關系，然后提供良好的解決方案和用戶協作，創造相互的價值。
而用戶的生命周期，則是衡量商業體的體驗健康度的關鍵工具，也是設計體驗和運營策略的重要尺度。
在關心用戶生命周期的同時，一定要銘記：
1.用戶來自不同場景：每一個產品都有不同的用戶在不同的場景使用，不能一概而論。
2.用戶來自不同狀態：有激進嘗鮮的用戶，有隨便逛逛的小白，也有目的明確的專家，要區分運營。
3.用戶來自不同預期：每個用戶對產品的認知都不同，要采取合適的產品設計策略去尋找最大化獲取用戶認知的方案。
小結
討論了用戶生命周期的各個階段，以及如何為每個階段去制定體驗設計策略。需要記住以下這幾個關鍵要點：
1.用戶引入期：為第一次接觸而設計
2.用戶生長期：綜合分析用戶場景和畫像
3.用戶穩定期：延長用戶使用的生命長度
4.用戶衰退期：分析原因與改進場景
5.用戶喚醒期：革新產品迭代品牌
制定運營策略和體驗策略的關鍵，就是要為處在不同時期的用戶制定合適的策略，來最大化地滿足商業發展的需要以及用戶的需求。
用戶體驗策略的細分運營和選擇，要為用戶體驗增加時間維度。也就是說，當做完了用戶分層模型以后，還要看用戶處在哪個生命周期、分布在什么時間段。
只有這樣，才能立體地掌握整個產品中的用戶的狀況，從而作出正確的商業選擇和體驗策略。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://m.skdbbs.com