一、項目背景
語音搜索場景在功能不斷迭代的同時，也在探索更年輕化的玩法、傳遞更多元的體驗感受。在產品初期，我們嘗試在語音搜索場景下增加AI伙伴的形象，雖然線上版本已經實現，但從產品形態以及用戶反饋上看，還沒有達到可情感互動的效果。所以在本次迭代上，我們著重從情感聯結、閑聊互動的維度，對語音搜索進行創新性嘗試。
二、設計挑戰與目標
圍繞項目背景，從現在語音搜索的用戶行為與框架來看，有幾個比較明確的問題：
因為前期在語音搜索的優化中，已經嘗試在面板中引入AI形象，上線后用戶反響強烈，用戶的行為中聊天、互動的訴求也明顯增加。由此可見，滿足用戶對AI伙伴的情感化訴求是十分有必要的，同時語音搜索引入AI伙伴是體現同行業差異化的有力創新點，從行業報告《2021年中國智能語音市場分析報告》中，也闡述了打造沉浸感語音搜索體驗與引入AI是目前智能語音市場的發展趨勢。
綜合以上原因，設計團隊在與產品討論過后，達成本次升級的核心目標：
三、設計舉措
1、構建認知 - 語音搜索基礎框架升級
在舊頁面中，語音面板限制了人物與按鈕的展現，人物既要承載功能反饋又需要作為物理操作按鍵進行點擊操作，與用戶認知相悖且也不利于功能擴展。因此在新版本設計中，需要明確“人”在語音搜索里的屬性，以及AI伙伴與語音搜索的關系。
我們將語音搜索頁面框架分為主要功能與輔助功能區。從舊語音面板中剝離出人物，并保留收音球在面板中做物理交互功能（發起收音、停止收音操作），利用AI伙伴的人物屬性，打造智能擬人的交互反饋，滿足用戶情感訴求。以“人”為中心，最大化展示AI形象，增強情緒傳遞感的同時保證框架可拓展性。
同時，將原堆積在面板中的功能與信息按優先級歸位，確保頁面信息清晰易讀、功能操作熱區無重疊、信息反饋區無干擾。新框架上線后，AI伙伴互動與語音搜索的認知關系更加清晰，語音搜索跳框量明顯增加，AI伙伴帶動面板整體導流增加，面板退出率下降。
2、引入情感 - 全場景情感化體驗提升
除了通過框架層面進行認知優化之外，為營造更貼合“人”的互動體驗與情感建立，我們又根據語音場景對每個狀態進行了情感體驗升級。改版上線后，用戶閑聊訴求和互動點擊行為均有所提升，從而驗證情感化的體驗提升，滿足了用戶互動訴求。
1）情感化引導提示：視覺上人物破框展示配合AI招手/比心的動作展示，不再是圖片，而是可以對話的實體，同時使用年輕化的引導語氣拉近與用戶間的距離，增加數字人曝光，建立新用戶心理預期，激發興趣點提轉化。
2）互動提示規則升級：圍繞“人”的真實情感，通過彈出氣泡的方式模擬AI伙伴狀態，比如聽歌、讀書、游戲。以此引發用戶點擊或進行互動行為嘗試。并且配合AI伙伴升級引導規則，使引導能夠根據不同場景進行適配，保證其既可以承接語音常規引導功能，又可以承接負一樓聊天互動，點擊氣泡可跳轉對應負一樓場景、聯動數字人語境內容，避免造成場景情感化割裂。
3）增加“AI伙伴”情感反饋：增加人物動作、豐富情感化動態反饋，想要模擬更真實的“人”的狀態，就需要滿足更多擬人反饋。將語音搜索常見場景劃分為聆聽、識別解析、異常狀態、指令響應、引導等5種狀態。對應不同的狀態，規劃相應的數字人反饋動作或組合使用方式，可復用拓展其他相關場景，為設計與開發提效。
3、感知升級 - 營造沉浸視覺氛圍
確定了產品主要改版方向后，通過對目標的提煉，提取設計關鍵點「年輕化」與「情感化」，配合AI伙伴形象，需要呈現出輕松活力的氛圍感，設計中運用了大面積的毛玻璃質感，使場景更加輕盈、沉浸。通過對色彩的運用來演繹年輕的視覺效果，詮釋語音搜索年輕化的設計突破。
1）定義視覺風格：圍繞改版目標，定義設計關鍵詞，由關鍵詞延伸設計風格要點。
2）形色字構質動：從「形色字質構」5個方面提煉設計特征。
基于視覺方向及特征提煉，在質感、形狀、顏色三個設計中改動最大的方向詳細描述。
考慮到語音搜索場景日后的拓展，色彩上希望可以營造給用戶一種輕松柔和的視覺氛圍，并且元素的色彩需要與AI伙伴服飾相呼應，從而使AI伙伴形象更加靈動、場景搭配更加和諧生動。
①基礎色彩范圍制定：
以度曉曉為示例，遍歷目前線上所有度曉曉服飾裝扮，對色彩進行歸類處理，從中提取主題色系，從搜索色庫中對應選出主題色環。
②如何在數字人裝扮中提取主體色：
我們需要把色彩量化，建立特定場景取色規則，根據規則層層篩選，我們可以從中獲取N種主體侯選色。
③校正主體色，與搜索智庫色彩形成映射關系：
通過對數字人裝扮的色彩分類，我們以H值為標準，通過調整S值與B值，劃分了12個色相，設定對應色系的H值區間范圍，如智能取色色值在該色相區間范圍內，且吸取到的候選色個數最多，就在對應的色庫卡中選取主體色。
校正原則：色相必須保持是同類色、保持感官明度同頻、保證視障人群的識別度
④建立輔助色搭配規則：
為了保持背景層的色彩氛圍營造，保證其具有清晰的識別度，我們以主體色為起點，選擇了顏色相對較多的鄰近色，在色溫上保持整體色調的一致性，其次利用對比色和互補色，選擇更加豐富多元的色相，制造更強烈的色彩對比，以保證滿足各種使用場景下對色彩的需求。
⑤組件化思維拆解頁面元素：
在梳理了智能取色機制后，我們也在思考，語音面板涉及到的元素過多，往往會面臨不同場景不同適配的情況出現，那么在做到視覺減負的同時，如何能靈活的替換對應元素呢？
我們以組件化思維去拆分設計，進行立體化的分層，將引導層（熱詞推薦引導關注）、信息展示層（承接語音各類狀態與信息）、形象層（強化AI伙伴智能感知）、背景層（烘托視覺氛圍感）羅列出來，各場景可根據需要進行顏色延展，保證視覺樣式達成橫向統一，呈現出更加豐富的視覺內容，避免審美疲勞。
總結本次語音搜索的改版升級，我們通過“構建伙伴認知、滿足情感互動、增強沉浸體驗”等手段，增強AI伙伴的曝光率，進一步向用戶傳達智能搜索的感知，從而促進搜索行為轉化。
構建認知過程中強化AI伙伴形象，增強語音搜索功能拓展性；同時結合“情感化”等全場景引導手段，營造更貼合“人”的互動體驗與情感建立，對每個狀態進行了情感體驗升級；最后重新定制視覺風格，圍繞「年輕化」關鍵點對整體氛圍進行強化，讓語音搜索場景更加年輕、有氛圍感。本次改版上線后，搜索行為、互動行為均有所提升，用戶體驗也得到了顯著提升。
四、寫在最后
我們正處于數字化快速變革的時代，傳統工具的基礎功能已不再滿足用戶的訴求，人們的感官也從現實空間延伸到虛擬空間，AI伙伴會逐漸融入人們的生活，未來語音搜索將不再是一個信息輸入-結果輸出的傳統搜索工具，引入AI伙伴，可以讓搜索更加智能，擁有人類一樣的思維、表達、情感和學習能力，滿足人們更高層次的情感訴求的同時，也可以讓搜索更加簡單有趣。
未來我們持續對語音搜索進行升級，將AI伙伴與搜索鏈接的更加緊密，提升用戶體驗，創造出更多有趣的、創新的、別出心裁的年輕化設計。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
————————————————————————————————————————————————————————————————————
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。
也歡迎加入MEUX,視覺/交互/運營設計師可投簡歷至MEUX@BAIDU.COM(注明信息獲取來源如：站酷）
關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。
MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_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咨詢、用戶體驗公司、軟件界面設計公司
寫在前面
成熟的設計系統是一個強大的生態體系，在這個體系下，各系統部分協同運行，促進平臺產品之間的一致性，為更大規模的產品提供“標準化”的工作流程，從而實現組織的運作效率的提升。
A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. --Alla Kholmatova, from Design system
設計系統是指服務于數字化產品設計的一系列具有內在關聯性的、組織有序的設計模式與實踐方法（Kholmatova，2017）。
它既包含了可復用并組成界面的要素，也涵蓋了如何在設計團隊當中創建、提煉、使用和共享的方法。在2014年后，各大知名公司開始在界面設計領域紛紛構建設計系統。百度商業團隊隨著產品不斷的發展和壯大，團隊希望通過統一的設計和研發語言來提升產品的一致性，并實現團隊協同效率提升，從而達到降本提效。在基于自身業務特性上，建設了一套Light設計系統并持續的發展。
目前在設計系統建設方面，各家有非常完備的建設方法與實踐。當設計系統建設趨于完備和成熟時，如何更有效定位設計系統的發展方向、持續迭代成為我們思考的重點。
本文將以百度商業團隊Light設計系統PATS度量體系的建設為例，分享我們如何探索設計系統度量的建構，與具體實踐。希望通過文章能為大家帶來新思考，并借此與大家進行交流與探討。
1.為什么要做設計系統度量
度量是一種測量或評價特定現象或事物的方法，而體驗度量則是一種可靠的測量或評價體驗的方法與數據體系，使得體驗可被測量、量化并以數據的形式表示出來（Tullis and Albert，2009）。
管理學大師彼得?德魯克：If you can’t measure it, you can’t improve it.無度量、無改善。設計系統無疑是一個動態發展的，是不斷演進的一個生態。在百度商業團隊Light Design設計系統建設初步完善后，我們希望通過行之有效的度量，來進行可測量、可量化、可持續的監測，從而對設計系統進行全面評估，明確下一步重點的投入方向。這對我們設計系統管理和迭代非常有必要。
2.如何建立設計系統度量
2.1 現有度量模型研究
在構建度量體系之前，我們先回溯已有的度量模型。了解當前市面上以及學術上已有的成熟度量模型。并帶著以下2個問題進行研究：
當前業界較為典型常用的模型體系：例如HEART + GSM模型、PTECH模型、《云計算軟件產品使用體驗質量度量模型及度量方法》。
通過對比分析模型維度、具體指標和方法，我們發現：
1）較為典型常用的模型是面向具體商業產品和用戶，但針對設計系統的度量很少涉及。
2）常見度量模型建構的方法是有一定共性特征，我們可借此指導建構設計系統度量模型。
2.2 設計系統度量的建構
根據以上調研，我們認為：現有度量模型評估的對象、內容和方法是面向用戶群體，并針對具體業務或產品；而設計系統的度量則是：通過全面科學的度量體系，評估設計系統在工作流程與業務側應用的表現，驗證其價值，并判斷在應用中存在的問題。
我們基于百度商業團隊Light設計系統發展和預期目標，構建了一套度量設計系統的評估體系。具體構建過程分四步進行：
Step 01. 盤點當前現狀：
通過盤點對設計系統的各項內容、困惑問題等，以此明確設計系統需要度量對象和內容。根據設計系統標準化建立指南（Invision，2020）所提出：設計系統在不同發展階段，需要到達標準的依據以及設計系統應包含的內容。結合我們設計系統當前發展的情況，將百度商業團隊設計系統內容拆分為原則規范（Principle）、設計資產（Asset）、設計工具（Tool）、維護管理（Support）四大板塊。由此，明確我們度量設計系統的具體內容，并將我們設計系統度量定義為設計系統PATS度量體系。
Step 02.制定度量維度：
在明確度量對象內容后，結合我們設計系統的目標，將度量體系聚焦五大維度：
Step 03.明確目標、信號與指標：
在不同維度下，依照GSM模型的方法具體推導出指標和度量方法。具體實施的過程是：羅列出度量內容在維度上所期望的目標，以及表現出的信號，來推到出具體指標。整個過程中，做到【貼近系統目標，緊扣度量內容】。
Step 04.選取度量方法：
對應上述的劃分維度和指標，設計特定的度量問卷，采用主觀評分的形式持續跟蹤使用者們體驗分數變化，從而監控設計系統在我們工作流程中的運行情況。并結合定性訪談，對薄弱內容深入探究，了解具體原因。此外，我們也引入客觀度量方法，對組件應用表現的客觀數據進行監測，來反映其靈活度情況。
3.PATS度量落地實踐
構建設計系統PATS度量模型后，持續開展度量實踐，度量模型與評估方法得到初步驗證，確定設計系統度量體驗分的基線；并了解當前系統發展不足的地方，明確短期解決方案以及?線行動規劃。
第一次度量實踐中，對比本次度量的平均分發現：易用性與可靠性維度遠低于平均分，存在明顯的短板。于是，重點針對短板問題，一方面，通過定性訪談對具體問題歸因，找準痛點，制定出應對方案；另一方法，調研先進設計系統的建設方法，學習管理經驗，給出具體的改善措施。
通過半年執行改善措施后，再次度量時，聚焦分值的變化觀測到：執行相應的措施和決策后，分值有了明顯的變化。例如，通過切換Figma工具作為Light設計系統相關資產的載體，利用其優勢將設計系統內容根植到工作流程，使得易用性維度提升幅度非常顯著。在一定程度上，驗證了工具切換決策的價值。但易用性維度分值依舊較低，有可提升空間，還需持續優化。
此外，成立Light設計系統維護小組，制定維護管理建設機制，明確雙周更新通知，統一日志記錄模板，明確各項負責人等，推動可靠性維度得分提升顯著。通過PATS設計系統度量，既為我們指明了下一步改善的方向，也對設計系統的發展決策進行驗證。
總結：
在建立設計系統PATS度量后，實現了全面并精準的監控和管理，并指引我們提出可提升系統體驗的決策與方向。而設計系統是復雜的，也是不斷變化、演進的。未來設計系統PATS度量的方法也會隨設計系統的發展而逐漸豐富，來獲取更全面的數據。最終，幫助團隊更好地推進設計系統的建設，提升設計系統的成熟度，推進設計系統向一個良性循環的方向前進。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
隨著國內市場飽和，越來越多的公司轉向海外尋找新的增長機會，其中出海電商成為了最大的市場之一。21年底艾媒咨詢顯示出海電商市場中，中國企業在海外的獨立站數量已達20萬+，所占份額從2016年9.8%提升至2021年25.6%，預計2025年將會到達50%。
什么是獨立站？2022年成功在iOS榜單超越亞馬遜的Shein是其中的代表。它起初定位于依靠多SKU和低價的鋪貨型公司，但難見起色，之后成功轉向于依靠流量運營和供應鏈體系的品牌型公司，通過自己站點直接和用戶鏈接并發生交易。
本文將先介紹獨立站這股出海電商新趨勢，然后從用戶體驗視角描述導航、交易流程、視覺三個方面與電商平臺的差異性，最后我們基于百度剛推出的獨立站SAAS產品出海易，分享一些獨立站設計經驗和避坑點。
海外電商市場集中度低，亞馬遜封號熱潮，資本大批涌入，使得出海聚光燈逐漸從平臺轉向獨立站。
根據下面頭豹研究院整理的19年各國電商占比圖可看出，中國平臺電商占比整體電商市場高達86%，而歐美國家占比為60%。同時中國自有品牌占比1%，而歐美國家平均占比高達24%。可見歐美電商市場平臺占比低，難以形成壟斷，同時自有品牌占有率高，因此品牌獨立站在海外有更優質的發展環境。
亞馬遜等海外平臺政策逐漸收緊，2021年亞馬遜封號潮迫使眾多國內商家倒閉關店。同時對于新手，平臺入場門檻越發變高：注冊方式受限，通過率低以及中國賬號易被封號。與之相對是機會越發變少，平臺上流量爭奪和價格戰越發激烈，作為新人店鋪想在平臺獲得較好的曝光和推薦現在可能性極低。
近年來無數資本開始涌入獨立站。shopify作為頭部獨立站服務商股價從2019到2022上漲近10倍，22年獨立站領頭羊Shein市值高達千億美金, 拼多多9月上線Temu對標Shein作為公司重點項目。這些都預示越來越多商家和公司開始關注并入局獨立站。
下圖分別是國外頭部平臺亞馬遜和獨立站Shein的首頁。亞馬遜顯得規整，統一，秩序；而右邊Shein更為豐富，跳躍，自由。我們認為自由，是獨立站和平臺本質上的差異點。
為什么獨立站可以這么自由呢？
因為獨立站擁有獨立域名和頁面, 并由商家獨立設計、運營來打造品牌。商家對于獨立站每一個環節都擁有絕對的自主權，同時帶來特定優勢：
但獨立站的模式并不適用于所有的出海商家：
獨立站模式下，核心在于商家管理信息流、資金流以及物流的能力。其中資金和物流主要基于商家選擇的服務商，比如跨境支付、倉儲和配送能力。而在信息流層面，更多在于商家對于用戶的觸達和轉化，這也是作為設計師可以參與并發力的點。
那么獨立站針對的用戶會具有什么樣的特征？國泰君安證券曾經專門研究過Shein的用戶，主要為20-35追求時尚個性的白領女士，該類群體追求個性化和潮流同時注重商品性價比。因此我們認為追求個性化，同時付費能力相對有限的年輕人更傾向于在獨立站進行交易。
獨立站對于用戶而言，存在觸達(多渠道)—認知(物料+站點)—消費(站點轉化到完成交易)—傳播(多渠道)等觸點，在這些觸點打動用戶的關鍵在于品牌認知和主觀認同。整個過程中，設計一方面可以在認知階段從視覺層面通過物料、站點、推文傳遞品牌感知，另一方面可以在消費階段從交互層面通過互動、服務來建立連接和粘性。
2.獨立站相比平臺的設計關鍵點
我們認為獨立站和平臺本質的差異在于獨立站將商品內容化。平臺就像貨架上擺滿各類型商品，需要用戶快速找到并進行交易。而獨立站把商品內容化，慢慢建立形象并輸出內容從而和用戶建立情感聯系。那下文接著就將從導航、交易流程、視覺三個方面來分析兩者基于貨架和內容體驗上的差異性。
從導航結構來看，平臺更為強調搜索將其置于頂部，同時強調分類的快速篩選。而獨立站弱化搜索來節省縱向空間，頂部放置公告欄來定期公布優惠信息。分類若較少，分類導航會置于products頁面下，采用頁面導航。分類較多則會將頁面導航換為分類導航，形成三層導航結構。
然后對于導航路徑，平臺有兩種設計：
獨立站依據分類的層級和個數會有面包屑和樓梯變種的設計：像shein作為服裝采用了面包屑，而Anker作為3C采用樓梯式變種，橫向展示所有品類的名稱和圖片。
我們認為雖然現在電商出現直播電商，內容社區等新形式，但核心交易流程都較為固定：首頁—搜索/瀏覽—商品列表頁—商詳頁—轉化(購物車/付款)。
來到電商網站的用戶，可分為搜索型和瀏覽型。搜索型用戶會直接通過搜索到達商品列表頁，然后通過篩選條件找到心儀的商品進入到商詳頁，最后選擇直接購買或者加入購物車來達成轉化。而對于瀏覽型用戶，區別在于他可能通過首頁的推薦商品、推薦分類等模塊來到達商品列表頁而非搜索。因為首頁本身只是作為入口，因此接下來將從搜索/瀏覽、列表、商詳、購物車/轉化來進行分析。
平臺對于搜索框的處理較類似，將其置于頁面的中心，差異性在于點擊搜索框后是否會出現熱門搜索和搜索歷史來幫助用戶進行決策。而獨立站都會弱化搜索框，將其置于頂部功能區。原因在于獨立站本身品類和SKU相對平臺較少，搜索的頻率需求不明顯。點擊獨立站搜索功能后，有兩種設計：品類較少會出現氣泡，同時下方顯示熱門和模糊搜索結果；品類較多出現大氣泡，在頁面中部強化搜索區。
從瀏覽行為來看，平臺首頁有三個入口：
其中頭部的分類導航、商品分類和商品卡片可通用到所有平臺設計，而首屏banner旁的分類多出現于國內平臺的設計中目的是提高商品分類的曝光率。而對于獨立站，只有商品分類和商品卡片入口依然存在。
獨立站另外有兩個入口：
設計目標在于將更多分類和商品信息前置，縮短最終到達商品的路徑。
商品列表頁核心部分在于篩選+商品卡片，用戶通過對應的篩選條件最后選擇到滿意的商品卡片。
平臺篩選區普遍使用左右結構的設計，左邊的篩選區加上右邊的商品列表，篩選區默認主動展開常用而收起低頻篩選項。篩選項較多情形下操作效率較高，但占據空間大同時影響整體視覺效果。
而獨立站篩選區有兩種設計：
對于商品卡片，平臺和獨立站都采用了上圖下文，適用于圖片為主其他信息為輔的卡片，在保持展示卡片個數的同時瀏覽效率較高。而從細節上來看，平臺會有較多信息來強調信任感，因為平臺本身商品都由第三方商家提供，所以得給予用戶足夠信任。而獨立站之所以不強調，因為它通過品牌建設來給予用戶信任感，所以獨立站放大圖片面積，縮小信任相關文字信息。獨立站另一個特征在于，條目列表頁就有較多轉化入口，基本可以直接加入購物車/詳情，來最終縮短用戶的決策路徑。
獨立站和平臺商詳頁最大區別在于首屏的信息結構，獨立站分為兩塊：圖片+信息，給圖片本身留出了較大展示區，而信息聚焦于最核心的款式和價格，轉化區域吸底目的為了強化轉化率+占用過少空間。然后平臺首屏分為三塊，將轉化區置于頁面的右方來強化用戶首屏下的轉化率，缺點在于用戶下滑到頁面下方時無法進行轉化操作。有的平臺會將右邊轉化區懸浮，缺點在于會壓縮下方的商品詳細信息區。
平臺有兩個常見的轉化操作：購物車和購買，而越來越多的獨立站開始用心愿單的功能來替代原來的購買操作，其中心愿單可直接在商品條目頁添加。我們推測主要目的在于降低用戶決策成本，促進更多轉化。接下來主要從心愿單，購物車，付款頁來進行分析。
基于我們的設計經驗，網站的視覺設計一般有三個對應的難點：品牌—如何突出網站品牌特色，形成差異化；節奏—如何合理排列不同視覺元素，形成視覺動線和層級；創新—如何突破簡單的頁面框架限制。那下文就將基于這三點來分析：
這方面獨立站和平臺的差異性并不大，都是基于自身的logo品牌，提取出對應的基本型、色彩以及感覺。然后將其運用到網站設計上，比如運營類的icon，插圖，banner以及頁面組件類如按鈕，標簽和搜索框等。獨立站對比下延伸場景更為豐富，因為運營圖都是自己配置，所以把顏色氛圍以及形狀都融入其中，形成更突出的品牌感。
右邊是獨立站，可以看到視覺動線會從頂部banner區開始，從頁面中間往下，到了后面部分才開始從左到右。從視覺層次來看，它延長頂部banner區的視覺重點，在首屏以下位置才開始弱化內容。而獨立站下方內容也基于其多元的內容載體來采用不同的排版方式，豐富整體層次。目的在于在首屏強化對于用戶的視覺吸引力，保持用戶高度的專注。
第三部分本文將基于百度剛推出的獨立站SAAS產品出海易，分享獨立站設計避坑點。出海易是去年百度B2B下面孵化新業務，它致力于幫助企業一站式出海，目前在4月已經推出出海易SAAS產品并正式售賣?；谖覀兡壳霸O計經驗和思考，如下圖獨立站設計有七類問題需要注意。而接下來將從中選出信息缺失、圖片質量、移動端體驗、國內外體驗差異這四類我們在出海易業務實踐中完整體現的問題來分析。
之前提到過，獨立站相比平臺一大特色就是信息豐富且多元。但作為服務商，實際會接觸到不少初次嘗試出海的中小企業，這些商家由于自身經驗不足，提供的信息和物料出現缺失現象。那作為設計師面對這樣的情形，應該如何設計以補救呢？
獨立站一大亮點在于高質量商品圖片，作為設計師當然會設想商家能提供下圖左邊的圖片。但放到實際場景下商家提供的圖片質量和效果都不可控，往往是提供的圖片右邊這樣。
所以很多商家提供的圖片質量很難滿足現有獨立站對于圖片的要求，因此從設計側通過以下三個設計策略來進行補救：
設計正方形容器，所有圖片都會自動縮放到容器區域下，來保證不同圖片尺寸下整體視覺上的一致性。
對于商品卡片會有多種處理方法，樣式1直接給圖片固定底色，來形成卡片間的間隔。而樣式2和3都采用透明背景色，卡片通過較大的間隔來進行整體的區分。
樣式1這樣通過固定底色的模式對于圖片本身要求過高。而像樣式2和3只通過間距區分會帶來問題，實際下的商品圖片有的有底，有的沒底，容易產生不一致的場景。因此最后實際設計樣式直接給了整體背景底色，然后用白色的卡片來區分商品，同時縮小了圖片所占的面積來避免圖片質量差的影響。
SAAS后臺會設計對應的尺寸提示，在用戶編輯上傳圖片前，頁面會有對應默認圖來暗示用戶合理的圖片樣式，給到商家配色和尺寸參考。
國外PC還是用戶主要購物方式，因此獨立站設計以PC為主。但隨著國外移動互聯網的發展，移動端也成了商家必須要布局的部分。無論對于設計師還是開發，重新設計開發并維護PC和移動兩套成本都巨大，因此自適應成了這個階段下較優選擇。下面將會分享下自適應設計下的一些細節。
因為獨立站針對海外用戶，所以和國內電商設計相比有兩個問題需要注意：1.不同國家下語言差異會導致視覺差異 2.不同國家間用戶在操作習慣本身存在差異。
4.結語
隨著全球電商的迅速發展和出海熱潮的加劇，獨立站會逐漸成為出海商家國外品牌推廣、營銷、客戶關系維護的重要抓手，同時也會給更多具有特色和渴望創新的設計師們，更廣闊展現自身才華的空間和機會。乘風潮頭立，啟航正當時，獨立站期待你的加入。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、個性化的性別選擇設計
完善信息對于產品來說是提升體驗的關鍵，一些產品在初始狀態會引導用戶去完善，比如昵稱、頭像、性別、年齡等基礎信息的采集。如何提高用戶的設置興趣，降低完善信息的排斥感，需要設計師進行反復推敲。
最近在體驗 FLAG APP 的時候，在性別選擇界面設計上區別于以往體驗過的產品，將性別的可視化進行了更為情感化的強化。出色的設計讓用戶眼前一亮，精美的插畫提高了整體設計的感官體驗。該案例提供了性別選擇差異化的表現，是提高常規信息界面設計視覺感的不錯思路。
二、情感化的用戶等級設計
用戶等級是增加黏性的關鍵，也能通過等級帶給會員更多的增值服務，激發用戶的參與度。
在使用海馬體照相館 APP 的時候，個人中心在頂部視覺區域會直接顯示用戶等級，配合情感化的人物插畫特別突出。通過左右滑動可以查看不同的等級，等級名稱和對應的人物形象插畫也會針對性的設計，不僅強化了用戶體驗，不錯的視覺感也能吸引用戶的關注度。
三、精美的插畫助你釋放壓力
插畫在產品設計中的曝光度越來越高，風格多樣化直接影響產品風格，也能增強情感化體驗。全靠插畫撐起整個產品的案例是什么樣子呢？最近發現了這么一款產品。
Wild Journey 是一款解壓的白噪音 APP，內置了許多大自然的聲音，讓用戶體驗到荒野的空曠、森林的靜謐、大海的波濤。整個設計全是精美的矢量插畫作品，帶給用戶賞心悅目的感官體驗。來這里釋放自己的壓力，放松身心。
四、趨勢化的引導頁設計
引導頁設計是最容易呈現風格趨勢的，利于設計師進行創意發揮。無論是想要發揮插畫技能、建模能力或者動效表現，引導頁都能提供發揮的場景。
最近在體驗嘀嗒出行的時候，發現全新升級的 9.0 版本，引導頁設計風格也是讓人耳目一新。利用了趨勢感的插畫風格和視覺表現風格（玻璃質感風）相結合，畫面清新自然，帶給用戶非常好的視覺感官體驗。
五、可視化表現提高用戶理解度
可視化設計逐步成為信息傳遞的趨勢，利用圖形化的形式更利于用戶理解，相較于枯燥的文字化呈現來說閱讀理解的效率更高。
Keep 在產品設計的時候，有效的將一些數據的表達和內容的普及以可視化的圖形進行展示，不僅提高了界面設計的感官體驗，也能有利于用戶對于內容的理解。提高界面設計的視覺感也能讓用戶更為關注，圖形可視化已經逐步成為產品設計解決方案中的趨勢。
六、個性化的主題皮膚設置
個性化的定制設計可以讓用戶感受到產品的溫度，根據自己的喜好選擇主題化呈現。成熟的產品都會在個性化設置上面提升體驗度，特別是在主題皮膚的定制上面，提供了更多的風格讓用戶選擇。
Keep 在將主題皮膚設置定義為選擇運動伙伴，不僅提供了不同的 IP 形象和主題皮膚，俏皮可愛的動態延展也傳遞了情感化的體驗。多種風格的設計滿足了不同用戶的喜好需求，還為不同的主題定義了擬人化的角色和身份，視覺感和體驗度都非常的到位。
七、提高參與度的簽到設計
簽到設計可以提高用戶黏性，讓用戶在參與的同時獲得禮品或者增值服務，簽到也成為了眾多產品的標配功能。對于設計師來說，如何通過設計提高用戶簽到的參與度，是需要不斷探索的設計思考。
最近在使用天天跳繩時，發現其簽到設計的視覺表達直觀醒目，大大的提高了用戶對于簽到的理解和參與度。將簽到后解鎖的勛章、經驗、裝扮和禮品等直觀的結合到簽到界面中，不僅風格協調統一，視覺風格也符合運動場景感。看到這個界面成功吸引了我的簽到欲望，簽到操作簡單，整體的體驗度都做得非常不錯。
八、情感化的個人中心設計
個人中心作為主界面之一來說，設計的體驗度是至關重要的。為了滿足用戶的喜好需求，個性化的設置也是層出不窮，功能布局、頭像裝扮、主題皮膚等都呈現出了眾多的優秀設計方案。
天天跳繩是個人經常使用的一款運動輔助工具，記錄小孩跳繩也是非常便利的工具。個人中心頂部視覺區域的人偶形象增強了界面設計的感官度，人偶的動態體現出用戶的運動狀態，可以進行自定義的設置來滿足自己的情感表達?？梢栽O置人偶的裝扮、旋轉角度、動作等，人性化的功能設置提高了自定義的體驗度，強化了用戶情感化的使用體驗。
九、結果導向的設計表達
以圖標/圖形/圖片等設計輔助信息的傳遞很常見，通常都是根據信息的文案來進行設計表達。如果放棄本身文案信息傳遞的意思，選擇結果導向的設計表達，也能帶來不一樣的設計反思。
最近在體驗 One More 的時候，動作庫的列表設計中便選擇了結果導向的思路。如果是常規的設計解決方案，會根據列表主題內容來設計配圖，這樣也能輔助對于內容的理解。但是 One More 選擇了完成該項目得到的鍛煉部位為設計思路，雖然不能輔助項目信息的傳遞，但是這個設計表達更能讓用戶理解完成的結果，參與度也能得到提升?？梢暬脑O計替代了文字的表達，提高了用戶對項目的理解度，進而轉化更高的參與度。
十、新穎的輪播 Banner 設計
輪播 Banner 圖對于設計發揮來說，除了在本身的創意和視覺表達層面以外，產品結構和功能層面也是設計師需要探索的方向。
極有家 APP 在產品的體驗設計層面做得非常不錯，針對輪播 Banner 位置也是做了新穎的創新。在 Banner 圖上設計了不同商品的引導標簽，方便用戶在感受整體家裝效果圖的同時可以選擇場景中的商品，也能對場景中的商品價值有個清晰的認知。輪播的形式結合了待輪播圖的預覽和風格名稱，增加了待輪播圖的曝光度，整個樣式表達上面視覺感也非常不錯，是一個比較新穎的設計解決方案。
作者：黑馬青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品設計中，理解并設計好流程，對產品的體驗非常重要。通常涉及到有三個方面的流程：業務流程、審批流程、操作流程。
在企業的日常經營中，為了對業務過程進行更好的管理，企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作，使企業效率更高。對于 B端產品，設計師首先要讀懂業務流程，然后才能設計好產品。 業務流程，是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動。活動之間不僅有嚴格的先后順序限定，而且活動的內容、方式、責任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進行流轉交接。
下圖是某企業的采購流程，涉及了五個部門、多個崗位角色、多個業務活動。
業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的，在業務上具有一定的通用性，但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔，可以說“流程 + 單據=業務”， 每個環節的工作形成一張單據，記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后，進入到下一個環節的工作時，單據也會隨之流轉到下一個系統中對應的功能節點，并形成一張新的單據，記錄新的信息。
下圖是某企業采購流程中從采購到結算部分涉及的單據：
除讀懂業務流程外，我們還需要應用“場景驅動的設計”方法，整理出每個環節中涉及的用戶、場景，以及作業的特征，并大膽地通過設計來改造流程，最后通過設計減少人員工作量，減少流程中的多余環帶， 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程，要經過到貨簽收、質檢、 收貨入庫等過程，每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖：
經過對場景和可行性分析后，設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄，并全自動質檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成，作為用戶體驗設計師在調研的過程中發現有好的流程優化方法，或者看到好的競品值得參考，可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。
在企業中，出于對重點業務的管理需求，除了會制定固定的業務流程方便大家協作，還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時，將重要結果發給相應業務管理者審批。但是，由于一些企業組織機構復雜，管理嚴格，為了保證業務的合規與安全，需要多個角色、多個環節的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統中是提交單據)。
(2）各環節審批者會根據流程分別對材料進行審批。
(3）審批通過后會自動進行到下一步。
(4）審批不通過，就此流程結束。
(5）退回則打回到流程起點，待改進后重新走流程。
(6）審批都通過后，審批流程結束。
在實際應用中，可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當前審批人將審批材料轉給其他人。
(2）加簽：增加審批的步驟，在一些企業中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業或者國企，流程和功能更復雜。當面對復雜而多變的審批需求時，需要將審批流程設計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設計得更加模塊化，可以在任何一個業務環節中加入審批過程。
在審批流程的設計中， 根據企業制定的審批規則，自動判斷是否符合標準，自動審批。尤其對一些每天都在發生、經常重復而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發業務流程，以此來提高審批效率。
前面兩個流程主要基于企業業務制定，在企業沒有信息化前就已經存在了，在改造優化上還有一些阻力和困難。作為用戶體驗設計師，可以通過對操作流程的優化來改進用戶體驗。
以上文中的收貨案例為例子：
（1）系統中收到若干個質檢任務。
(2）逐一打印質檢單。
（3）帶著質檢單來到倉庫，尋找需要質檢的貨品。
(4）找到貨品，逐箱打開進行檢查，業務操作不熟練的還需要詢問老員工。
(5） 將質檢結果隨時記在打印出的質檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據實際工作中的業務場景，對操作流程進行了優化如下：
整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程，并簡化了“尋找單據”的過程及記錄結果的過程。
在對操作流程的設計過程中，也應遵循“場景驅動設計”的方法，并將物理實體、數字實體統一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復雜度。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://www.syprn.cn