現代智慧手機給我們提供了非常多豐富實用的功能，比如平時頗為在意金錢去向的我，就是一個 手機記賬 App 的使用者，曾經嘗試過各種記賬 App，但好像都有那麼一點不滿意，於是我就想如果是我來設計這麼一款 App 的話，我會怎麼去設計呢？本文記錄的就是一次移動記賬 App 的設計探索過程。
一. 設計前的思考
簡單、高效和安全是設計之初就想到的三個關鍵詞
在一天的使用過程中，我很可能存在多次記賬的需求，這也意味著我會頻繁開啟這個產品，簡單和高效可以讓我更快的完成任務。記賬因為涉及到資金這個問題，所以它同樣需要一定的安全性。如果要給這個 App 一個定位的話，我認為它是一款 “能滿足大眾基本記賬需求的輕便的移動記賬 App ” 。
基於以上的思考，很快就產出了以下稿子：
視覺呈現上，我把它做的非常簡潔乾淨，在進入密碼解鎖以後直接呈現一個列表，左下角則是有一個常駐的懸浮著的綠色新增按鈕，用來新增一筆支出或者收入。
當然也有比按鈕更優雅一點的方案：
通過手勢下拉的操作展開一筆新的支出或收入，因為手勢的優勢在於沒有固定的需要點按的操作位置，能有更高的效率。
儘管看似合理的初步方案就這麼出現了，但是如果仔細深入思考的話，會發現它並沒有實際解決你希望能夠更高效記賬這個行為。出於安全的考慮，你始終在開啟記賬 App 後需要輸入四位的密碼，然後才能進入記賬的行為，這個過程會讓你在每次記賬的時候都需要多按幾次手機。
為了解決這個痛點，我從最基本的使用場景出發，思考了以下幾個問題：
在重新整理完這些思考以後，我最終決定重新擬一套設計方案。
二. 思考後的重設計
非首要功能，不應成為主路徑上的障礙
在我常試過的很多記賬 App 中，它們都提供了密碼保護的功能，但也卻因為這個密碼保護功能使得記賬的操作多了很多的步驟。在這一點上，金蝶的 “隨手記” 做的不錯，在密碼保護介面提供了快捷入口。然而從我個人的角度來看，我並不是非常喜歡在密碼保護介面多那麼幾個快捷入口的方式，至少我希望在不影響實際體驗的情況下，能使介面顯得更簡潔一點。我反覆思考後得出的結論是：密碼保護需要保護的是賬單隱私，而不是 “記賬” 這個行為。
可以做一個大膽的設定，開啟 App 後，如果直接進入記賬介面，可以為我節省很多操作的步驟，甚至減去了密碼保護介面點選一次快捷入口的行為。
於是重新設計的介面出爐了。
當我開啟 App，呈現在我眼前的就是記賬介面，我可以直接輸入數字以後點選對勾就完成一筆記賬操作。右上角有個檢視報表的功能入口，當我點選這個圖示的時候，會彈出密碼框，輸入密碼就可以進入報表介面。
智慧一點點，就能提升使用者體驗
回到此前思考的第二個問題，我記賬的目的是為了 “瞭解我的財務狀況” 。 所以預算功能及與其相關聯的提醒功能就變得尤為必要。我設想了一個叫做 “預算” 的功能，當我設定了我每月的預算，並且每月的支出超出我設定的預算以後，那麼在首頁的記賬介面，Titlebar 會變成紅色以警示你應該省著點花錢。
至於我何時會記賬這個問題，因為在很多時候可能會存在我完成一筆消費的時候記賬，因此我的想法是根據開啟的時間來預判，比如午餐時間開啟的話，分類圖示則預設選中 Food 選項。週末下午茶時間開啟的話，分類圖示則預設自動選中休閒類的選項，如果在程式開發上合入了智慧學習的模組，它甚至可以根據使用者的個人習慣，為每個記賬的時間作分類的選擇。通過使用預判的情況來減少我可能會去點選的操作，從而減少不必要的步驟。
為效率服務，在互動細節上的優化
在檢視報表介面的時候，會遇到一些需要切換年份，月份或者周為單位的時候，因為手機螢幕在不斷變大的情況下，如果將 Tab 放置在頂部，單手操作的時候切換會變得不太容易。因此對於切換時間這個維度的操作，我也重新思考了一下，利用下拉手勢來解決。
三. 視覺設計
我給這款產品起名叫 Save+，也就是給予更節省的寓意，產品雖然是一個以記賬為目的的 App，但是我希望傳達給使用者的並不是我每個月花掉了多少錢，而是省下多少錢的感覺。因此在 icon 的設計上使用了儲蓄罐作為隱喻。
輕快、親和
簡單，高效是設計這個 App 的初衷，視覺呈現上需要傳遞給使用者 “輕” 的感覺，簡明清晰的圖示和鍵盤作為主介面的元素符合直觀的感受，讓人在開啟後就能直接進行操作。對每一枚分類圖示都做了一個彩色選中態的處理，溫和的顏色使介面顯得不單調的同時更具親和力。
分類 icon 眾多，視覺設計上保持統一的語言可以使整體感更強。對分類圖示型別進行視覺上的歸納後主要分為三種型別：圓形、方形和斜形，以此為依據保持圖示的整體統一性和飽滿度。
完整內容點此檢視
一. 設計前的思考
簡單、高效和安全是設計之初就想到的三個關鍵詞
在一天的使用過程中，我很可能存在多次記賬的需求，這也意味著我會頻繁開啟這個產品，簡單和高效可以讓我更快的完成任務。記賬因為涉及到資金這個問題，所以它同樣需要一定的安全性。如果要給這個 App 一個定位的話，我認為它是一款 “能滿足大眾基本記賬需求的輕便的移動記賬 App ” 。
基於以上的思考，很快就產出了以下稿子：
視覺呈現上，我把它做的非常簡潔乾淨，在進入密碼解鎖以後直接呈現一個列表，左下角則是有一個常駐的懸浮著的綠色新增按鈕，用來新增一筆支出或者收入。
當然也有比按鈕更優雅一點的方案：
通過手勢下拉的操作展開一筆新的支出或收入，因為手勢的優勢在於沒有固定的需要點按的操作位置，能有更高的效率。
儘管看似合理的初步方案就這麼出現了，但是如果仔細深入思考的話，會發現它並沒有實際解決你希望能夠更高效記賬這個行為。出於安全的考慮，你始終在開啟記賬 App 後需要輸入四位的密碼，然後才能進入記賬的行為，這個過程會讓你在每次記賬的時候都需要多按幾次手機。
為了解決這個痛點，我從最基本的使用場景出發，思考了以下幾個問題：
- 我開啟記賬 App 的目的是幹什麼？
- 為什麼記賬？
- 什麼時候記賬？
在重新整理完這些思考以後，我最終決定重新擬一套設計方案。
二. 思考後的重設計
非首要功能，不應成為主路徑上的障礙
在我常試過的很多記賬 App 中，它們都提供了密碼保護的功能，但也卻因為這個密碼保護功能使得記賬的操作多了很多的步驟。在這一點上，金蝶的 “隨手記” 做的不錯，在密碼保護介面提供了快捷入口。然而從我個人的角度來看，我並不是非常喜歡在密碼保護介面多那麼幾個快捷入口的方式，至少我希望在不影響實際體驗的情況下，能使介面顯得更簡潔一點。我反覆思考後得出的結論是：密碼保護需要保護的是賬單隱私，而不是 “記賬” 這個行為。
可以做一個大膽的設定，開啟 App 後，如果直接進入記賬介面，可以為我節省很多操作的步驟，甚至減去了密碼保護介面點選一次快捷入口的行為。
於是重新設計的介面出爐了。
當我開啟 App，呈現在我眼前的就是記賬介面，我可以直接輸入數字以後點選對勾就完成一筆記賬操作。右上角有個檢視報表的功能入口，當我點選這個圖示的時候，會彈出密碼框，輸入密碼就可以進入報表介面。
智慧一點點，就能提升使用者體驗
回到此前思考的第二個問題，我記賬的目的是為了 “瞭解我的財務狀況” 。 所以預算功能及與其相關聯的提醒功能就變得尤為必要。我設想了一個叫做 “預算” 的功能，當我設定了我每月的預算，並且每月的支出超出我設定的預算以後，那麼在首頁的記賬介面，Titlebar 會變成紅色以警示你應該省著點花錢。
至於我何時會記賬這個問題，因為在很多時候可能會存在我完成一筆消費的時候記賬，因此我的想法是根據開啟的時間來預判，比如午餐時間開啟的話，分類圖示則預設選中 Food 選項。週末下午茶時間開啟的話，分類圖示則預設自動選中休閒類的選項，如果在程式開發上合入了智慧學習的模組，它甚至可以根據使用者的個人習慣，為每個記賬的時間作分類的選擇。通過使用預判的情況來減少我可能會去點選的操作，從而減少不必要的步驟。
為效率服務，在互動細節上的優化
在檢視報表介面的時候，會遇到一些需要切換年份，月份或者周為單位的時候，因為手機螢幕在不斷變大的情況下，如果將 Tab 放置在頂部，單手操作的時候切換會變得不太容易。因此對於切換時間這個維度的操作，我也重新思考了一下，利用下拉手勢來解決。
三. 視覺設計
我給這款產品起名叫 Save+，也就是給予更節省的寓意，產品雖然是一個以記賬為目的的 App，但是我希望傳達給使用者的並不是我每個月花掉了多少錢，而是省下多少錢的感覺。因此在 icon 的設計上使用了儲蓄罐作為隱喻。
輕快、親和
簡單，高效是設計這個 App 的初衷，視覺呈現上需要傳遞給使用者 “輕” 的感覺，簡明清晰的圖示和鍵盤作為主介面的元素符合直觀的感受，讓人在開啟後就能直接進行操作。對每一枚分類圖示都做了一個彩色選中態的處理，溫和的顏色使介面顯得不單調的同時更具親和力。
[img=APP,設計,590,454]http://isux.tencent.com/wp-content/uploads/2015/09/2015091415084380-590x454.png[/img] [img=APP,設計,590,699]http://isux.tencent.com/wp-content/uploads/2015/09/20150914150847637-590x699.png[/img] [img=APP,設計,590,510]http://isux.tencent.com/wp-content/uploads/2015/09/2015091415085235-590x510.png[/img]
圖示中的圖形奧義分類 icon 眾多，視覺設計上保持統一的語言可以使整體感更強。對分類圖示型別進行視覺上的歸納後主要分為三種型別：圓形、方形和斜形，以此為依據保持圖示的整體統一性和飽滿度。
完整內容點此檢視