PAP Ex. Helper Redesign
2015-03-22 本文已影响94人
二尾
前言
PAP Ex. Helper,俗稱水表助手,是紙飛機開發團隊製作的一款物流查詢應用。如果你是 Android 用戶,希望嘗試一下這款應用,你可以在 https://play.google.com/store/apps/details?id=info.papdt.express.helper 獲取這款應用。
之所以做這個 redesign,是因為我覺得這款應用的 UI 如同 Material Design 的模板 App,過於框架化,有很大的提升空間。
主頁·滑動 Tab
![](https://img.haomeiwen.com/i70844/7a672467efe68afd.png)
這是 redesign 的主頁。之所以放棄現有版本的 Drawer,是因為 Drawer 在這個應用內極不必要,甚至有點累贅,有一種「為了有 Drawer 而加 Drawer」的感覺…
如果用上可以滑動的 Tab,這是極好的。
同時,這個 redesign 改進了卡片的陰影。現有版本的陰影太重的,導致整個介面看起來很髒…
Tool Bar 自動隱藏處理
這個佈局需要滾動時自動隱藏 Tool Bar,具體處理如下。
![](https://img.haomeiwen.com/i70844/d19738df7141b973.png)
![](https://img.haomeiwen.com/i70844/09d38c6dc1e5d803.png)
![](https://img.haomeiwen.com/i70844/48ec5e9a6c18b4d9.png)
藏在 Overflow 裏的設定項
那 Drawer 中的設定項呢?我將它藏進了 Overflow 裡面。
![](https://img.haomeiwen.com/i70844/434cb52e5863a769.png)
多項選擇和「撤銷」
多項選擇方便用戶一次性高效率地管理快遞單,但也不忘留一個後悔的機會。
![](https://img.haomeiwen.com/i70844/5b815f2bc121b154.png)
![](https://img.haomeiwen.com/i70844/8cddfff339226166.png)
別忘了給列表項目分割
下面是現有版本的截圖。
![](https://img.haomeiwen.com/i70844/f5f6c72921b951b2.png)
雖然 Material Design 提倡無分界線,但是在這裏,看起來有些混亂,還是加上分割線比較好。
![](https://img.haomeiwen.com/i70844/e4f28efbc2dfff18.png)
當然,如果不喜歡分割線,用灰白相間的列表也可以達到同樣的效果。
詳情頁快遞單頭白色邊界
以下是現有版本的快遞單詳情頁。
![](https://img.haomeiwen.com/i70844/a27b2355d956a237.png)
快遞單頭與外部的洋紅色混在一起,並不十分好看… 這個時候應該在邊緣加一個白色邊界。
![](https://img.haomeiwen.com/i70844/b1c89935a7997f1d.png)
Auto Complete (自動填充)
相比起目前選擇快遞公司那臃腫的菜單,我覺得自動填充是極好的。
舉個例子。當我輸入「順豐」的時候,「快遞」兩字已經出現在文本框,我可以直接開始輸入單號,而這時「順豐快遞」會自動轉換成簡化字,以免無法查詢單號。
原諒我做不出效果圖。