打开一款银行App，我们通常不会先研究它用了什么字体，而是先看余额，再找刚刚那笔钱。可轮到欣赏金融产品的设计稿时，注意力又很容易被渐变卡片、手机样机和漂亮图表吸引。今天兰亭妙微分享dpopstudio的Finsmart设计文章，把画面放回这些日常动作里看看。它是一套移动银行UI Kit，适合观察视觉和页面组织；本文结合原文话题与画面展开讨论，也加入一些假设使用场景，不把展示稿当成真实银行的操作记录。
Finsmart的画面把亮色渐变留给账户区域，周围用较轻的底色承接列表。大面积留白让首页没有被金融信息压得很满，数字也有了比较明确的落点。这样的配色值得看，但更值得停下来观察的，是一个页面到底想让人先读哪一个金额。余额、预算和统计总额都重要，同时放大却会削弱彼此。
想象一个刚收到工资的人打开首页，他需要确认的是钱有没有到账；另一个正在旅行的人，可能更在意还能支配多少。两个问题未必使用同一个数字。设计前先弄清“账户余额”“可用余额”和“本月结余”分别是什么，再安排字号与位置，才不会出现视觉很清楚、含义却让人猜的情况。文案与排版在这里是一件事。
Finsmart首页视觉展示。 图片来自原文，版权归相关权利人。
还可以把示例里的短数字换成长数字，把整洁姓名换成较长的商户名称。这样的画面虽然不如展示稿漂亮，却能看出布局是否有余地。金额后的小数、币种和正负号都不宜随意省略；辅助说明可以变轻，但不能轻到需要凑近屏幕才能辨认。观察金融UI时，不妨顺着数字读一遍，而不是只远远看配色。
第二张展示图把首页、统计和界面局部放在一起，能看到相近的圆角和色彩在不同页面延续。系列感让人容易认出这是同一个产品。不过，真实操作并不按设计稿的展示顺序发生。用户可能从一条到账通知进入详情，再回到首页，也可能在填写金额时临时切去查资料。
如果用“给朋友转一笔钱”来检验方案，最值得看的是几个停顿：选择收款人时能不能确认身份，填写金额时能不能发现输入错误，提交之前有没有机会重新看一遍。这里不必急着缩短页面数量。有些停顿是在帮助人作出决定，尤其当操作涉及钱时，清楚的确认比看起来很快更重要。
Finsmart界面与统计区域组合展示。 图片来自原文，版权归相关权利人。
等待也需要被认真设计。按下按钮后没有变化，人就可能再按一次；出现一条含糊的报错，人又不知道钱究竟有没有出去。一个可信赖的结果页，应让人找到这笔操作的记录及后续查询方式。哪些状态可以重试、哪些需要先查询，应该与真实业务规则一致。精致的动效可以缓解等待感，却不能替代结果说明。
浏览一套UI时，我们常会只保存最出彩的首页。但页面接在一起以后，细节的一致性才真正显出来：同类标题的位置是否相近，返回入口是否稳定，主要操作是否总在容易找到的地方。原文还谈到身份验证等首页之外的流程，这也提醒我们，金融产品的完整度往往藏在不那么适合做封面的页面里。
设想用户拍摄证件时遇到反光。如果界面只是说“识别失败”，他只能反复尝试；如果指出哪部分看不清，并保留已经填好的资料，下一步就容易得多。这个例子不代表图中产品的实际功能，而是阅读此类设计文章时，可以顺手带入的一种观察角度：失败以后，页面有没有替用户保住前面的努力。
Finsmart原作页面展示，以实际画面为准。 图片来自原文，版权归相关权利人。
因此，收集页面时也值得收集提示、帮助和中途返回的处理方式。它们不一定最漂亮，却会直接影响用户是否愿意继续。将一套作品按任务串起来，看看每一步交给下一步的信息是否完整，比单独评价十张页面更容易理解作者的设计取舍。
这套作品的展示中也出现了深色界面。深色背景能够突出亮色区域，金融卡片的辨识度更强，但亮色多了同样会让眼睛没有休息的位置。把浅色模式简单反转，并不能自然得到舒服的深色方案。
可以从一次实际阅读顺序来观察：先看余额，再找最近交易，最后打开详情。整个过程中，哪一块最亮，视线就容易先被它吸引。如果装饰背景始终比文字更抢眼，页面的重点便会改变。深色下的分隔线、辅助文字和次要按钮也需要重新判断，而不是照搬浅色下的明暗关系。
Finsmart原作系列展示，不代表正式银行服务。 图片来自原文，版权归相关权利人。
对于移动端UI设计，这篇文章给我们的启发是，值得积累的不止一种渐变效果，还有页面如何照顾不同阶段的注意力。首页负责让人看懂概况，过程页负责让人作出选择，结果页负责让人知道事情进展到了哪里。当这些关系连起来，视觉风格才真正参与了使用体验。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
