本杰明·富蘭克林曾經(jīng)說過：“小心對(duì)待每筆支出吧，再巨大的郵輪也可能因?yàn)樾÷┒炊翛]。”對(duì)于絕大多數(shù)人而言，理財(cái)，管理生活中的每一筆支出，是一個(gè)長(zhǎng)期存在的痛點(diǎn)，是老大難的問題。不過，隨著數(shù)字技術(shù)的發(fā)展，各種軟件和服務(wù)開始深入到我們生活的方方面面，許多曾經(jīng)看起來麻煩無比的問題，都開始有了新的解決方案。就理財(cái)這件事情而言，設(shè)計(jì)師和開發(fā)者能夠幫并不專精于此的用戶，更好地掌控每筆資金的流向，并且更好地管理財(cái)務(wù)。

而這就是上周 Tubik Studio 的創(chuàng)意設(shè)計(jì)活動(dòng) UI Fridays 的主題：設(shè)計(jì)一款用于家庭理財(cái)?shù)腁PP，幫助管理整個(gè)家庭的收入和支出。UI/UX 設(shè)計(jì)師 Ernest Asanov 和 Andrey Pixy 以及動(dòng)效設(shè)計(jì)師 Kirill Erokhin 和 Andrey Pixy 在 藝術(shù)總監(jiān) Sergey Valiukh 的指導(dǎo)下，完成這次的設(shè)計(jì)。

任務(wù)

完成家庭理財(cái)APP的UI/UX設(shè)計(jì)，包含Web端和移動(dòng)端兩個(gè)版本

設(shè)計(jì)過程

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

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

Web端儀表盤

Web端的儀表盤是用來承載信息的，它能夠在特定的時(shí)期針對(duì)數(shù)據(jù)進(jìn)行分析和更為詳盡的展示。設(shè)計(jì)師之所以選擇深色的布局，是因?yàn)檫@樣可以創(chuàng)建出有著醒目細(xì)節(jié)和迷人布局的界面，吸引用戶關(guān)注到關(guān)鍵性的區(qū)域和重要的數(shù)據(jù)。

借助儀表盤，用戶對(duì)于收入、支出、特定周期內(nèi)的統(tǒng)計(jì)數(shù)據(jù)一覽無遺。各種不同的數(shù)據(jù)使用卡片來承載，并且有效地組織到一個(gè)統(tǒng)一的布局之下。上面的界面展示了最近一周核心的統(tǒng)計(jì)數(shù)據(jù)，這些數(shù)據(jù)呈現(xiàn)了主要的財(cái)務(wù)狀況和相關(guān)的統(tǒng)計(jì)結(jié)果，右上角的菜單以標(biāo)簽頁的形式顯示了不同時(shí)間周期選項(xiàng)，用戶可以對(duì)此進(jìn)行自定義，默認(rèn)情況下會(huì)顯示一周內(nèi)的財(cái)務(wù)狀況。

儀表盤的卡片中，通常會(huì)顯示這些數(shù)據(jù)塊：

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

另外一個(gè)值得一提的視覺設(shè)計(jì)細(xì)節(jié)，是設(shè)計(jì)師在設(shè)計(jì)財(cái)務(wù)的收支線性圖表的時(shí)候，采用了金融領(lǐng)域被廣泛認(rèn)可的紅色和綠色來標(biāo)識(shí)收支。除此之外，受關(guān)注的支出類別是可以被定義的，包括名稱和圖標(biāo)，這樣可以強(qiáng)化整體的可導(dǎo)航性和交互的直觀性。

移動(dòng)端 UI

移動(dòng)端APP 的 UI設(shè)計(jì)是整個(gè)設(shè)計(jì)項(xiàng)目的另外一個(gè)重要組成部分。Web端的儀表盤雖然同時(shí)具備添加數(shù)據(jù)和展示和分析數(shù)據(jù)的功能，但是移動(dòng)端APP在數(shù)據(jù)的添加和記錄上更加突出，移動(dòng)端APP的設(shè)計(jì)目標(biāo)就是讓用戶了解當(dāng)前的狀況，并且在不同的環(huán)境下隨時(shí)隨地輕松地記錄收入和支出。

這個(gè)界面顯示的是最近的財(cái)務(wù)相關(guān)的操作，以圖標(biāo)來區(qū)分類別。屏幕頂部顯示的是用戶的基本數(shù)據(jù)，當(dāng)前界面顯示用戶當(dāng)前是使用信用卡來支付。此外，你還可以通過垂直柱狀圖來快速預(yù)覽當(dāng)天的收支狀況。如果需要針對(duì)特定的條目進(jìn)行操作，用戶可以水平滑動(dòng)觸發(fā)菜單，這當(dāng)中會(huì)提供更多的交互選項(xiàng)。

右下角的漢堡圖標(biāo)則能夠?yàn)橛脩籼峁└鼮楹诵牡牟僮髋c功能，無論你的移動(dòng)端設(shè)備屏幕大小，這個(gè)菜單都非常容易觸發(fā)，也便于操作。移動(dòng)端APP 還集成了重要通知和用戶建議，它位于頂部的個(gè)人信息條下方，為了區(qū)分不同類型的信息，通知條會(huì)以不同的顏色來顯示，例如橙色為警告，藍(lán)色為提醒。

針對(duì)列表中特定的條目，用戶可以滑動(dòng)觸發(fā)菜單，進(jìn)行編輯、分享或者刪除。

移動(dòng)端界面的動(dòng)畫顯示效果。漢堡圖標(biāo)被觸發(fā)之后，彈出菜單以扇形顯示，承載三個(gè)主要的功能。

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

這個(gè)設(shè)計(jì)項(xiàng)目是Tubik Studio 團(tuán)隊(duì)探索理財(cái)相關(guān)的專業(yè)領(lǐng)域的一次試水，雖然是概念設(shè)計(jì)，但是在設(shè)計(jì)過程中是盡力遵循實(shí)際的用戶需求來進(jìn)行的。

【這些設(shè)計(jì)實(shí)戰(zhàn)同樣來自Tubik Studio】

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

原文地址：uxplanet
原文作者：Tubik Studio
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com