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

項(xiàng)目背景

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

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

但這種搜索路徑，并不是最簡(jiǎn)便的。

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

也正是因此，我們需要設(shè)計(jì)一個(gè)更全面的方案列表頁(yè)面。

設(shè)計(jì)目標(biāo)

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

我們制定了以下三個(gè)設(shè)計(jì)目標(biāo)：

1.?提高對(duì)比效率

最初的版本存在的問(wèn)題：

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

2）“查看更多”的列表與主列表需要反復(fù)跳轉(zhuǎn)；

3）不同方案之間距離遠(yuǎn)，全靠記憶力。

這都是我們需要解決的問(wèn)題。

2.?加強(qiáng)操作提示

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

而常見(jiàn)的Tab形式大多存在點(diǎn)擊感知不高的問(wèn)題，是需要解決的核心問(wèn)題。

3.?頁(yè)面輕量化

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

混合之后如何進(jìn)行統(tǒng)一化設(shè)計(jì)，也是個(gè)很大的考驗(yàn)。

設(shè)計(jì)歷程

整體項(xiàng)目經(jīng)歷了兩次大的改版，我們分別對(duì)交互形式與視覺(jué)樣式做了升級(jí)。

交互形式探索

為了加強(qiáng)對(duì)比效率，將不同類型的方案列表放入同一個(gè)頁(yè)面。我們主要做了以下幾種交互的探索。

01. 「雙列表」的探索

不可否認(rèn)的是，雙列表在「橫向?qū)Ρ取股嫌歇?dú)特的優(yōu)勢(shì)。但缺點(diǎn)也是十分明顯的：頁(yè)面信息過(guò)于密集，容易造成視覺(jué)疲勞；也很難兼容三種以上的方式對(duì)比。

02. 「橫向Tab欄」的探索

這種形式用戶的「認(rèn)知度高」，但切實(shí)存在點(diǎn)擊感知不強(qiáng)的缺點(diǎn)。我們分析了一下其中的原因，認(rèn)為是：視線方向與手勢(shì)方向不一致的結(jié)果。

如果閱讀視線和滑動(dòng)操作都是縱向的，會(huì)如何呢？

03. 「縱向Tab欄」的探索

細(xì)想一下自己使用以下應(yīng)用時(shí)，是不是很自然的使用了切換。

但如果我們采用了同樣的結(jié)構(gòu)，也迎來(lái)了新的問(wèn)題：

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

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

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

之后我們又進(jìn)一步做了視覺(jué)的整體優(yōu)化。

視覺(jué)降噪處理

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

01.?視線重心轉(zhuǎn)移

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

02.?繼續(xù)簡(jiǎn)化Tab欄

先前Tab雖然清晰，但形式過(guò)于整體，像行程說(shuō)明，反而缺少了可以點(diǎn)擊的感覺(jué)。

在樣式簡(jiǎn)化的同時(shí)，我們進(jìn)一步壓縮寬度，也統(tǒng)一高度。使得Tab區(qū)域整體更“整齊劃一”。

03.?方案卡片的重構(gòu)

方案卡片是用戶對(duì)比的視覺(jué)主體。我們做了以下調(diào)整：

1、使用智行數(shù)字體增強(qiáng)辨識(shí)度

2、適配不同Tab下的關(guān)鍵信息

3、中轉(zhuǎn)方案圖形化

整體效果

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

項(xiàng)目總結(jié)

項(xiàng)目上線后在數(shù)據(jù)上取得了很好的效果。就單頁(yè)面的轉(zhuǎn)化率來(lái)說(shuō)，基本做到了和常見(jiàn)的火車列表頁(yè)與機(jī)票列表頁(yè)持平。在出行高峰、需求旺盛的時(shí)期甚至更好。

#墨言教育