'設計覆盤:智慧交通設計語言的應用與實施'

設計 交通 工業設計 設計師 素描 鄭州 讀書 人人都是產品經理 2019-08-03
"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

設計覆盤:智慧交通設計語言的應用與實施

(3)小提示

最後再將信息的關鍵要點進行概括,由少量文字組成,形成一個小標籤來做信息大關係的一個小提示,幫助用戶更好的類比信息,理解信息

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

設計覆盤:智慧交通設計語言的應用與實施

(3)小提示

最後再將信息的關鍵要點進行概括,由少量文字組成,形成一個小標籤來做信息大關係的一個小提示,幫助用戶更好的類比信息,理解信息

設計覆盤:智慧交通設計語言的應用與實施

六、信息結構化

信息以簡潔和結構化的方式呈現,幫助用戶更易於接收和消化信息內容。視覺層次的構建很大程度上依賴排版。我們必須圍繞內容進行設計,有效的傳遞信息,賦予內容形式,為內容服務。

Jeff Johnson《認知與設計—理解UI設計準則》中提到利用格式塔原理對信息進行排版,是視覺識別模型的其中一種,也是在視覺設計中應用得最多的。例如將相關內容組織到一起,使他們的物理位置接近,相關的內容被看成一個信息組,這就是接近性原則。如果多個信息組放在一起我們就會將他們歸成一個大類,這就是相似性原理。這些原理在工作中不是獨立存在的,而是綜合運用的。

我們對所有流程中的信息進行梳理,提取共性,同時根據不同的使用場景差異化的展示,將信息以特定的組合方式有規律排列,形成結構化的信息模型,增強視覺識別性與體驗記憶點。幫助用戶高效獲取他們想要的內容,並達成目標。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

設計覆盤:智慧交通設計語言的應用與實施

(3)小提示

最後再將信息的關鍵要點進行概括,由少量文字組成,形成一個小標籤來做信息大關係的一個小提示,幫助用戶更好的類比信息,理解信息

設計覆盤:智慧交通設計語言的應用與實施

六、信息結構化

信息以簡潔和結構化的方式呈現,幫助用戶更易於接收和消化信息內容。視覺層次的構建很大程度上依賴排版。我們必須圍繞內容進行設計,有效的傳遞信息,賦予內容形式,為內容服務。

Jeff Johnson《認知與設計—理解UI設計準則》中提到利用格式塔原理對信息進行排版,是視覺識別模型的其中一種,也是在視覺設計中應用得最多的。例如將相關內容組織到一起,使他們的物理位置接近,相關的內容被看成一個信息組,這就是接近性原則。如果多個信息組放在一起我們就會將他們歸成一個大類,這就是相似性原理。這些原理在工作中不是獨立存在的,而是綜合運用的。

我們對所有流程中的信息進行梳理,提取共性,同時根據不同的使用場景差異化的展示,將信息以特定的組合方式有規律排列,形成結構化的信息模型,增強視覺識別性與體驗記憶點。幫助用戶高效獲取他們想要的內容,並達成目標。

設計覆盤:智慧交通設計語言的應用與實施

七、焦點指引

在用戶使用我們的定製產品時,我們需要幫助用戶明確每一步需要做什麼事情,強調突出指示信息,從視覺的角度來說,大致可以歸納為:大小、粗細、多少,以此來控制一個頁面的節奏感。

大小也就是字體的大小、粗細就是字體重量的區別,多少也就是間距疏密關係的把握。我們通過強化的頁面標題,以通俗簡短的語句,清晰明確此頁面的操作指引,明確用戶所需要做的事情,幫組用戶做出每一步的選擇完成出行目標。

通過間距來劃分,運用更大的空間來間隔,構建更加清晰乾淨的界面,易於閱讀同時也讓閱讀得到休息,形成閱讀的節奏感。拉長距離引導關注,可以通過增加元素周圍的空間使元素更顯著,只要確保留白的頁面空間能通過內容去引導視線,同樣起到焦點指引的作用。

