項目背景

智行 App 的“智慧出行”功能，作為一種全新的出行方案查詢方式，致力于提供用戶全面的出行方案推薦。

以往的方案查詢，用戶需要預先想好具體的出行方式，才能開始操作。但這種搜索路徑，并不是最簡便的。

我們希望直接給到用戶所有的交通方案，并提供對比與出行建議。也正是因此，我們需要設計一個更全面的方案列表頁面。

設計目標

之前的頁面效率非常低，為了讓用戶在同一個頁面中，就可以完成方案的“瀏覽”、“切換”、“對比”。

我們制定了以下三個設計目標：

1. 提高對比效率

最初的版本存在的問題：

1）不同的方案類型縱向羅列，露出數量依賴屏幕高度；

2）“查看更多”的列表與主列表需要反復跳轉；

3）不同方案之間距離遠，全靠記憶力。

這都是我們需要解決的問題。

2. 加強操作提示

切換列表的操作，不可避免地會使用到“Tab”這種交互語言。而常見的 Tab 形式大多存在點擊感知不高的問題，是需要解決的核心問題。

3. 頁面輕量化

OTA 方案列表本身就是一個文字信息量巨大的頁面。不同類型的方案之間，關鍵信息也不一致。

混合之后如何進行統一化設計，也是個很大的考驗。

設計歷程

整體項目經歷了兩次大的改版，我們分別對交互形式與視覺樣式做了升級。

交互形式探索

為了加強對比效率，將不同類型的方案列表放入同一個頁面。我們主要做了以下幾種交互的探索。

1. 「雙列表」的探索

不可否認的是，雙列表在「橫向對比」上有獨特的優勢。但缺點也是十分明顯的：頁面信息過于密集，容易造成視覺疲勞；也很難兼容三種以上的方式對比。

2. 「橫向 Tab 欄」的探索

這種形式用戶的「認知度高」，但切實存在點擊感知不強的缺點。我們分析了一下其中的原因，認為是：視線方向與手勢方向不一致的結果。

如果閱讀視線和滑動操作都是縱向的，會如何呢？

3. 「縱向 Tab 欄」的探索

細想一下自己使用以下應用時，是不是很自然的使用了切換。

但如果我們采用了同樣的結構，又迎來了新的問題：

如何在縱向 Tab 空間中，放下復雜的交通信息？

我們使用了新的圖形化語言，并完成了第一次改版。

至此，交互形式確認。初步方案上線后，整體頁面的轉化率獲得了極大的提升。之后我們又進一步做了視覺的整體優化。

視覺降噪處理

驗證了交互樣式的成功后，我們希望讓頁面更加輕量化。

1. 視線重心轉移

原頁面頭部的色彩比重非常大，但頭部的信息與功能并不重要。我們的期望，是用戶將視線集中在不同的方案 Tab 上。于是對頁面做了初步的降噪處理，并增加了明顯的操作提示。

2. 繼續簡化 Tab 欄

先前 Tab 雖然清晰，但形式過于整體，像行程說明，反而缺少了可以點擊的感覺。在樣式簡化的同時，我們進一步壓縮寬度，也統一高度。使得 Tab 區域整體更“整齊劃一”。

3. 方案卡片的重構

方案卡片是用戶對比的視覺主體。我們做了以下調整：

1. 使用智行數字體增強辨識度

2. 適配不同 Tab 下的關鍵信息

3. 中轉方案圖形化

整體效果

至此，整體的改版告一段落。我們來看下最終的效果。

項目總結

項目上線后在數據上取得了很好的效果。就單頁面的轉化率來說，基本做到了和常見的火車列表頁與機票列表頁持平。在出行高峰、需求旺盛的時期甚至更好。

之后智慧出行還會在方案的智能推薦上，為我們的用戶帶去更好的功能與體驗。愿我們的努力為你帶來更好的體驗。

感謝閱讀~

歡迎掃碼關注公眾號：「智行 ZXD 設計中心」