注：閱讀此文章大約需要30分鐘
先給大家看兩個案例：大家都很熟悉的，自動感應測溫，不需要人為操控
第二個案例則是nest智能恒溫器，比起傳統的需要人為的去手動觸發調節溫度，他能夠實時感知家里的溫度，基于不同的場景與客戶習慣去調節溫度，比起傳統模式便捷了不少
那么從這兩個案例中，大家可以發現，傳統人機交互與下一代人機交互是有著本質區別的，傳統人機交互一直以來都是輸入輸出的被動交互邏輯，什么是被動交互呢，就是必須有用戶向機器發送指令，機器接收指令，執行后將結果反饋給用戶。而新的交互模式，則是用戶不需要做任何指令輸入，機器自動感知當前的場景，來理解你的意圖是什么，來去主動幫你完成任務。那么這是如何實現的呢，主要是依靠傳感器，算法等實現的。這也說明了我們的生活開始下一代人機交互的新時代。
這也就是今天的主題，那么今天，我會詳細講解，把這個課題講透。包括什么是智能感知交互，他的底層框架模型是怎樣的，以及結合案例是講解他是如何落地使用的，
回顧整個人機交互的發展史，經過了不同的階段，從命令行界面，也就是通過手柄，遙控等進行交互，再然后是圖形用戶界面，也就是觸摸屏等交互，再到語音交互，圖像識別等等
人們對于人機交互也從依賴于人去手動觸發，再到趨于自然和本能，隨著技術的發展，我們也迎來的技能感知交互的新時代
在這里也對智能感知交互做了初步定義：是以人為中心，基于傳感器、大數據及AI技術，自動感知用戶情景，理解用戶意圖，主動響應用戶需求，真正提升人機交互效率
那么智能感知交互也有幾個特征，更加的趨于自然，輸入輸出方式更加無感知，智能
接下來是最核心的重點，智能感知交互的框架是怎么樣的，他的底層邏輯是怎樣運行的，這也是整套理論知識的基石和核心。
智能感知交互模型主要分為三層：
那么以剛開頭的無接觸測溫門為例，在感知層主要通過紅外傳感器去感知人的體溫，在決策層則是當遇到發燒的顧客則需要進行干預，在表達層，則會通過音效、光效做出主動的預警的設計表達。
那么我們接下來詳細的看下整個框架模型，那么，感知層又細分為三大模塊：
第一塊為【用戶感知】，第二塊為【場景感知】，第三塊為【行為感知】。 那我這里給他串聯起來，簡單來說就是感知用戶是誰，在什么楊的場景下，做了什么樣的行為。那么決策層則細分為兩大塊，也就是無感知之后怎么做決策，理解用戶的意圖是什么，。那么第二則是做出決策后怎么去做設計表達和輸出呢，受到那些變量因素的影響，這是由設計表達影響因子模型決定的。那么最后一層則是正式做出設計表達，目前表達的介質主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架，接下來我會詳細的剖析每一層
先講第一層，感知層，就是感知技術，這里在進一步細分為三個板塊，用戶感知，場景感知，行為感知，用戶感知為，用戶性別、地域、年齡等等特征，場景感知則是什么時間、什么地點，當前環境、溫度等等，行為感知則是去感知，你用了什么工具，對什么對象，做了什么操作行為等等。針對不同的業務會有不同的針對感知，例如開頭案例中的體溫測量，他對溫度這一屬性重點感知。大家這里也能想到，世間萬物都可感知，為了方便后續的統計和分析，需要進行加工處理，需要將當前的感知線上化和數據化，同時會將這些數據進行標簽化的處理，那么如何去處理這些數據呢，這里主要分成三類：
簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數據。舉個例子，比如說登錄網站，那么我們可以獲取用戶ID，從溫度傳感器，我們可以直接獲得溫度。這些都是統計類數據
簡單來說就是基于一定的規則產生，舉個例子，比如我們規定用戶與設備之間的距離為0~40cm為近距離，，工人每小時生產產品80件定義為熟練工，這些都定義為規則類數據
他是通過機器學習挖掘產生，根據相關屬性進行預測和判斷。比如淘寶上對男女的劃分，他通過你買的商品去判斷你是男生還是女生，你的興趣愛好是什么
那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型，決策層主要有兩部分，現在講述第一部分，也就是整體框架中紅色圈住部分，針對【意圖識別決策模型】進行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么，這里也抽象為四大類決策方向:行為干預、推送建議、意圖預判、自動決策
簡單來說就是我感知到當前的行為是異常、錯誤的，會做出主動預警進行干預。舉個例子，比如圖中的場景，通過攝像頭的圖像識別檢測到工人的操作不規范，會通過光效和音效的預警來進行行為干預
是基于你的愛好去推送不同的內容
感知之后去預判，你接下來會做什么。比如上圖，當系統之前感知到用戶粘貼了地址和電話信息，那么系統就預判你是不是要寄快遞
比如陀螺儀識別用戶將設備傾斜了多少度，將屏幕做自動關屏
那么前面講述的是決策層的第一大板塊，那么現在講第二板塊，也就是設計表達影響因子模型。簡單來說，就是我已經決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢
那么這里也抽象為三大類變量因子，用戶感官因子，環境因子，設備因子。
比如在【用戶感官因子】上，會去分析，用戶當前的認知負荷是什么樣的，如果當前是在黑暗的情況下，用戶的視覺負荷比較大的話，那么設計表達是不是就應該以聽覺和觸覺為主。同時我們還會去分析用戶是運動狀態還是靜止狀態，如果是運動狀態那么在設計的時候是不是需要考慮，字體是不是需要更大，方便用戶獲取信息等等案例。
【環境因子】就是環境光線的強弱，噪聲的大小等等，比如設計的時候，是在室外，光線比較強的環境，那么設計的界面對比度是不是就得更強。
【設備因子】就是傳統設計當中，他的輸入通道是物理按鍵，還是觸屏，還是語音，手勢這些，以及輸出通道，有沒有喇叭，指示燈等等。這些都會影響我們采用怎樣的方式去進行設計表達。
那么第三層就是我們最熟悉的表達層，也就是具體的交互執行。常用的表達方式主要有界面，音效，光效，觸覺，動作這幾類，這些大家都很熟悉，這里就不做詳細的講解。
那智能感知交互依賴的技術和條件也是比較多的，所以他是分企業分階段發展的。那么這里主要分為5個等級。從無智能到完全智能，那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機器自動感知部分情景，再加上人的輔助輸入，讓系統完成任務。
那么前面說這些都是偏理論偏框架類的，那么下面我會結合案例具體講解智能感知交互是怎樣去落地使用的
那么當有了模型框架后怎樣應用呢，首先，離不開設計流程，和傳統設計流程類似，智能感知交互的設計流程也為：【發現一個機會點，制定對應的設計策略，然后定義具體的設計表達，持續監測進行迭代和優化?！窟@樣構成，那么大家就會想了，那我們的不同之處在哪呢？這其實離不開設計對于技術的洞察力，我們設計對于技術的了解和應用其實貫穿在全流程中。
比如說，在我們在做UED設計中，發現痛點時，我們可以通過問卷調研，訪談調研獲得用戶的主觀數據，也可以通過埋點檢測獲得用戶的行為數據，而我們在優化的時候，除了從設計側出發的體驗優化，那是不是可以不給自己設立邊界，比如從技術出發，讓算法自身不斷學習，讓準確率有所提升。帶著這樣的不同，我來舉一個案例。
這塊沙琪瑪出生在一個非常傳統的食品供應鏈公司，她從出生出來到被運送到客戶手中，會經過4個空間，12個節點。而在這層層的校驗中，當我們想知道沙琪瑪的質量，生產日期，和他的位置，需要的是員工的手動介入和對于條形碼的掃描，
但我想更精細化的知道沙琪瑪具體的信息來進行更好的數字化管理，那就變得非常困難。所以我們在想，怎么可以讓對沙琪瑪的管理，變得更聰明一些呢，那改變這傳統模式的機會，就來自于識別技術的發展。
那么現在已經運用起來這樣的技術了，一些商場的衣服和商品上都會有RFID標簽，比如優衣庫，在進行結賬時只要將多件商品投送到結賬框中，就可以一次性識別多個商品完成結賬，這就是RFID的優勢，他可以完成一對多的批量識別，并且具有更大的識別范圍，識別過程中不需要設備和條碼直接對視。
那我們就要想了，如果每個沙琪瑪都有一個RFID碼，那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術優勢，我們來回顧整個操作流程，我們發現，在圍繞沙琪瑪的一層一層校驗中，已我剛剛提到的【行為干預、意圖預測、自動決策和推送建議】四個角度來找到更智能的優化點，比如說，當沙琪瑪從車間生產出來，即將被打包的時候，我們如果發現了一個異常，可以怎么處理呢，大家覺得~~~~我們是不是可以進行一個行為干預，來將這個異常及時的告知給用戶，又或者，我們可以進行一個自動決策 ，我們通過自動化設備，來吧出現異常的商品進行自動剔除。
那由于整個鏈路太長，所以我現在呢，以沙琪瑪離開倉庫的最后一個校驗環節為例，來做展開
這個時候，用戶拖著托盤，來到月臺，準備將沙琪瑪裝上卡車，這個時候，如果沙琪瑪上錯了車，那我們就非常難以將他追溯回來了。所以這個時候，用戶的意圖是非常清晰的，那就是及時的阻止這個異常的商品流出倉庫。但我們知道了，那下一步呢，就是讓機器也知道這一個意圖，其實在這個場景下非常簡單，無非是，某人在某場景下做出了某個行為，而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份，
我們也可以通過設備上在運行的秘鑰來獲得當前的實操場景是什么，
還能通過RFID的天線，他所識別到的信號逐漸增強，來發現，啊確實有一個用戶，在拖著商品逐漸靠近，那以上這三個條件，就可以觸發我們對于托盤上的貨物的識別來判斷，他上的車是不是對的呢，數量是不是準確呢，一旦發現異常，我們就需要將信號及時的傳給用戶
那下面問題就來了，我們該怎么表現這個異常，剛才也提到，我們設計的表達是多種多樣的，有界面內的，界面外的，環境空間的。而用戶接收的渠道卻非常的單一，無非是，視覺、聽覺、觸覺、甚至以后可能會有嗅覺。
所以我們在定義一個合適的表達方案的時候，就需要考慮到當下用戶、環境、設備的影響因素，那在我們的場景中，我們應該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢
這就需要我們清晰的了解，在這個場景下，每一個感官通道被占用的情況，這樣我們才能選擇其中占據優勢的那些來做出我們的設計表達
為此，我們總結過往一些學術研究，來將用戶、環境、設備他具體的影響程度進行數值化。比如對于用戶的限制，我們采用VACP的工作負荷模型來量化用戶的各個通道上認知資源被占用的程度。而對于用戶自身的能力限制，我們通過劍橋大學提出的一個無障礙公式，來計算用戶自身能力限制的程度，同樣，我們綜合國內一些常見的標準，來將環境因素，例如，亮度、噪聲、和設備自身的表達能力進行等級的劃分。那大家就要好奇了，那要數值化，那數值化靠譜嗎，我們怎么做這個數值化呢？
那我以VACP工作負荷模型來做一個簡單的展開，他起源與1984年，對于飛行員在駕駛飛機的一個觀察和研究。研究者將他劃分為視覺、聽覺、認知、運動四個維度。同時呢，對于不同難度系數的任務，劃分了不同對資源程度占用不同的等級，這樣，我們就可以像查閱字典一樣，來根據我們需要的任務表現，找到這個通道上對應具體的占用程度
回到我們剛才的場景，當用戶拖著托盤靠近的時候，他需要時刻注意眼前的道路，避免和其他物品碰撞，這個時候，視覺上他對物體的追蹤和跟隨，這個時候呢，在視覺上通道上他會有77%的占用情況
而聽覺上，雖然他不需要聲音來辨別道路，但在這個過程中，有可能有小組長會叫他說，唉，你過來以下，那這樣我們就需要做一個聲音的辨認，那在聽覺通道上，可能會有14%的占用程度
而在月臺上，時刻會有運輸與發動機的聲音，這個大約在70分貝的噪聲，會給用戶在聽覺上有個二級的干擾作用
綜合來看，首先，我們對用戶在觸覺上的反饋通道就被阻斷了，因為設備端離用戶實在太遠了，無法進行一個觸覺上的反饋，
而剩下的視覺通道已經被高度占用了，他的有效性是較為有限的。而在聽覺上，雖然他的占用程度沒這么高，但他收到了環境噪聲的二級干擾，所以我們單一的通過視覺或者聽覺都不足以達到一個有效的反饋作用。
好在現在用戶的認知還是比較充沛的，所以呢，我們可以通過視覺、聽覺、認知三個通道上的整合，來做一個比較有效的反饋。
也就是，當用戶靠近時，首先，她會在聽覺上聽到蜂鳴器的報警，
然后呢，他的注意力就被抓到了燈光的閃爍模式上。，他從他的記憶中記得的燈光的三種閃爍模式上，辨識到了這個閃爍意味著說：這個閃爍，標識著我現在拉得沙琪瑪品類有問題，那我要好好的檢查一下。那我們的反饋呢，就成功的達成了
那除了剛剛提到的，多感官的反饋，我們在對于界面的設計上，也考慮到了多因素的影響
那第一個就是大家相當熟悉的視覺距離，在我們的生活場景中，，有手持設備的近視距，也有推動設備的中視距，還有推動大型設備上走向通道門的，遠達130厘米的遠視距
那面對這樣不同的視覺距離，和用戶靜態或者動態的移動狀態，我們推導了計算文字高度和文字字號的公式，
然后計算這樣的視覺距離和運動速度的不同，來對關鍵信息做突出化的展示，保證用戶在看到關鍵信息時他的清晰度。那大家可以想想，除了視覺的距離以外，還有什么因素會影響到視覺的表達呢，
那就是環境的亮度。在我們的場景內，盡管有部分都是在室內發生，但也有部分是在室外發生，就比如我們舉的沙琪瑪的例子，他是在月臺發生的場景，那這個時候，就需要我們在色彩的設計上，去考慮到環境亮度的影響，
我們基于 W3C,對于色彩對比度的分析，然后定義了我們的配色方案，在對于室外的環境，我們會采用色彩對比度較高的配色方案，而到了室內呢，我們會動態的將色彩對比度降低，避免用戶長時間注視對比度高的界面，造成視覺疲勞
那既然有設計方案，那自然就有效果評估，
我們將智能感知設計的評估，分為主觀和客觀兩個部分，主觀就是大家比較熟悉的，比如我們感知的這個情景是否準確，能不能夠幫助用戶提高效率呢，整個感受是不是愉悅的，是不是有效的，那么這一塊我們是通過李克特5點量表問卷，和SAM問卷來進行度量，另外一部分則是客觀部分，這一部分我們通過對于算法模型的評估指標來進行度量，比如他的準確率，召回率，精準率來評估他的算法是否可以不斷學習和進步。
那智能感知交互的分享就到這里，這里我衍生一下，從剛才的案例中，主要都是實操類的，那么我們是不是可以做個衍生，將智能感知設計的思路方法也延用到產品設計中呢，比如現在的抖音，頭條，他們去分析我們的喜好，主動的替我們進行篩選，于是在使用產品的時候，我們可以說是被動的看內容，被動的看到商品被吸引然后下單。那么B端產品也可以以此類推，傳統模式下，是人登錄后臺，主動去找任務，那么在這里，我們是否可以換個思路，任務主動來找人，通過感知到用戶的身份，我們來主動檢測，他所關注的任務的進度，并且在這個任務落后的時候，主動發出預警和提示，真正的提升用戶的管理效率。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家有沒有遇到這樣的問題，當你面對非常復雜的信息時，在進行信息整理設計時，往往會陷入比較糾結的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質上是信息組織的一種方式，通過信息的放大縮小和對應的位置，能夠將復雜的信息分為不同的模塊呈現在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優秀的信息層級就像右圖一樣能夠讓我們快速且準確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰傳遞業務價值，合理的信息層級劃分也是提高產品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：
經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，本質上都存在一個簡單的邏輯：那些優秀的頁面設計都把主內容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復雜，造成用戶獲取信息效率變低，而通過層級的轉換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內容層級控制在三層左右。且這三層內有比較明顯的對比關系。
有同學看到這肯定要問了，這個道理我也懂啊，可是在實際業務中大部分時間拿到的信息太多，根本做不到保持在三層以內。別急，這篇文章的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優秀頁面，在本身的信息層級上可能都非常復雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。
源頭降低的本質就是判斷我們當前所要呈現的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當你在進行打車的時候，當你輸入目的地之前，一切其他的信息都無需呈現。當你輸入目的地后，車輛的相關信息和價格才會進行呈現，當你打車后，司機的相關信息才會進行呈現。這些都是按照用戶的使用場景來進行對應的呈現。
2.當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現。
當你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當你瀏覽新聞的時候，標題永遠是最關注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質是通過我們對信息進行排列上的調整，來將多余的層級融入到三層以內。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息打散，從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區分呢，VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：
通過這三種場景的區別，我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。
▍樹形結構
對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。
▍表格結構
對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現，從而減少當前頁面的復雜度。
▍選項卡
選項卡更適合與同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。
由于組件這一塊大家的認知已經比較全了，在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。
通過改變布局的方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，比如上述的兩欄結構，甚至三欄結構，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產品設計中將標題與tab利用分割排列在一起，從而變為同一層級，這個時候就不會出現四層的復雜結構，頁面還是保持三層結構，通過這種方式有效降低了頁面的復雜度。
信息融入這個方法，當我們在進行B端布局時，用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化在三層以內，從而讓我們最終的頁面呈現不會太過復雜，更容易被用戶理解。但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結了目前在進行信息層級排布過程中比較糾結的一些細節點，也分享給大家。希望對遇到相同問題的同學一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經過對比過后明顯發現右邊的圖整體相比于左側會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側因為標題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現中顯得更整齊。
這是我平時在做設計呈現時也會糾結的一個問題。當你想用卡片來呈現視覺時，你有沒有糾結過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結，但在去搜索查閱時，發現目前其實關于這塊相關的資料，因此在大部分情況下都是由設計師自行決定的。但經過線上產品的調研發現，這塊內容其實也包含著一定的規則：
1.取決于卡片的數量
對于卡片少的其實可以用色塊來呈現，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發現卡片過多時線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。右側整體的呈現行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調，可以看到下圖的例子，右側的頁面會相對更穩重一點。
在進行色塊時，時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢，我們應該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。
2.而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。
所以我們可以根據當前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結。
本期的內容到這里就結束了。關于這期的信息層級內容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現上顯得不復雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內容再回顧，當我們遇見復雜的信息層級時，需要分三步：
1.明確當前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細節
以上是本文關于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。
原文地址：站酷
作者：蒙東東
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
不太愛看書，看了老忘，就很容易失去信心，垂頭喪氣、一蹶不振。
比較喜歡做圖，把信息間的邏輯以圖示化的方式表現出來，能加強理解，后期回顧也會比較舒心。
所以就有了這個系列——閱讀圖示化。
可能會出得很慢，畫圖比較費時間，想著怎么展示信息間的邏輯也很費時間。
基本是按著小節一塊內容對應單圖/多圖。
基本一張圖是一個完整的知識點。
什么是“有駕”
【有駕】是百度旗下的汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。
現狀分析
有駕品牌在孵化初期，重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強化用戶的感知。
但是隨著品牌持續運營進入新的階段，我們發現現有的設計無法滿足后續的運營訴求了，主要體現在：
品牌logo：不能體現汽車的行業屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時下潮流的年輕配色體系。
品牌活動：品牌關聯度弱，活動維度單一。
項目概述
因此，我們重新梳理有駕的品牌定位與調性，借助本次品牌升級，打造有駕差異化風格，形成獨有的視覺印記。
因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知，在原有基礎上進行品牌標識的探索及應用，以強化品牌感知，提升品牌的競爭力，整合業務資源做心智觸達。
前期分析
前期我們對汽車垂類的競品進行了一輪調研，并且結合有駕的用戶群里，尋找有駕品牌的差異點。
有駕用戶群體年輕化為主，普遍具有高學歷，集中在新一線二線城市。
通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后，我們確定了有駕品牌設計的四個核心關鍵詞：年輕、科技、未來、專業。
建立體系
在明確設計方向后，我們梳理了線上線下的所有品牌觸點，結合前期的調研結論，匯總出了有駕設計系統的完整框架，以確保品牌設計的完整性和靈活適用性。
設計落地
基于前期分析洞察結論，我們在繼承圓形和車形的基礎上，對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入，簡化圖形形態，嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。
相對于升級前，新版的logo加入汽車元素，解決升級前logo的行業屬性不明確的問題，讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。
符號提煉
確定品牌logo后，為了確保品牌能夠更好的拓展應用，進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型，造型偏向輪胎；在不破壞原有型的基礎上，加入一些折角的質感的變化，使圖形變化更加豐富，更有識別度。
設計語言
為了更好的觸達到各業務場景，所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結合有駕的年輕化，科技感的設計目標，探索出以下三種質感呈現：
符號拓展
在提取的形狀基礎上進行變形，增加折疊細節。在大事件活動，海報等場景使用，增加品牌關聯度。
設計字體
結合全新的品牌定位，我們也優化了有駕的品牌字體，從細節出透出有駕的品牌感知。
品牌手冊
新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。
目前我們也對現有的品牌手冊進行拓展和完善，同步到業務方，以便更好的保證各業務場景觸點下品牌的認知和統一，達到提質增效的目的。
品牌落地
除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中，讓有駕品牌形象更加立體多元。
結語
目前有駕品牌升級已經取得階段性成果，沉淀出更加完善的品牌資產，不僅提升設計效率保證全鏈路的品牌曝光，也為業務規?；蛳禄A。之后我們也將不斷完善和擴充品牌資產，將設計成果不斷落地到業務中，細化業務目標并與設計目標緊密結合，多維度助力業務的高速發展。
從事體驗設計這么多年，經歷過多款B端和C端產品的體驗設計，有了一定的個人感悟。由于兩者用戶群體、使用場景、產品定位等方面的不同，讓兩者的體驗設計策略也存在較大的差異。但是無論是B端還是C端產品，有一個共同的體驗目標就是“提升用戶的操作效率”。甚至在一定程度上，C端產品比B端產品要求更高。
為什么這么說呢？
因為C端產品面臨激烈的市場競爭，如果效率方面存在明顯的不足，用戶很容易就轉向其他平臺了。而B端產品一旦部署上線，不菲的產品價格，平臺切換的風險，數據遷移的成本等因素，很容易形成產品的護城河。雖然用戶內心已是萬馬奔騰，但是依舊要自己摸索嘗試、查看文檔、或者請教別人來完成工作任務。
今天我們了解下C端產品用戶行為路徑中提升效率的4種方法。
用戶行為探知，就是根據用戶的操作行為或特定的時間，系統給出相應的推薦操作。
最常見的就是截屏操作產生的行為引導，目前主流的產品應用都會做出分享功能提示。在淘寶中，由于商品鏈接無法在微信中直接分享，所以淘寶對可能的用戶分享行為都進行了設計優化。
例如用戶在商品頁面截屏時，系統會自動復制淘口令，既方便用戶分享給好友，又方便了對方快速獲取商品信息，避免了圖片分享過程中的復雜操作。同樣微信在用戶發信息時，會自動提示是否要發送截圖內容，減少了用戶選擇圖片等操作流程，提升了用戶效率。
（左圖：淘寶截屏提示 右圖：微信提示截屏信息）
高德地圖在特定時間段，開啟導航時會默認給出“上班路線”的按鈕，方便用戶快速導航。此外還在地址中增加了“常搜”標簽，根據當前地址優先顯示常搜的地址，幫助用戶快速完成導航設定。
用戶行為引導，就是通過用戶行為流程分析，在用戶路徑中增加相關功能的曝光和引導，讓流程更加流暢，從而提高用戶的操作效率。
淘寶購物商品詳情頁中，在最后幾張商品圖片中植入了評價信息和入口，更加符合用戶的心智，引導性也更強。同時用戶可以直接選擇自己喜歡的款式查看商品評價，操作效率也更高。
而且增加評論引導后，實現了用戶在首屏就可以了解商品、價格和用戶評價，有利于用戶對商品作出初步的購買決策，從而提高用戶效率。
相比之下，專門的評價模塊進入后默認顯示全部商品的評價信息，用戶需要手動選擇才能查看自己喜歡的商品款式的評價信息，無形中拉長了用戶的行為路徑，增加了用戶操作成本。
在今日頭條中，搜索行為與資訊內容綁定。用戶在瀏覽的資訊后，資訊下方會自動顯示搜索關鍵詞，可以幫助用戶更快捷的進行搜索操作。
同樣在熱榜資訊下方增加了詳情提示，引導用戶去查看事件詳情。
（左圖：搜索關鍵詞推薦 右圖：熱榜引導）
手機產品屏幕的空間相對較小，展示內容有限。因此需要根據用戶行為，將相關功能聚合，讓用戶在一屏中可以獲取更多的信息，從而提高用戶效率。
在天貓部分商品詳情頁中，將商品參數集合在了商品名稱右側，保證了用戶在不滑動屏幕的情況下，就可以直接讀取商品參數。方便了用戶快速了解商品信息，提升了用戶的購物效率。
考拉海購則在部分商品首屏中，直接分類展現出了商品的型號和款式分類，并且實現了商品價格聯動，提升了用戶獲取信息的效率。
減少用戶的記憶成本，最好的方法就是讓系統產生記憶。因此大多數APP都會提供歷史瀏覽記錄等功能，方便用戶查找相關信息。而內容型產品為了更好的提高用戶操作效率，則是將用戶行為記憶直接保留在內容層面上。
我們常見的音樂類產品會留存音樂的播放進度，用戶點擊后就可以直接再次播放。
（左圖：喜馬拉雅 右圖：網易云音樂）
微信公眾號文章閱讀時，會對用戶閱讀位置增加錨點。用戶再次閱讀時，自動定位到上次退出時位置，從而提高用戶的閱讀效率。
微信“看一看”進入時，內容會自動刷新，提供更多新的內容給用戶，為了幫助用戶更好地區分新內容，微信增加了瀏覽位置提醒。
同樣對于用戶未完成的文章內容，用戶再次進入時，今日頭條會給出繼續閱讀的提示信息，方便用戶快速操作。
在提升用戶效率時，我們需要關注用戶場景和行為路徑，從而尋找到更多的效率提升突破口，主要包含以下3個注意點：
1、明確用戶的行為路徑，尋找用戶核心關切點，提升用戶效率；
2、轉移用戶操作成本，讓系統承擔更多的行為判斷和用戶引導；
3、用戶行為聚合時，應當集中關鍵的行為信息，避免對用戶核心行為造成干擾；
以上就是我對提升用戶效率方法的分析和總結，歡迎大家留言交流。
作者：子牧先生
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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的一級菜單包含首頁、出行服務、訂單、鐵路會員和用戶中心?！甘醉摗怪饕獮橛脩籼峁┗疖嚻薄w機票和汽車票的購買，其次還提供各種快捷功能入口和酒店預訂等服務；「出行服務」主要為用戶提供約車、酒店、訂單等服務；「訂單」是可查詢和管理在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咨詢、用戶體驗公司、軟件界面設計公司
本次針對百度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咨詢、用戶體驗公司、軟件界面設計公司
本文講述了“峰終定律”的定義，并結合筆者生活中的兩個例子做了圖文分析，最后通過學習海底撈的案例，然后結合顧客角度將一次糟糕的活動進行了改進。
峰終定律（ 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
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn