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

一、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曾有一-版本，将消息列表的分割线全部去除，之后下一版本又加上了分割线，消息列表的信息会比较多，头像、人名，消息，消息数量、时间，信息过多的情况下，无分割线的做法会让界面杂乱，相反，增加深色分割线去分割层次，让界面有序。

四、合适的图标

图标是具有明确指代含义的计算机图形。图标的表达形式各式各样，这里将图标大致分为以下类别:

拟物、轻拟物、线性、阴刻、阳刻、线面结合

拟物

利用一切装饰效果，诸如阴影，透视，纹理，渐变等手段再现原有物体效果，表现出真实世界的物体形态。拟物化风格的优势是将原本包含较多现实元素的抽象内容具象化，使其更直观地传递给用户,降低学习成本，使用户易于接受，提高产品的认知度。

 

轻拟物

通过简单的图形，简单的色彩组合，表现物体的特点，即平面化、微质感。轻拟物丰富易用，识别度高，经常运用到App的活动icon。

 

线性图标

通过线条构成图标，线条的粗细决定图标表达的特性，或是优雅精致，或是厚重严谨。线性图标的构成简洁抽象，轻松精致，但要做出精致耐看的图标，也是很考验设计师的功底。

 

阴刻图标

在色彩底板上镂空形状，则是阴刻图标。一些阴刻进阶的做法，则是在镂空的形状上，通过渐变增加纹理。阴刻图标因为有颜色底板，容易聚焦视觉，引人注目，通常出现在App的金刚区部位。

 

阳刻图标

直接通过形状来表达图标意义。阳刻图标识别性强，具有现代感，在App中尤为常见

 

线面结合

线性轮廓与面状填充构成图标。在App中，可利用产品品牌色做出趣味性强，具有拓展性的线面图标

 

左图的界面，简单的装饰，利用细字体及合适的细线性图标，结合留白，使得整个界面呈现出优雅的气质

右图，采用了线面结合的图标，并结合品牌色，打造出独特的品牌风格，让闲鱼在同类平台上(二手交易)别具一格

 

在个人信息列表页，采用线性图标，能够给人轻松，精致的感觉，对氛围的营造具有一定的引导作用。而阳刻图标(面状图标)能够分割层次，区分信息的重要程度。根据产品的品牌调性，采用合适的图标，才可事半功倍

 

金融行业的App产品，首先要表达的第一个要素是安全， 只有这个平台是安全的，用户才会为这个产品买单。在生活中，可以发现像保险柜、保险箱这些物品，外表的简洁及物体本身所带来的厚重感，给用户带来了安全感，分析总结，我们可以发现，阳刻图标(面状图标)会比线性图标相对有安全感

 

阳刻图标因为面状带来的厚实，会显得稳重。但这也不是说线性图标就不适合金融产品，这要根据产品的品牌调性去打造合适的图标。3-4px的线性图标，也可以显得精致厚重。

图标的边角处理也要有讲究。尖角的处理更具权威感，适当的圆角处理也显稳重，而圆角越大越凸显的是亲和力，而不是权威

 

根据产品的品牌调性，在设计图标的时候，有以下三个原则:

 

可识别性

一般来说，除了一些追求个性化设计的图标，图标的表达都要让用户能够快速辨明其蕴意。

 

电商或者外卖类图标，当该产品中的商品种类繁多时，图标的识别性应优先考虑(可以发现大部分外卖类、商城类等App的金刚区都不采用线性图标)。金刚区的图标，大多数都是采用了阴刻图标，色彩的视觉聚焦，在加上识别性强的图标，使得用户在购买行为中快速的从大脑中提取图标信息，根据图标去选购商品。

 

统一性

统一性不单单表现在图标的风格，图标的视觉也要保持统一 。同尺寸的正圆和正方形，正方形的视觉大小要比正圆的大。因此，在图标设计过程中，视觉大小需时刻注意。

 

品牌差异性

通过品牌色，与用户建立情感，为一个品牌蒙上了一层信誉和个性的新色彩。将品牌色融入图标的设计中，建立一种独特的信念，让这种信念贯穿整个设计，深入人心。

 

五、涨跌幅标签样式

交易平台中，列表的涨跌幅样式，一般有3种：实心、浅底、纯数字。

实心

为突出涨跌信息而采用实心底色聚焦视觉，突出信息。市面.上常见的涨跌幅标签样式。

 

浅底

浅底没有实心聚焦视觉，界面会稍显平衡。浅色的视觉点缀，会让界面有活力。(做成这种样式，也避免交易平台类的列表页趋于同质化。目前仅看到改版后的火币的网页设计用这种样式)

 

纯数字

直接用大字号的数字去表达涨跌幅，这种处理手法需要注意的是单行列表中的信息不宜过多，不然会显得杂乱无章。