如在乘車憑證的設計,將乘車口令信息以誇張的大的加粗字體放置在頁面中同時增加上下左右的空間,形成一個強烈的視覺引導,讓乘客與司機都能非常清晰的看到口令信息,驗票上車。把更多的傳達融合在更少的元素中,設計降噪,我們需要減少不必要的干擾信息,儘量簡化精確內容,形成焦點指引,讓用戶降低疑慮與抉擇的時間。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

設計覆盤:智慧交通設計語言的應用與實施

(3)小提示

最後再將信息的關鍵要點進行概括,由少量文字組成,形成一個小標籤來做信息大關係的一個小提示,幫助用戶更好的類比信息,理解信息

設計覆盤:智慧交通設計語言的應用與實施

六、信息結構化

信息以簡潔和結構化的方式呈現,幫助用戶更易於接收和消化信息內容。視覺層次的構建很大程度上依賴排版。我們必須圍繞內容進行設計,有效的傳遞信息,賦予內容形式,為內容服務。

Jeff Johnson《認知與設計—理解UI設計準則》中提到利用格式塔原理對信息進行排版,是視覺識別模型的其中一種,也是在視覺設計中應用得最多的。例如將相關內容組織到一起,使他們的物理位置接近,相關的內容被看成一個信息組,這就是接近性原則。如果多個信息組放在一起我們就會將他們歸成一個大類,這就是相似性原理。這些原理在工作中不是獨立存在的,而是綜合運用的。

我們對所有流程中的信息進行梳理,提取共性,同時根據不同的使用場景差異化的展示,將信息以特定的組合方式有規律排列,形成結構化的信息模型,增強視覺識別性與體驗記憶點。幫助用戶高效獲取他們想要的內容,並達成目標。

設計覆盤:智慧交通設計語言的應用與實施

七、焦點指引

在用戶使用我們的定製產品時,我們需要幫助用戶明確每一步需要做什麼事情,強調突出指示信息,從視覺的角度來說,大致可以歸納為:大小、粗細、多少,以此來控制一個頁面的節奏感。

大小也就是字體的大小、粗細就是字體重量的區別,多少也就是間距疏密關係的把握。我們通過強化的頁面標題,以通俗簡短的語句,清晰明確此頁面的操作指引,明確用戶所需要做的事情,幫組用戶做出每一步的選擇完成出行目標。

通過間距來劃分,運用更大的空間來間隔,構建更加清晰乾淨的界面,易於閱讀同時也讓閱讀得到休息,形成閱讀的節奏感。拉長距離引導關注,可以通過增加元素周圍的空間使元素更顯著,只要確保留白的頁面空間能通過內容去引導視線,同樣起到焦點指引的作用。

如在乘車憑證的設計,將乘車口令信息以誇張的大的加粗字體放置在頁面中同時增加上下左右的空間,形成一個強烈的視覺引導,讓乘客與司機都能非常清晰的看到口令信息,驗票上車。把更多的傳達融合在更少的元素中,設計降噪,我們需要減少不必要的干擾信息,儘量簡化精確內容,形成焦點指引,讓用戶降低疑慮與抉擇的時間。

設計覆盤:智慧交通設計語言的應用與實施

八、服務設計

在定製巴士這個項目中給我最大的感受,就是更加近距離的深入接觸到了用戶。對於定製巴士產品而言,除了在線上產品做到好的用戶體驗之外,更重要的還有線下服務體驗這一環是否能夠給用戶提供良好的乘車感受。所以我們要在線上產品設計中做好拼車流程指引,線下流程也需要做好找車乘車的服務指引。

因此在產品上線前我們做了1輪用戶調研,通過眾測與跟訪去發現在產品服務流程中存在的問題,也是根據用研中發現的問題持續優化迭代。

