滴滴出行App在5.0版本進行了產品設計的大改造,整體使用體驗有了較大提升。滴滴CDC團隊為這次改版專門寫了一篇長文,從交互框架、視覺表現、品牌層面闡述其設計理念。正如鄰桌產品總監說的“滴滴有錢有人,又有了喘息時間,可以處理下用戶體驗的問題了”。通過最近的使用,我認為滴滴本次改版亮點很多,但最大的提升在于改善了“層次感”。
“層次感”的概念
互聯網產品設計師面對需求如何開始設計,我學到的一個基礎而又重要的方法就是從“層次感”入手:先確定信息層次,誰重要、誰次要、哪些需要分組在一起,然后據此,利用留白、顏色、圖形、字體、材質、動效等界面元素來展現他們。好用的產品設計不是靠靈感,不是靠抄襲競品,它有內在的邏輯:產品的視覺展現服務于信息層次。
最新的iOS10人機交互指南中,把最重要的三個原則中的Clarity調整了順序,放在了第一位,有興趣的同學可以翻看下,“層次”的概念和iOS設計指南中關于Clarity的解釋是類似的。
滴滴出行5.0實例
滴滴出行最核心的業務在于用車流程,即“首頁-發單-等待匹配-等待服務-服務中-服務結束-支付評價”,我們選擇其中“發單”為例。
(如上是兩個版本的發單頁面對比,僅從直觀感受,我們就能發現,4.x版本的頁面信息層級區分不明顯,沒有明顯的視覺焦點,而5.x版本則清晰明確很多)
用我們剛提到的理論做分析,分兩步走
第一步:信息層次的區分是否合理?(先確定信息層次,誰重要、誰次要、哪些需要分組在一起)
第二步:信息層次的展現是否有效?(用留白、顏色、圖形、字體、材質、動效等界面元素來展現信息層次)
信息層次區分是否合理?
用戶在首頁選擇了出發地和目的地后,進入發單頁,在這里可執行的操作和需要展示的信息我們可以由重要到次要梳理如下(也許這就是我們做產品設計時,產品經理給的需求):
A.價格信息/B.叫車按鈕/C.切換用車時間/D.更改目的地出發地/E.更改用車類型
把梳理出來的信息層次和4.x版本的發單頁對比,我們發現,4.x版本存在的問題是:
1.最吸引視線的是叫車按鈕,但用戶最先需要看到的是價格信息
2.更改目的地出發地這個信息層級不太高的內容和最重要的價格信息放在了一個層級上
3.切換用車時間和更改目的地出發地兩個層級的信息被無端融合在一起,容易引起困惑
而5.x版本則沒有這樣的問題,信息層次的區分和用戶需求是吻合的。
信息層次的展現是否有效?
5.x版本更重要的升級在于信息層次的展現上
1.采用了深色填充叫車按鈕,既保證了清晰度,又不至于太搶眼
2.把價格信息組重新排版,弱化價格外的其他信息,適時的隱藏不必要的信息,排除干擾
3.把出發地目的地在地圖上弱化展示,與價格信息完全區分開來
4.頂部車型更換采用了更“輕”的處理方式,被選中的車型文本僅變換顏色,取消了表示選中狀態的“卡片”
即:5.x版本比4.x版本更好的做到了“該強化的強化,該弱化的弱化”,相信這一定經歷了一番痛苦的討論,但用戶使用起來會覺得爽多了。
除“發單頁”外,滴滴出行5.0版本的大多數頁面都對信息層級做了更好的區分,比如側導航加重了選項圖標的顏色,與下方次要信息更好區分層次;我的行程頁把行程信息做了更合理的區分和展示。這些"層次感"分明的頁面共同構成了滴滴出行5.0優秀的用戶體驗。
總結補充
在平面設計中,通過對“對齊/對比/分組/重復”這樣的設計基礎原理層面的調整常常能使普通的設計作品大幅提高質感。在互聯網產品設計中應該也一樣,通過對“層次感”的梳理和展現,也能給產品用戶體驗帶來一次大的提升。