復雜的UI列表設計，大神如何做簡化？

Sponsor

前言：我們知道APP端的界面顯示不如PC端，它的顯示區域有限，那么如果有過有些的列表設計如何展示呢？把多余的數據隱藏？但基本都是重要內容，一次性展示才會更方便，那怎么處理？來一起看看大神是如何將這個列表UI做簡化設計的吧！

項目背景

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

以往的方案查詢，用戶需要預先想好具體的出行方式，才能開始操作。

但這種搜索路徑，并不是最簡便的。

我們希望直接給到用戶所有的交通方案，并提供對比與出行建議。

也正是因此，我們需要設計一個更全面的方案列表頁面。

設計目標

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

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

1.? 提高對比效率

最初的版本存在的問題：

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

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

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

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

2.? 加強操作提示

切換列表的操作，不可避免地會使用到“Tab”這種交互語言。

而常見的Tab形式大多存在點擊感知不高的問題，是需要解決的核心問題。

3.? 頁面輕量化

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

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

設計歷程

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

交互形式探索

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

01. 「雙列表」的探索

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

02. 「橫向Tab欄」的探索

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

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

03. 「縱向Tab欄」的探索

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

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

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

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

至此，交互形式確認。初步方案上線后，整體頁面的轉化率獲得了極大的提升。

之后我們又進一步做了視覺的整體優化。

視覺降噪處理

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

01.?視線重心轉移

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

02.?繼續簡化Tab欄

先前Tab雖然清晰，但形式過于整體，像行程說明，反而缺少了可以點擊的感覺。

在樣式簡化的同時，我們進一步壓縮寬度，也統一高度。使得Tab區域整體更“整齊劃一”。

03.?方案卡片的重構

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

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

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

3、中轉方案圖形化

整體效果

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

項目總結

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

作者：智行ZXD設計中心

來源：智行ZXD設計中心（ID：gh_0a95e60710b1）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。