上一期講述了遠光今年商旅項目的設計任務，目前已經完成了V2.2版本的設計改版，并且上線。產品迭代應該是與時俱進的，當完成V2.2版本改版之后，解決了舊版商旅的幾大痛點的同時，也會產生新的問題。下面就讓我們來進入正題。

1.新增功能——首頁頭輕腳重

隨著業務增多，商旅承載著越來越多的重要信息，例如在V2.2版本之前，商旅只有預訂機票、酒店，記賬，報銷幾大業務功能，在首頁的頂部剛剛擺滿一排功能入口。后來多了預訂火車票、用車打車業務功能，以后還會增加更多的功能。在V2.2版本的基礎上直接添加更改，頂部一共6個功能入口，一排放不下的情況下，分別改為一排3個和一排4個兩種效果。如果下面出現卡片式申請單，頁面整體就會覺得下沉，頭輕腳重。很顯然，現在這個視覺風格的擴展性很低。并且當用戶有很多個申請單時，滑到最底部，在想去使用頂部的功能入口，還需要再滑回頂部。

2.為多人預訂——卡片過長，沒有重點

如果企業有一個角色，是專門幫助同事來申請出差和預訂機票的，那么他的首頁可能會出現多個申請單，每個申請單有可能會出現多人多個訂單，一個卡片會使得頁面變得很長，每個人對應的預訂按鈕也會變多，本想突出預訂按鈕的初衷就會因數量過多而變得沒有意義。

3.功能性差——機票訂單狀態繁雜

當員工預訂機票去機場前，需要關注機票的實時狀態，甚至機場航班的實時動態。在V2.2版本的設計中，我們過分強調了機票狀態的顯示，將其設計成一個郵戳狀樣式壓在航班信息卡片上，在小屏幕手機上，郵戳的位置占據了左右屏幕的二分之一的位置，甚至遮蓋住重要的航班信息文字。這并不是用戶點擊機票訂單界面想要看到的景象。

改進

1.有效利用空間

先來看看首頁的功能入口，我們將功能分為兩類：

①預訂功能

②報銷功能

兩類區分后，就可以對其分別進行設計，分析幾個功能的使用頻率，決定將其預訂功能視覺強化，繼續采用V2.2版本的圓形彩色風格。其他功能則采用方塊布局，利用基礎形狀表現不同功能。

（從左到右依次為）V2.2首頁、V3.0首頁

當上滑查看申請單時，功能入口并不會消失，將圖標收納固定在界面頂部，不僅可以方便隨時使用功能，而且不占用空間。就好像大家都在使用的支付寶，滑動窗口的淡入淡出效果，也是使得空間利用最大化。

（效果圖）支付寶窗口動效

2.沉浸式體驗——讓卡片更像卡片

我們改變策略，只保留每個卡片中申請單的信息，讓卡片不再拉長。卡片的長寬比采用當前主流屏幕尺寸16：9的比例，現在的主流屏幕皆是圓角屏，卡片的設計采用圓角化，使內容規整統一，與屏幕更好的融合。

我們通過卡片展開為全屏界面的動效，來擴展被收藏起來的任務。為每一個出行人的行程單帶來沉浸式體驗，即使預訂按鈕再多，也可以解決擺放問題。通過手勢的左右滑動，來切換不同人的行程訂單頁面。

（效果圖）卡片展開

3.增強對比——強化頁面功能性

讓我們來分析一下用戶在什么情況下會點擊機票訂單頁面。

（V3.0改版）查看機票訂單需求分析

我們將操作頻率從高到低排列如下：

查看審批軌跡 – 查看航班動態、機票信息 – 退票、改期 – 查看機票出票狀態、申請單信息 – 填單

員工的每一個訂單，只要超標、退票、改期，都要經過領導審批，對于這個訂單中的航班動態、機票信息，也是這個訂單界面被查看的重要因素，相對來說，申請單信息被查看的頻率會弱很多。

結合V2.2版本訂單狀態戳會遮擋文字和頁面的痛點，我們給出了新的視覺解決方案。我們將頭部的藍色整體色塊讓出，留給最重要的幾大信息：訂單信息、航班動態、退改按鈕；將原有的頭部機票信息下移并與申請單信息一致設計為白色卡片，并將超標原因、退改原因等收集在上方。在保證手機屏幕一屏之內，將審批軌跡從底部移至機票信息下方，一屏即可完成最頻繁的狀態查看與功能操作。將文字字號差距拉大，使其階梯性更強。

總結

每一個成功的產品，都是向著更好的體驗去做每一次的更新迭代，比如大家都會用的騰訊QQ，也是從一個簡單的網絡聊天室，一步一步進化為現在龐大功能的QQ，匯集了文字對話、可以互動的語音視頻聊天、看定位與天氣、QQ秀、QQ空間、QQ郵箱提醒、服務號推送、微視、實時演示PPT、演示白板、等等。它的客戶端界面也從以前的windows窗口樣式變為后來的扁平化視覺，并配合動效，使其更加靈動。

（從左到右分別為）OICQ2010登錄框、QQ2011登錄框、QQ2018登錄框

商旅的V3.0還在持續迭代中，在業務功能日趨完善的未來，我們也會增加恰到好處的動效，來提升視覺感受與體驗。希望這個產品可以一直更新下去，順應每個時代的目標用戶的需求，做出更好的產品。