本杰明·富兰克林曾说过：“小心谨慎地对待每一笔开支。即使是最大的游轮也可能因为一个小漏洞而沉没。”对于大多数人来说，理财和管理生活中的每一笔开支是一个长期存在的痛点和难题。然而，随着数字技术的发展，各种软件和服务开始渗透到我们生活的各个方面，许多曾经看起来极其麻烦的问题开始有了新的解决方案。就财务管理而言，设计师和开发人员可以帮助不擅长此道的用户更好地控制每一笔资金的流向，更好地管理自己的财务。
这是上周 Tubik Studio 创意设计活动 UI Fridays 的主题：设计一款家庭财务应用，帮助管理整个家庭的收入和支出。UI/UX 设计师 Ernest Asanov 和 Andrey Pixy 以及动作设计师 Kirill Erokhin 和 Andrey Pixy 在艺术总监 Sergey Valiukh 的指导下完成了设计。
任务
完成家庭理财APP的UI/UX设计，包括网页版和移动版
设计过程
APP 中的表达和微文案使用常见且通俗易懂的词汇，让用户更轻松地管理日常收入和支出，建立数据库来跟踪资金的流向和变化，并提供全面的统计信息。该应用有两个不同的版本，网页版和手机 APP。网页版有一个包含大量信息的仪表盘，而手机 APP 可以更直观、快速地处理各种信息。
经过讨论，设计师们一致同意在两个界面都使用深色背景颜色，这样可以使数字和文本更具可读性。
网页仪表板
Web 仪表板用于承载信息，可以更详细地分析和显示特定时间的数据。设计师选择深色布局是因为它可以创建一个细节醒目、布局吸引人的界面，吸引用户的注意力到关键区域和重要数据上。
通过仪表盘，用户可以清晰的看到特定时间段内的收入、支出和统计数据。各种数据以卡片的形式呈现，并被有效地组织成统一的布局。上面的界面展示了过去一周的核心统计数据，呈现了主要的财务状况和相关的统计结果。右上角的菜单以标签的形式显示不同的时间段选项，用户可以自定义。默认情况下，会显示一周内的财务状况。
仪表板卡通常显示这些数据块：
・快速访问菜单包含最受欢迎的支出类别（热门类别）
・总支出和交易频率
・热门交易
・与上一期相比的支出和每周平均值
・特定期间内收入与支出的线性趋势图（支出与收入）
・使用地图显示最常消费的地点
・根据您的财务状况提供建议
另一个值得一提的视觉设计细节是，在设计财务收支线性图时，设计师采用了财务领域广为认可的红绿两色来标注收入和支出，此外还可以定义感兴趣的支出类别，包括名称和图标，这样可以提升整体的导航性和交互的直观性。
移动用户界面
手机APP的UI设计是整个设计项目的另一个重要部分。虽然网页端的仪表盘具有添加数据、展示和分析数据的功能，但手机APP在添加和记录数据方面更加突出。手机APP的设计目标是让用户在不同环境下随时随地了解当前情况并轻松记录收入和支出。
这个界面展示的是最近一次的财务操作，用图标来区分类别。屏幕顶部展示的是用户的基础数据，当前界面显示用户目前正在使用信用卡支付。此外，还可以通过竖条图快速预览当天的收入和支出情况。如果需要对某一特定项目进行操作，用户可以水平滑动触发菜单，这将提供更多的交互选项。
右下角的汉堡图标为用户提供了更多核心操作和功能。无论你的移动设备屏幕大小如何，这个菜单都很容易触发，操作也十分方便。手机APP还整合了重要通知和用户建议，位于顶部个人信息栏下方。为了区分不同类型的信息，通知栏会以不同的颜色显示，如橙色表示警告，蓝色表示提醒。
对于列表中的特定项目，用户可以滑动触发菜单来编辑、分享或删除它们。
移动端界面动画展示效果，汉堡图标触发后，弹出菜单以扇形方式展示，承载三大主要功能。
考虑到通知/建议需要吸引用户的注意，动效设计师还为该控件添加了特色脉冲效果，用户可以通过向左或向右滑动来消除新的提醒。
本次设计项目是Tubik Studio团队对财务管理相关专业领域的一次尝试，虽然是概念设计，但团队在设计过程中尽力贴合实际用户需求。