對於拼車出行流程中線下找車困難的問題,我們加入了同站名導航提醒的指引,優化地圖信息樣式等方面幫助用戶更好的使用產品。對於線下服務流程,我們多次跟訪用戶,觀察用戶的行為與體驗,優化了司機的行為規範給到合作方,如司機停車必須打雙閃方便用戶找車,司機必須佩戴工作袖章,優化司機驗票流程等等。

我們關注著數據上的變化,關注著用戶的每一次出行,在促成拼團成功率方面我們還在與產品做進一步流程與功能優化迭代,希望有越來越多的用戶得到更好的出行體驗。

積極的與用戶保持溝通,建立核心用戶群,培養種子用戶等。用戶也非常積極的反饋自己的想法,同時給出許多珍貴的意見與思路幫助我們優化產品。熱心的用戶甚至會主動自發宣傳我們的產品,接觸到的每一個用戶都那麼鮮活與真實。

"

飛線巴士小程序與2019年1月18日在鄭州正式上線運營。近期保持小步快跑,逐步優化迭代,強化產品功能,優化體驗流程,目前1.4版本已上線。本文覆盤在設計過程中遇到的問題與思考,闡述智慧交通設計語言的應用與實施。

設計覆盤:智慧交通設計語言的應用與實施

一、項目背景

公共交通作為國人主要的出行方式,在高峰時段,仍會面臨擁擠、等待時間長、需要換乘等一系列問題。定製巴士產品希望能幫助用戶實現點對點的個性化公交出行需求,專車專線,提升出行乘車體驗。做個有趣的比喻就是“打低調百萬豪車不是夢”

同時,定製巴士也可以幫助公交集團實現科學配車,充分調動閒置運力資源,滿足市民出行需求,雙向協作,力求達到解決城市擁堵問題,建設智慧城市的目標。

設計覆盤:智慧交通設計語言的應用與實施

二、基礎沉澱

隨著乘車碼業務的不斷髮展,持續深挖公共交通出行領域潛在價值,衍生出公交、地鐵出行助手、定製巴士等系列產品,經歷2年的探索與沉澱,智慧交通設計語言逐步建立。

對外,統一的視覺語言幫助用戶加深產品的印象,提高用戶體驗的完整性和一致性。對內,統一的設計原則,可提升設計與研發流程的工作效率,降低重複溝通確認與試錯成本。同時讓設計師形成統一共識,產品需要傳遞給用戶的體驗感受,以及整個系統的設計約束是什麼。

關於推導過程可點擊閱讀【智慧交通】用“腳”思考的設計語言一文。我們歸納整理出“模塊化、信息聚焦、設計降噪、導向清晰”等原則,初步形成Smart Metro 設計語言的雛形。這些基礎原則指導我們進行體驗一致化的產品設計,不斷髮展的業務與產品設計迭代中,持續沉澱與驗證設計原則的準確性。同時也在此基礎上探索出行細分領域中的個性化解決方案。

設計覆盤:智慧交通設計語言的應用與實施

三、設計挑戰

通過前期調研發現大部分競品的定製線路多是公司或小區等集團合作的路線,對於個人用戶而言,響應效率低、機動性差。而我們希望打造的產品正是要補齊這一點不足,降低門檻,無論是由企業還是個人都可發起線路,在出行前一定時間內拼夠最低的成團人數,線路將自動生成並由系統派車,這樣才算真正做到智慧定製巴士產品的核心——定製。

正是由於線路運營的性質變化,隨機變動的線路比固定線路的信息量多出許多,信息量級增大,複雜性也更高。而用戶在短時間接受的信息量有限,因此信息量過載帶來的肯定是信息模糊的問題。

那麼如何讓用戶在信息感知上從模糊轉向清晰?關鍵信息如何聚焦?輔助信息如何協助用戶做決策?這些都是我們需要重點思考與解決的問題。

四、設計拆解

