設(shè)計一款用于家庭理財?shù)腁PP，幫助管理整個家庭的收入和支出。UI/UX 設(shè)計師 Ernest Asanov 和 Andrey Pixy 以及動效設(shè)計師 Kirill Erokhin 和 Andrey Pixy 在 藝術(shù)總監(jiān) Sergey Valiukh 的指導(dǎo)下，完成這次的設(shè)計。

本杰明·富蘭克林曾經(jīng)說過：

“小心對待每筆支出吧，再巨大的郵輪也可能因為小漏洞而沉沒。”

對于絕大多數(shù)人而言，理財，管理生活中的每一筆支出，是一個長期存在的痛點，是老大難的問題。不過，隨著數(shù)字技術(shù)的發(fā)展，各種軟件和服務(wù)開始深入到我們生活的方方面面，許多曾經(jīng)看起來麻煩無比的問題，都開始有了新的解決方案。就理財這件事情而言，設(shè)計師和開發(fā)者能夠幫并不專精于此的用戶，更好地掌控每筆資金的流向，并且更好地管理財務(wù)。

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

任務(wù)

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

設(shè)計過程

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

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

Web端儀表盤

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

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

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

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

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

移動端 UI

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

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

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

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

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

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

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

（題圖由作者提供）

原文作者：Tubik Studio

原文地址：uxplanet

譯者：@陳子木

譯文地址：優(yōu)設(shè)網(wǎng)

本文由 @陳子木?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。