有人說它是全世界最牛逼的APP，因為它的算法難度和春運期間訪問量幾乎是全球之最；但有人說它是全世界最垃圾的APP，因為在使用這個產(chǎn)品的過程中，遇見很多奇葩、憤怒的體驗。關(guān)于這兩種說法，眾說紛紜，本期設(shè)計大偵探，就來全面拆解鐵路12306APP，一起來看看這個產(chǎn)品到底是如何設(shè)計的，用戶體驗如何。
1. 內(nèi)容結(jié)構(gòu)
全文9700字，分為六個部分，分別是導(dǎo)讀、產(chǎn)品畫像、出行服務(wù)、內(nèi)容服務(wù)、思考總結(jié)和后記，你可以通過下面的思維導(dǎo)圖對本文內(nèi)容快速的了解。
2. 適合人群
第一類，UI/交互設(shè)計師，可以跳出執(zhí)行層，全方位體驗12306的產(chǎn)品設(shè)計，多維度去思考和總結(jié)如何規(guī)避類似的陷阱；第二類，產(chǎn)品經(jīng)理/運營，通過全面的產(chǎn)品設(shè)計拆解、體驗反饋，獲取產(chǎn)品設(shè)計參考；第三類，旅游及出行相關(guān)行業(yè)從業(yè)者，通過對12306的全面拆解，獲取競品設(shè)計參考。
3. 分析模型
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應(yīng)用戶生命周期中的5個重要環(huán)節(jié)，主要用于拆分和分析產(chǎn)品的功能價值。
第二個，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設(shè)計中最基礎(chǔ)、最重要的設(shè)計原則，任何產(chǎn)品的設(shè)計，都可以通過這十個原則進(jìn)行指導(dǎo)設(shè)計。尼爾森十大原則包括即系統(tǒng)可見性原則、環(huán)境貼切原則、撤銷重做原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則、人性化幫助原則，通過這十大原則，可以對12306的產(chǎn)品設(shè)計體驗進(jìn)行全面的校驗和偵查。
第三個，設(shè)計心理學(xué)。包括常見的格式塔原理、費茨定律、巴甫洛夫反應(yīng)、7±2效應(yīng)、席克定律等常見設(shè)計基礎(chǔ)理論。
1. 產(chǎn)品介紹
鐵路12306是中國鐵路客戶服務(wù)中心推出的官方手機(jī)購票應(yīng)用軟件，主要為全國各地的乘客提供火車票預(yù)定、機(jī)票預(yù)訂、汽車票預(yù)訂等購票業(yè)務(wù)，首個版本發(fā)布于2012年10月16日，根據(jù)易觀千帆數(shù)據(jù)，截止到2022年10月，12306月活躍用戶人數(shù)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. 信息結(jié)構(gòu)
鐵路12306的一級菜單包含首頁、出行服務(wù)、訂單、鐵路會員和用戶中心。「首頁」主要為用戶提供火車票、飛機(jī)票和汽車票的購買，其次還提供各種快捷功能入口和酒店預(yù)訂等服務(wù)；「出行服務(wù)」主要為用戶提供約車、酒店、訂單等服務(wù)；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會員」是12306的會員版塊，提供車票兌換、會員活動等內(nèi)容；用戶中心提供個人資料管理、出行向?qū)Ш统Ｓ霉δ艿葍?nèi)容。
4. 重要迭代記錄
根據(jù)七麥數(shù)據(jù)統(tǒng)計，鐵路12306的APP首個版本發(fā)布于2012年10月16日，截止到2023年1月12日，APP版本已經(jīng)更新至V5.6.3版本，近一年版本更新次數(shù)為5次。
版本重要迭代記錄
2021年9月，發(fā)布V5.4.0版本，新增無障礙功能、老人及障礙人士購票更便捷，即愛心版；
5. 產(chǎn)品生命周期
作為中國鐵路客戶服務(wù)中心的官方購票平臺，鐵路12306距離首個版本發(fā)布時間已經(jīng)過去10年。從易觀千帆數(shù)據(jù)觀察，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬，日均活躍人數(shù)811.65萬。由于是國有企業(yè)運營，而且是壟斷業(yè)務(wù)，12306沒有任何商業(yè)變現(xiàn)的壓力，從產(chǎn)品發(fā)布時間和活躍用戶人數(shù)看，目前處于產(chǎn)品生命周期的成熟期。
6. 競爭圖譜
截止到2022年10月，易觀千帆數(shù)據(jù)顯示，鐵路12306APP在蘋果的APP Store應(yīng)用市場APP總排名71位，旅游類排名第一，汽車火車船票預(yù)定類第一，月活躍用戶人數(shù)幾乎是其他APP的總和。
三、出行服務(wù)
作為12306最核心、最重要以及實現(xiàn)商業(yè)變現(xiàn)的服務(wù)，出行服務(wù)主要為用戶提供火車票、飛機(jī)票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場景提供了便捷的服務(wù)。
1. 票務(wù)
「票務(wù)」是12306最核心的服務(wù)，主要為用戶提供火車票、飛機(jī)票和汽車票的查詢以及銷售，其次12306還對三種產(chǎn)品進(jìn)行了組合，推出了空鐵聯(lián)運、鐵水聯(lián)運這樣的服務(wù)。
1.1 火車票
「火車票」就是為用戶提供火車和動車的票務(wù)銷售，用戶輸入出發(fā)站、終點站和時間以后，就可以進(jìn)行查詢，其次還支持對已購買的車票進(jìn)行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁
當(dāng)用戶輸入目標(biāo)站點以后，就進(jìn)入了售票頁。在這個頁面，可以看到當(dāng)天列車的所有車次，包括直達(dá)、中轉(zhuǎn)、出發(fā)時間和剩余票數(shù)。在底部，有一個菜單欄，包含了篩選、耗時最短、發(fā)時最早、顯示票價和候補(bǔ)下單五個功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發(fā)車站、出發(fā)時間等。
體驗陷阱
這個頁面的操作體驗不太友好，底部的菜單欄不僅沒有實現(xiàn)全屏手機(jī)設(shè)備的兼容，而且?guī)缀鹾捅尘暗脑刭N合在一起，不夠醒目，如果用戶不注意，根本無法發(fā)現(xiàn)底部竟然還有一排菜單欄幫助用戶進(jìn)行高效的檢索。
1.1.1.2 訂單頁
①在用戶選擇好車次以后，就進(jìn)入訂單頁。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡單，在輸入用戶的真實姓名、身份證號碼和手機(jī)號碼以后，即可添加成功。首次使用12306的用戶需要進(jìn)行身份核驗，用戶需要通過驗證系統(tǒng)發(fā)送的核驗信息才能添加成功。
細(xì)節(jié)偵查
「姓名」這里有一個非常友好的設(shè)計體驗，那就是針對無法輸入的生僻字、名字超過30個字符，以及外籍用戶的極端情況都給出了詳細(xì)的指導(dǎo)，針對用戶可能出現(xiàn)的極端的情況給與及時的提示，這就是尼爾森十大原則中的容錯原則，幫助用戶從錯誤中恢復(fù)，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個「選擇受讓人」的功能。這個功能有很高的學(xué)習(xí)成本，會讓用戶摸不著頭腦。我也是通過百度查詢才了解到這是一個用戶權(quán)益功能，它主要是指用戶可以把平時購買火車票獲得的積分轉(zhuǎn)讓給指定的用戶，積分又可以抵消火車票款，從而實現(xiàn)抵扣。
④選擇好乘車人以后，用戶可以進(jìn)行選座，就進(jìn)入了提交訂單、支付費用的環(huán)節(jié)。
1.1.1.3 支付頁
①訂單生成后，用戶需要在付款限定時間內(nèi)支付火車票費用，否則訂單將會取消。其次在支付頁，也向用戶推薦相關(guān)的保險服務(wù)，比如鐵路乘意險，又分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險。
②「購買返程」其實一個非常便捷的功能，但12306設(shè)計的層級太深了，而且沒有加上一鍵返回首頁或訂單頁的按鈕，用戶如果想退回到訂單頁或首頁，需要不斷點擊返回，操作路徑實在太長。
體驗陷阱
底部菜單設(shè)計了三個按鈕，違反了費茨定律的設(shè)計原則。用戶在這個支付頁的主要目標(biāo)是支付費用，但是菜單欄的三個按鈕權(quán)重設(shè)計得一樣高，取消訂單和購買返程這兩個按鈕，嚴(yán)重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁
當(dāng)用戶支付成功以后，「支付成功頁」為用戶提供餐飲預(yù)訂、出行保險、酒店入住、網(wǎng)絡(luò)約車等服務(wù)，非常便捷。不過內(nèi)容的規(guī)劃比較亂，體驗稍差。
1.1.1.5 候補(bǔ)下單
「候補(bǔ)下單」是一個非常方便的功能，這個功能主要解決在當(dāng)前車次沒票的情況幫助乘客自動排隊，如果有其他乘客退票，就自動搶票，非常貼心。這個功能也被譽(yù)為黃牛的終結(jié)者，幫助乘客自主排隊。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標(biāo)站點，進(jìn)入訂單詳情頁后，點擊「變更到站」按鈕，點擊底部的「立即變更到站」就可進(jìn)入變更頁面。在變更頁面，乘客可以重新輸入目標(biāo)站點，然后再次進(jìn)入車票售票頁，選中需要變更的車次以后，進(jìn)入訂單頁提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗陷阱
當(dāng)用戶點擊「變更到站」的時候，如果不注意觀察頁面，根本感受不出原來需要在底部菜單欄進(jìn)行操作，會讓乘客陷入焦躁，不知道下一步從哪里進(jìn)入。其次在變更到站頁面，下半部分設(shè)計了很多快捷入口，比如車站大屏、約車、餐飲特產(chǎn)等，把用戶的注意力分散了。這兩個設(shè)計都嚴(yán)重了違反了費茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時間，改簽的流程和「變更到站」相似，進(jìn)入售票頁后，選中需要變更的車次，進(jìn)入訂單頁提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時以上，退票費為票價5%，24小時至48小時之間為10%，不足24小時為20%。退票費最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經(jīng)購買的車票，退票流程比較簡單，點擊退票后，進(jìn)入退票確認(rèn)頁，點擊確認(rèn)退票成功。需要注意是，距離開車前8天以上的不收退票費，其他的時段將會根據(jù)列車開車前的時間收取手續(xù)費，最高20%。
迭代建議
在用戶點擊退票的時候，應(yīng)該出現(xiàn)彈窗，再次提醒用戶是否確認(rèn)退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯原則，幫助用戶從錯誤中恢復(fù)，將損失降到最低。
1.1.5 購票后
當(dāng)乘客購買車票后，12306的首頁會加入一個行程的版塊，向用戶展示最近的行程詳情，其次一級菜單欄「出行服務(wù)」內(nèi)容也會同步更新。這個設(shè)計非常友好，直觀醒目地告訴乘客最近的行程信息，通過外部觸發(fā)避免乘客忘記行程。
1.1.5.1 行程頁
這個頁面從上至下包含四個部分，頭部是乘客詳細(xì)的車次信息，比如出發(fā)時間、經(jīng)停站、天氣等；中間是車票信息，包含檢票口、座位號、車次和乘車二維碼等信息；接下來按乘客出行前服務(wù)、車站/列車服務(wù)和到達(dá)服務(wù)三個場景為乘客推薦其他服務(wù)，比如餐飲預(yù)定、酒店預(yù)定等服務(wù)；底部是關(guān)于出發(fā)站、到達(dá)站的天氣預(yù)報信息和優(yōu)惠服務(wù)等信息。
細(xì)節(jié)偵查
行程頁把乘客的出行拆分為3個場景，出行前服務(wù)（提供重點客戶預(yù)約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規(guī)定）、車站/列車服務(wù)（提供臨時身份證證明、遺失物品查找、我要訂餐飲和站內(nèi)導(dǎo)航）和到達(dá)服務(wù)（遺失物品查找、我要訂酒店、接站約車、旅游景點預(yù)定、投訴建議和站內(nèi)導(dǎo)航），這就是以場景為中心的設(shè)計——將設(shè)計工作的焦點從“定義系統(tǒng)的操作”轉(zhuǎn)變到“描述什么人將使用該系統(tǒng)去完成什么任務(wù)”。
1.2 飛機(jī)票
「飛機(jī)票」就是為用戶提供飛機(jī)的票務(wù)銷售，用戶需要輸入出發(fā)站、終點站和出發(fā)時間，如果攜帶孩子或者嬰兒，還需要單獨勾選。飛機(jī)票同樣支持改簽和退票。
1.2.1 售票頁
售票頁的內(nèi)容非常簡單，在頭部，用戶可以左右滑動選擇時間，頁面內(nèi)容以Feed流向用戶展示詳細(xì)的航班信息，其次還為用戶提供了其他出行方案參考。底部設(shè)計了一個菜單欄，用戶可以進(jìn)行篩選設(shè)置，還可以根據(jù)價格高低和出發(fā)時間排序。
1.2.2 選擇艙位
選中航班班次以后，進(jìn)入到「選擇艙位頁」，在這個頁面可以查看到航班的詳細(xì)信息，比如航空公司、起飛時間、值機(jī)柜臺等。用戶需要選擇艙位等級，比如經(jīng)濟(jì)艙、商務(wù)艙和頭等艙，選中后，即可進(jìn)入預(yù)訂流程。
拓展閱讀
為什么同一架飛機(jī)同一個經(jīng)濟(jì)艙飛機(jī)票價格不一樣？這是因為一個飛機(jī)的不同艙位實際上是不同的產(chǎn)品，所以座位有不同的等級，故而價格有了出入。其次他們主要的區(qū)別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁
在訂單頁，可以查看到訂單的詳細(xì)信息，包括收費說明、退改說明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗陷阱
當(dāng)乘客勾選了「攜帶兒童或嬰兒」的選項以后，在訂單頁準(zhǔn)備支付的時候，系統(tǒng)提示乘客需要返回添加兒童出行人信息。但卻并沒有告訴乘客如何添加，或直接給出對應(yīng)的功能跳轉(zhuǎn)鏈接，這讓用戶點擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯原則，不僅在用戶犯錯之前沒有給出提示，犯錯了還不給與指導(dǎo)，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務(wù)銷售，用戶輸入出發(fā)站、終點站和時間以后，就可進(jìn)入售票頁。汽車票的訂單流程非常簡單，在選中客車車次以后，添加乘客支付費用后，訂單即可生成。
體驗陷阱
用戶在選擇「達(dá)到地」搜索框輸入地名時候，應(yīng)該提供模糊搜索，比如輸入湖南的地名，應(yīng)該為用戶提示相關(guān)聯(lián)的車站。
1.4 空鐵聯(lián)運
空鐵聯(lián)運，顧名思義就是把飛機(jī)和高鐵這兩個產(chǎn)品組合在一起銷售，支持用戶一站式購買“飛機(jī)+高鐵”的聯(lián)運行程，只需一次購票、一次支付。這個功能的使用場景主要是針對出發(fā)地和目的地沒有直飛的航班情況下，為用戶提供飛機(jī)+高鐵的轉(zhuǎn)運方案。這個功能對于乘客來說，支持一站式購買“飛機(jī)+高鐵”車票，可以節(jié)省購票時間，非常友好。
1.5 鐵水聯(lián)運
和空鐵聯(lián)運一樣，這也是一個組合產(chǎn)品的銷售，支持用戶一站式購買“高鐵+水運”的聯(lián)運行程。使用場景、功能價值以及操作流程和空鐵聯(lián)運一樣，我們就不必重復(fù)。
1.6 雪具快運
12306還推出了一個雪具快運的服務(wù)，為廣大旅客提供多種個性化雪具寄送產(chǎn)品服務(wù)，還支持隨車辦理或上門辦理寄送服務(wù)，目的是為用戶打造滑雪的新體驗?！秆┚呖爝\」的操作流程也比較簡單，采用預(yù)約制，選中服務(wù)后，填寫用戶詳細(xì)信息，支付成功后，訂單生成。
1.7 小結(jié)
作為12306最重要、最核心、最復(fù)雜的功能，從這個版塊的內(nèi)容拆解和實操體驗來看，可以看出12306確實已經(jīng)解決被譽(yù)為全世界最復(fù)雜的搶票算法邏輯（筆者通過實操測試，幾乎都能買到票），特別是在春運這種會出現(xiàn)超過上億用戶搶票場景，真可謂非常不容易。不過從用戶體驗來看，非常一般，甚至有很多不合理的設(shè)計。
2. 出行
出行是12360結(jié)合了乘客在出行的場景中潛在產(chǎn)生的需求設(shè)計的服務(wù)，有結(jié)合車站商家的在線點餐，有結(jié)合當(dāng)?shù)氐赜蛱厣穆糜畏?wù)，還有約車、保險、酒店等服務(wù)。這些服務(wù)，多數(shù)由第三方合作方提供。
2.1 餐廳特產(chǎn)
「餐廳特產(chǎn)」是一個為乘客提供在線點餐的服務(wù)，在乘客輸入列車車次以后，就可以進(jìn)行點餐，支持外賣配送至列車和到店自取兩種形式。這個功能設(shè)計得很友好，不僅解決乘客在乘車前的就餐問題，為車站的商家引流，還可以增加平臺的變現(xiàn)方式。
2.2 鐵路游
「鐵路游」是12306結(jié)合旅游出行的場景，為乘客推出的一項旅游服務(wù)，包含旅游專列、跟團(tuán)游、周末游和自由行等。這個場景的鏈接其實非常好，但是版塊目前設(shè)計得比較簡單，內(nèi)容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機(jī)、打車和租車的服務(wù)。這是一個強(qiáng)剛需的需求，用戶在出行的前后都有用車服務(wù)。為乘客提供約車服務(wù)，不僅能增加變現(xiàn)方式，還能方便乘客出行。通過實操體驗，約車主要由第三方合作方提供服務(wù)，比如曹操出行、T3出行等公司，為乘客提供出租車、品質(zhì)專車和商務(wù)車等車型。
2.4 保險
保險分為乘意險和出行保險。鐵路乘意險分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險，在乘客購買鐵路的訂單頁就會向乘客推薦，乘意險價格低，保障項目包含意外身故、傷殘、醫(yī)療費用、住院津貼等。出行保險由第三方公司中國太平洋保險提供，主要為乘客提供出行安心保、空鐵聯(lián)運險和旅程預(yù)定取消險。
2.5 酒店
酒店這個版塊的內(nèi)容相對夯實，不僅有新客大禮包這樣的用戶權(quán)益，還有商旅專區(qū)、今夜甩賣、高端酒店這樣的內(nèi)容。甚至還設(shè)計了專門的酒店會員VIP，包含普通會員、銀卡會員、金卡會員、白金卡會員和黑金卡會員，相對其他版塊而言，這個版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉(xiāng)村振興·幫扶推介為主題打造的一個商城，包含了幫扶專區(qū)、優(yōu)選好物、兌換專區(qū)、今日特賣等內(nèi)容，其次還支持企業(yè)集采，批量購買。
2.7 小結(jié)
從這個版塊，可以看出12360其實結(jié)合了用戶吃穿住行的剛需場景設(shè)計了對應(yīng)的服務(wù)，有自主運營也有完全依靠第三方提供。不過整體的用戶體驗比較差，事實上可以參考像順豐速運、智聯(lián)招聘這些APP，通過內(nèi)置小程序的形式來設(shè)計，完全可以把這些版塊讓第三方單獨設(shè)計和維護(hù)，同時還能為用戶帶來更好的體驗。
3. 會員
鐵路暢行會員是中國鐵路統(tǒng)一對外會員服務(wù)品牌，開通暢行會員不需要花錢，暢行會員主要是用于會員用戶積累乘車積分、用積分兌換車票等，主要包含積分權(quán)益，兌換車票、無票候補(bǔ)和會員活動四大會員權(quán)益。這個頁面設(shè)計得比較簡陋，也沒有太多價值的內(nèi)容，可以看出12306在用戶運營方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險訂單、酒店訂單、空鐵聯(lián)運訂單、計次定期票訂單、約車訂單、出站引導(dǎo)服務(wù)訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯(lián)運訂單多達(dá)12種訂單，從這些訂單類型可以看出12306的服務(wù)特別多。
體驗陷阱
這個設(shè)計實在太糟糕，嚴(yán)重違反了7±2效應(yīng)。琳瑯滿目，花枝招展，讓用戶在這個頁面幾乎迷失。更糟糕的是，當(dāng)你有一個非常重要的待支付訂單，這個頁面竟然沒有角標(biāo)提醒，最終你會因為這個糟糕的設(shè)計打亂自己的行程計劃。
內(nèi)容服務(wù)是幫助產(chǎn)品實現(xiàn)用戶留存和運營的版塊，不過從12306的內(nèi)容設(shè)計來看，整個產(chǎn)品的運營手段比較少，所以我把12306現(xiàn)有設(shè)計的功能拆分為便捷功能和向?qū)Чδ堋?/span>
1. 便捷功能
以下這七個功能，對用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個非常貼心的功能，通過這個功能，可以為用戶提供車站的實時列車信息，非常方便。大屏詳情頁可以拆分為三塊內(nèi)容，左上角可以切換全國各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內(nèi)容是當(dāng)前車站向西的車次信息，包含發(fā)車時間、候車室、檢票口和候車狀態(tài)等。
1.1.1 車次詳情頁
進(jìn)入列車的「車次詳情頁」，可以查看當(dāng)前車次的完整信息，比如檢票狀態(tài)、候車室、檢票口和全程停靠站、停留信息。在這個頁面，還提供了「關(guān)注列車」的功能（關(guān)注后并無關(guān)注數(shù)據(jù)，顯得很雞肋），以及直接預(yù)訂當(dāng)前車次的入口。
1.1.2 車站詳情頁
「車站詳情頁」就像一個站點的主頁，為用戶提供完整的車站信息查詢。這個頁面可以拆分為四塊，頭部可以切換其他站點，并提供當(dāng)前車站的天氣情況以及車站基礎(chǔ)信息。金剛區(qū)位8個功能入口，包含車站車次、站內(nèi)導(dǎo)航、重點旅游、餐飲服務(wù)、周邊酒店等。中間是當(dāng)前車站的起售時間和換乘時間，底部是車站附近周邊的酒店精選。
迭代建議
這個頁面把車站當(dāng)做一個主體，聚合了一個車站完整的功能，其實挺有創(chuàng)意，但頁面隱藏得很深，如果不去拆解，幾乎很難發(fā)現(xiàn)，很是可惜。我認(rèn)為完全可以提高權(quán)重，升級為一級欄目，代替會員，或者和出行欄目進(jìn)行整合升級。
1.2 站內(nèi)導(dǎo)航
「站內(nèi)導(dǎo)航」提供目標(biāo)車站的LBS導(dǎo)航，對于乘客來說，到達(dá)一個陌生的站點，需要清晰的指引，這是一個非常便捷、溫馨的功能，能幫乘客解決很多問題。不過這里有一個莫名其妙的設(shè)計，那就是進(jìn)入這個功能之前，系統(tǒng)提示請搖“8”字校準(zhǔn)手機(jī)，事實上這里是一個加載動畫，但是畫面和內(nèi)容卻誤導(dǎo)了用戶，我甚至每次進(jìn)入都傻乎乎的搖動手機(jī)。
1.3 臨時身份證
臨時身份證是一個非常重要的功能，12306現(xiàn)在支持APP在線申請，極大方便了乘客的出行。申請流程也比較簡單，填寫個人信息，驗證審核通過后，就可以生成電子證照使用。每個人每個月有3次申請臨時乘車身份證機(jī)會。
1.4 遺失物品
這是一個非常貼心的功能，如果你在乘車的過程中不小心丟失物品，可以通過這個功能登記，輸入你的詳細(xì)信息就能登記成功。
1.5 重點旅客
這也是一個非常貼心的功能，主要為老年人、殘疾人服務(wù)，通過填入你的信息，列車會根據(jù)你的情況提供優(yōu)先進(jìn)站、協(xié)助乘降等服務(wù)。
1.6 愛心版
愛心版就是長輩版，專門為中老年用戶設(shè)計的版本，在用戶中心切換后就可進(jìn)入愛心版。整個版本設(shè)計得非常簡潔，操作步驟也比較簡單，對中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設(shè)置點擊語言即可切換，整體的版本設(shè)計得直接簡潔，用戶體驗不錯。
1.8 小結(jié)
從這個版塊可以看出，一個產(chǎn)品如果以用戶為中心去設(shè)計，是可以為用戶帶來很大的便捷和愉悅體驗。比如像臨時身份證這樣的功能，過往我們只能提前出發(fā)去車站排隊辦理，但如今12306已經(jīng)把這樣的痛點解決，為用戶節(jié)省了大量的時間。
2. 向?qū)Чδ?/span>
以下8個功能，雖然屬于出行向?qū)?，不過體驗下來，感覺用戶體驗比較差，很多功能完全無法弄懂它的設(shè)計目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個功能的設(shè)計，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細(xì)信息，包括姓名、身份證號碼和手機(jī)，其次需要進(jìn)行人臉核驗，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁面，用戶點擊退款后，沒有和用戶再次確認(rèn)就直接退票。整個流程體驗下來，非常糟糕。
體驗陷阱
這個功能和訂單頁的退票感受不出來有何區(qū)別？如果用戶要退款，不如直接去訂單頁進(jìn)行退票，操作步驟簡單，一目了然。其次不支持自動導(dǎo)入用戶的購票信息實在太不方便，需要通過選擇車票購買日期和車次，這個設(shè)計實在讓人生氣和憤怒（我在體驗的過程中到了第三步只能退回到訂單頁把購票日期和車次截圖下來，又再次重復(fù)前面兩個步驟才到這個步驟）。
2.2 聯(lián)系方式
這也是一個看不懂的功能，進(jìn)入頁面后，需要用戶輸入乘客的詳細(xì)信息，但是這個乘客信息和用戶在購買車票時候需要添加到乘客信息有什么不同？更糟糕的是，當(dāng)你把自己的電話號碼、身份證信息填入后，系統(tǒng)會顯示核驗成功，然而當(dāng)你再一次進(jìn)入，頁面內(nèi)容還是和之前并無區(qū)別，你不知道自己是不是還要重新輸一次？
2.3 時刻表
「時刻表」主要為乘客提供查詢列班車次的出發(fā)時間和到站信息，但這個功能「車站大屏」幾乎已經(jīng)包含了，這個功能顯得意義不大。
2.4 查票價
這個功能非常雞肋，因為在火車票的售票詳情頁就可以清晰直觀地查詢到列車票價信息，相反在這個頁面，根本無法看到價格，因為價格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點
這個功能主要為用戶提供全國各地火車票代售點的查詢，不過在互聯(lián)網(wǎng)技術(shù)發(fā)展到今天，火車票代售點越來越少了。從12306采集的信息來看，部分代售點缺少電話等關(guān)鍵信息，對用戶來說，比較雞肋。
2.6 起售時間
這個功能為用戶提供各車站每日的起售時間，屬于一個低頻功能，可以解決乘客某些極端場景的需求。不過在我體驗下來，比如通過此功能查詢1月29日的車票，顯示北京站起售時間為10:00，但是在火車售票版塊，我也可以直接購買1月29日的車票，這讓我比較疑惑這個功能的價值在哪里。
2.7 正晚點
「正晚點」同樣是一個雞肋功能，而且還需要輸入準(zhǔn)確的車次才能進(jìn)行查詢，車站大屏已經(jīng)完美可以取代這個功能。
2.8 列車狀態(tài)
「列車狀態(tài)」比正晚點都還雞肋，讓人憤怒，因為你需要輸入正確的出發(fā)地、到達(dá)地和出發(fā)時間，對了，還有正確的車次才能進(jìn)行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結(jié)
從這個部分的內(nèi)容拆解和操作體驗來看，12360的產(chǎn)品設(shè)計得不夠細(xì)致和貼心，很多功能就像是硬生生塞進(jìn)去一樣，濫竽充數(shù)。其次從他們的產(chǎn)品迭代記錄次數(shù)可以看出，近1年更新時間只有5次，也許每一次都是在做加法，沒有想過做減法，所以導(dǎo)致這部分的功能顯得雞肋而且有很大缺陷。
通過對鐵路12306的全面拆解，接下來我將從內(nèi)容層、功能層、體驗層和視覺層進(jìn)行總結(jié)。
1. 內(nèi)容層
12306整個產(chǎn)品的內(nèi)容設(shè)計，用一句話總結(jié)，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購票、出行的潛在需求場景都設(shè)計了對應(yīng)的服務(wù)，比如酒店、約車、點餐、商城等，甚至還有空鐵聯(lián)運、鐵水聯(lián)運這種多場景的組合售票方式，不過在實際的版塊內(nèi)容打造中，則顯得比較空洞，體驗一般。這個產(chǎn)品，可以說幾乎沒有創(chuàng)新點，這主要也是由于它是由國有企業(yè)設(shè)計運營，背景極其復(fù)雜，設(shè)計目標(biāo)也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔(dān)了被譽(yù)為歷史上人口遷移最大的春運的搶票工作，那時候一票難求，春運去12360就像是一場噩夢。不過在經(jīng)過多年的升級和優(yōu)化以后，目前12360的購票效率非常高，經(jīng)過筆者多次的測試和調(diào)研，目前通過12360購票已經(jīng)不再是難事。而且還設(shè)計了候補(bǔ)搶票這樣的功能，幫助用戶解決買票痛點，可謂非常貼心、友好。
3. 體驗層
鐵路12306的用戶體驗，非常一般，我在這次的產(chǎn)品拆解中至少偵查出了20條體驗陷阱，這些陷阱都會給用戶帶來極其糟糕和憤怒的體驗。比如讓我像個傻瓜搖動手機(jī)的站內(nèi)導(dǎo)航載入頁，這完全就是把用戶當(dāng)成傻子一樣看待，其次還有一堆數(shù)不清的雞肋功能，對用戶的操作體驗造成了嚴(yán)重的干擾。我甚至認(rèn)為愛心版和英文版比標(biāo)準(zhǔn)版使用起來更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個UI設(shè)計師，在拆解12306的產(chǎn)品過程中，我對整個產(chǎn)品的設(shè)計感到絕望。首先，沒有做到統(tǒng)一性，整個產(chǎn)品毫無設(shè)計規(guī)范，比如卡片的圓角、品牌色、版塊間距根本不統(tǒng)一，這樣的視覺體驗一眼望去就非常糟糕；其次，圖標(biāo)、活動圖、櫥窗圖以及詳情頁的設(shè)計毫無美感，滿滿的山寨APP風(fēng)格，特別是訂單頁的ICON，花花綠綠、琳瑯滿目，連最基礎(chǔ)的統(tǒng)一都沒有做到。
作為一款國民級用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學(xué)室友，每年春運開啟之前就為了回家的火車票犯愁，不僅要去遙遠(yuǎn)的火車站排隊，很多時候還可能空手而回，那便是最初對12306的記憶。
如今十年過去了，12306解決了億萬人的出行搶票需求，讓我們在春運的路上，可以輕松購買一張回家的票。但下一個十年，我更希望12360的產(chǎn)品團(tuán)隊，可以重視用戶體驗設(shè)計，讓我們不再掉入那些體驗陷阱。
作者：設(shè)計大偵探 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎(chǔ)通用手勢進(jìn)行打散重組、并結(jié)合實踐案例梳理出「組合手勢」設(shè)計模型，以探索如何在視頻場景中構(gòu)建便捷高效的進(jìn)階手勢體驗設(shè)計。
二、什么是「組合手勢」
「組合手勢」是基于常規(guī)手勢的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢所構(gòu)成，若組合方式及使用場景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機(jī)制一般可分為兩個階段：step1交互信號→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢發(fā)出交互信號，系統(tǒng)收到信號確認(rèn)后便可立即執(zhí)行任務(wù)，但整個過程是線性的，手勢擴(kuò)展性十分有限且難以滿足視頻場景對于手勢擴(kuò)容的訴求。
于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識別」環(huán)節(jié)，并梳理出「組合手勢」的設(shè)計模型，以探索不同基礎(chǔ)手勢相互組合后的擴(kuò)展可行性。
「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務(wù)，前兩階段均可由對應(yīng)的基礎(chǔ)分支手勢構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。
由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計靈活度，尤其需根據(jù)具體的使用場景進(jìn)行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。
2.競品調(diào)研及選型
通過對競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨立播控面板、長按觸發(fā)浮層播控選項、長按觸發(fā)特定播控功能。
選型A
「長按觸發(fā)獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴(kuò)展性較強(qiáng)，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發(fā)浮層播控選項」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項入口，一定程度上可延續(xù)視頻觀看的沉浸體驗，但浮層擴(kuò)展性有限；
選型C
「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設(shè)計方案
1）長按手勢交互擴(kuò)容
針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項」作為設(shè)計切入點。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對視頻場景中的播控菜單進(jìn)行設(shè)計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進(jìn)”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會對用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項目對于便捷手勢體驗的重要設(shè)計探索點。
基于此，我們決定嘗試使用「組合手勢」設(shè)計模型來對視頻播放器中的長按手勢進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項，以縮短視頻常用功能路徑。對應(yīng)到設(shè)計模型的三個階段分別為：
step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長按+向上滑選」快捷觸發(fā)對應(yīng)功能項；
「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對于此功能的使用習(xí)慣）。
2）容錯性兼容
在設(shè)定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習(xí)慣、以及對于滑選手勢需要有一定的適應(yīng)過程，我們同時也支持點選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點選的方式觸發(fā)對應(yīng)播控功能項。
3）易用性打磨
差異化的創(chuàng)新設(shè)計形式在前期總會面臨質(zhì)疑和挑戰(zhàn)，本次項目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測試，以預(yù)期在上線前可先收集一波體驗問題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測試目標(biāo)、用戶類別、測試前序準(zhǔn)備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測試。
測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場景，可盡可能擴(kuò)大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時給出相對應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢觸發(fā)機(jī)制。
方案上線及驗證
以AB實驗對本次設(shè)計方案進(jìn)行定量測試驗證：
「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實驗組」效果：長按觸發(fā)“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經(jīng)過近半個月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實驗組」的“快進(jìn)”雖多了一步觸發(fā)步長，實驗前期“快進(jìn)”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進(jìn)行了二期的設(shè)計升級，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現(xiàn)實世界行為的映射，無論是基礎(chǔ)手勢還是組合類高級手勢，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場景中進(jìn)行設(shè)計。
以「組合手勢」設(shè)計模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項目實踐，我們進(jìn)一步對視頻播放器中更多功能場景進(jìn)行了便捷手勢的設(shè)計擴(kuò)容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續(xù)性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號，若在“雙指拖拽手勢”基礎(chǔ)上有識別到“雙指擴(kuò)張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結(jié)語
便捷手勢的設(shè)計出發(fā)點是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設(shè)計實踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場景的手勢交互體驗。
作者：百度MEUX 來源：站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
本文講述了“峰終定律”的定義，并結(jié)合筆者生活中的兩個例子做了圖文分析，最后通過學(xué)習(xí)海底撈的案例，然后結(jié)合顧客角度將一次糟糕的活動進(jìn)行了改進(jìn)。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經(jīng)濟(jì)學(xué)獎獲得者，心理學(xué)家）提出的——他發(fā)現(xiàn)人們對體驗（體驗事物或者產(chǎn)品）的記憶由兩個因素決定：
即，除了峰值和終值時之外的其他體驗，無論好與不好體驗的比重是多少，體驗時間的長短，對記憶或感受都沒那么大影響，會被選擇性忽略。
概念講完，下面筆者結(jié)合去飯店買飯的故事，使用“峰終定律”進(jìn)行圖文分析，為什么一家飯店給我的體驗非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時間飯店聯(lián)合天地壹號搞活動，買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店，我特意說明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問這份是不是我的，店里服務(wù)員支支吾吾，也沒有看著我，然后那份飯被拿去跟天地壹號的工作人員合影，一張不滿意又拍一張，一個角度拍完又換一個角度。最后，飯店的服務(wù)員才把那份飯給我，當(dāng)時我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時間就一個小時，為了能睡好點還要吃得快點。
這家店給我的體驗就是，不把用戶當(dāng)用戶，心里非常不是滋味。
而當(dāng)我向同事說起這家店時，我會推薦手撕雞飯，這是我在廣州吃過的最好吃的手撕雞飯， 沒有之一。同時，我還會說上面的故事給同事，最后評價道：可以試試的，另外，出餐質(zhì)量有問題他們也會給你換一份的。
當(dāng)我說完這次的經(jīng)歷給同事聽，同事并沒有表示會去嘗試一次，因為我說的故事，又因為價格也不便宜。所以說，店鋪（或者說品牌）是在食物（或者說餐品）之前被消費的，這是給用戶留下第一印象的關(guān)鍵，第一印象不好，即便是廣州第一手撕雞，也不會去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗就是：
峰值有兩個，正峰值是廣州第一手撕雞的“口味”，負(fù)峰值是“員工服務(wù)”。負(fù)峰值的出現(xiàn)，說明了店家在活動開始前并沒有設(shè)計好活動流程，服務(wù)員也就沒有足夠的授權(quán)去處理和應(yīng)對。
終值是“離店”時的不爽，店家并沒有作出任何的正面回應(yīng)，沒有表達(dá)歉意，沒有意識到這樣做會給顧客造成怎樣的影響。
“員工服務(wù)”是直接突破了我的忍耐底線，“離店”時店家的不作為再次挑戰(zhàn)了我的忍耐底線。短時間內(nèi)兩次挑戰(zhàn)我的忍耐底線，店家不但“失去”了我，我的幾個同事也不會是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結(jié)合了梁寧老師講過的內(nèi)容，然后加到了這張“用戶體驗?zāi)Ｐ汀眻D上。
梁寧老師講的是：“PC時代用戶等待一個頁面打開的忍耐底線平均數(shù)是7秒，等了7秒還沒打開，基本上99%的用戶就會離開。所以，對成本的控制是本分，但是不能挑戰(zhàn)用戶的忍耐底線。”
某天中午我發(fā)現(xiàn)寫字樓下新開了一家飯店，我到店里問老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個菜用什么材料做，哪個湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺不錯。后面選擇了老板推薦的肉餅飯，發(fā)現(xiàn)真合我胃口。
上兩周有兩天中午休息時都到店里想點肉餅飯，但是連續(xù)兩天都在我來之前賣完了，之后老板說可以掃門口的小程序預(yù)約下單，第二天上班我早早的就預(yù)約了肉餅飯，到店之后老板已經(jīng)打包好了，我把訂單信息給老板看，老板說了一句我聽到就覺得好笑，并且每當(dāng)給人推薦這家店時就說的一句話：“這是我們專門給您留的肉餅飯?！?
當(dāng)我笑著回應(yīng)謝謝的時候我也在想，這飯是我在小程序上面早早預(yù)定的，老板還說是專門我留的；因為我先付錢了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來提供對應(yīng)的服務(wù)的，并且我也確實感受到了老板的真誠、熱情。
于是我把這家店介紹給了幾個同事，他們都表示下次沒有自己帶午餐的時候會試一下，并且有兩個同事聽了我的推薦后去下單了，其中有一位同事表示會回購。
這家店給我的體驗就是，不把用戶當(dāng)流量，心里有用戶，產(chǎn)品可以，用戶自然會安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗就是：
有兩個正峰值，第一個正峰值是讓我感受到店家心里有顧客的“員工服務(wù)”。第二個正峰值是“口味”，這里甚至有一點點主觀上的小驚喜：當(dāng)時抱著不知道會不會踩雷，試試新店的心態(tài)，當(dāng)我試到肉餅飯時，小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。
小結(jié)：
當(dāng)我跟同事同事說起第一家飯店體驗不好的時候，并不是說他的“港式氛圍”裝修不好，不是說出餐有問題不給換新的，手撕雞也是廣州最好吃的，而是說，這家店給我的感覺是他并不像跟用戶建立長期關(guān)系，只做一桿子買賣。于是他們并不注重維護(hù)客情關(guān)系，當(dāng)他們把合過影的手撕雞飯遞給我時，連安撫情緒的話都沒有，就餐體驗自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會如何設(shè)計本次活動？
我們先看看餐飲行業(yè)的巨頭都是怎么做的，因服務(wù)被大家口口相傳的海底撈就是非常值的學(xué)習(xí)的對象。
通過模型，我有以下幾點感悟：
服務(wù)觸點：用戶為了完成目標(biāo)，需要做一系列連續(xù)的行為，而這一連串行為中會涉及到一個一個的用戶與產(chǎn)品完成交互的觸點，這就是服務(wù)觸。比如上圖所示的，海底撈出于提高轉(zhuǎn)化率、降低顧客等待叫號時的無聊感等原因，在顧客排隊時可以體驗免費的美甲服務(wù)、免費擦鞋服務(wù)等。
帶著學(xué)習(xí)完海底撈得出的感悟，下面我來嘗試思考一下，我現(xiàn)在是這家燒臘飯店的主理人，那我會這樣設(shè)計本次活動：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預(yù)期
選擇符合自己口味的菜品，店內(nèi)就餐/打包回公司吃；店家穩(wěn)定出餐（口味穩(wěn)定、不要有異物等）；不希望排長龍。
3、服務(wù)觸點
點餐時、支付時、等待出餐時（排隊）、（打包完）出餐時、離店時。
其次，才到本次活動的設(shè)計：
1、背景
贊助商天地壹號需要做品牌推廣，找到我們合作，方案就是消費即送天地壹號一瓶。
2、目的
幫助合作伙伴宣傳的同時，吸引新的顧客，回饋老顧客，提升營業(yè)額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費即送天地壹號一瓶，送完即止”的宣傳海報，并且放置在店鋪門口。
3.2、完善服務(wù)流程。（請看下圖）
3.3、設(shè)置幾種異常情況的應(yīng)對方案。（請看下圖）
完善好服務(wù)流程，提前設(shè)置好幾個異常情況的應(yīng)對方案，相比于海底撈一連串的各種免費服務(wù)，其實花不了多少實際的金錢成本。但是卻能用最少的資源，最大程度的避免“負(fù)峰值”的出現(xiàn)。
另外，天地壹號的工作人員提出合影，飯店應(yīng)該用自己的員工餐，而不是用顧客的。這其實不是異常情況的應(yīng)對方案，而是作為服務(wù)行業(yè)從業(yè)人員該有的覺悟。
本文到此結(jié)束，朋友們?nèi)绻O(shè)計/體驗了好的“峰終體驗”的案例，麻煩在評論區(qū)告知我一聲，讓我也去體驗一把~
作者：我是Berwin
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
時間對于我們每個人來說都極為重要和珍貴。隨著生活節(jié)奏的加速，很多產(chǎn)品也都開始注重和考慮對于用戶時間的節(jié)省和分配。本文重點分享三種在交互設(shè)計中幫助用戶「同時做幾件事」的設(shè)計方法，以及其對應(yīng)的優(yōu)秀案例：
希望會為你帶來更多的設(shè)計靈感。
通過將屏幕的布局進(jìn)行分割處理，可同時呈現(xiàn)多項內(nèi)容，讓用戶自由選擇任務(wù)主次，同時處理多項任務(wù)。分屏設(shè)計很常見，但其中的體驗細(xì)節(jié)卻依舊值得研究和優(yōu)化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時支持分屏功能，還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機(jī)尺寸，體驗順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動端的視頻通過小窗模式可以不間斷播放，不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式，正在播的視頻，在被臨時打斷退出視頻后，還可以用音頻的方式繼續(xù)播放：
案例 3
微信的新功能，在你閱讀文章時依舊能看到朋友發(fā)來的微信消息，可以直接在當(dāng)前頁面回復(fù)消息，避免你在看文章時閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”，一會兒再做處理：
案例4
微信視頻號改版后，點擊視頻號下方的博主名稱和頭像，下方彈窗會彈出該博主的主頁和其他視頻，而當(dāng)前正在播放的視頻會漸漸呈現(xiàn)小屏播放，視頻內(nèi)容不會被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內(nèi)容：
案例 5
在微信訂閱號中展示的視頻內(nèi)容可以通過劃到右下角變成小窗播放音頻，既可以聽內(nèi)容，也不影響你繼續(xù)瀏覽訂閱號的其他內(nèi)容：
產(chǎn)品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續(xù)，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時進(jìn)行。
案例 1
釘釘?shù)囊苿佣烁〈肮δ埽蛴一瑒油顺稣诓僮鞯捻撁鏁r，就會出現(xiàn)添加浮窗區(qū)域，用于收錄未做完的操作。同時顯示出已添加浮窗的內(nèi)容數(shù)量，最多添加 5 個：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內(nèi)容，在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章，可以更合理地掌控閱讀節(jié)奏：
案例3
微信讀書 App 會在你跳讀到其他章節(jié)時，在頁面下方顯示“返回原進(jìn)度”的按鈕，方便你在跳讀后回來繼續(xù)閱讀：
案例4
網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點開一封郵件，頁面上方會增加一個類似瀏覽器標(biāo)簽頁的 Tab，你可以通過它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時，同時又收到了其他的新郵件，去查看新郵件之后，可以通過 Tab 直接回到郵件編輯頁面，繼續(xù)編寫剛才的郵件：
案例5
使用釘釘發(fā)起會議邀請，如果中途退出，系統(tǒng)幫助你自動保存。再發(fā)起會議邀請時也會給出上次操作的提示，幫你續(xù)寫內(nèi)容：
用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù)，將更多的時間用在其他事情而非無法控制的等待上。
案例1
iOS 系統(tǒng)中，當(dāng)你在不同 App 之間傳遞文件時，如果文件過大，彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”，用戶點擊后可以繼續(xù)做其他操作，并不妨礙后臺的文件傳輸。
案例2
微信在接收超大文件時，增加了“發(fā)送給朋友”的選項，你不必等待文件在自己這邊下載完成后再發(fā)送，可以直接發(fā)送源文件給對方，同時下載：
案例3
微信撥打語音的界面，在等待好友接聽的過程中，你可以看到對方朋友圈的動態(tài)，緩解無聊的等待，也為即將進(jìn)行的語音聊天提供了話題：
作者：元堯
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
正如題目所說：細(xì)節(jié)決定成敗，微交互就是利用細(xì)節(jié)提升產(chǎn)品體驗和設(shè)立品牌標(biāo)志。
直到今天，人機(jī)交互已經(jīng)有很長時間的發(fā)展。從例如烤面包機(jī)的簡單產(chǎn)品到銀行應(yīng)用程序類的復(fù)雜數(shù)字產(chǎn)品，我們每天進(jìn)行上百次的交互。這些交互轉(zhuǎn)化為產(chǎn)品的可用性，最終轉(zhuǎn)化成用戶滿意度、信任度和產(chǎn)品整體體驗。
在過去的二十年里，設(shè)計師們一直在關(guān)注這些交互（按鈕、滾動、長按等）。從電腦大屏幕到移動設(shè)備、智能手表以及現(xiàn)在的可折疊設(shè)備，交互也在不斷地發(fā)展。本文研究了微交互的結(jié)構(gòu)及其與交互模型的關(guān)系，審美體驗的不同驅(qū)動力，以及我們?nèi)绾瓮ㄟ^改變微交互的元素來優(yōu)化體驗。最后，我們討論了自下而上的產(chǎn)品構(gòu)建方法。
自燈泡、收音機(jī)、門鈴等電氣設(shè)備出現(xiàn)以來，微交互一直存在于我們的生活。微交互和技術(shù)共同出現(xiàn)、發(fā)展。在我們的日常生活中充滿了與周圍物體的微交互，例如使用烤面包機(jī)、解鎖手機(jī)、將手機(jī)切換到靜音模式、控制音量等。
從簡單的按下按鈕到搖動手腕激活智能手表，微交互隨著技術(shù)的進(jìn)步而不斷發(fā)展。像復(fù)制文本或移動文件這類我們?nèi)缃窳?xí)以為常的、無形之中的微交互，都曾是新穎的微交互。觀察微交互有助于設(shè)計師改進(jìn)產(chǎn)品。
有趣的是，設(shè)計師將現(xiàn)實生活場景投射到產(chǎn)品來建立微交互，如剪切-粘貼、放大-縮小等。這些細(xì)節(jié)不僅提高了產(chǎn)品的可用性，也通過直觀的互動降低用戶學(xué)習(xí)難度。
我們?nèi)绾螠?zhǔn)確定義什么是微交互，什么是交互？
論文《開啟移動微交互》（Ashbrook，2010）將微交互定義為“接觸設(shè)備開始到完成的時間不超過4秒的互動”。而《微交互》一書（Saffer，2013）將其定義為：“微交互是圍繞著單個用例的產(chǎn)品使用場景——它們有一個主要任務(wù)。”整個應(yīng)用程序或產(chǎn)品可能只是一個微交互，例如，天氣應(yīng)用程序（圖1.1）或烤面包機(jī)，因為它們只關(guān)注一件事。
圖1.1 天氣應(yīng)用程序能被看作是一個微交互，因為它只顯示天氣。
圖1.2 LinkedIn 的“喜歡”按鈕由兩個微交互組成，（a）當(dāng)你長按“喜歡”按鈕時，它會打開一個空間展示多個表情符號以供選擇（b）你選擇表情符號發(fā)送給帖子。
一個功能可以由多個微交互構(gòu)成，例如LinkedIn的“喜歡”按鈕（圖1.2），人們可以對帖子發(fā)送不同的表情符號。因此，微交互是一個功能模塊，或者是整個產(chǎn)品。與產(chǎn)品互動時，微交互也許能幫助用戶了解做什么，如何做，后續(xù)是怎樣。精心設(shè)計的微交互使產(chǎn)品變得直觀，優(yōu)化了產(chǎn)品的用戶體驗。
當(dāng)微交互打造了與品牌產(chǎn)生共鳴的特殊體驗時，它化身為了品牌標(biāo)志。專業(yè)術(shù)語稱之為“標(biāo)志性時刻——產(chǎn)品或服務(wù)中給人留下持久而難忘印象的突出互動”（Janhagen, Leitch & Judelson, 2020）。
Facebook的“喜歡”按鈕是它的標(biāo)志性時刻。微交互并不僅僅局限于視覺，它們可以是聲音、觸覺、實體硬件或手勢交互。Snapchat的通知作為產(chǎn)品的標(biāo)志性時刻是因其獨特的聲音。同樣地，iPhone有一個中心按鈕作為蘋果的標(biāo)志，它有多個微交互方式。
微交互通常首選（Narvhus, J.M. 2016）：
我們將在之后的章節(jié)中研究一些微交互案例。
在進(jìn)入交互模型之前，我們將嘗試研究心智和心智表征，以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器：感知處理器、認(rèn)知處理器和運動處理器是如何工作以理解周圍世界。
認(rèn)知處理器與長期記憶和工作記憶一起工作，從現(xiàn)有的知識中提取物體、感覺、行動等的表征，以理解來自知覺處理器的輸入。一旦認(rèn)知處理器完成處理，它就會向運動處理器發(fā)出信號，以特定方式對特定情況采取行動。心智表征是現(xiàn)實世界中事物如何運作的心智模型或理解。
唐-諾曼的七個行為階段（諾曼，2013）（圖2）是一種更清晰的心智學(xué)形式，解釋了人類如何與物體互動以實現(xiàn)目標(biāo)。目標(biāo)可能是打開一盞燈或在移動應(yīng)用程序上進(jìn)行在線交易。讓我們把手機(jī)解鎖的簡單目標(biāo)分解成七個行動階段。
在這個循環(huán)的每個階段，都有一個輸入->處理->輸出的過程。在宏觀層面上，我們也在遵循同樣的過程來達(dá)到我們的目標(biāo)。我們可以從行動模型的七個階段推導(dǎo)出互動周期（Norman, 2013）（圖3）。
交互周期包括執(zhí)行過程和評估過程，前者是行動所需信息差，后者是行動發(fā)生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標(biāo)是消除差距，使產(chǎn)品變得直觀?，F(xiàn)在讓我們看看微交互的基礎(chǔ)結(jié)構(gòu)，了解它們?nèi)绾螏椭畔⒉睢?
微交互之所以強(qiáng)大，不僅僅是因為它們的細(xì)微交互差別或迷你尺寸，還因為它們構(gòu)建的方式。微交互的結(jié)構(gòu)包括四個部分（圖4）（Saffer，2013）：開啟微交互的觸發(fā)器，決定微交互如何運作的規(guī)則，以及影響微互動的元規(guī)則——闡明規(guī)則、循環(huán)和模式的反饋。
觸發(fā)器可以由用戶觸發(fā)，例如點擊圖標(biāo)、填寫表格等，觸發(fā)器也可以由系統(tǒng)產(chǎn)生，例如低電量提示框，通知用戶電池電量不足。
讓我們以Duo應(yīng)用中驗證用戶的微交互為例。
現(xiàn)在當(dāng)我們解構(gòu)微交互并理解其結(jié)構(gòu)時，微交互的結(jié)構(gòu)支持行動七階段理論，最終幫助消除執(zhí)行和評估之間的鴻溝。精心設(shè)計的觸發(fā)器便于用戶進(jìn)行計劃->指定->執(zhí)行行動，精心設(shè)計的規(guī)則和反饋便于用戶進(jìn)行感知->解釋->對比結(jié)果確認(rèn)完成目標(biāo)。我們將在下一節(jié)中談?wù)撚|發(fā)器、規(guī)則和反饋的設(shè)計，以了解微交互如何有效構(gòu)建所需的用戶體驗。
我們回看心智部分，認(rèn)知處理器不僅包含了不同事物如何工作的心智模型，并且隨著我們在日常生活中對新物體的體驗而不斷地發(fā)展。從這些心智模型中，設(shè)計師可以創(chuàng)建概念模型。作為關(guān)于產(chǎn)品和功能運作的高級計劃，概念模型一旦被建立就能被轉(zhuǎn)化為行動模型的七個階段，從而幫助我們創(chuàng)建對用戶來說很直觀的微交互。這是一種自下而上的方法，用于建立交互 -> 功能 -> 產(chǎn)品。
在上一節(jié)中，我們談到了交互模型和微交互的結(jié)構(gòu)，并探討了它們?nèi)绾螖y手使產(chǎn)品變得直觀好用?，F(xiàn)在我們將關(guān)注動態(tài)審美體驗，以及微交互如何在產(chǎn)品的微觀層面建立體驗。
審美體驗的韻律之舞有一個內(nèi)在的、動態(tài)的結(jié)構(gòu)。杜威指出了體驗建立的相關(guān)過程，如累積、保存、緊張張力和預(yù)期，來指稱體驗的內(nèi)部動態(tài)（McCarthy & Wright, 2004）。
完整的用戶體驗是這些動態(tài)的集合，它可以根據(jù)用戶過往經(jīng)驗和知識認(rèn)知而變化。過往經(jīng)驗和任何審美經(jīng)驗都取決于上下文：用戶的過往和能力，人工制品的技術(shù)，以及互動發(fā)生的任一物理、社會空間（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。當(dāng)我們與物體/產(chǎn)品互動時，觸覺、嗅覺、視覺和聽覺都會喚起體驗。
在過去的幾十年里，設(shè)計師們一直在關(guān)注這些觸發(fā)奇跡的交互。交互不應(yīng)該僅僅是傳達(dá)內(nèi)容和完成任務(wù)，它應(yīng)該引人思考，并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態(tài)微交互案例。
1）積累：指伴隨著體驗時間展開的積聚。我認(rèn)為谷歌支付作為微交互建立了用戶體驗，并包含非常優(yōu)秀的展開界面和支付完成音效。
這個之所以判定為其微交互，是因為它只專注于一件事，而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成（圖6）。動畫和音效帶來了一步步徐徐展開的體驗感受。
2）留存：指保留一些過往事物的趨勢，不論體驗還是內(nèi)容。文本或信息的保存對優(yōu)秀用戶體驗來說確實是必要的，畢竟這樣能減少認(rèn)知負(fù)擔(dān)。在網(wǎng)站和應(yīng)用程序上填寫表格時，許多微交互都保留了之前的填寫信息。
這類微交互的一個非常簡單的例子是，當(dāng)你復(fù)制一個鏈接并試圖將其輸入網(wǎng)絡(luò)瀏覽器時，瀏覽器會顯示直接粘貼鏈接的選項，甚至顯示你復(fù)制的內(nèi)容（圖7）。我們在這此觀察到與微交互的結(jié)構(gòu)不同的是重點更多地放在了交互的反饋上，它傳達(dá)的狀態(tài)是：你復(fù)制的內(nèi)容已保存，并可以用來搜索網(wǎng)頁瀏覽器。這是一個展示了我們?nèi)绾握{(diào)整微交互側(cè)重點來優(yōu)化體驗的優(yōu)秀案例。
3）張力：指體驗內(nèi)和參與體驗的人之間的關(guān)聯(lián)。這是社交媒體和流媒體平臺使用的一種技術(shù)，當(dāng)用戶期待在短時間內(nèi)快速閱覽內(nèi)容時，用戶不斷下滑來反復(fù)觸發(fā)刷新的微交互（圖8.） 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足，讓用戶在想快速瀏覽內(nèi)容時耐心等待。
這個特殊的微交互的重點是方式：即在內(nèi)容加載之前顯示一個加載器。
4）預(yù)期：它包含兩個時間階段。第一階段是用戶在交互中開始期待，第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵（圖9）。
這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發(fā)生，即使期望沒有發(fā)生。若是期望發(fā)生，那期待就是值得的。支付完成后，用戶進(jìn)入刮刮卡獎勵界面，對刮獎產(chǎn)生期待，點擊卡片進(jìn)行刮獎。刮獎微交互的重點是動作的觸發(fā)上，兼具有趣性和參與感，觸發(fā)本來可以只是一個點擊按鈕，但他們設(shè)計了一個刮擦動作作為觸發(fā)。
上文提到的各種例子可看出：通過調(diào)整微交互的元素來優(yōu)化體驗。微交互小而強(qiáng)的原因在于：它們是產(chǎn)品的差異化細(xì)節(jié)。好的微交互能讓產(chǎn)品提升一個等級。
我們認(rèn)識了精心設(shè)計的微交互在創(chuàng)造美好體驗方面的力量，現(xiàn)在讓我們來探討一下，如果糟糕的微交互可能會引發(fā)什么問題。
我想到的案例是手機(jī)通知。并不是說通知很糟糕，而是它設(shè)計得如此之好，以至于它有違用戶的意愿。通知是由系統(tǒng)發(fā)起的觸發(fā)器，它僅顯示部分信息來吸引用戶點擊。
每個人都會遇到這樣的情況：明明只是想看看時間，但在看到通知時點擊進(jìn)入信息，無聲無息之中半個小時就耗費了。這不僅僅耗費了時間，更嚴(yán)重的是人們在駕駛時也會分心看通知。
另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設(shè)計的微互動，是 Facebook 的標(biāo)志，但沒有人意識到一個微互動可以對人們的生活產(chǎn)生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數(shù)，因為它對用戶行為產(chǎn)生了負(fù)面影響。上面的例子也顯示出：小事情可以產(chǎn)生大影響。
微交互也會令人討厭，例如，在填寫表單最后點擊提交時，彈出一個對話框（圖10），說表單填寫中存在錯誤。這里的觸發(fā)器是提交按鈕，規(guī)則是顯示一個對話框，反饋是靜態(tài)文本——“有填寫有誤”。
這里的微交互形式是錯誤的，如果填寫有誤，提示應(yīng)該在出錯點附近。而且這里的反饋是糟糕的靜態(tài)文本，對用戶沒有任何用處，因為它沒有說明出錯的位置和類型。因此，微交互的使用和場景真的很重要。
縱觀全文，我們探討了什么是微交互，以及如何創(chuàng)建符合交互模型的微交互來消除執(zhí)行和評估之間的差距。接下來，我們研究了動態(tài)審美體驗，以及我們?nèi)绾卧诋a(chǎn)品的微觀層面上用微交互創(chuàng)造美好體驗。
設(shè)計師有幾種方法來創(chuàng)建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一種方法是把整個產(chǎn)品看成是一個微交互，如果你想增加另一個功能，那么就把它看成是另一個只包含一個微交互的產(chǎn)品。
我相信谷歌支付是以這種方式創(chuàng)建的，因為它是從支付開始，且只專注于支付，后來才引入了獎勵和其他內(nèi)容。
微交互有助于建立一個品牌標(biāo)志和提升用戶體驗。我們喜歡或者討厭產(chǎn)品的根源正是細(xì)節(jié)。細(xì)節(jié)是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。
作者：三分設(shè)
來源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
很多情況下，用戶選擇一個產(chǎn)品的理由是有沒有某個功能，但棄用的理由卻常是產(chǎn)品好不好用。能否打造優(yōu)質(zhì)的B端用戶體驗，成了影響B(tài)端產(chǎn)品用戶續(xù)約的一個關(guān)鍵因素。
(1）流程越短越好。 我們在上班、逛街的時候，傾向選擇一條最短的路線，希望用最少的時間到達(dá)目的地。用戶操作系統(tǒng)時也希望這樣。
(2）整合功能場景。 某個功能由誰、在什么場景下操作，以及可能會遇到什么問題、需要什么關(guān)聯(lián)功能來解決，如果功能點相互獨立， 關(guān)聯(lián)很少，會讓用戶用起來很不順手，有種斷層的感覺。
（3）有效指導(dǎo)異常。Saas 有一個特點是功能模塊間會盡可能相互獨立，基礎(chǔ)數(shù)據(jù)的設(shè)置和業(yè)務(wù)上面的使用往往是在不同的功能模塊內(nèi)。這會導(dǎo)致B端用戶在遇到空數(shù)據(jù)的情況下， 可能不知道該怎么操作。這時，需要要提示用戶按具體步驟操作來順利完成任務(wù)。
交互體驗，對上承接了業(yè)務(wù)，對下承接了視覺。好的交互體驗?zāi)茏寴I(yè)務(wù)流程簡捷，更關(guān)注用戶習(xí)慣。 B端產(chǎn)品的交互和C端產(chǎn)品差異較大，C端常用的移動客戶端屏幕小，可顯示的內(nèi)容較少，需要不停地跳轉(zhuǎn)完成操作，但B端產(chǎn)品大多用電腦來操作，一頁可顯示的內(nèi)容較多。所以做B端產(chǎn)品交互一般需要注意下面幾點：
(1）少跳轉(zhuǎn)。曾有用戶反饋，說某個功能操作流程太長了，操作起來很麻煩。通過走查發(fā)現(xiàn)流程其實是沒有問題的，不能再縮減流程了。通過可用性測試發(fā)現(xiàn)是因為跳轉(zhuǎn)頁面導(dǎo)致，用戶在操作時去了另一個界面，然后再返回來，讓用戶在操作時感覺流程更長。于是就把頁面跳轉(zhuǎn)優(yōu)化成了彈窗，彈窗里面操作完點擊關(guān)閉即可， 改后用戶覺得流程縮短了，操作效率更高了。
B 端產(chǎn)品能用彈窗的時候，不要跳轉(zhuǎn)，哪怕彈窗里面加彈窗，只要不跳出這個頁面，用戶都會覺得沒有阻斷他的操作。雖然，從交互的角度講，彈窗里再加彈窗不符合規(guī)范，但在實用性面前是可以商榷的。
(2）少彈窗。 相比彈窗，在某些場景下，有更好的處理方式。比如，直接放頁面上。 彈窗是點擊按鈕觸發(fā)的，自動完成操作后關(guān)閉，或者用戶手動關(guān)閉。雖然比跳轉(zhuǎn)好，但比不上在頁面上直接呈現(xiàn)高效。
頁面上直接呈現(xiàn)是理想狀態(tài)。但是往往因為內(nèi)容太多，很多時候不得不隱藏起來。直接呈現(xiàn)對于頁面的布局和設(shè)計都有極高的要求，原則是高頻且重點的內(nèi)容外露。
（3）交互形式統(tǒng)一。 整個系統(tǒng)里面的交互規(guī)則要保持一致，大到彈窗的出現(xiàn)形式是居中彈出還是右側(cè)滑出，小到多選控件是不是一致。 在整個系統(tǒng)里面相同的業(yè)務(wù)都用同一個控件。雖然可能由于一些業(yè)務(wù)的特殊性， 需要對控件做個性化處理，但不要影響整體的一致性。
(1）信息清晰。 信息清晰不僅指信息結(jié)構(gòu)的層次，還包括頁面的內(nèi)容，最好讓用戶一眼就能看到上面寫了什么，有什么功能。有些設(shè)計師不喜歡加黑、大、粗的字， 覺得不夠高級，而是根據(jù)自己的美感把字體設(shè)計為一些個性化字體，且字號不大。
很多時候B端用戶的操作時間比C端用戶長，他們需要長時間盯著頁面，所以頁面信息清晰就能減少他們的疲勞。
(2）信息緊湊。 當(dāng)頁面上想要呈現(xiàn)的內(nèi)容較多時，設(shè)計師一定要壓縮空間，使布局合理緊湊。
(3）少用圖標(biāo)。 有時候，設(shè)計師會使用圖標(biāo)來代替文字表達(dá)，并花大精力設(shè)計很好看的圖標(biāo)。圖標(biāo)的應(yīng)用在C端產(chǎn)品中非常常見，一是為了節(jié)省空間，二是為了美觀。但在B端產(chǎn)品中，大多數(shù)情況下，圖標(biāo)越少越好，有時文字的簡寫比圖標(biāo)來得直觀易懂。圖標(biāo)過多用戶需要使用很多遍才能記住每個按鈕的含義。
B端產(chǎn)品設(shè)計需要非常重視用戶體驗。這直接影響到用戶的工作效率，轉(zhuǎn)而影響到軟件的續(xù)約率。 為打造好的用戶體驗，我們通常從業(yè)務(wù)層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候，有些好的交互方案會受到技術(shù)框架的限制，導(dǎo)致方案無法實施。
但是為了產(chǎn)品獲得更好的用戶體驗，首要考慮的依然是用戶的使用流暢度、易用性，而不是實現(xiàn)的復(fù)雜程度、系統(tǒng)現(xiàn)有框架的限制、現(xiàn)有規(guī)范的標(biāo)準(zhǔn)。 系統(tǒng)上的難點應(yīng)當(dāng)留給內(nèi)部去解決，把最大的便利性留給用戶。這樣我們才能獲得更好的產(chǎn)品口碑、更高的續(xù)約率、更大的市場。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
在B端產(chǎn)品設(shè)計中，理解并設(shè)計好流程，對產(chǎn)品的體驗非常重要。通常涉及到有三個方面的流程：業(yè)務(wù)流程、審批流程、操作流程。
在企業(yè)的日常經(jīng)營中，為了對業(yè)務(wù)過程進(jìn)行更好的管理，企業(yè)會梳理出一系列流程、規(guī)范以及作業(yè)標(biāo)準(zhǔn)。流程化能夠幫助企業(yè)各崗位的員工更好地分工合作，使企業(yè)效率更高。對于 B端產(chǎn)品，設(shè)計師首先要讀懂業(yè)務(wù)流程，然后才能設(shè)計好產(chǎn)品。 業(yè)務(wù)流程，是指為達(dá)到特定的業(yè)務(wù)目標(biāo)而由不同的人分工合作完成的一系列活動?；顒又g不僅有嚴(yán)格的先后順序限定，而且活動的內(nèi)容、方式、責(zé)任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進(jìn)行流轉(zhuǎn)交接。
下圖是某企業(yè)的采購流程，涉及了五個部門、多個崗位角色、多個業(yè)務(wù)活動。
業(yè)務(wù)流程大多是企業(yè)根據(jù)業(yè)務(wù)特征、自身經(jīng)營特點以及資源配置情況而制定的，在業(yè)務(wù)上具有一定的通用性，但在具體應(yīng)用上又充滿了企業(yè)的個性。業(yè)務(wù)流程和單據(jù)是經(jīng)典搭檔，可以說“流程 + 單據(jù)=業(yè)務(wù)”， 每個環(huán)節(jié)的工作形成一張單據(jù)，記錄著時間、地點、參與人、業(yè)務(wù)狀況。當(dāng)這個環(huán)站的工作完成后，進(jìn)入到下一個環(huán)節(jié)的工作時，單據(jù)也會隨之流轉(zhuǎn)到下一個系統(tǒng)中對應(yīng)的功能節(jié)點，并形成一張新的單據(jù)，記錄新的信息。
下圖是某企業(yè)采購流程中從采購到結(jié)算部分涉及的單據(jù)：
除讀懂業(yè)務(wù)流程外，我們還需要應(yīng)用“場景驅(qū)動的設(shè)計”方法，整理出每個環(huán)節(jié)中涉及的用戶、場景，以及作業(yè)的特征，并大膽地通過設(shè)計來改造流程，最后通過設(shè)計減少人員工作量，減少流程中的多余環(huán)帶， 提升企業(yè)效率。這樣才能設(shè)計出對客戶有價值、用戶體驗好的產(chǎn)品。企業(yè)的收貨流程，要經(jīng)過到貨簽收、質(zhì)檢、 收貨入庫等過程，每個環(huán)節(jié)都會有諸多問題。下面是梳理了某企業(yè)收貨流程的簡易體驗地圖：
經(jīng)過對場景和可行性分析后，設(shè)計了一套新的業(yè)務(wù)流程。流程簡化為貨車司機(jī)直接將貨物送入指定倉庫的電子圍欄，并全自動質(zhì)檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產(chǎn)品經(jīng)理去完成，作為用戶體驗設(shè)計師在調(diào)研的過程中發(fā)現(xiàn)有好的流程優(yōu)化方法，或者看到好的競品值得參考，可以和產(chǎn)品經(jīng)理溝通一起推動產(chǎn)品業(yè)務(wù)流程用戶體驗的提升。
在企業(yè)中，出于對重點業(yè)務(wù)的管理需求，除了會制定固定的業(yè)務(wù)流程方便大家協(xié)作，還會對業(yè)務(wù)關(guān)鍵節(jié)點做審批。簡單的審批只需要在流程進(jìn)行到關(guān)鍵節(jié)點時，將重要結(jié)果發(fā)給相應(yīng)業(yè)務(wù)管理者審批。但是，由于一些企業(yè)組織機(jī)構(gòu)復(fù)雜，管理嚴(yán)格，為了保證業(yè)務(wù)的合規(guī)與安全，需要多個角色、多個環(huán)節(jié)的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統(tǒng)中是提交單據(jù))。
(2）各環(huán)節(jié)審批者會根據(jù)流程分別對材料進(jìn)行審批。
(3）審批通過后會自動進(jìn)行到下一步。
(4）審批不通過，就此流程結(jié)束。
(5）退回則打回到流程起點，待改進(jìn)后重新走流程。
(6）審批都通過后，審批流程結(jié)束。
在實際應(yīng)用中，可能會有非常復(fù)雜的流程與功能。比如除常規(guī)的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當(dāng)前審批人將審批材料轉(zhuǎn)給其他人。
(2）加簽：增加審批的步驟，在一些企業(yè)中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業(yè)或者國企，流程和功能更復(fù)雜。當(dāng)面對復(fù)雜而多變的審批需求時，需要將審批流程設(shè)計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設(shè)計得更加模塊化，可以在任何一個業(yè)務(wù)環(huán)節(jié)中加入審批過程。
在審批流程的設(shè)計中， 根據(jù)企業(yè)制定的審批規(guī)則，自動判斷是否符合標(biāo)準(zhǔn)，自動審批。尤其對一些每天都在發(fā)生、經(jīng)常重復(fù)而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發(fā)業(yè)務(wù)流程，以此來提高審批效率。
前面兩個流程主要基于企業(yè)業(yè)務(wù)制定，在企業(yè)沒有信息化前就已經(jīng)存在了，在改造優(yōu)化上還有一些阻力和困難。作為用戶體驗設(shè)計師，可以通過對操作流程的優(yōu)化來改進(jìn)用戶體驗。
以上文中的收貨案例為例子：
（1）系統(tǒng)中收到若干個質(zhì)檢任務(wù)。
(2）逐一打印質(zhì)檢單。
（3）帶著質(zhì)檢單來到倉庫，尋找需要質(zhì)檢的貨品。
(4）找到貨品，逐箱打開進(jìn)行檢查，業(yè)務(wù)操作不熟練的還需要詢問老員工。
(5） 將質(zhì)檢結(jié)果隨時記在打印出的質(zhì)檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統(tǒng)。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據(jù)實際工作中的業(yè)務(wù)場景，對操作流程進(jìn)行了優(yōu)化如下：
整個操作流程省去了“打印單據(jù)”“重復(fù)記錄單據(jù)”“詢問老員工” 的過程，并簡化了“尋找單據(jù)”的過程及記錄結(jié)果的過程。
在對操作流程的設(shè)計過程中，也應(yīng)遵循“場景驅(qū)動設(shè)計”的方法，并將物理實體、數(shù)字實體統(tǒng)一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復(fù)雜度。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
一、前言
視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內(nèi)容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設(shè)計不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。
視頻場景中目前已有部分的常規(guī)單向手勢已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！埂ⅰ鸽p擊→點贊」、「長按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規(guī)通用手勢認(rèn)知的基礎(chǔ)上，進(jìn)一步對視頻場景中的手勢交互進(jìn)行擴(kuò)容升級？這也是我們接下來在手勢進(jìn)階交互上的重點探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎(chǔ)通用手勢進(jìn)行打散重組、并結(jié)合實踐案例梳理出「組合手勢」設(shè)計模型，以探索如何在視頻場景中構(gòu)建便捷高效的進(jìn)階手勢體驗設(shè)計。
二、什么是「組合手勢」
「組合手勢」是基于常規(guī)手勢的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢所構(gòu)成，若組合方式及使用場景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機(jī)制一般可分為兩個階段：step1交互信號→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢發(fā)出交互信號，系統(tǒng)收到信號確認(rèn)后便可立即執(zhí)行任務(wù)，但整個過程是線性的，手勢擴(kuò)展性十分有限且難以滿足視頻場景對于手勢擴(kuò)容的訴求。
于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識別」環(huán)節(jié)，并梳理出「組合手勢」的設(shè)計模型，以探索不同基礎(chǔ)手勢相互組合后的擴(kuò)展可行性。
「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務(wù)，前兩階段均可由對應(yīng)的基礎(chǔ)分支手勢構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。
由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計靈活度，尤其需根據(jù)具體的使用場景進(jìn)行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。
2.競品調(diào)研及選型
通過對競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨立播控面板、長按觸發(fā)浮層播控選項、長按觸發(fā)特定播控功能。
選型A
「長按觸發(fā)獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴(kuò)展性較強(qiáng)，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發(fā)浮層播控選項」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項入口，一定程度上可延續(xù)視頻觀看的沉浸體驗，但浮層擴(kuò)展性有限；
選型C
「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設(shè)計方案
1）長按手勢交互擴(kuò)容
針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項」作為設(shè)計切入點。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對視頻場景中的播控菜單進(jìn)行設(shè)計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進(jìn)”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會對用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項目對于便捷手勢體驗的重要設(shè)計探索點。
基于此，我們決定嘗試使用「組合手勢」設(shè)計模型來對視頻播放器中的長按手勢進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項，以縮短視頻常用功能路徑。對應(yīng)到設(shè)計模型的三個階段分別為：
step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標(biāo)功能項以選擇功能；
step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。
「長按+向上滑選」快捷觸發(fā)對應(yīng)功能項；
「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對于此功能的使用習(xí)慣）。
2）容錯性兼容
在設(shè)定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習(xí)慣、以及對于滑選手勢需要有一定的適應(yīng)過程，我們同時也支持點選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點選的方式觸發(fā)對應(yīng)播控功能項。
3）易用性打磨
差異化的創(chuàng)新設(shè)計形式在前期總會面臨質(zhì)疑和挑戰(zhàn)，本次項目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測試，以預(yù)期在上線前可先收集一波體驗問題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測試目標(biāo)、用戶類別、測試前序準(zhǔn)備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測試。
測試訪談的過程中，被測用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
3.1 ）擴(kuò)展觸發(fā)熱區(qū)：
考慮到單手握持手機(jī)的使用場景，可盡可能擴(kuò)大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應(yīng)反饋：
靈活判斷當(dāng)前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時給出相對應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢觸發(fā)機(jī)制。
方案上線及驗證
以AB實驗對本次設(shè)計方案進(jìn)行定量測試驗證：
「對照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
「實驗組」效果：長按觸發(fā)“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經(jīng)過近半個月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實驗組」的“快進(jìn)”雖多了一步觸發(fā)步長，實驗前期“快進(jìn)”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴(kuò)展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進(jìn)行了二期的設(shè)計升級，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進(jìn)一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現(xiàn)實世界行為的映射，無論是基礎(chǔ)手勢還是組合類高級手勢，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場景中進(jìn)行設(shè)計。
以「組合手勢」設(shè)計模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項目實踐，我們進(jìn)一步對視頻播放器中更多功能場景進(jìn)行了便捷手勢的設(shè)計擴(kuò)容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續(xù)性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號，若在“雙指拖拽手勢”基礎(chǔ)上有識別到“雙指擴(kuò)張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結(jié)語
便捷手勢的設(shè)計出發(fā)點是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設(shè)計實踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場景的手勢交互體驗。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
今天來分享幾個設(shè)計案例，主要聊聊以下四個話題：
· 信息處理
· 裝飾元素的擺放
· 長頁面設(shè)計 模塊間要有差異
· 空間利用率
首先看這個彈窗需求，產(chǎn)品經(jīng)理給我們提供的原型圖是這樣的：
先不要急著開始畫，理解需求是最重要的一步。
這個彈窗最想要傳達(dá)給用戶什么信息？
「小窩準(zhǔn)備完成，寵物到家了」顯然是最重要的信息。排的時候就要使勁凸顯。
在經(jīng)過一些嘗試后，我們挑選出了以下兩版：
對于這個彈窗，版本 2 的層級會更舒服。
于是對版本 2 進(jìn)一步優(yōu)化。
1. 同樣的字號下，英文看著會比中文小。這上面用英文的「TA」不如直接寫中文，看著也會更加整齊：
2. 字體也是有性格的，它能夠影響頁面的風(fēng)格。所以將字體換成圓體，讓頁面更活潑可愛。
3. 盡量使上下兩段文字長短不一，看著會更有節(jié)奏感。
4. 標(biāo)點符號的細(xì)節(jié)很重要：有的字體標(biāo)點符號與文字看著不在一條線上，記得一定要對齊！
5. 標(biāo)題有點單調(diào)，我們再增加設(shè)計樣式，讓頁面更精致！
這樣就完成了，但是還是差了點什么：
是整個頁面太安靜了，少了一些熱鬧慶祝的氛圍，那就加一些彩帶裝飾吧。
在添加時，需注意大小對比、前后層次、造型差異化，才能加的自然好看。
1. 大小對比，有的彩帶大些長些，有些則小點短點。
2. 前后層次，有的在卡片前面，有的在卡片后方。
3. 造型差異化，除了彩帶再來點其他元素。
在一個長長長頁面里，相同的排版會沒有新鮮感，容易產(chǎn)生視覺疲勞。
我們可以通過兩種方式，讓設(shè)計模塊有差異。
1.排版不一
2.視覺不一
比如這個例子，同樣都是聽音樂，但是會用不同的排版穿插展示。
就算是同樣的排版，我們也可以在其中用不同的視覺。
比如以下這個案例：一開始它從頭到尾都是運用的一種視覺，排版也十分相似，頁面整體結(jié)構(gòu)也沒有主次。
在我們對不同模塊的卡片處理后，就好很多。
頁面的空間可以站在三維的角度去看，分為 x 軸、y軸、z 軸。
頁面的空間是十分寶貴的，當(dāng)頁面承載的內(nèi)容越來越多，我們不能只在 y 軸（高度）上一直增加頁面的高度。學(xué)會利用 x 軸（寬度）和 z 軸（深度）的空間能有效減短 y 軸（高度）。
4.1 利用 x 軸的空間
我們來看下面這個例子，他一開始采用的豎排方式：
如果我們將它改成橫排、滑動查看后，頁面就能夠展示更多的內(nèi)容，就越可能捕捉到用戶想看的信息。
這就是減少了 y 軸的空間，利用了 x 軸的空間。
4.2 利用 z 軸空間
z 軸空間就是利用深度、前后的空間，就像我們經(jīng)?？吹降摹疙撁娑恰?，下拉頁面后，在頁面的后面出現(xiàn)一些內(nèi)容：
這個 banner 的滑動也是利用了 z 軸空間：
以上就是我在空間利用率上面的收獲，大家心里留個印象，說不定之后就能解決一些相關(guān)的問題～
不知道今天分享的大家get到了嗎？總結(jié)一下～
1.信息處理：明確信息的層級關(guān)系，有助于信息處理。
2.裝飾元素：有大有小、有前有后、造型不同，會讓裝飾元素更自然
3.長頁面設(shè)計：模塊與模塊間要排版或視覺不一
4.空間利用率：把頁面當(dāng)成三維空間，除了 y 軸，也要考慮到 x 軸和 z 軸的空間利用。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
作者：花菜 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
如今人們出行都離不開手機(jī)，都通過手機(jī)接觸過互聯(lián)網(wǎng)地圖，手機(jī)地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優(yōu)勢，形成了成熟的地圖交互體驗。在解析手機(jī)地圖的體驗設(shè)計前，讓我們先看看地圖的發(fā)展歷程。
地圖擁有著古老的歷史，記錄了人類對世界認(rèn)知的演進(jìn)過程，經(jīng)歷過泥板、壁畫、羊皮、紙張等載體，依據(jù)使用和文化需要擁有著豐富多樣的美術(shù)形式。不同時期、材質(zhì)、美術(shù)形式的地圖見證人們認(rèn)識世界的過程。
隨著照相機(jī)和飛機(jī)的發(fā)展，出現(xiàn)了航空攝影測量技術(shù)，讓地圖的測繪精準(zhǔn)度達(dá)到頂峰。交通、旅游、印刷業(yè)的發(fā)展，讓紙媒地圖開始融入人們的生活，地圖的平面設(shè)計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。
再隨著衛(wèi)星影像、瓦片地圖技術(shù)和互聯(lián)網(wǎng)的發(fā)展，人們可以日常地使用電子地圖。受限于網(wǎng)絡(luò)速度的限制，矢量地圖應(yīng)運而生，在特定范圍顯示相應(yīng)的矢量瓦片信息，讓互聯(lián)網(wǎng)地圖的形狀趨向統(tǒng)一化。
iPhone革命性的觸屏體驗，通過手勢與地圖進(jìn)行直觀自然的交互體驗，結(jié)合內(nèi)置GPS、陀螺儀傳感器，小藍(lán)點成為地圖定位的通用標(biāo)志，激發(fā)更多地圖的功能和創(chuàng)意。
二、手機(jī)地圖的創(chuàng)新體驗
手機(jī)地圖繼承了互聯(lián)網(wǎng)電子地圖的可快速迭代、信息可實時更新的優(yōu)勢，結(jié)合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務(wù)和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。
手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區(qū)域。更革命性的是讓地圖從平面到立體之間的順滑轉(zhuǎn)換，幫助人們更好的映射到真實世界。
可視化信息是互聯(lián)網(wǎng)地圖的主要優(yōu)勢之一，將數(shù)據(jù)轉(zhuǎn)化為可視化圖形，歸類在不同的數(shù)據(jù)層，可以單個或多個層級疊加在地圖上展示，傳達(dá)位置上的數(shù)據(jù)。
底圖是手機(jī)地圖的基礎(chǔ)，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內(nèi)容不斷細(xì)化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內(nèi)容。
觸屏手勢交互有別于搖桿、鼠標(biāo)、觸控筆等物理外設(shè)的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現(xiàn)方式。
單指拖動
拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。
單指劃動
當(dāng)用戶想快速翻閱時會撥走要略過的內(nèi)容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區(qū)域，是比拖動要快速的瀏覽方式。
雙指拖動縮放
物理控件只能讓地圖根據(jù)屏幕中心進(jìn)行縮放，而觸屏縮放能讓地圖根據(jù)兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認(rèn)知。
雙指劃動縮放
劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標(biāo)位置。
單指快捷縮放
為了讓用戶能單手并可控地縮放地圖，不少地圖都設(shè)計了自己獨有的縮放方式。 zenly，通過屏幕兩側(cè)的邊緣，直接完成地圖的最大和最小縮放跨度。
snapchat拖動右側(cè)邊可緣喚起縮放滑塊，并使用emoji來表達(dá)距離，充滿幽默感。
騰訊地圖，通過劃動右側(cè)的滑塊，實現(xiàn)單手順滑地縮放，滑塊也支持劃動手勢。
百度地圖，通過點擊一個縮放控件，讓地圖以當(dāng)前中心點進(jìn)行分段縮放。
無限循環(huán)的地圖
地球是圓的，可以無限巡航，一些應(yīng)用將縮到最小的世界地圖做循環(huán)處理，以呼應(yīng)地球的循環(huán)轉(zhuǎn)動體驗。
方向視角切換
在陌生的環(huán)境用戶未必能分得清楚南北方向，利用手機(jī)的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉(zhuǎn)到用戶面向的方向，有助于用戶二次確認(rèn)自己的定位。
更多地圖使用了2D/3D視角的切換方式，2D是南北向的標(biāo)準(zhǔn)地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對應(yīng)物理空間。
旋轉(zhuǎn)方向
可通過雙指或陀螺儀旋轉(zhuǎn)地圖，地圖上的文字也做出相應(yīng)調(diào)整，保持水平、沿道路方向調(diào)整，以保證可讀性。
3D的旋轉(zhuǎn)也一樣，在保持水平和沿道路方向的同時，文字保持垂直。
當(dāng)縮小到足夠遠(yuǎn)時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。
雙指拖動調(diào)整視角
地圖3D視角也支持自由調(diào)節(jié)，通過雙指平行的上下滑動，可以平順調(diào)整3D視圖鳥瞰的角度。
在地圖的最低視角做回彈處理，生動不呆板。
遠(yuǎn)近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進(jìn)時有俯沖的感覺。
四、可視化信息：生動呈現(xiàn)地圖動態(tài)數(shù)據(jù)
從古代開始，人們就已經(jīng)懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進(jìn)行標(biāo)記，地圖本身就是一個信息可視化工具。 互聯(lián)網(wǎng)地圖最大的優(yōu)勢，就是能提供實時的信息數(shù)據(jù)。將數(shù)據(jù)標(biāo)記在相應(yīng)位置的坐標(biāo)上，并分別歸類在不同的層級，疊加在地圖上查看。
地圖的常用數(shù)據(jù)形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內(nèi)容。
點數(shù)據(jù)
點數(shù)據(jù)是單個地理坐標(biāo)上的標(biāo)記，代表該位置上的信息，是地圖上最常用的數(shù)據(jù)信息。地圖通過不同的小圖標(biāo)來區(qū)分位置類型，使用頻率越高的樣式越簡潔，地標(biāo)建筑做形象化圖形標(biāo)識。
聚合圖在地圖上呈現(xiàn)也是點數(shù)據(jù)，它實質(zhì)是顯示一定區(qū)域內(nèi)的信息聚合，但不強(qiáng)調(diào)具體的區(qū)域。聚合圖可以避免因為該區(qū)域的點數(shù)據(jù)過多，在地圖上信息過于密集。
百度的充電樁地圖就是以區(qū)域聚合充電樁數(shù)量，根據(jù)縮放調(diào)整數(shù)據(jù)的聚合。
騰訊地圖的文博地圖也是聚合圖，并根據(jù)文物的類型做了快速篩選。
線數(shù)據(jù)
線數(shù)據(jù)在地圖上呈現(xiàn)為線性，一般都沿著可行道路展示信息。導(dǎo)航路線是最常用的線數(shù)據(jù)，它提供具體行駛路線方案，并實時展示線路行駛的進(jìn)度與方向。
也有粗略表示進(jìn)度的線路數(shù)據(jù)，如快遞的物流進(jìn)度路線就不需要具體的實際線路，只需要示意大致進(jìn)程。
街景地圖則僅展示有全景圖的道路范圍，不提供進(jìn)度與方向。
面數(shù)據(jù)
面數(shù)據(jù)要展示地圖上的具體區(qū)域，疫情環(huán)境下出現(xiàn)了區(qū)域風(fēng)控需求，需通過了面數(shù)據(jù)畫出區(qū)域范圍。疫情地圖采用了聚合圖、面區(qū)塊兩種數(shù)據(jù)形式。
zenly使用了反向的面數(shù)據(jù)，根據(jù)用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。
熱力圖
熱力圖以特殊的高亮梯度顯示地圖上區(qū)域的熱度，熱力圖的數(shù)據(jù)不會指向地圖上具體的位置，它能呈現(xiàn)熱度變化的趨勢。百度地圖用熱力圖直觀展示地區(qū)上的擁擠程度。
高德地圖的空氣質(zhì)量地圖，使用聚合圖作為空氣質(zhì)量評分，熱力圖作為空氣質(zhì)量范圍。
snapchat使用熱力圖來表現(xiàn)該區(qū)域用戶發(fā)布動態(tài)的熱度，引導(dǎo)用戶發(fā)現(xiàn)內(nèi)容，由于熱力圖不指向具體位置，能更好的保護(hù)用戶隱私。
熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數(shù)據(jù)，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經(jīng)地點。
路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。
讓數(shù)據(jù)動起來
地圖是安靜的，但真實世界是忙碌的，讓數(shù)據(jù)動起來，給地圖增添更多情感化設(shè)計，緩解用戶的等待壓力。
忙碌的商家
外賣小哥端午節(jié)雨中送餐
公交努力奔來
五、底圖：為更好呈現(xiàn)信息的色彩系統(tǒng)
手機(jī)地圖的底圖最常使用矢量瓦片地圖，因為數(shù)據(jù)體積小，在互聯(lián)網(wǎng)環(huán)境下讀取速度快。矢量地圖用幾何圖形來表達(dá)區(qū)域，不展示具體細(xì)節(jié)，因此需要通過顏色去傳達(dá)不同區(qū)域的屬性或功能。
人們對于顏色和環(huán)境是能建立一定的聯(lián)想的，如綠色想到大自然，藍(lán)色想到水，紅色想到警示。根據(jù)人們對色彩的聯(lián)想，給矢量地圖中不同屬性的區(qū)域進(jìn)行配色，幫助用戶理解地圖。谷歌地圖就曾經(jīng)為不同類型的信息標(biāo)記出700多種顏色，最后簡化為25個顏色，形成了地圖的色彩系統(tǒng)。
工具類地圖應(yīng)用以地圖為核心基礎(chǔ)，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統(tǒng)。由于人們對區(qū)域功能的顏色聯(lián)想是相似的，各地圖廠商的標(biāo)準(zhǔn)地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關(guān)心的數(shù)據(jù)。
而一些垂直場景的應(yīng)用，地圖區(qū)域功能的描述相對次要，通常會對地圖的用色進(jìn)行大幅度精簡。以打車應(yīng)用為例，地圖用色少且色調(diào)相近，突出核心的打車狀態(tài)信息顏色，同時體現(xiàn)應(yīng)用的品牌特色。
不少運用地圖的概念設(shè)計中，會更極致的使用單色系地圖，僅突出數(shù)據(jù)信息的顏色，充滿未來感。
六、未來的地圖
隨著網(wǎng)絡(luò)速度的提升，手機(jī)硬件的升級，順應(yīng)AR/VR技術(shù)的發(fā)展，地圖逐步進(jìn)入3D和全真時代。蘋果地圖在現(xiàn)有的地圖的3D視圖下，已對地標(biāo)建筑賦予更多細(xì)節(jié)，并在夜間模式模擬了燈光效果。
3D地圖就像是虛擬世界中的基礎(chǔ)建設(shè)一樣，蘋果地圖添加精細(xì)地標(biāo)模型后，同時應(yīng)用到Carplay的導(dǎo)航中，在駕駛時可直觀看到與現(xiàn)實世界對應(yīng)的3D地標(biāo)。
谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。
同時全真模擬日照和天氣系統(tǒng)，和現(xiàn)實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。
隨著地圖的立體全真化，地圖的數(shù)據(jù)也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助AR設(shè)備，人們無需對照地圖即可完成導(dǎo)航。
結(jié)語
地圖歷來是人們借助藝術(shù)的手法，以極具想象力的方式對世界進(jìn)行再現(xiàn)，它遵循科學(xué)測量的法則，使用幾何的線條和形狀對地球的進(jìn)行抽象化。地圖反映了制作者對世界的認(rèn)知，而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀。但地圖并非單純地呈現(xiàn)地球，而是呈現(xiàn)人們眼中的世界，它寄托著人們對美好生活的想象，更好的認(rèn)識、探索和規(guī)劃世界。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://sillybuy.com