从多个细节分析金融类UI设计

11月 7, 2018 发表于: 视觉设计. 评论

Sponsor

最近看到很多关于设计趋势的文章，然而作为UI设计师，不要麻木追求这些设计手法，比如金融行业的APP来说能更好的呈现内容给用户会更重要，今天分享与金融有关的UI设计介绍，从 Banner、图标、数字、分割线及涨跌幅样式等多个细节进行研究，对未来做金融或相关 APP 会有很好的参考价值。

作者：JackYuu
个人主页：https://www.zcool.com.cn/u/1982432

banner的样式
数字及分割线
合适的图标
涨跌幅标签样式

一、Banner的样式

Banner的核心使命是吸引用户关注，然后被点击。所以它会是主题性明确，突出关键内容并有效抓住用户眼球的一种广告。

Banner的设计形式大致可以分为:通栏式、卡片式、面包条

通栏式

常规产品做法，主要出现在电商类、商品类的App,通栏的banner特点: 更具沉浸感，更容易吸引用户注意

卡片式

卡片式的banner灵活度比较高，呈现在界面上的样式多样化，如下图，3种卡片式banner,不一样的切换方式。

卡片式banner的采用可撑开界面，使其留白变大，让界面更具呼吸感

面包条

通常运用到电商类或者其他app的特殊活动，其特点是异形，设计多样化，可以同时具有动效，更能吸引用户点击

金融类的App，对于- -些贷款类或是小理财型的金融产品，有时候还会通过运营活动，提高用户的留存率。但如果是金融交易平台，它们对banner的所带来UV转化的要求并不是很大，交易平台类的产品更着重信息的展示，市场的实时变化及操作的便捷性。

banner通栏，用户更容易将注意力集中在每个banner内容本身，其视觉流线在往下浏览时，因为没有留白的引导，被banner直接割裂，造成在banner.上的停留时间更长。

当banner不通栏的时候，左右的间距可以更好的引导用户往下浏览，且卡片式banner,因为上下的留白间距，会使界面具有呼吸感，如果是金融交易平台的产品，着重点是信息的展示及操作的便捷性，banner并不需要太重点运营，这时小卡片的banner是-个不错的样式选择。

二、数字

金融类的产品，多数是数字的信息，对于数字的对齐方式、展现形式是有讲究的。

下图左右两张图，觉得哪张图更能提升用户的浏览效率?

左图列表中的价格是左对齐，从左往右看，一下子很难看识别出数字的体量;

而右图价格是右对齐，用户判断数字的体量，通常是从右往左通过后面的位数来判断千位、万位，右对齐的方式可以提升用户的浏览效率;

而对于左对齐的24小时成交额，可以通过增加逗号，将数字间隔开，提升数字体量的判断效率

当数字特别大的时候，除了加逗号，也可以用K、M去表达，提升浏览效率

三、分割线

针对线条颜色的分析，对市面上主流的App进行了研究，截取界面吸取分割线颜色进行对比研究，界面有微信、QQ、天猫、京东、优酷、今日头条等20个左右

对各个App进行分析总结，可以发现，部分产品运用颜色有着以下规律:

当产品种类繁多，有着大量的图片、视频等信息时(如: 京东天猫、新闻类、视频类)，则采用了浅色的线条颜色，这样可以减少对信息的干扰，专注信息的阅读;

当元素较少，文字信息过多时，则采用深色线条分割层次;

金融多数信息都是数字，可合理的利用深色分割线去分割层次，以避免满屏的数字不知所措

分割线的通栏与不通栏

在App上，我们会看到界面的分割线有些是通栏的，有些是不通栏(即分割线距离屏幕左边是有一定间距的)，这并不是开发的还原度不好，视觉上说，通栏与不通栏就是一个整体和割裂的关系，如图

左图不通栏的分割线，使得每个小模块中的每个列表都显得相对具有联系性，而右图中的每个列表信息就显得相对独立。

也有一些列表采用无分割线的做法，利用格式塔原理，让用户把信息自行分组。无分割线处理方式可以拉开间距，让界面轻量化，适合一些功能简单的App,对于一些用户群体广，内容繁杂且层级较深的产品，处理得不好，会显得页面杂乱无章。记得QQ曾有一-版本，将消息列表的分割线全部去除，之后下一版本又加上了分割线，消息列表的信息会比较多，头像、人名，消息，消息数量、时间，信息过多的情况下，无分割线的做法会让界面杂乱，相反，增加深色分割线去分割层次，让界面有序。