本杰明·富蘭克林曾經說過：“小心對待每筆支出吧，再巨大的郵輪也可能因為小漏洞而沉沒。”對于絕大多數人而言，理財，管理生活中的每一筆支出，是一個長期存在的痛點，是老大難的問題。不過，隨著數字技術的發展，各種軟件和服務開始深入到我們生活的方方面面，許多曾經看起來麻煩無比的問題，都開始有了新的解決方案。就理財這件事情而言，設計師和開發者能夠幫并不專精于此的用戶，更好地掌控每筆資金的流向，并且更好地管理財務。

而這就是上周 Tubik Studio 的創意設計活動 UI Fridays 的主題：設計一款用于家庭理財的APP，幫助管理整個家庭的收入和支出。UI/UX 設計師 Ernest Asanov 和 Andrey Pixy 以及動效設計師 Kirill Erokhin 和 Andrey Pixy 在 藝術總監 Sergey Valiukh 的指導下，完成這次的設計。

任務

完成家庭理財APP的UI/UX設計，包含Web端和移動端兩個版本

設計過程

整個APP內的表述方式和微文案都采用了通用且易于理解的語匯，讓用戶可以更加輕松地管理日常的收入和支出，創建數據庫來跟蹤資金的流向和變化，提供全面的統計信息。這款應用擁有兩個不同的變體，web版和移動端APP。Web版擁有一個囊括大量信息的儀表盤，而移動端APP能夠更加直觀快速地處理各種信息。

設計師在經過討論之后，一致同意在兩個界面中都采用深色的背景色，這樣能讓數字和文本都具有較高的可讀性。

Web端儀表盤

Web端的儀表盤是用來承載信息的，它能夠在特定的時期針對數據進行分析和更為詳盡的展示。設計師之所以選擇深色的布局，是因為這樣可以創建出有著醒目細節和迷人布局的界面，吸引用戶關注到關鍵性的區域和重要的數據。

借助儀表盤，用戶對于收入、支出、特定周期內的統計數據一覽無遺。各種不同的數據使用卡片來承載，并且有效地組織到一個統一的布局之下。上面的界面展示了最近一周核心的統計數據，這些數據呈現了主要的財務狀況和相關的統計結果，右上角的菜單以標簽頁的形式顯示了不同時間周期選項，用戶可以對此進行自定義，默認情況下會顯示一周內的財務狀況。

儀表盤的卡片中，通常會顯示這些數據塊：

• 快速訪問菜單當中，承載著最受關注（Popular Categories）的支出類別
• 支出總額（Total Expenses）和交易頻率（Frequency of Transactions）
• 受關注的交易清單（Popular Transactions）
• 與上一個階段相比，每周平均消費偏好和屬性變化（Expenses and weekly average）
• 特定周期內收入和支出的線性走勢圖（Expenses and income）
• 用地圖標示出消費最頻繁的位置
• 基于財務狀況提供相應的建議（Recommendations）

另外一個值得一提的視覺設計細節，是設計師在設計財務的收支線性圖表的時候，采用了金融領域被廣泛認可的紅色和綠色來標識收支。除此之外，受關注的支出類別是可以被定義的，包括名稱和圖標，這樣可以強化整體的可導航性和交互的直觀性。

移動端 UI

移動端APP 的 UI設計是整個設計項目的另外一個重要組成部分。Web端的儀表盤雖然同時具備添加數據和展示和分析數據的功能，但是移動端APP在數據的添加和記錄上更加突出，移動端APP的設計目標就是讓用戶了解當前的狀況，并且在不同的環境下隨時隨地輕松地記錄收入和支出。

這個界面顯示的是最近的財務相關的操作，以圖標來區分類別。屏幕頂部顯示的是用戶的基本數據，當前界面顯示用戶當前是使用信用卡來支付。此外，你還可以通過垂直柱狀圖來快速預覽當天的收支狀況。如果需要針對特定的條目進行操作，用戶可以水平滑動觸發菜單，這當中會提供更多的交互選項。

右下角的漢堡圖標則能夠為用戶提供更為核心的操作與功能，無論你的移動端設備屏幕大小，這個菜單都非常容易觸發，也便于操作。移動端APP 還集成了重要通知和用戶建議，它位于頂部的個人信息條下方，為了區分不同類型的信息，通知條會以不同的顏色來顯示，例如橙色為警告，藍色為提醒。

針對列表中特定的條目，用戶可以滑動觸發菜單，進行編輯、分享或者刪除。

移動端界面的動畫顯示效果。漢堡圖標被觸發之后，彈出菜單以扇形顯示，承載三個主要的功能。

考慮到通知/建議需要吸引用戶的注意力，動效設計師為這一控件也加入了符合特征的脈沖式特效，用戶可以通過左右滑動來消除新提醒。

這個設計項目是Tubik Studio 團隊探索理財相關的專業領域的一次試水，雖然是概念設計，但是在設計過程中是盡力遵循實際的用戶需求來進行的。

【這些設計實戰同樣來自Tubik Studio】

1. 《富有未來感的柏林之夜APP，是這樣設計出來的》
2. 《設計實戰！城市指南網站著陸頁是這樣設計出來的》
3. 《這款給醫生的專業APP，設計上有著怎樣不同的要求？》
4. 《幫你策劃盛大婚禮的APP，設計思路是這樣的》

原文地址：uxplanet
原文作者：Tubik Studio
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com