實際工作中,我們將問題打散拆解,重新梳理歸納。整個產品服務流程主要拆分為兩部分:(理清體驗流程觸點)

  • 線上:發起拼車,拼車流程
  • 線下:找車、乘車

再結合實際場景與時間線去分析(明確用戶行為目標):

  1. 流程中,用戶需要達成的目標是什麼?
  2. 頁面中,當下對用戶最重要的信息是什麼?將來對用戶重要的信息是什麼?

對流程進行有效的拆解之後,再在流程中對單個頁面信息進行梳理與歸納,從而構建合理舒適的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

五、構建視覺模型

學美術的同學都畫過素描,一般畫素描會先打框架,找大關係(當然也有很多一上來就畫重點的天才畫手),再找關鍵點,找準明暗交界線,進一步重點刻畫,最後再做細節的點綴修飾,正確表現對象的形體、空間和質感。構建頁面的視覺模型其實和畫畫非常類似。

設計覆盤:智慧交通設計語言的應用與實施

以飛線巴士首頁為例,可以概括為:大關係,分重點,小提示3個關鍵點來構建整個頁面的視覺模型。

設計覆盤:智慧交通設計語言的應用與實施

(1)大關係

可以理解為對整體內容信息的分類,為了緩解大量信息對用戶帶來的視覺模糊,首先梳理信息之間大的邏輯關係,飛線巴士首頁中搜索、我的行程、推薦線路作為不同類型內容的入口而存在,將三個內容通過模塊化的設計,建立頁面結構。

(2)分重點

在分清大的邏輯關係之後,通過關鍵信息的提煉與強化來增強模塊之間的差異性。

如:搜索模塊在頁面中的最頂層,起終點圓點圖形標識、文案提示讓用戶能快速感知自己的位置並搜索想去的地點。

我的行程是用戶正在參與的行程,重點提示用戶關注時間與狀態變化,票據樣式增強用戶參與感,提示用戶去關注狀態以及去使用。

推薦線路則是將線路信息重點展示,價格信息和指引信息一起引導用戶操作,形成特定的信息組合方式。

找到模塊內的重點信息,再針對不同的重點信息來進行視覺結構設計,增強模塊之間的差異性,同時提升用戶識別信息的效率。

設計覆盤:智慧交通設計語言的應用與實施

(3)小提示

最後再將信息的關鍵要點進行概括,由少量文字組成,形成一個小標籤來做信息大關係的一個小提示,幫助用戶更好的類比信息,理解信息

設計覆盤:智慧交通設計語言的應用與實施

六、信息結構化

信息以簡潔和結構化的方式呈現,幫助用戶更易於接收和消化信息內容。視覺層次的構建很大程度上依賴排版。我們必須圍繞內容進行設計,有效的傳遞信息,賦予內容形式,為內容服務。

Jeff Johnson《認知與設計—理解UI設計準則》中提到利用格式塔原理對信息進行排版,是視覺識別模型的其中一種,也是在視覺設計中應用得最多的。例如將相關內容組織到一起,使他們的物理位置接近,相關的內容被看成一個信息組,這就是接近性原則。如果多個信息組放在一起我們就會將他們歸成一個大類,這就是相似性原理。這些原理在工作中不是獨立存在的,而是綜合運用的。

我們對所有流程中的信息進行梳理,提取共性,同時根據不同的使用場景差異化的展示,將信息以特定的組合方式有規律排列,形成結構化的信息模型,增強視覺識別性與體驗記憶點。幫助用戶高效獲取他們想要的內容,並達成目標。

設計覆盤:智慧交通設計語言的應用與實施

七、焦點指引

在用戶使用我們的定製產品時,我們需要幫助用戶明確每一步需要做什麼事情,強調突出指示信息,從視覺的角度來說,大致可以歸納為:大小、粗細、多少,以此來控制一個頁面的節奏感。

