网页设计 » 视觉设计 » 从多个细节分析金融类UI设计

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

发表于: 视觉设计. 评论
赞助商链接

最近看到很多关于设计趋势的文章,然而作为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曾有一-版本,将消息列表的分割线全部去除,之后下一版本又加上了分割线,消息列表的信息会比较多,头像、人名,消息,消息数量、时间,信息过多的情况下,无分割线的做法会让界面杂乱,相反,增加深色分割线去分割层次,让界面有序。

四、合适的图标

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

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

拟物

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

轻拟物

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

线性图标

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

阴刻图标

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

阳刻图标

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

线面结合

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

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

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

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

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

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

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

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

可识别性

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

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

统一性

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

品牌差异性

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

五、涨跌幅标签样式

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

实心

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

浅底

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

纯数字

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

总结

作为设计师,虽然我们都喜欢最新的趋势,比如大面积留白、无边框设计,但对于金融数据类产品来说,数据只要有序的展示,就能很好的解决用户基本的诉求目标,通过快速扫描来找到相关内容。

不单单金融行业,每个行业、每个UI设计的点都值得我们去分析,每次分析总结后,都是为了下一版本更好的呈现功能及内容,而不是盲目的追随其他类产品的设计手法。

希望这篇文章的梳理能对你有收获。设计道路,还有好长一段路要走,不仅仅只是技能!

文章如有错误,欢迎指教~

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。