金融类ui设计原则有哪些 细节让金融类的ui设计更精致

ui设计已经涉及到各行各业，所以很多企业为了跟上行业发展也开始做了ui设计，金融类也不例外，而且金融类的ui设计需要更严谨，下面我们跟随小编一起来了解一下金融类ui设计的相关资料吧。

　　金融类ui设计原则之Banner的样式

　　Banner的核心使命是吸引用户关注，然后被点击。所以它会是主题性明确，突出关键内容并有效抓住用户眼球的一种广告。Banner的设计形式大致可以分为:通栏式、卡片式、面包条。

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

　　2、卡片式。卡片式的banner灵活度比较高，呈现在界面上的样式多样化，不一样的切换方式。卡片式banner的采用可撑开界面，使其留白变大，让界面更具呼吸感。

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

金融类ui设计

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

　　banner通栏，用户更容易将注意力集中在每个banner内容本身，其视觉流线在往下浏览时，因为没有留白的引导，被banner直接割裂，造成在banner.上的停留时间更长。当banner不通栏的时候，左右的间距可以更好的引导用户往下浏览，且卡片式banner,因为上下的留白间距，会使界面具有呼吸感，如果是金融交易平台的产品，着重点是信息的展示及操作的便捷性，banner并不需要太重点运营，这时小卡片的banner是-个不错的样式选择。

　　金融类ui设计原则之数字

　　金融类的产品，多数是数字的信息，对于数字的对齐方式、展现形式是有讲究的。例如价格是左对齐，从左往右看，一下子很难看识别出数字的体量;而价格是右对齐，用户判断数字的体量，通常是从右往左通过后面的位数来判断千位、万位，右对齐的方式可以提升用户的浏览效率;而对于左对齐的24小时成交额，可以通过增加逗号，将数字间隔开，提升数字体量的判断效率当数字特别大的时候，除了加逗号，也可以用K、M去表达，提升浏览效率。

　　金融类ui设计原则之分割线

　　针对线条颜色的分析，对市面上主流的App进行了研究，截取界面吸取分割线颜色进行对比研究，对各个App进行分析总结，可以发现，部分产品运用颜色有着以下规律:

　　当产品种类繁多，有着大量的图片、视频等信息时则采用了浅色的线条颜色，这样可以减少对信息的干扰，专注信息的阅读;当元素较少，文字信息过多时，则采用深色线条分割层次;金融多数信息都是数字，可合理的利用深色分割线去分割层次，以避免满屏的数字不知所措

　　分割线的通栏与不通栏。在App上，我们会看到界面的分割线有些是通栏的，有些是不通栏(即分割线距离屏幕左边是有一定间距的)，这并不是开发的还原度不好，视觉上说，通栏与不通栏就是一个整体和割裂的关系，不通栏的分割线，使得每个小模块中的每个列表都显得相对具有联系性，而右图中的每个列表信息就显得相对独立。

　　也有一些列表采用无分割线的做法，利用格式塔原理，让用户把信息自行分组。无分割线处理方式可以拉开间距，让界面轻量化，适合一些功能简单的App,对于一些用户群体广，内容繁杂且层级较深的产品，处理得不好，会显得页面杂乱无章信息过多的情况下，无分割线的做法会让界面杂乱，相反，增加深色分割线去分割层次，让界面有序。

　　金融类ui设计原则之合适的图标

　　图标是具有明确指代含义的计算机图形。图标的表达形式各式各样，这里将图标大致分为以下类别:拟物、轻拟物、线性、阴刻、阳刻、线面结合。

金融类ui设计

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

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

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

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

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

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

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

　　阳刻图标因为面状带来的厚实，会显得稳重。但这也不是说线性图标就不适合金融产品，这要根据产品的品牌调性去打造合适的图标。3-4px的线性图标，也可以显得精致厚重。图标的边角处理也要有讲究。尖角的处理更具权威感，适当的圆角处理也显稳重，而圆角越大越凸显的是亲和力，而不是权威。

　　小编觉得金融类ui设计一定要遵循原则，因为金融类的ui界面设计是需要相对比较严谨的，所以大家在做金融类的ui设计时一定不能太过花哨哦!