PAP Ex. Helper Redesign

前言

PAP Ex. Helper，俗稱水表助手，是紙飛機開發團隊製作的一款物流查詢應用。如果你是 Android 用戶，希望嘗試一下這款應用，你可以在 https://play.google.com/store/apps/details?id=info.papdt.express.helper 獲取這款應用。

之所以做這個 redesign，是因為我覺得這款應用的 UI 如同 Material Design 的模板 App，過於框架化，有很大的提升空間。

主頁·滑動 Tab

MainPage

這是 redesign 的主頁。之所以放棄現有版本的 Drawer，是因為 Drawer 在這個應用內極不必要，甚至有點累贅，有一種「為了有 Drawer 而加 Drawer」的感覺…

如果用上可以滑動的 Tab，這是極好的。

同時，這個 redesign 改進了卡片的陰影。現有版本的陰影太重的，導致整個介面看起來很髒…

Tool Bar 自動隱藏處理

這個佈局需要滾動時自動隱藏 Tool Bar，具體處理如下。

稍微往下滾動，Tab 下方出現陰影。

持續往下滾動，即僅剩下 Tab。

如果中途向上滾動，即顯示出應用的標題及按鈕一欄。

藏在 Overflow 裏的設定項

那 Drawer 中的設定項呢？我將它藏進了 Overflow 裡面。

設定項

多項選擇和「撤銷」

多項選擇方便用戶一次性高效率地管理快遞單，但也不忘留一個後悔的機會。

點按快遞單項頭的圓形，快速進入多選模式，同時 Tool Bar 變成灰色已提醒用戶模式已改變。

當用戶選擇刪除時，也不忘提供一個反悔的機會。這時浮動按鈕需要向上移動一些。

別忘了給列表項目分割

下面是現有版本的截圖。

Original

雖然 Material Design 提倡無分界線，但是在這裏，看起來有些混亂，還是加上分割線比較好。

加上分割線的效果

當然，如果不喜歡分割線，用灰白相間的列表也可以達到同樣的效果。

詳情頁快遞單頭白色邊界

以下是現有版本的快遞單詳情頁。

Original

快遞單頭與外部的洋紅色混在一起，並不十分好看… 這個時候應該在邊緣加一個白色邊界。

加上白色邊緣的效果

Auto Complete （自動填充）

相比起目前選擇快遞公司那臃腫的菜單，我覺得自動填充是極好的。

舉個例子。當我輸入「順豐」的時候，「快遞」兩字已經出現在文本框，我可以直接開始輸入單號，而這時「順豐快遞」會自動轉換成簡化字，以免無法查詢單號。

原諒我做不出效果圖。