B 端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態，在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解，希望可以帶來一些啟發。
本篇先談談設計規范制作的指導思想--設計原則，后續文章再展開講一下常見各種組件的設計規范。
設計規范作為 B 端設計中非常重要的一環，它的作用主要體現在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內容我們知道了設計規范對于產品設計意義重大，那么制定設計規范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規范的總的綱領，所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容：
接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。
① 對比：
對比是指界面中為了區分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。
② 親密：
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
③ 對齊：
在界面設計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續還是直線，曲線延續還是曲線），也能引導視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復：
重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。
高效原則體現在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉--便捷、輕量：
用戶操作過程盡量減少跳轉，以實現交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區--便捷：
放大可點擊按鈕熱區，相對于較小點擊熱區，具備更絲滑操作體驗。
④ 懸停即現--輕量：
利用懸停即現，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。
⑥ 統一樣式--一致：
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業開發成本。
友好原則應貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態
可控主要體現在自由和導航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導航：
導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。
通過本篇內容我們大概知道了制作設計規范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續篇章將細分聊聊如何去設計 B 端常見組件的一些內容。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結。可能每個人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。
下面我們根據這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合 B 端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
主色的應用
主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。
② 功能色
功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。
成功色
主要用于操作結果成功提示以及標簽配色等。
警告色
主要用于警告提醒功能以及標簽配色等。
報錯色
主要用于系統報錯提示、圓點提示、以及標簽配色等。
③ 中性色
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規范包含字體、字號、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規范即可：
② 字號
不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取 14 號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。
間距
關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優先考慮 8px 的倍數作為間距值，在一些特殊場景可采用 4px 的倍數間距值。
分割線
分割線寬度一般統一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。
圓角
圓角大小一般根據使用場景控制在 2-3 個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業調性。
按鈕
這里從按鈕的大小/狀態/排放位置幾個緯度來講。
① 按鈕尺寸
按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據內容自適應。
② 按鈕狀態
操作按鈕過程中，按鈕會呈現不同的交互狀態。
③ 按鈕位置
對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格
柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？
① 柵格區域的劃定
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。
② 柵格自適應規則
隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。
③ 柵格欄數的確定
根據頁面內容豐富程度，柵格欄數一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導航
導航可分為全局導航與局部導航。
① 全局導航
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。
② 局部導航
局部導航包含面包屑、標簽頁、步驟條、分頁器。
面包屑
面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
標簽頁
標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性。可分為基本樣式、標簽樣式、卡片樣式。
步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
分頁器
當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小 Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共 100 條數據，默認每頁 10 條數據，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。
到這里關于 B 端的基礎組件就全部梳理完了，后續我們就來揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統軟件的差別。
在Saas之前傳統軟件需要購買后本地化部署，兩者最大的區別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現狀賣軟件給企業造成的影響，已經形成了惡性循環，市場受到嚴重的阻礙（據Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現一個問題：把長期生意做成了短期不可持續的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續。
所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創造價值，做到幫客戶成功（幫助客戶的業務成功），從而持續續約。
吳昊老師，在《SaaS創業路線圖》中的講到：SaaS的本質是續費。這個觀點我比較贊同，SaaS的經營本質在于可持續。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續費。
因此，和傳統軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業最高效的服務用戶。
企業的本質就是創造商業價值，商業價值來源于用戶價值，同時考慮實現商業價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業行為中的一環用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業最小成本服務用戶。完成價值交換同時，滿足持續性。
由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規?；挠绊?，一頭是產品一頭是用戶。
那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發；那后續銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數級上升。
產品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業生涯中都需要經常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業務、洞察用戶，幫助業務梳理產品信息架構、任務流程、交互體驗。
構建系統的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業交易達成商業目標。
回顧Saas的商業模式，Saas的商業模式決定我們提供的這個服務不是靠人海戰術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統使用門檻和提升用戶的自主化服務兩維度出發，根據這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。
第一，設計“系統服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發現、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發設計符合用戶心智認知的功能形態和交互流程。
第二，設計“系統幫助自助化”，什么意思在全系統中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發現的維度、認知的維度，系統認知的維度，綜合考慮用戶系統的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發構建。
1. 當用戶接觸系統從看出發，看見系統界面、發現操作入口；（發現）
2. 帶著操作任務用戶進入系統、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）
4. 當出現誤操作或系統出錯時，需要系統糾錯提醒、容錯的設計、幫助及引導，當完成整個業務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產品業務、用戶處理特性業務的基礎上，以終為始，回歸到用戶、業務、系統進行思考歸納的產物。
設計策略，是指導我們如何進行做正確的設計。
在SaaS產品分類上，常見的SaaS產品主要分為3類，行業SaaS、職能SaaS和通用SaaS。
每刻報銷產品從核心業務來說是職能類Saas，從提升財務人員報銷的發票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業務報銷，業務報銷發生又和所在行業的費用發生行為特征有一定相關性，所以是結合職能和行業Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統的業務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統經過6年過程中統計的問題分布，分布比率呈現：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調研發現，企業服務雖然客戶已經用了好幾年我們的系統，但財務部門還是經常性會碰到新入職員工的系統使用問題，甚至財務部門來新人時 以前系統發生的使用問題會從新出現一遍，所以企業服務有一個現象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統的自助化和自動化的服務，更具有復用性和規模效應。
SaaS的商業模式，按年使用賬號來收費和傳統軟件的付費模式區別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。
在SaaS模式的時代，商業模式決定其必須關注客戶成功、客戶持續續費、LTV客戶長期價值。
SaaS的產品更需要重視用戶體驗，用戶體驗的優劣決定其產品的長期發展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統服務自主化設計和系統幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業模式不可或缺的產品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
有人說它是全世界最牛逼的APP，因為它的算法難度和春運期間訪問量幾乎是全球之最；但有人說它是全世界最垃圾的APP，因為在使用這個產品的過程中，遇見很多奇葩、憤怒的體驗。關于這兩種說法，眾說紛紜，本期設計大偵探，就來全面拆解鐵路12306APP，一起來看看這個產品到底是如何設計的，用戶體驗如何。
1. 內容結構
全文9700字，分為六個部分，分別是導讀、產品畫像、出行服務、內容服務、思考總結和后記，你可以通過下面的思維導圖對本文內容快速的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，全方位體驗12306的產品設計，多維度去思考和總結如何規避類似的陷阱；第二類，產品經理/運營，通過全面的產品設計拆解、體驗反饋，獲取產品設計參考；第三類，旅游及出行相關行業從業者，通過對12306的全面拆解，獲取競品設計參考。
3. 分析模型
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于拆分和分析產品的功能價值。
第二個，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產品的設計，都可以通過這十個原則進行指導設計。尼爾森十大原則包括即系統可見性原則、環境貼切原則、撤銷重做原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則、人性化幫助原則，通過這十大原則，可以對12306的產品設計體驗進行全面的校驗和偵查。
第三個，設計心理學。包括常見的格式塔原理、費茨定律、巴甫洛夫反應、7±2效應、席克定律等常見設計基礎理論。
1. 產品介紹
鐵路12306是中國鐵路客戶服務中心推出的官方手機購票應用軟件，主要為全國各地的乘客提供火車票預定、機票預訂、汽車票預訂等購票業務，首個版本發布于2012年10月16日，根據易觀千帆數據，截止到2022年10月，12306月活躍用戶人數6,923.78萬。
2. 用戶畫像
鐵路12306的用戶群體主要以男性用戶居多，占比65.04%，女性占比34.96%；從年齡分布看，以24-30歲的用戶群體最多，占比36.52%，31到35歲的用戶占比24.23%，36到40歲占比20.27%，41歲以及以上占比10.30%；從用戶消費能力看，中高消費者占比33.48%，中等消費者占比30.43%，高消費者占比14.70%；從地域分布看，新一線城市用戶最多，占比27.93%，一線城市占比19.93%，二線城市占比19.00%，其中廣州用戶最多，其次為深圳、杭州和北京。
3. 信息結構
鐵路12306的一級菜單包含首頁、出行服務、訂單、鐵路會員和用戶中心?！甘醉摗怪饕獮橛脩籼峁┗疖嚻?、飛機票和汽車票的購買，其次還提供各種快捷功能入口和酒店預訂等服務；「出行服務」主要為用戶提供約車、酒店、訂單等服務；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會員」是12306的會員版塊，提供車票兌換、會員活動等內容；用戶中心提供個人資料管理、出行向導和常用功能等內容。
4. 重要迭代記錄
根據七麥數據統計，鐵路12306的APP首個版本發布于2012年10月16日，截止到2023年1月12日，APP版本已經更新至V5.6.3版本，近一年版本更新次數為5次。
版本重要迭代記錄
2021年9月，發布V5.4.0版本，新增無障礙功能、老人及障礙人士購票更便捷，即愛心版；
5. 產品生命周期
作為中國鐵路客戶服務中心的官方購票平臺，鐵路12306距離首個版本發布時間已經過去10年。從易觀千帆數據觀察，截止到2022年10月，12306月活躍用戶人數6,923.78萬，日均活躍人數811.65萬。由于是國有企業運營，而且是壟斷業務，12306沒有任何商業變現的壓力，從產品發布時間和活躍用戶人數看，目前處于產品生命周期的成熟期。
6. 競爭圖譜
截止到2022年10月，易觀千帆數據顯示，鐵路12306APP在蘋果的APP Store應用市場APP總排名71位，旅游類排名第一，汽車火車船票預定類第一，月活躍用戶人數幾乎是其他APP的總和。
三、出行服務
作為12306最核心、最重要以及實現商業變現的服務，出行服務主要為用戶提供火車票、飛機票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場景提供了便捷的服務。
1. 票務
「票務」是12306最核心的服務，主要為用戶提供火車票、飛機票和汽車票的查詢以及銷售，其次12306還對三種產品進行了組合，推出了空鐵聯運、鐵水聯運這樣的服務。
1.1 火車票
「火車票」就是為用戶提供火車和動車的票務銷售，用戶輸入出發站、終點站和時間以后，就可以進行查詢，其次還支持對已購買的車票進行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁
當用戶輸入目標站點以后，就進入了售票頁。在這個頁面，可以看到當天列車的所有車次，包括直達、中轉、出發時間和剩余票數。在底部，有一個菜單欄，包含了篩選、耗時最短、發時最早、顯示票價和候補下單五個功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發車站、出發時間等。
體驗陷阱
這個頁面的操作體驗不太友好，底部的菜單欄不僅沒有實現全屏手機設備的兼容，而且幾乎和背景的元素貼合在一起，不夠醒目，如果用戶不注意，根本無法發現底部竟然還有一排菜單欄幫助用戶進行高效的檢索。
1.1.1.2 訂單頁
①在用戶選擇好車次以后，就進入訂單頁。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡單，在輸入用戶的真實姓名、身份證號碼和手機號碼以后，即可添加成功。首次使用12306的用戶需要進行身份核驗，用戶需要通過驗證系統發送的核驗信息才能添加成功。
細節偵查
「姓名」這里有一個非常友好的設計體驗，那就是針對無法輸入的生僻字、名字超過30個字符，以及外籍用戶的極端情況都給出了詳細的指導，針對用戶可能出現的極端的情況給與及時的提示，這就是尼爾森十大原則中的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個「選擇受讓人」的功能。這個功能有很高的學習成本，會讓用戶摸不著頭腦。我也是通過百度查詢才了解到這是一個用戶權益功能，它主要是指用戶可以把平時購買火車票獲得的積分轉讓給指定的用戶，積分又可以抵消火車票款，從而實現抵扣。
④選擇好乘車人以后，用戶可以進行選座，就進入了提交訂單、支付費用的環節。
1.1.1.3 支付頁
①訂單生成后，用戶需要在付款限定時間內支付火車票費用，否則訂單將會取消。其次在支付頁，也向用戶推薦相關的保險服務，比如鐵路乘意險，又分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險。
②「購買返程」其實一個非常便捷的功能，但12306設計的層級太深了，而且沒有加上一鍵返回首頁或訂單頁的按鈕，用戶如果想退回到訂單頁或首頁，需要不斷點擊返回，操作路徑實在太長。
體驗陷阱
底部菜單設計了三個按鈕，違反了費茨定律的設計原則。用戶在這個支付頁的主要目標是支付費用，但是菜單欄的三個按鈕權重設計得一樣高，取消訂單和購買返程這兩個按鈕，嚴重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁
當用戶支付成功以后，「支付成功頁」為用戶提供餐飲預訂、出行保險、酒店入住、網絡約車等服務，非常便捷。不過內容的規劃比較亂，體驗稍差。
1.1.1.5 候補下單
「候補下單」是一個非常方便的功能，這個功能主要解決在當前車次沒票的情況幫助乘客自動排隊，如果有其他乘客退票，就自動搶票，非常貼心。這個功能也被譽為黃牛的終結者，幫助乘客自主排隊。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標站點，進入訂單詳情頁后，點擊「變更到站」按鈕，點擊底部的「立即變更到站」就可進入變更頁面。在變更頁面，乘客可以重新輸入目標站點，然后再次進入車票售票頁，選中需要變更的車次以后，進入訂單頁提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗陷阱
當用戶點擊「變更到站」的時候，如果不注意觀察頁面，根本感受不出原來需要在底部菜單欄進行操作，會讓乘客陷入焦躁，不知道下一步從哪里進入。其次在變更到站頁面，下半部分設計了很多快捷入口，比如車站大屏、約車、餐飲特產等，把用戶的注意力分散了。這兩個設計都嚴重了違反了費茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時間，改簽的流程和「變更到站」相似，進入售票頁后，選中需要變更的車次，進入訂單頁提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時以上，退票費為票價5%，24小時至48小時之間為10%，不足24小時為20%。退票費最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經購買的車票，退票流程比較簡單，點擊退票后，進入退票確認頁，點擊確認退票成功。需要注意是，距離開車前8天以上的不收退票費，其他的時段將會根據列車開車前的時間收取手續費，最高20%。
迭代建議
在用戶點擊退票的時候，應該出現彈窗，再次提醒用戶是否確認退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
1.1.5 購票后
當乘客購買車票后，12306的首頁會加入一個行程的版塊，向用戶展示最近的行程詳情，其次一級菜單欄「出行服務」內容也會同步更新。這個設計非常友好，直觀醒目地告訴乘客最近的行程信息，通過外部觸發避免乘客忘記行程。
1.1.5.1 行程頁
這個頁面從上至下包含四個部分，頭部是乘客詳細的車次信息，比如出發時間、經停站、天氣等；中間是車票信息，包含檢票口、座位號、車次和乘車二維碼等信息；接下來按乘客出行前服務、車站/列車服務和到達服務三個場景為乘客推薦其他服務，比如餐飲預定、酒店預定等服務；底部是關于出發站、到達站的天氣預報信息和優惠服務等信息。
細節偵查
行程頁把乘客的出行拆分為3個場景，出行前服務（提供重點客戶預約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規定）、車站/列車服務（提供臨時身份證證明、遺失物品查找、我要訂餐飲和站內導航）和到達服務（遺失物品查找、我要訂酒店、接站約車、旅游景點預定、投訴建議和站內導航），這就是以場景為中心的設計——將設計工作的焦點從“定義系統的操作”轉變到“描述什么人將使用該系統去完成什么任務”。
1.2 飛機票
「飛機票」就是為用戶提供飛機的票務銷售，用戶需要輸入出發站、終點站和出發時間，如果攜帶孩子或者嬰兒，還需要單獨勾選。飛機票同樣支持改簽和退票。
1.2.1 售票頁
售票頁的內容非常簡單，在頭部，用戶可以左右滑動選擇時間，頁面內容以Feed流向用戶展示詳細的航班信息，其次還為用戶提供了其他出行方案參考。底部設計了一個菜單欄，用戶可以進行篩選設置，還可以根據價格高低和出發時間排序。
1.2.2 選擇艙位
選中航班班次以后，進入到「選擇艙位頁」，在這個頁面可以查看到航班的詳細信息，比如航空公司、起飛時間、值機柜臺等。用戶需要選擇艙位等級，比如經濟艙、商務艙和頭等艙，選中后，即可進入預訂流程。
拓展閱讀
為什么同一架飛機同一個經濟艙飛機票價格不一樣？這是因為一個飛機的不同艙位實際上是不同的產品，所以座位有不同的等級，故而價格有了出入。其次他們主要的區別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁
在訂單頁，可以查看到訂單的詳細信息，包括收費說明、退改說明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗陷阱
當乘客勾選了「攜帶兒童或嬰兒」的選項以后，在訂單頁準備支付的時候，系統提示乘客需要返回添加兒童出行人信息。但卻并沒有告訴乘客如何添加，或直接給出對應的功能跳轉鏈接，這讓用戶點擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯原則，不僅在用戶犯錯之前沒有給出提示，犯錯了還不給與指導，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務銷售，用戶輸入出發站、終點站和時間以后，就可進入售票頁。汽車票的訂單流程非常簡單，在選中客車車次以后，添加乘客支付費用后，訂單即可生成。
體驗陷阱
用戶在選擇「達到地」搜索框輸入地名時候，應該提供模糊搜索，比如輸入湖南的地名，應該為用戶提示相關聯的車站。
1.4 空鐵聯運
空鐵聯運，顧名思義就是把飛機和高鐵這兩個產品組合在一起銷售，支持用戶一站式購買“飛機+高鐵”的聯運行程，只需一次購票、一次支付。這個功能的使用場景主要是針對出發地和目的地沒有直飛的航班情況下，為用戶提供飛機+高鐵的轉運方案。這個功能對于乘客來說，支持一站式購買“飛機+高鐵”車票，可以節省購票時間，非常友好。
1.5 鐵水聯運
和空鐵聯運一樣，這也是一個組合產品的銷售，支持用戶一站式購買“高鐵+水運”的聯運行程。使用場景、功能價值以及操作流程和空鐵聯運一樣，我們就不必重復。
1.6 雪具快運
12306還推出了一個雪具快運的服務，為廣大旅客提供多種個性化雪具寄送產品服務，還支持隨車辦理或上門辦理寄送服務，目的是為用戶打造滑雪的新體驗?！秆┚呖爝\」的操作流程也比較簡單，采用預約制，選中服務后，填寫用戶詳細信息，支付成功后，訂單生成。
1.7 小結
作為12306最重要、最核心、最復雜的功能，從這個版塊的內容拆解和實操體驗來看，可以看出12306確實已經解決被譽為全世界最復雜的搶票算法邏輯（筆者通過實操測試，幾乎都能買到票），特別是在春運這種會出現超過上億用戶搶票場景，真可謂非常不容易。不過從用戶體驗來看，非常一般，甚至有很多不合理的設計。
2. 出行
出行是12360結合了乘客在出行的場景中潛在產生的需求設計的服務，有結合車站商家的在線點餐，有結合當地地域特色的旅游服務，還有約車、保險、酒店等服務。這些服務，多數由第三方合作方提供。
2.1 餐廳特產
「餐廳特產」是一個為乘客提供在線點餐的服務，在乘客輸入列車車次以后，就可以進行點餐，支持外賣配送至列車和到店自取兩種形式。這個功能設計得很友好，不僅解決乘客在乘車前的就餐問題，為車站的商家引流，還可以增加平臺的變現方式。
2.2 鐵路游
「鐵路游」是12306結合旅游出行的場景，為乘客推出的一項旅游服務，包含旅游專列、跟團游、周末游和自由行等。這個場景的鏈接其實非常好，但是版塊目前設計得比較簡單，內容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機、打車和租車的服務。這是一個強剛需的需求，用戶在出行的前后都有用車服務。為乘客提供約車服務，不僅能增加變現方式，還能方便乘客出行。通過實操體驗，約車主要由第三方合作方提供服務，比如曹操出行、T3出行等公司，為乘客提供出租車、品質專車和商務車等車型。
2.4 保險
保險分為乘意險和出行保險。鐵路乘意險分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險，在乘客購買鐵路的訂單頁就會向乘客推薦，乘意險價格低，保障項目包含意外身故、傷殘、醫療費用、住院津貼等。出行保險由第三方公司中國太平洋保險提供，主要為乘客提供出行安心保、空鐵聯運險和旅程預定取消險。
2.5 酒店
酒店這個版塊的內容相對夯實，不僅有新客大禮包這樣的用戶權益，還有商旅專區、今夜甩賣、高端酒店這樣的內容。甚至還設計了專門的酒店會員VIP，包含普通會員、銀卡會員、金卡會員、白金卡會員和黑金卡會員，相對其他版塊而言，這個版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉村振興·幫扶推介為主題打造的一個商城，包含了幫扶專區、優選好物、兌換專區、今日特賣等內容，其次還支持企業集采，批量購買。
2.7 小結
從這個版塊，可以看出12360其實結合了用戶吃穿住行的剛需場景設計了對應的服務，有自主運營也有完全依靠第三方提供。不過整體的用戶體驗比較差，事實上可以參考像順豐速運、智聯招聘這些APP，通過內置小程序的形式來設計，完全可以把這些版塊讓第三方單獨設計和維護，同時還能為用戶帶來更好的體驗。
3. 會員
鐵路暢行會員是中國鐵路統一對外會員服務品牌，開通暢行會員不需要花錢，暢行會員主要是用于會員用戶積累乘車積分、用積分兌換車票等，主要包含積分權益，兌換車票、無票候補和會員活動四大會員權益。這個頁面設計得比較簡陋，也沒有太多價值的內容，可以看出12306在用戶運營方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險訂單、酒店訂單、空鐵聯運訂單、計次定期票訂單、約車訂單、出站引導服務訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯運訂單多達12種訂單，從這些訂單類型可以看出12306的服務特別多。
體驗陷阱
這個設計實在太糟糕，嚴重違反了7±2效應。琳瑯滿目，花枝招展，讓用戶在這個頁面幾乎迷失。更糟糕的是，當你有一個非常重要的待支付訂單，這個頁面竟然沒有角標提醒，最終你會因為這個糟糕的設計打亂自己的行程計劃。
內容服務是幫助產品實現用戶留存和運營的版塊，不過從12306的內容設計來看，整個產品的運營手段比較少，所以我把12306現有設計的功能拆分為便捷功能和向導功能。
1. 便捷功能
以下這七個功能，對用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個非常貼心的功能，通過這個功能，可以為用戶提供車站的實時列車信息，非常方便。大屏詳情頁可以拆分為三塊內容，左上角可以切換全國各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內容是當前車站向西的車次信息，包含發車時間、候車室、檢票口和候車狀態等。
1.1.1 車次詳情頁
進入列車的「車次詳情頁」，可以查看當前車次的完整信息，比如檢票狀態、候車室、檢票口和全程?？空尽⑼Ａ粜畔?。在這個頁面，還提供了「關注列車」的功能（關注后并無關注數據，顯得很雞肋），以及直接預訂當前車次的入口。
1.1.2 車站詳情頁
「車站詳情頁」就像一個站點的主頁，為用戶提供完整的車站信息查詢。這個頁面可以拆分為四塊，頭部可以切換其他站點，并提供當前車站的天氣情況以及車站基礎信息。金剛區位8個功能入口，包含車站車次、站內導航、重點旅游、餐飲服務、周邊酒店等。中間是當前車站的起售時間和換乘時間，底部是車站附近周邊的酒店精選。
迭代建議
這個頁面把車站當做一個主體，聚合了一個車站完整的功能，其實挺有創意，但頁面隱藏得很深，如果不去拆解，幾乎很難發現，很是可惜。我認為完全可以提高權重，升級為一級欄目，代替會員，或者和出行欄目進行整合升級。
1.2 站內導航
「站內導航」提供目標車站的LBS導航，對于乘客來說，到達一個陌生的站點，需要清晰的指引，這是一個非常便捷、溫馨的功能，能幫乘客解決很多問題。不過這里有一個莫名其妙的設計，那就是進入這個功能之前，系統提示請搖“8”字校準手機，事實上這里是一個加載動畫，但是畫面和內容卻誤導了用戶，我甚至每次進入都傻乎乎的搖動手機。
1.3 臨時身份證
臨時身份證是一個非常重要的功能，12306現在支持APP在線申請，極大方便了乘客的出行。申請流程也比較簡單，填寫個人信息，驗證審核通過后，就可以生成電子證照使用。每個人每個月有3次申請臨時乘車身份證機會。
1.4 遺失物品
這是一個非常貼心的功能，如果你在乘車的過程中不小心丟失物品，可以通過這個功能登記，輸入你的詳細信息就能登記成功。
1.5 重點旅客
這也是一個非常貼心的功能，主要為老年人、殘疾人服務，通過填入你的信息，列車會根據你的情況提供優先進站、協助乘降等服務。
1.6 愛心版
愛心版就是長輩版，專門為中老年用戶設計的版本，在用戶中心切換后就可進入愛心版。整個版本設計得非常簡潔，操作步驟也比較簡單，對中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設置點擊語言即可切換，整體的版本設計得直接簡潔，用戶體驗不錯。
1.8 小結
從這個版塊可以看出，一個產品如果以用戶為中心去設計，是可以為用戶帶來很大的便捷和愉悅體驗。比如像臨時身份證這樣的功能，過往我們只能提前出發去車站排隊辦理，但如今12306已經把這樣的痛點解決，為用戶節省了大量的時間。
2. 向導功能
以下8個功能，雖然屬于出行向導，不過體驗下來，感覺用戶體驗比較差，很多功能完全無法弄懂它的設計目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個功能的設計，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細信息，包括姓名、身份證號碼和手機，其次需要進行人臉核驗，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁面，用戶點擊退款后，沒有和用戶再次確認就直接退票。整個流程體驗下來，非常糟糕。
體驗陷阱
這個功能和訂單頁的退票感受不出來有何區別？如果用戶要退款，不如直接去訂單頁進行退票，操作步驟簡單，一目了然。其次不支持自動導入用戶的購票信息實在太不方便，需要通過選擇車票購買日期和車次，這個設計實在讓人生氣和憤怒（我在體驗的過程中到了第三步只能退回到訂單頁把購票日期和車次截圖下來，又再次重復前面兩個步驟才到這個步驟）。
2.2 聯系方式
這也是一個看不懂的功能，進入頁面后，需要用戶輸入乘客的詳細信息，但是這個乘客信息和用戶在購買車票時候需要添加到乘客信息有什么不同？更糟糕的是，當你把自己的電話號碼、身份證信息填入后，系統會顯示核驗成功，然而當你再一次進入，頁面內容還是和之前并無區別，你不知道自己是不是還要重新輸一次？
2.3 時刻表
「時刻表」主要為乘客提供查詢列班車次的出發時間和到站信息，但這個功能「車站大屏」幾乎已經包含了，這個功能顯得意義不大。
2.4 查票價
這個功能非常雞肋，因為在火車票的售票詳情頁就可以清晰直觀地查詢到列車票價信息，相反在這個頁面，根本無法看到價格，因為價格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點
這個功能主要為用戶提供全國各地火車票代售點的查詢，不過在互聯網技術發展到今天，火車票代售點越來越少了。從12306采集的信息來看，部分代售點缺少電話等關鍵信息，對用戶來說，比較雞肋。
2.6 起售時間
這個功能為用戶提供各車站每日的起售時間，屬于一個低頻功能，可以解決乘客某些極端場景的需求。不過在我體驗下來，比如通過此功能查詢1月29日的車票，顯示北京站起售時間為10:00，但是在火車售票版塊，我也可以直接購買1月29日的車票，這讓我比較疑惑這個功能的價值在哪里。
2.7 正晚點
「正晚點」同樣是一個雞肋功能，而且還需要輸入準確的車次才能進行查詢，車站大屏已經完美可以取代這個功能。
2.8 列車狀態
「列車狀態」比正晚點都還雞肋，讓人憤怒，因為你需要輸入正確的出發地、到達地和出發時間，對了，還有正確的車次才能進行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結
從這個部分的內容拆解和操作體驗來看，12360的產品設計得不夠細致和貼心，很多功能就像是硬生生塞進去一樣，濫竽充數。其次從他們的產品迭代記錄次數可以看出，近1年更新時間只有5次，也許每一次都是在做加法，沒有想過做減法，所以導致這部分的功能顯得雞肋而且有很大缺陷。
通過對鐵路12306的全面拆解，接下來我將從內容層、功能層、體驗層和視覺層進行總結。
1. 內容層
12306整個產品的內容設計，用一句話總結，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購票、出行的潛在需求場景都設計了對應的服務，比如酒店、約車、點餐、商城等，甚至還有空鐵聯運、鐵水聯運這種多場景的組合售票方式，不過在實際的版塊內容打造中，則顯得比較空洞，體驗一般。這個產品，可以說幾乎沒有創新點，這主要也是由于它是由國有企業設計運營，背景極其復雜，設計目標也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔了被譽為歷史上人口遷移最大的春運的搶票工作，那時候一票難求，春運去12360就像是一場噩夢。不過在經過多年的升級和優化以后，目前12360的購票效率非常高，經過筆者多次的測試和調研，目前通過12360購票已經不再是難事。而且還設計了候補搶票這樣的功能，幫助用戶解決買票痛點，可謂非常貼心、友好。
3. 體驗層
鐵路12306的用戶體驗，非常一般，我在這次的產品拆解中至少偵查出了20條體驗陷阱，這些陷阱都會給用戶帶來極其糟糕和憤怒的體驗。比如讓我像個傻瓜搖動手機的站內導航載入頁，這完全就是把用戶當成傻子一樣看待，其次還有一堆數不清的雞肋功能，對用戶的操作體驗造成了嚴重的干擾。我甚至認為愛心版和英文版比標準版使用起來更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個UI設計師，在拆解12306的產品過程中，我對整個產品的設計感到絕望。首先，沒有做到統一性，整個產品毫無設計規范，比如卡片的圓角、品牌色、版塊間距根本不統一，這樣的視覺體驗一眼望去就非常糟糕；其次，圖標、活動圖、櫥窗圖以及詳情頁的設計毫無美感，滿滿的山寨APP風格，特別是訂單頁的ICON，花花綠綠、琳瑯滿目，連最基礎的統一都沒有做到。
作為一款國民級用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學室友，每年春運開啟之前就為了回家的火車票犯愁，不僅要去遙遠的火車站排隊，很多時候還可能空手而回，那便是最初對12306的記憶。
如今十年過去了，12306解決了億萬人的出行搶票需求，讓我們在春運的路上，可以輕松購買一張回家的票。但下一個十年，我更希望12360的產品團隊，可以重視用戶體驗設計，讓我們不再掉入那些體驗陷阱。
作者：設計大偵探 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
同時也方便用戶再次消費某個內容時，減少再次記憶和查找的成本。比如我喜歡做菜，但是年紀大了記性不好，每次做一道菜我都會打開我的某音收藏夾里找到視頻教程，這個老小子的視頻教出來的菜味道真不錯。
收藏夾要解決用戶什么問題
兩個關鍵詞：1.管理 2.分類
管理，就是我們所說的增刪改查?！霸觥?，我們需要在用戶瀏覽信息時給該信息提供收藏功能，這里要注意的是收藏信息的顆粒度，什么信息可以收藏，一段話？一篇文章？一個用戶發布的完整內容？還是一張圖片？產品對收藏最小單位的定義要明確，因為會影響到對收藏內容的分類。例如微信可收藏的最小單位很多，有鏈接（包含文章）、文件、圖片/視頻、音樂、語音、聊天記錄、筆記、位置，而像餓了么只能關注店鋪，對任何菜品、用戶評論等等都無法進行收藏。b站你可以收藏視頻、漫畫、商品，但是不能他人的動態。
刪沒什么好說的，再來說一下改和查。因為他倆會涉及到收藏的流程。我們知道不同產品的收藏流程是不同的，例如馬蜂窩、閑魚等產品，用戶收藏內容后只給出收藏成功的toast/提示欄提示，并告知收藏到了哪里；
而騰訊視頻、抖音、攜程則是當用戶進行收藏后除了給出成功提示還會給出收藏列表的入口；
最后，像知乎、豆瓣在點擊收藏后直接給出滑出操作框讓用戶選擇收藏夾或創建收藏夾以及是否要轉發。
3種流程的區別
前兩種我認為區別并不大，是否要在提示框里給用戶進入收藏列表的入口，更多還是取決于產品是否想讓用戶離開這個場景，還是讓用戶繼續瀏覽。之前我們提到過閉環，但是閉環一般針對任務而言，但是收藏嚴格來說不算是“任務”，而是用戶的一種“行為”，感知起來區別還是很大的，因為任務是有明確目標的，比如給用戶安排一個任務，讓他對某個商品進行分類收藏，那么用戶會根據這個分類收藏的目標去進行操作，任務結束后給用戶相關的引導和出口。但是在用戶自然的瀏覽場景中，對內容的收藏并沒有具體目標，所以要不要給用戶在點擊收藏后引導進入收藏列表要具體情況具體分析。
其次是知乎、豆瓣，在用戶點擊收藏后給予是否要創建收藏夾的功能，相比于前兩種，對信息內容的管理，更加明顯了。首先為什么他們和前兩種不同呢，像知乎用戶是有KOL效應的，個人的收藏夾可以公開，他人可以查看他人的收藏夾，有點類似于花瓣的畫板，同時對于這類知識、內容類的應用，對于分類的要求和需求更高更多，本身知識的維度就很多，顆粒度很小，所以在用戶進行收藏行為時主動提醒用戶可以創建收藏夾。
那淘寶是怎么做的，它在用戶收藏的時候也給出一個菜單，用戶可以選擇收入到某個收藏夾，也可以默認不放入，還可以去創建并放入，這就是更個性化了。
但是咱們說前兩種沒有給在收藏時給創建功能的就不個性化了嗎？也不是，個性化也要根據產品定位和用戶需求來的，比如馬蜂窩的一些機票車票、旅游產品，做一個收藏夾創建，好像沒必要，因為可收藏的類型不多，個性化標簽也不明顯，顯然是沒必要的。騰訊視頻、閑魚顯然也是。那我們再來聊一個細節。
知乎在點擊收藏某個回答的時候，頁面會喚起收藏模塊，讓用戶選擇你要收藏到哪里，但這里的體驗不是很好，因為用戶想要收藏某個內容必須先選擇收藏夾，如果不選擇則無法收藏成功？
無論你當前是否創建了收藏夾，都必須選擇或點擊完成，如果有創建過，那就需要經歷：1.點擊收藏圖標 2.點擊要收入的收藏夾 3.點擊完成，如果沒有創建過那么默認會創建一個收藏夾。而淘寶則不是，無論你是否創建收藏夾，只要點擊收藏圖表那就已經收藏成功，在這個前提下，你可以選擇是否要收入到某個收藏夾還是新創建一個。
所以知乎、豆瓣的收藏單位大多以回答、帖子為主，這樣的內容系統無法幫助生成標簽，所以需要用戶自己創建分類，在收藏時給予創建功能是合理的，但我認為知乎這樣的設計還是不夠人性化，但是站在業務角度看，就是想引導用戶去創建分類，也是能理解的，雖然在體驗和效率上并不是最優。
創建、分類、搜索都是幫助用戶再次進入收藏空間時能夠更好的查找想要的內容。同時不同產品會有不同的篩選標簽，比如微信閱讀，收藏其實就是書架，哦，應該說，書架就是收藏。篩選維度分為：更新、進度、購買、分類。所以我們在設計收藏功能的時候，要根據用戶的篩選場景和內容來制定合理的篩選維度。
收藏和點贊還有加入購物車的區別
收藏的屬性就是收納、管理和分類，但是和點贊、購物車不同，點贊意味著認同，具有社交屬性，同時也為了幫助產品記錄用戶個偏好用作研究，而收藏則是用戶想對該內容進行收集，比如我正在準備一個辯論賽，我抽了一個反方觀點，雖然我本身并不喜歡這個觀點，但是為了準備辯論的素材和題目我會對這個內容進行收藏，但不會點贊，雖然收藏大部分時候也有對內容的認可，但不完全是。所以收藏更多的是用戶個人對信息的單方面管理，點贊則一個即時互動。
收藏和購物車也是一樣的，購物車承載的是更多消費、商品營銷的表達、算價以及湊單活動，購物車和直接消費強關聯，而收藏夾多關注與對商品的存儲管理、搜索查找，雖然也有一部分需求重合，但用處、和場景還是有很大區別的。
最后，總結一下，設計收藏夾時，我們首先得根據產品定位和用戶需求以及內容的維度來選擇好收藏夾的顆粒度或最小單位，其次，根據業務或用戶需求設定好收藏夾的收藏邏輯和流程，最后，做好用戶對收藏內容的查找以及分類篩選的體驗。
作者：應駿 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本次針對百度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。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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
微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態，緩解無聊的等待，也為即將進行的語音聊天提供了話題：
作者：元堯
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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）。
交互周期包括執行過程和評估過程，前者是行動所需信息差，后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距，使產品變得直觀。現在讓我們看看微交互的基礎結構，了解它們如何幫助消除信息差。
微交互之所以強大，不僅僅是因為它們的細微交互差別或迷你尺寸，還因為它們構建的方式。微交互的結構包括四個部分（圖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），說表單填寫中存在錯誤。這里的觸發器是提交按鈕，規則是顯示一個對話框，反饋是靜態文本——“有填寫有誤”。
這里的微交互形式是錯誤的，如果填寫有誤，提示應該在出錯點附近。而且這里的反饋是糟糕的靜態文本，對用戶沒有任何用處，因為它沒有說明出錯的位置和類型。因此，微交互的使用和場景真的很重要。
縱觀全文，我們探討了什么是微交互，以及如何創建符合交互模型的微交互來消除執行和評估之間的差距。接下來，我們研究了動態審美體驗，以及我們如何在產品的微觀層面上用微交互創造美好體驗。
設計師有幾種方法來創建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個產品看成是一個微交互，如果你想增加另一個功能，那么就把它看成是另一個只包含一個微交互的產品。
我相信谷歌支付是以這種方式創建的，因為它是從支付開始，且只專注于支付，后來才引入了獎勵和其他內容。
微交互有助于建立一個品牌標志和提升用戶體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。
作者：三分設
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你有沒有注意過，App底部的圖標是如何變成選中的？大多數產品是將靜態圖標替換（硬切過渡），來完成狀態切換。
當我看完上百個動態后，找到了更有趣的方式...
02 App底部導航構成
通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產品只使用圖標或文字），但設計師在進行動態設計時則是針對這3部分。
03 Tab Bar動態類型
動態效果由弱到強，視覺層級由低到高依次排序：圖標動態 — 裝飾元素動態 — 底板卡片動態。（根據本文案例效果來排序，但效果不同會有所差異）
▍圖標動態?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調整百分百參數來控制線條生長。
但只是單色修剪，看起來很單調。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調整不同顏色圖標的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉等基礎屬性則是更好的選擇。
通用的方法是調整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調整圓的縮放即可。
在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。
對于這類圖標，只需要參考它們的物理狀態[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調整基礎屬性，便能制作出細節豐富的出場動畫。
（物理狀態：該物體在現實場景下的狀態，上圖獎杯真實世界狀態通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態應該是掛在墻上，所有出場方向是從上到下）
當然如果去掉高光和投影，在制作一些動態時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形，這樣便能營造出3d旋轉的錯覺。
對于結構復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業價值不足，實現成本高，所以這里也只是提供一些創意練習思路）
在一些年輕化產品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現心電圖樣式，讓人眼前一亮。
通過動態效果，甚至能體現出產品行業屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產品嗎？
又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產品。
通過調整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態下的圖標出現。
假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態?
這類動態少見的原因在于其動態效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數。
這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調整基礎屬性。
此方案目前還沒有在其他產品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發現。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創意的產生，并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創意。
最后再說兩句：
每個產品都有自己的調性和目標用戶，動態效果也有強有弱。好的動態應該是能與其進行匹配，而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態，并不代表只能這樣用。動態效果類型遠遠不止這些，而以上只是最常見的動態屬性組合方式，所以請不要局限你的想法。
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在產品設計中，當有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物，相比于靜態內容，我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據閱讀習慣從上到下，從左到右，依次查看其他內容。（大致如下圖）
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態，便能使其脫穎而出，這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時，設計師們都會根據功能重要程度，來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素（通常這類形式只出現一次，當用戶點擊后就會消失）。當然，也有將上述點綴元素動態處理的。如果入口是圖標，甚至可以為圖標制作動畫，這在很多電商產品的品類區經?？梢钥吹?。
動態處理的形式，比原本的靜態更容易引起用戶對元素的注意力（與動態方式有關），甚至傳遞某種情緒。由于是循環播放的動畫，因此可以持續吸引用戶注意力。
ps：據說，每當頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發窩了[Doge]。
▍誘導用戶操作 ?
動態引導還常常被設計師用來強調重要內容（有可能被產品、運營拿刀架脖子），來達成某些數據指標，通過利用動態誘導用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。
這些都能充分引起用戶注意，甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進行引導，才能被用戶感知與使用。
▍操作教學指引 ?
講到引導，還必須要提的是手勢引導，通過動態直觀展示不同手勢的作用，提示用戶如何與產品進行交互。
這在游戲教學中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。
在產品交互設計中，如果使用到一些新穎的交互方式，這類引導可以大幅降低用戶學習成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態敘述的直觀性，使得我們可以減少對復雜信息進行大量文字描述。通過動態設計，我們可以創建視覺故事，這有助于將復雜信息以更簡單、清晰的方式進行傳遞，從而幫助用戶快速完成任務。
也因此，在一些含有復雜操作的彈窗中，漸漸開始應用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發。
當然有特例，例如：
在 App Store 每次下載應用進行驗證時（面容解鎖的情況下），系統會通過動態提醒用戶電源鍵位置，并告知用戶需要雙擊進行人臉識別。
在掃碼時，弱光場景下出現的手電筒，通過動態引起用戶注意，指引用戶使用。
以及作為動態演示，幫助用戶理解如何使用手掌滑動截屏
如何進行NFC感應等等..
動態引導像是設計師用來控制我們眼睛的法寶，有的人用它改善產品體驗，有的人用它提升商業轉化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見...
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn