<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          垂類品牌年輕化重塑—有駕品牌升級

          ui設計分享達人

          什么是“有駕”

          【有駕】是百度旗下的汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。 

          現狀分析

          有駕品牌在孵化初期,重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號,減少歧義,強化用戶的感知。

          但是隨著品牌持續運營進入新的階段,我們發現現有的設計無法滿足后續的運營訴求了,主要體現在:

          品牌logo:不能體現汽車的行業屬性,缺乏成體系的品牌符號和VI體系,色彩上也不夠符合時下潮流的年輕配色體系。

          品牌活動:品牌關聯度弱,活動維度單一。



          項目概述

          因此,我們重新梳理有駕的品牌定位與調性,借助本次品牌升級,打造有駕差異化風格,形成獨有的視覺印記。

          因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知,在原有基礎上進行品牌標識的探索及應用,以強化品牌感知,提升品牌的競爭力,整合業務資源做心智觸達。





          前期分析

          前期我們對汽車垂類的競品進行了一輪調研,并且結合有駕的用戶群里,尋找有駕品牌的差異點。

          有駕用戶群體年輕化為主,普遍具有高學歷,集中在新一線二線城市。

          通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后,我們確定了有駕品牌設計的四個核心關鍵詞:年輕、科技、未來、專業。



          建立體系

          在明確設計方向后,我們梳理了線上線下的所有品牌觸點,結合前期的調研結論,匯總出了有駕設計系統的完整框架,以確保品牌設計的完整性和靈活適用性。




          設計落地

          基于前期分析洞察結論,我們在繼承圓形和車形的基礎上,對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入,簡化圖形形態,嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。




          相對于升級前,新版的logo加入汽車元素,解決升級前logo的行業屬性不明確的問題,讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋,輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。





          符號提煉

          確定品牌logo后,為了確保品牌能夠更好的拓展應用,進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型,造型偏向輪胎;在不破壞原有型的基礎上,加入一些折角的質感的變化,使圖形變化更加豐富,更有識別度。





          設計語言

          為了更好的觸達到各業務場景,所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向,以適配不同的落地場景。結合有駕的年輕化,科技感的設計目標,探索出以下三種質感呈現:






          符號拓展

          在提取的形狀基礎上進行變形,增加折疊細節。在大事件活動,海報等場景使用,增加品牌關聯度。




          設計字體

          結合全新的品牌定位,我們也優化了有駕的品牌字體,從細節出透出有駕的品牌感知。




          品牌手冊

          新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。

          目前我們也對現有的品牌手冊進行拓展和完善,同步到業務方,以便更好的保證各業務場景觸點下品牌的認知和統一,達到提質增效的目的。



          品牌落地

          除了對品牌對角度的塑造和升級,我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中,讓有駕品牌形象更加立體多元。









          結語

          目前有駕品牌升級已經取得階段性成果,沉淀出更加完善的品牌資產,不僅提升設計效率保證全鏈路的品牌曝光,也為業務規?;蛳禄A。之后我們也將不斷完善和擴充品牌資產,將設計成果不斷落地到業務中,細化業務目標并與設計目標緊密結合,多維度助力業務的高速發展。


          作者:百度MEUX
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          作者:百度MEUX     來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          效率至上|帶你認識提升用戶效率的4種方法

          ui設計分享達人

          從事體驗設計這么多年,經歷過多款B端和C端產品的體驗設計,有了一定的個人感悟。由于兩者用戶群體、使用場景、產品定位等方面的不同,讓兩者的體驗設計策略也存在較大的差異。但是無論是B端還是C端產品,有一個共同的體驗目標就是“提升用戶的操作效率”。甚至在一定程度上,C端產品比B端產品要求更高。

          為什么這么說呢?

          因為C端產品面臨激烈的市場競爭,如果效率方面存在明顯的不足,用戶很容易就轉向其他平臺了。而B端產品一旦部署上線,不菲的產品價格,平臺切換的風險,數據遷移的成本等因素,很容易形成產品的護城河。雖然用戶內心已是萬馬奔騰,但是依舊要自己摸索嘗試、查看文檔、或者請教別人來完成工作任務。

          今天我們了解下C端產品用戶行為路徑中提升效率的4種方法。



          一、用戶行為探知

          用戶行為探知,就是根據用戶的操作行為或特定的時間,系統給出相應的推薦操作。

          1、用戶操作感知

          最常見的就是截屏操作產生的行為引導,目前主流的產品應用都會做出分享功能提示。在淘寶中,由于商品鏈接無法在微信中直接分享,所以淘寶對可能的用戶分享行為都進行了設計優化。

          例如用戶在商品頁面截屏時,系統會自動復制淘口令,既方便用戶分享給好友,又方便了對方快速獲取商品信息,避免了圖片分享過程中的復雜操作。同樣微信在用戶發信息時,會自動提示是否要發送截圖內容,減少了用戶選擇圖片等操作流程,提升了用戶效率。



          (左圖:淘寶截屏提示 右圖:微信提示截屏信息)

          2、用戶行為分析

          高德地圖在特定時間段,開啟導航時會默認給出“上班路線”的按鈕,方便用戶快速導航。此外還在地址中增加了“常搜”標簽,根據當前地址優先顯示常搜的地址,幫助用戶快速完成導航設定。



          二、用戶行為引導

          用戶行為引導,就是通過用戶行為流程分析,在用戶路徑中增加相關功能的曝光和引導,讓流程更加流暢,從而提高用戶的操作效率。

          1、行為流程引導

          淘寶購物商品詳情頁中,在最后幾張商品圖片中植入了評價信息和入口,更加符合用戶的心智,引導性也更強。同時用戶可以直接選擇自己喜歡的款式查看商品評價,操作效率也更高。

          而且增加評論引導后,實現了用戶在首屏就可以了解商品、價格和用戶評價,有利于用戶對商品作出初步的購買決策,從而提高用戶效率。



          相比之下,專門的評價模塊進入后默認顯示全部商品的評價信息,用戶需要手動選擇才能查看自己喜歡的商品款式的評價信息,無形中拉長了用戶的行為路徑,增加了用戶操作成本。

          2、操作行為轉化

          在今日頭條中,搜索行為與資訊內容綁定。用戶在瀏覽的資訊后,資訊下方會自動顯示搜索關鍵詞,可以幫助用戶更快捷的進行搜索操作。

          同樣在熱榜資訊下方增加了詳情提示,引導用戶去查看事件詳情。



          (左圖:搜索關鍵詞推薦 右圖:熱榜引導)

          三、用戶行為聚合

          手機產品屏幕的空間相對較小,展示內容有限。因此需要根據用戶行為,將相關功能聚合,讓用戶在一屏中可以獲取更多的信息,從而提高用戶效率。

          在天貓部分商品詳情頁中,將商品參數集合在了商品名稱右側,保證了用戶在不滑動屏幕的情況下,就可以直接讀取商品參數。方便了用戶快速了解商品信息,提升了用戶的購物效率。

          考拉海購則在部分商品首屏中,直接分類展現出了商品的型號和款式分類,并且實現了商品價格聯動,提升了用戶獲取信息的效率。



          四、用戶行為記憶

          減少用戶的記憶成本,最好的方法就是讓系統產生記憶。因此大多數APP都會提供歷史瀏覽記錄等功能,方便用戶查找相關信息。而內容型產品為了更好的提高用戶操作效率,則是將用戶行為記憶直接保留在內容層面上。

          我們常見的音樂類產品會留存音樂的播放進度,用戶點擊后就可以直接再次播放。



          (左圖:喜馬拉雅 右圖:網易云音樂)

          微信公眾號文章閱讀時,會對用戶閱讀位置增加錨點。用戶再次閱讀時,自動定位到上次退出時位置,從而提高用戶的閱讀效率。

          微信“看一看”進入時,內容會自動刷新,提供更多新的內容給用戶,為了幫助用戶更好地區分新內容,微信增加了瀏覽位置提醒。

          同樣對于用戶未完成的文章內容,用戶再次進入時,今日頭條會給出繼續閱讀的提示信息,方便用戶快速操作。



          總結

          在提升用戶效率時,我們需要關注用戶場景和行為路徑,從而尋找到更多的效率提升突破口,主要包含以下3個注意點:

          1、明確用戶的行為路徑,尋找用戶核心關切點,提升用戶效率;

          2、轉移用戶操作成本,讓系統承擔更多的行為判斷和用戶引導;

          3、用戶行為聚合時,應當集中關鍵的行為信息,避免對用戶核心行為造成干擾;

          以上就是我對提升用戶效率方法的分析和總結,歡迎大家留言交流。

          作者:子牧先生

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          設計師需要懂得用戶體驗

          ui設計分享達人

          設計師需要懂得用戶體驗知識











          作者:董康
          來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          萬字拆解鐵路12306APP丨一次次改版后變的越來越好了

          博博

          有人說它是全世界最牛逼的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 車次詳情頁
          進入列車的「車次詳情頁」,可以查看當前車次的完整信息,比如檢票狀態、候車室、檢票口和全程??空尽⑼A粜畔?。在這個頁面,還提供了「關注列車」的功能(關注后并無關注數據,顯得很雞肋),以及直接預訂當前車次的入口。



          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咨詢、用戶體驗公司、軟件界面設計公司

          用戶體驗 | 從生活中感悟峰終定律

          ui設計分享達人

          本文講述了“峰終定律”的定義,并結合筆者生活中的兩個例子做了圖文分析,最后通過學習海底撈的案例,然后結合顧客角度將一次糟糕的活動進行了改進。

          一、峰終定律定義:

          峰終定律( Peak–End Rule),是由丹尼爾·卡尼曼(2002年諾貝爾經濟學獎獲得者,心理學家)提出的——他發現人們對體驗(體驗事物或者產品)的記憶由兩個因素決定:

          • 第一個因素是體驗最高峰時的感覺(最高峰分為正的最高峰和負的最高峰)。
          • 第二個因素是體驗結束時的感覺。

          即,除了峰值和終值時之外的其他體驗,無論好與不好體驗的比重是多少,體驗時間的長短,對記憶或感受都沒那么大影響,會被選擇性忽略。

          概念講完,下面筆者結合去飯店買飯的故事,使用“峰終定律”進行圖文分析,為什么一家飯店給我的體驗非常糟糕,而另一家飯店我愿意推薦我的同事也去嘗試。

          二、兩個故事

          1. 第一家體驗不好的店:某燒臘飯店

          之前有一段時間飯店聯合天地壹號搞活動,買飯送一瓶鐵罐裝的天地壹號。某天中午下班提前5分鐘到了飯店,我特意說明了要醬汁,老板的“嗯嗯哦哦”充滿了敷衍。

          我看著店里配餐員配餐、出餐,然后我問這份是不是我的,店里服務員支支吾吾,也沒有看著我,然后那份飯被拿去跟天地壹號的工作人員合影,一張不滿意又拍一張,一個角度拍完又換一個角度。最后,飯店的服務員才把那份飯給我,當時我心里憋了一股氣,就差破口大罵:我中午吃飯+午睡時間就一個小時,為了能睡好點還要吃得快點。

          這家店給我的體驗就是,不把用戶當用戶,心里非常不是滋味。

          而當我向同事說起這家店時,我會推薦手撕雞飯,這是我在廣州吃過的最好吃的手撕雞飯, 沒有之一。同時,我還會說上面的故事給同事,最后評價道:可以試試的,另外,出餐質量有問題他們也會給你換一份的。

          當我說完這次的經歷給同事聽,同事并沒有表示會去嘗試一次,因為我說的故事,又因為價格也不便宜。所以說,店鋪(或者說品牌)是在食物(或者說餐品)之前被消費的,這是給用戶留下第一印象的關鍵,第一印象不好,即便是廣州第一手撕雞,也不會去嘗試。

          那么使用“峰終定律”去分析這次糟糕的就餐體驗就是:

          峰值有兩個,正峰值是廣州第一手撕雞的“口味”,負峰值是“員工服務”。負峰值的出現,說明了店家在活動開始前并沒有設計好活動流程,服務員也就沒有足夠的授權去處理和應對。

          終值是“離店”時的不爽,店家并沒有作出任何的正面回應,沒有表達歉意,沒有意識到這樣做會給顧客造成怎樣的影響。

          “員工服務”是直接突破了我的忍耐底線,“離店”時店家的不作為再次挑戰了我的忍耐底線。短時間內兩次挑戰我的忍耐底線,店家不但“失去”了我,我的幾個同事也不會是潛在客戶了。

          忍耐底線不是卡尼曼教授的理論,是我結合了梁寧老師講過的內容,然后加到了這張“用戶體驗模型”圖上。

          梁寧老師講的是:“PC時代用戶等待一個頁面打開的忍耐底線平均數是7秒,等了7秒還沒打開,基本上99%的用戶就會離開。所以,對成本的控制是本分,但是不能挑戰用戶的忍耐底線?!?

          2. 第二家體驗好的店:某粥粉面飯店

          某天中午我發現寫字樓下新開了一家飯店,我到店里問老板,有什么賣的好的推薦一下,老板面帶笑容用“廣普”跟我一一介紹:哪個菜用什么材料做,哪個湯用什么材料燉,吃不了辣可以吃……在老板眾多推薦中選了一份,第一次嘗試這家店,總體感覺不錯。后面選擇了老板推薦的肉餅飯,發現真合我胃口。

          上兩周有兩天中午休息時都到店里想點肉餅飯,但是連續兩天都在我來之前賣完了,之后老板說可以掃門口的小程序預約下單,第二天上班我早早的就預約了肉餅飯,到店之后老板已經打包好了,我把訂單信息給老板看,老板說了一句我聽到就覺得好笑,并且每當給人推薦這家店時就說的一句話:“這是我們專門給您留的肉餅飯?!?

          當我笑著回應謝謝的時候我也在想,這飯是我在小程序上面早早預定的,老板還說是專門我留的;因為我先付錢了,所以老板不賣給別人了。

          我又想到,這家店的老板是愿意站在顧客的角度來提供對應的服務的,并且我也確實感受到了老板的真誠、熱情。

          于是我把這家店介紹給了幾個同事,他們都表示下次沒有自己帶午餐的時候會試一下,并且有兩個同事聽了我的推薦后去下單了,其中有一位同事表示會回購。

          這家店給我的體驗就是,不把用戶當流量,心里有用戶,產品可以,用戶自然會安利給身邊人嘗試一下。

          使用“峰終定律”去分析這次就餐體驗就是:

          有兩個正峰值,第一個正峰值是讓我感受到店家心里有顧客的“員工服務”。第二個正峰值是“口味”,這里甚至有一點點主觀上的小驚喜:當時抱著不知道會不會踩雷,試試新店的心態,當我試到肉餅飯時,小驚喜就來了——比我以往在外面吃到的肉餅飯都好吃。

          小結:

          當我跟同事同事說起第一家飯店體驗不好的時候,并不是說他的“港式氛圍”裝修不好,不是說出餐有問題不給換新的,手撕雞也是廣州最好吃的,而是說,這家店給我的感覺是他并不像跟用戶建立長期關系,只做一桿子買賣。于是他們并不注重維護客情關系,當他們把合過影的手撕雞飯遞給我時,連安撫情緒的話都沒有,就餐體驗自然就糟糕透了。

          那么如果我是這家燒臘飯店的主理人,那我會如何設計本次活動?

          我們先看看餐飲行業的巨頭都是怎么做的,因服務被大家口口相傳的海底撈就是非常值的學習的對象。

          三、使用“峰終定律”分析最近一次我去海底撈時的體驗

          通過模型,我有以下幾點感悟:

          • 排隊時海底撈提供的各種免費服務及零食飲料,目的是降低顧客等待叫號的無聊感,甚至讓顧客心甘情愿地等待叫號就餐,進而提高顧客滿意度。
          • 海底撈從顧客排隊,到顧客就餐,最后離店,打造了一套密集的正峰值的服務觸點。因此人們講到海底撈最先想起的就是海底撈服務。
          • 上圖列舉的點無明顯的負峰值,并且有很多服務觸點都是免費的,這就要求海底撈必須投入相應的資源,那么成本必然會少不了。
          • 關于資源與成本。理想情況下,每一個服務觸點都需要妥善處理。但實際情況是,我們不可能讓用戶在所有服務觸點都達到預期,我們必須在有限的資源下,換取用戶更多的正峰值與更好的終值,因此如何控制成本,合理配置有限的資源非常重要。

          服務觸點:用戶為了完成目標,需要做一系列連續的行為,而這一連串行為中會涉及到一個一個的用戶與產品完成交互的觸點,這就是服務觸。比如上圖所示的,海底撈出于提高轉化率、降低顧客等待叫號時的無聊感等原因,在顧客排隊時可以體驗免費的美甲服務、免費擦鞋服務等。

          四、燒臘飯店活動改進方案

          帶著學習完海底撈得出的感悟,下面我來嘗試思考一下,我現在是這家燒臘飯店的主理人,那我會這樣設計本次活動:

          首先需要了解我們的顧客:

          1、顧客畫像

          附近街坊、附近上班族,方便快捷解決午/晚餐。

          2、顧客預期

          選擇符合自己口味的菜品,店內就餐/打包回公司吃;店家穩定出餐(口味穩定、不要有異物等);不希望排長龍。

          3、服務觸點

          點餐時、支付時、等待出餐時(排隊)、(打包完)出餐時、離店時。

          其次,才到本次活動的設計:

          1、背景

          贊助商天地壹號需要做品牌推廣,找到我們合作,方案就是消費即送天地壹號一瓶。

          2、目的

          幫助合作伙伴宣傳的同時,吸引新的顧客,回饋老顧客,提升營業額。

          3、具體方案

          3.1、制作印有“12.1~12.3日,消費即送天地壹號一瓶,送完即止”的宣傳海報,并且放置在店鋪門口。

          3.2、完善服務流程。(請看下圖)

          3.3、設置幾種異常情況的應對方案。(請看下圖)

          完善好服務流程,提前設置好幾個異常情況的應對方案,相比于海底撈一連串的各種免費服務,其實花不了多少實際的金錢成本。但是卻能用最少的資源,最大程度的避免“負峰值”的出現。

          另外,天地壹號的工作人員提出合影,飯店應該用自己的員工餐,而不是用顧客的。這其實不是異常情況的應對方案,而是作為服務行業從業人員該有的覺悟。

          本文到此結束,朋友們如果設計/體驗了好的“峰終體驗”的案例,麻煩在評論區告知我一聲,讓我也去體驗一把~

          作者:我是Berwin
          來源:人人都是產品經理
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          設計怎樣讓用戶「同時」做好多件事?

          ui設計分享達人

          時間對于我們每個人來說都極為重要和珍貴。隨著生活節奏的加速,很多產品也都開始注重和考慮對于用戶時間的節省和分配。本文重點分享三種在交互設計中幫助用戶「同時做幾件事」的設計方法,以及其對應的優秀案例:

          • 分割屏幕的布局
          • 更容易再續操作
          • 忽略非重要操作

          希望會為你帶來更多的設計靈感。

          01 分割屏幕的布局

          通過將屏幕的布局進行分割處理,可同時呈現多項內容,讓用戶自由選擇任務主次,同時處理多項任務。分屏設計很常見,但其中的體驗細節卻依舊值得研究和優化。

          案例1

          微信在 Pad 端的分屏布局考慮得很周到,看微信視頻時支持分屏功能,還能夠調整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機尺寸,體驗順暢,看視頻、接微信兩不誤:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例 2

          bilibili 在移動端的視頻通過小窗模式可以不間斷播放,不僅可以在 App 內或外呈現小窗模式,正在播的視頻,在被臨時打斷退出視頻后,還可以用音頻的方式繼續播放:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例 3

          微信的新功能,在你閱讀文章時依舊能看到朋友發來的微信消息,可以直接在當前頁面回復消息,避免你在看文章時閱讀不了微信消息。你還可以將信息“標記未讀”,一會兒再做處理:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例4

          微信視頻號改版后,點擊視頻號下方的博主名稱和頭像,下方彈窗會彈出該博主的主頁和其他視頻,而當前正在播放的視頻會漸漸呈現小屏播放,視頻內容不會被遮擋,既不影響觀看,也不影響用戶探索該博主的其他視頻內容:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例 5

          在微信訂閱號中展示的視頻內容可以通過劃到右下角變成小窗播放音頻,既可以聽內容,也不影響你繼續瀏覽訂閱號的其他內容:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          02 更容易再續操作

          產品可以讓操作更容易被用戶管理和掌控,在被打斷后很容易被用戶重新再續,給用戶足夠的掌控感。在一些特殊情況下,幾件事可以交替、穿插地處理,同時進行。

          案例 1

          釘釘的移動端浮窗功能,向右滑動退出正在操作的頁面時,就會出現添加浮窗區域,用于收錄未做完的操作。同時顯示出已添加浮窗的內容數量,最多添加 5 個:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例2

          微信的浮窗功能也可以幫助用戶更快捷地收錄未及時閱讀的內容,在打開時還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時間來閱讀長篇文章,可以更合理地掌控閱讀節奏:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例3

          微信讀書 App 會在你跳讀到其他章節時,在頁面下方顯示“返回原進度”的按鈕,方便你在跳讀后回來繼續閱讀:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例4

          網易163 郵箱側重于為你呈現工作的多線程。每點開一封郵件,頁面上方會增加一個類似瀏覽器標簽頁的 Tab,你可以通過它們查看自己的工作和閱讀軌跡。當你在寫郵件時,同時又收到了其他的新郵件,去查看新郵件之后,可以通過 Tab 直接回到郵件編輯頁面,繼續編寫剛才的郵件:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例5

          使用釘釘發起會議邀請,如果中途退出,系統幫助你自動保存。再發起會議邀請時也會給出上次操作的提示,幫你續寫內容:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          03 忽略非重要操作

          用戶可以選擇忽略或隱藏并不重要的、正在進程中的任務,將更多的時間用在其他事情而非無法控制的等待上。

          案例1

          iOS 系統中,當你在不同 App 之間傳遞文件時,如果文件過大,彈窗的“取消”按鈕會在幾秒鐘之后變成“隱藏”,用戶點擊后可以繼續做其他操作,并不妨礙后臺的文件傳輸。

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例2

          微信在接收超大文件時,增加了“發送給朋友”的選項,你不必等待文件在自己這邊下載完成后再發送,可以直接發送源文件給對方,同時下載:

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          案例3

          微信撥打語音的界面,在等待好友接聽的過程中,你可以看到對方朋友圈的動態,緩解無聊的等待,也為即將進行的語音聊天提供了話題

          案例錦囊|設計怎樣讓用戶「同時」做好多件事?

          作者:元堯
          來源:人人都是產品經理
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、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):

          • 溝通反饋。
          • 開啟和關閉某項功能,如將手機靜音。
          • 實現一個單一的任務,如喜歡一個Facebook上的帖子。
          • 控制一個正在進行的進程:顯示更改或系統狀態,如加載條或狀態圖標。
          • 改變一個設置。
          • 防止人為錯誤。
          • 查看或制作內容。

          我們將在之后的章節中研究一些微交互案例。

          三、交互模型與微交互結構

          1. 人類處理器模型

          在進入交互模型之前,我們將嘗試研究心智和心智表征,以更好地理解人類如何與世界上的物體互動。(Newell & Card, 1985)文章談到了三個不同的處理器:感知處理器、認知處理器和運動處理器是如何工作以理解周圍世界。

          認知處理器與長期記憶和工作記憶一起工作,從現有的知識中提取物體、感覺、行動等的表征,以理解來自知覺處理器的輸入。一旦認知處理器完成處理,它就會向運動處理器發出信號,以特定方式對特定情況采取行動。心智表征是現實世界中事物如何運作的心智模型或理解。

          2. 諾曼交互模型

          唐-諾曼的七個行為階段(諾曼,2013)(圖2)是一種更清晰的心智學形式,解釋了人類如何與物體互動以實現目標。目標可能是打開一盞燈或在移動應用程序上進行在線交易。讓我們把手機解鎖的簡單目標分解成七個行動階段。

          1. 目標是手機解鎖。
          2. 我如何解鎖手機?輸入密碼或掃描手指指紋。
          3. 選擇哪個方式?如果我選擇輸入密碼,那么就在屏幕上按順序點擊密碼。
          4. 一旦我有了行動規范,就可以執行任務。
          5. 點擊回車鍵后,將看到后續發生的事情。
          6. 我看到我已經到達了主界面。
          7. 我根據以往經驗判斷是否已經完成了目標。

          微交互:細節決定成敗

          在這個循環的每個階段,都有一個輸入->處理->輸出的過程。在宏觀層面上,我們也在遵循同樣的過程來達到我們的目標。我們可以從行動模型的七個階段推導出互動周期(Norman, 2013)(圖3)。

          交互周期包括執行過程和評估過程,前者是行動所需信息差,后者是行動發生時各類情況所需理解的信息差。整體用戶體驗取決于交互過程中互動周期的每個部分。微交互的目標是消除差距,使產品變得直觀?,F在讓我們看看微交互的基礎結構,了解它們如何幫助消除信息差。

          3. 微交互的結構

          微交互之所以強大,不僅僅是因為它們的細微交互差別或迷你尺寸,還因為它們構建的方式。微交互的結構包括四個部分(圖4)(Saffer,2013):開啟微交互的觸發器,決定微交互如何運作的規則,以及影響微互動的元規則——闡明規則、循環和模式的反饋。

          觸發器可以由用戶觸發,例如點擊圖標、填寫表格等,觸發器也可以由系統產生,例如低電量提示框,通知用戶電池電量不足。

          微交互:細節決定成敗

          讓我們以Duo應用中驗證用戶的微交互為例。

          • 觸發器:向我發一個推送通知是微交互的觸發器(圖5(a))。
          • 規則:它將發送帶有兩個動作的通知(圖5(b))。用戶必須點擊這兩個動作中的一個(圖5.(c))。
          • 反饋:一旦用戶點擊批準,它將顯示帶有“登陸”的綠色提示。(圖5.(d))
          • 循環和模式:如果你選擇了在7天內記住本次登陸,下次登錄時它將直接顯示綠色提示,而不是向你發送推送通知。

          微交互:細節決定成敗

          現在當我們解構微交互并理解其結構時,微交互的結構支持行動七階段理論,最終幫助消除執行和評估之間的鴻溝。精心設計的觸發器便于用戶進行計劃->指定->執行行動,精心設計的規則和反饋便于用戶進行感知->解釋->對比結果確認完成目標。我們將在下一節中談論觸發器、規則和反饋的設計,以了解微交互如何有效構建所需的用戶體驗。

          我們回看心智部分,認知處理器不僅包含了不同事物如何工作的心智模型,并且隨著我們在日常生活中對新物體的體驗而不斷地發展。從這些心智模型中,設計師可以創建概念模型。作為關于產品和功能運作的高級計劃,概念模型一旦被建立就能被轉化為行動模型的七個階段,從而幫助我們創建對用戶來說很直觀的微交互。這是一種自下而上的方法,用于建立交互 -> 功能 -> 產品。

          四、審美與微交互

          在上一節中,我們談到了交互模型和微交互的結構,并探討了它們如何攜手使產品變得直觀好用?,F在我們將關注動態審美體驗,以及微交互如何在產品的微觀層面建立體驗。

          審美體驗的韻律之舞有一個內在的、動態的結構。杜威指出了體驗建立的相關過程,如累積、保存、緊張張力和預期,來指稱體驗的內部動態(McCarthy & Wright, 2004)。

          完整的用戶體驗是這些動態的集合,它可以根據用戶過往經驗和知識認知而變化。過往經驗和任何審美經驗都取決于上下文:用戶的過往和能力,人工制品的技術,以及互動發生的任一物理、社會空間(Petersen, Iversen, Krogh, & Ludvigsen, 2004)。當我們與物體/產品互動時,觸覺、嗅覺、視覺和聽覺都會喚起體驗。

          在過去的幾十年里,設計師們一直在關注這些觸發奇跡的交互。交互不應該僅僅是傳達內容和完成任務,它應該引人思考,并鼓勵人們以不同的方式思考變化。我們將展示一些喚起了不同審美體驗的動態微交互案例。

          微交互:細節決定成敗

          1)積累:指伴隨著體驗時間展開的積聚。我認為谷歌支付作為微交互建立了用戶體驗,并包含非常優秀的展開界面和支付完成音效。

          這個之所以判定為其微交互,是因為它只專注于一件事,而且建立了非常充實的體驗。這個交互開始于點擊支付端->選擇銀行卡->加載->支付完成(圖6)。動畫和音效帶來了一步步徐徐展開的體驗感受。

          2)留存:指保留一些過往事物的趨勢,不論體驗還是內容。文本或信息的保存對優秀用戶體驗來說確實是必要的,畢竟這樣能減少認知負擔。在網站和應用程序上填寫表格時,許多微交互都保留了之前的填寫信息。

          這類微交互的一個非常簡單的例子是,當你復制一個鏈接并試圖將其輸入網絡瀏覽器時,瀏覽器會顯示直接粘貼鏈接的選項,甚至顯示你復制的內容(圖7)。我們在這此觀察到與微交互的結構不同的是重點更多地放在了交互的反饋上,它傳達的狀態是:你復制的內容已保存,并可以用來搜索網頁瀏覽器。這是一個展示了我們如何調整微交互側重點來優化體驗的優秀案例。

          3)張力:指體驗內和參與體驗的人之間的關聯。這是社交媒體和流媒體平臺使用的一種技術,當用戶期待在短時間內快速閱覽內容時,用戶不斷下滑來反復觸發刷新的微交互(圖8.) 。微交互帶給用戶參與感以牢牢抓住其注意力。它帶來的延遲滿足,讓用戶在想快速瀏覽內容時耐心等待。

          這個特殊的微交互的重點是方式:即在內容加載之前顯示一個加載器。

          微交互:細節決定成敗

          4)預期:它包含兩個時間階段。第一階段是用戶在交互中開始期待,第二階段是用戶從交互中得到期望反饋。我想到的微交互是Google Pay India的刮刮卡獎勵(圖9)。

          這個特殊的微交互為它在印度帶來了巨大的成功。人們喜歡期待好事發生,即使期望沒有發生。若是期望發生,那期待就是值得的。支付完成后,用戶進入刮刮卡獎勵界面,對刮獎產生期待,點擊卡片進行刮獎。刮獎微交互的重點是動作的觸發上,兼具有趣性和參與感,觸發本來可以只是一個點擊按鈕,但他們設計了一個刮擦動作作為觸發。

          上文提到的各種例子可看出:通過調整微交互的元素來優化體驗。微交互小而強的原因在于:它們是產品的差異化細節。好的微交互能讓產品提升一個等級。

          五、微交互會引人討厭嗎?

          我們認識了精心設計的微交互在創造美好體驗方面的力量,現在讓我們來探討一下,如果糟糕的微交互可能會引發什么問題。

          我想到的案例是手機通知。并不是說通知很糟糕,而是它設計得如此之好,以至于它有違用戶的意愿。通知是由系統發起的觸發器,它僅顯示部分信息來吸引用戶點擊。

          每個人都會遇到這樣的情況:明明只是想看看時間,但在看到通知時點擊進入信息,無聲無息之中半個小時就耗費了。這不僅僅耗費了時間,更嚴重的是人們在駕駛時也會分心看通知。

          另一個案例是 Facebook 的著名的“喜歡”按鈕。這個精心設計的微互動,是 Facebook 的標志,但沒有人意識到一個微互動可以對人們的生活產生如此大的影響。近期 Instagram 停止顯示帖子上的點贊數,因為它對用戶行為產生了負面影響。上面的例子也顯示出:小事情可以產生大影響。

          微交互:細節決定成敗

          微交互也會令人討厭,例如,在填寫表單最后點擊提交時,彈出一個對話框(圖10),說表單填寫中存在錯誤。這里的觸發器是提交按鈕,規則是顯示一個對話框,反饋是靜態文本——“有填寫有誤”。

          這里的微交互形式是錯誤的,如果填寫有誤,提示應該在出錯點附近。而且這里的反饋是糟糕的靜態文本,對用戶沒有任何用處,因為它沒有說明出錯的位置和類型。因此,微交互的使用和場景真的很重要。

          六、結論

          縱觀全文,我們探討了什么是微交互,以及如何創建符合交互模型的微交互來消除執行和評估之間的差距。接下來,我們研究了動態審美體驗,以及我們如何在產品的微觀層面上用微交互創造美好體驗。

          設計師有幾種方法來創建微交互,方法一是自下而上思考,把一切都想得越小越好后,再建立功能。另一種方法是把整個產品看成是一個微交互,如果你想增加另一個功能,那么就把它看成是另一個只包含一個微交互的產品。

          我相信谷歌支付是以這種方式創建的,因為它是從支付開始,且只專注于支付,后來才引入了獎勵和其他內容。

          微交互有助于建立一個品牌標志和提升用戶體驗。我們喜歡或者討厭產品的根源正是細節。細節是向用戶展示你以用戶為中心并為用戶著想的方法。這就是微小的事情會帶來巨大差異的原因。

          作者:三分設

          來源:人人都是產品經理

          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          B端用戶體驗的三個層面

          ui設計分享達人

          一、前言

          很多情況下,用戶選擇一個產品的理由是有沒有某個功能,但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗,成了影響B端產品用戶續約的一個關鍵因素。

          二、業務體驗層 

          (1)流程越短越好。 我們在上班、逛街的時候,傾向選擇一條最短的路線,希望用最少的時間到達目的地。用戶操作系統時也希望這樣。

          (2)整合功能場景。 某個功能由誰、在什么場景下操作,以及可能會遇到什么問題、需要什么關聯功能來解決,如果功能點相互獨立, 關聯很少,會讓用戶用起來很不順手,有種斷層的感覺。

          (3)有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立,基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下, 可能不知道該怎么操作。這時,需要要提示用戶按具體步驟操作來順利完成任務。 

          三、交互體驗層

          交互體驗,對上承接了業務,對下承接了視覺。好的交互體驗能讓業務流程簡捷,更關注用戶習慣。 B端產品的交互和C端產品差異較大,C端常用的移動客戶端屏幕小,可顯示的內容較少,需要不停地跳轉完成操作,但B端產品大多用電腦來操作,一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點:

          (1)少跳轉。曾有用戶反饋,說某個功能操作流程太長了,操作起來很麻煩。通過走查發現流程其實是沒有問題的,不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致,用戶在操作時去了另一個界面,然后再返回來,讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗,彈窗里面操作完點擊關閉即可, 改后用戶覺得流程縮短了,操作效率更高了。

          B 端產品能用彈窗的時候,不要跳轉,哪怕彈窗里面加彈窗,只要不跳出這個頁面,用戶都會覺得沒有阻斷他的操作。雖然,從交互的角度講,彈窗里再加彈窗不符合規范,但在實用性面前是可以商榷的。

          (2)少彈窗。 相比彈窗,在某些場景下,有更好的處理方式。比如,直接放頁面上。 彈窗是點擊按鈕觸發的,自動完成操作后關閉,或者用戶手動關閉。雖然比跳轉好,但比不上在頁面上直接呈現高效。

          頁面上直接呈現是理想狀態。但是往往因為內容太多,很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求,原則是高頻且重點的內容外露。

          (3)交互形式統一。 整個系統里面的交互規則要保持一致,大到彈窗的出現形式是居中彈出還是右側滑出,小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性, 需要對控件做個性化處理,但不要影響整體的一致性。 

          三、視覺體驗層 

          (1)信息清晰。 信息清晰不僅指信息結構的層次,還包括頁面的內容,最好讓用戶一眼就能看到上面寫了什么,有什么功能。有些設計師不喜歡加黑、大、粗的字, 覺得不夠高級,而是根據自己的美感把字體設計為一些個性化字體,且字號不大。

          很多時候B端用戶的操作時間比C端用戶長,他們需要長時間盯著頁面,所以頁面信息清晰就能減少他們的疲勞。

          (2)信息緊湊。 當頁面上想要呈現的內容較多時,設計師一定要壓縮空間,使布局合理緊湊。

          (3)少用圖標。 有時候,設計師會使用圖標來代替文字表達,并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見,一是為了節省空間,二是為了美觀。但在B端產品中,大多數情況下,圖標越少越好,有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。

          四、總結

          B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率,轉而影響到軟件的續約率。 為打造好的用戶體驗,我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候,有些好的交互方案會受到技術框架的限制,導致方案無法實施。

          但是為了產品獲得更好的用戶體驗,首要考慮的依然是用戶的使用流暢度、易用性,而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決,把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。


          作者:忻蕓
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          從流程角度提升用戶體驗

          ui設計分享達人

          一、前言

          在B端產品設計中,理解并設計好流程,對產品的體驗非常重要。通常涉及到有三個方面的流程:業務流程、審批流程、操作流程。

          二、業務流程 

          在企業的日常經營中,為了對業務過程進行更好的管理,企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作,使企業效率更高。對于 B端產品,設計師首先要讀懂業務流程,然后才能設計好產品。 業務流程,是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動?;顒又g不僅有嚴格的先后順序限定,而且活動的內容、方式、責任等也都必須有明確的安排和界定,以使不同活動在不同崗位角色之間進行流轉交接。

          下圖是某企業的采購流程,涉及了五個部門、多個崗位角色、多個業務活動。

          業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的,在業務上具有一定的通用性,但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔,可以說“流程 + 單據=業務”, 每個環節的工作形成一張單據,記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后,進入到下一個環節的工作時,單據也會隨之流轉到下一個系統中對應的功能節點,并形成一張新的單據,記錄新的信息。

          下圖是某企業采購流程中從采購到結算部分涉及的單據:

          除讀懂業務流程外,我們還需要應用“場景驅動的設計”方法,整理出每個環節中涉及的用戶、場景,以及作業的特征,并大膽地通過設計來改造流程,最后通過設計減少人員工作量,減少流程中的多余環帶, 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程,要經過到貨簽收、質檢、 收貨入庫等過程,每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖:

          經過對場景和可行性分析后,設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄,并全自動質檢、入庫,大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成,作為用戶體驗設計師在調研的過程中發現有好的流程優化方法,或者看到好的競品值得參考,可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。

          三、審批流程 

          在企業中,出于對重點業務的管理需求,除了會制定固定的業務流程方便大家協作,還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時,將重要結果發給相應業務管理者審批。但是,由于一些企業組織機構復雜,管理嚴格,為了保證業務的合規與安全,需要多個角色、多個環節的審批,這個流程即是審批流程。


          (1)首先員工提交需要審批的材料(系統中是提交單據)。

          (2)各環節審批者會根據流程分別對材料進行審批。 

          (3)審批通過后會自動進行到下一步。 

          (4)審批不通過,就此流程結束。

          (5)退回則打回到流程起點,待改進后重新走流程。

          (6)審批都通過后,審批流程結束。 

          在實際應用中,可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外,還會有改派、加簽、抄送等。

          (1)改派:當前審批人將審批材料轉給其他人。

          (2)加簽:增加審批的步驟,在一些企業中還會有前加簽、后加簽。

          (3)抄送:將材料同時抄送給某人或某角色。

          以上只是列舉一些常用的動作,在一些大型企業或者國企,流程和功能更復雜。當面對復雜而多變的審批需求時,需要將審批流程設計得更加靈活、自由,具有自定義功能。另外,需要將審批流程設計得更加模塊化,可以在任何一個業務環節中加入審批過程。

          在審批流程的設計中, 根據企業制定的審批規則,自動判斷是否符合標準,自動審批。尤其對一些每天都在發生、經常重復而不重要的事情,可以完全省去人工審批的過程,采用自動審批,自動觸發業務流程,以此來提高審批效率。

          四、操作流程 

          前面兩個流程主要基于企業業務制定,在企業沒有信息化前就已經存在了,在改造優化上還有一些阻力和困難。作為用戶體驗設計師,可以通過對操作流程的優化來改進用戶體驗。

          以上文中的收貨案例為例子:

          (1)系統中收到若干個質檢任務。

          (2)逐一打印質檢單。 

          (3)帶著質檢單來到倉庫,尋找需要質檢的貨品。

          (4)找到貨品,逐箱打開進行檢查,業務操作不熟練的還需要詢問老員工。 

          (5) 將質檢結果隨時記在打印出的質檢單上。

          (6) 逐一檢查完畢,回到辦公室,將信息錄入系統。

          這個過程繁瑣,而且在操作的過程中,容易出錯。因此根據實際工作中的業務場景,對操作流程進行了優化如下:

          整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程,并簡化了“尋找單據”的過程及記錄結果的過程。

          在對操作流程的設計過程中,也應遵循“場景驅動設計”的方法,并將物理實體、數字實體統一考慮,充分利用各自的特點,盡最簡化用戶的 操作流程,并降低操作的復雜度。


          作者:忻蕓
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合