本杰明·富蘭克林曾經(jīng)說過：“小心每一筆開支，然后一艘巨大的游輪可能因為一個小漏洞而下沉?！睂τ诖蠖鄶?shù)人來說，管理資金和管理生活中的每一筆開支都是一個長期的痛點，也是一個問題。 “然而，隨著數(shù)字技術(shù)的發(fā)展，各種軟件和服務(wù)已經(jīng)開始滲透到我們生活的各個方面，許多曾經(jīng)似乎不方便的問題已經(jīng)開始有了新的解決方案。在財務(wù)管理方面，設(shè)計師開發(fā)人員可以幫助那些不專業(yè)的用戶，更好地控制每個基金的流量，并更好地管理財務(wù)。

這是上周Tubik Studio創(chuàng)意設(shè)計活動的主題，UI Fridays：設(shè)計家庭財務(wù)應(yīng)用程序，幫助管理整個家庭的收入和支出。 UI/UX設(shè)計師Ernest Asanov和Andrey Pixy以及運動設(shè)計師Kirill Erokhin和Andrey Pixy在藝術(shù)總監(jiān)Sergey Valiukh的指導(dǎo)下完成了設(shè)計。

任務(wù)

完成Home Finance應(yīng)用程序的UI/UX設(shè)計，包括Web和移動版本

設(shè)計過程

整個APP的演示和微拷貝使用通用且易于理解的詞匯表，使用戶能夠更輕松地管理其日常收入和支出，創(chuàng)建數(shù)據(jù)庫以跟蹤流量和資金變化，并提供全面的統(tǒng)計信息。該應(yīng)用程序有兩種不同的變體，網(wǎng)絡(luò)版和移動應(yīng)用程序。 Web版本有一個包含大量信息的儀表板，移動應(yīng)用程序可以更直觀，更快速地處理各種信息。

經(jīng)過討論，設(shè)計師同意在兩個界面中使用深色背景顏色，這使得數(shù)字和文本都具有高可讀性。

網(wǎng)側(cè)儀表板

Web側(cè)儀表板用于傳輸信息，它可以在特定時間段內(nèi)分析和顯示數(shù)據(jù)。設(shè)計師選擇深色布局，因為它們創(chuàng)建了一個界面，具有引人注目的細節(jié)和迷人的布局，吸引用戶注意關(guān)鍵區(qū)域和重要數(shù)據(jù)。

通過儀表板，用戶可以概覽特定時期的收入，費用和統(tǒng)計信息。使用卡片攜帶各種不同的數(shù)據(jù)并有效地組織成統(tǒng)一的布局。上面的界面顯示了上周的核心統(tǒng)計數(shù)據(jù)。數(shù)據(jù)顯示主要財務(wù)狀況和相關(guān)統(tǒng)計結(jié)果。右上角的菜單以選項卡的形式顯示不同的時間段選項，用戶可以自定義。默認情況下會顯示本周的財務(wù)狀況。

這些數(shù)據(jù)塊通常顯示在儀表板的卡中：

快速訪問菜單包含最常用的支出類別

總費用和交易頻率

關(guān)注的交易清單（熱門交易）

每周平均消費者偏好和財產(chǎn)變化（費用和每周平均值）

特定時期的費用和收入

土地圖標顯示最常消耗的位置

根據(jù)財務(wù)狀況提供適當?shù)慕ㄗh

值得一提的另一個視覺設(shè)計細節(jié)是，設(shè)計師在設(shè)計財務(wù)收入和支出的線性圖時，使用金融領(lǐng)域廣泛認可的紅色和綠色來確定收入和支出。此外，可以定義感興趣的支出類別，包括名稱和圖標，這些增強了整體的可導(dǎo)航性和交互的直觀性。

移動用戶界面

移動應(yīng)用程序的UI設(shè)計是整個設(shè)計項目的另一個重要部分。雖然Web側(cè)的儀表板具有添加數(shù)據(jù)和顯示和分析數(shù)據(jù)的功能，但移動APP在數(shù)據(jù)的添加和記錄方面更為突出。移動APP的設(shè)計目標是讓用戶了解當前的情況并在不同的環(huán)境中。隨時隨地輕松記錄收入和支出。

此界面顯示最近的財務(wù)相關(guān)操作，并帶有用于區(qū)分類別的圖標。屏幕頂部顯示用戶的基本數(shù)據(jù)，當前界面顯示用戶當前正在使用信用卡支付。此外，您還可以使用垂直直方圖快速預(yù)覽當天的國際收支。如果您需要處理特定項目，用戶可以水平滑動觸發(fā)菜單，這提供了更多交互式選項。

右下角的漢堡圖標為用戶提供了更多核心操作和功能。無論您的移動設(shè)備的屏幕尺寸如何，此菜單都非常易于觸發(fā)且易于操作。移動應(yīng)用程序還集成了重要通知和用戶建議。它位于頂部的個人信息欄下方。為了區(qū)分不同類型的信息，通知欄將以不同的顏色顯示，例如橙色表示警告，藍色表示提醒。

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

移動界面的動畫顯示。觸發(fā)漢堡圖標后，彈出菜單以扇形顯示，具有三個主要功能。

考慮到通知/建議需要吸引用戶的注意力，運動設(shè)計者添加了與控件匹配的類似脈沖的效果，并且用戶可以向左和向右滑動以消除新的提醒。

該設(shè)計項目是對Tubik Studio團隊探索財務(wù)管理專業(yè)知識的考驗。雖然它是一種概念設(shè)計，但它旨在滿足設(shè)計過程中的實際用戶需求。

« 十年的個人網(wǎng)站運營經(jīng)驗四年 | 淘寶為何能成為阿里巴巴的創(chuàng)新基地？ »