大小也就是字體的大小、粗細就是字體重量的區別,多少也就是間距疏密關係的把握。我們通過強化的頁面標題,以通俗簡短的語句,清晰明確此頁面的操作指引,明確用戶所需要做的事情,幫組用戶做出每一步的選擇完成出行目標。

通過間距來劃分,運用更大的空間來間隔,構建更加清晰乾淨的界面,易於閱讀同時也讓閱讀得到休息,形成閱讀的節奏感。拉長距離引導關注,可以通過增加元素周圍的空間使元素更顯著,只要確保留白的頁面空間能通過內容去引導視線,同樣起到焦點指引的作用。

如在乘車憑證的設計,將乘車口令信息以誇張的大的加粗字體放置在頁面中同時增加上下左右的空間,形成一個強烈的視覺引導,讓乘客與司機都能非常清晰的看到口令信息,驗票上車。把更多的傳達融合在更少的元素中,設計降噪,我們需要減少不必要的干擾信息,儘量簡化精確內容,形成焦點指引,讓用戶降低疑慮與抉擇的時間。

設計覆盤:智慧交通設計語言的應用與實施

八、服務設計

在定製巴士這個項目中給我最大的感受,就是更加近距離的深入接觸到了用戶。對於定製巴士產品而言,除了在線上產品做到好的用戶體驗之外,更重要的還有線下服務體驗這一環是否能夠給用戶提供良好的乘車感受。所以我們要在線上產品設計中做好拼車流程指引,線下流程也需要做好找車乘車的服務指引。

因此在產品上線前我們做了1輪用戶調研,通過眾測與跟訪去發現在產品服務流程中存在的問題,也是根據用研中發現的問題持續優化迭代。

對於拼車出行流程中線下找車困難的問題,我們加入了同站名導航提醒的指引,優化地圖信息樣式等方面幫助用戶更好的使用產品。對於線下服務流程,我們多次跟訪用戶,觀察用戶的行為與體驗,優化了司機的行為規範給到合作方,如司機停車必須打雙閃方便用戶找車,司機必須佩戴工作袖章,優化司機驗票流程等等。

我們關注著數據上的變化,關注著用戶的每一次出行,在促成拼團成功率方面我們還在與產品做進一步流程與功能優化迭代,希望有越來越多的用戶得到更好的出行體驗。

積極的與用戶保持溝通,建立核心用戶群,培養種子用戶等。用戶也非常積極的反饋自己的想法,同時給出許多珍貴的意見與思路幫助我們優化產品。熱心的用戶甚至會主動自發宣傳我們的產品,接觸到的每一個用戶都那麼鮮活與真實。

設計覆盤:智慧交通設計語言的應用與實施

九、寫在最後

對於公共交通出行,我們在探索更合適的設計解決方案,持續沉澱更多的設計思考。

在當下的產業互聯網趨勢下,定製業務也將不斷接入更多的城市,不同的城市業主方都存在不同的地域特色與商業訴求。作為設計師能做的還有很多很多,我們不再只關注產品視覺設計層面,需要更多的走出辦公室,走到順流不息的城市中間,走到真實的用戶身旁,悉心觀察、用心感受,站在更全面的角度去思考關於整個產品服務設計的方方面面。

設計語言也不再只是簡單的規範文檔,或者一組研發組件,而應該是一個不斷摸索,隨著業務發展而動態調整的設計系統工程。我們將會持續驗證與完善我們的智慧交通設計語言,努力做好不同業務需求的設計支撐。後續智慧交通設計團隊將在不同業務中,為大家分享更多不同城市、不同出行細分領域下的個性化解決方案,敬請期待。

參考資料:

《認知與設計——理解UI設計準則》——Jeff Johnson

作者: susanpeng,公眾號:騰訊FiTdesign(ID:FiTdesign2017)

本文來源於人人都是產品經理合作媒體@ 騰訊FITdesign,作者@ susanpeng

題圖來自Unsplash,基於CC0協議

"

相關推薦

推薦中...