微信/电话:13574141305
微信/电话:13574141305
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中尤为常见 线面结合 线性轮廓与面状填充构成图标。在App中，可利用产品品牌色做出趣味性强，具有拓展性的线面图标 左图的界面，简单的装饰，利用细字体及合适的细线性图标，结合留白，使得整个界面呈现出优雅的 气质 右图，采用了线面结合的图标，并结合品牌色，打造出独特的品牌风格，让闲鱼在同类平台上(二手 交易)别具一格 在个人信息列表页，采用线性图标，能够给人轻松，精致的感觉，对氛围的营造具有一定的引导作 用。而阳刻图标(面状图标)能够分割层次，区分信息的重要程度。根据产品的品牌调性，采用合适 的图标，才可事半功倍 金融行业的App产品，首先要表达的第一个要素是安全，只有这个平台是安全的，用户才会为这个产 品买单。在生活中，可以发现像保险柜、保险箱这些物品，外表的简洁及物体本身所带来的厚重感， 给用户带来了安全感，分析总结，我们可以发现，阳刻图标(面状图标)会比线性图标相对有安全感 阳刻图标因为面状带来的厚实，会显得稳重。但这也不是说线性图标就不适合金融产品，这要根据产 品的品牌调性去打造合适的图标。3-4px的线性图标，也可以显得精致厚重。 图标的边角处理也要有讲究。尖角的处理更具权威感，适当的圆角处理也显稳重，而圆角越大越凸显 的是亲和力，而不是权威
涨跌幅标签样式
交易平台中，列表的涨跌幅样式， -般有3种:实心、浅底、纯数字 实心 为突出涨跌信息而采用实心底色聚焦视觉，突出信息。市面.上常见的涨跌幅标签样式 浅底 浅底没有实心聚焦视觉，界面会稍显平衡。浅色的视觉点缀，会让界面有活力。 (做成这种样式，也避免交易平台类的列表页趋于同质化。目前仅看到改版后的火币的网页设计用这 种样式) 纯数字 直接用大字号的数字去表达涨跌幅，这种处理手法需要注意的是单行列表中的信息不宜过多，不然会 显得杂乱无章 总结 作为设计师，虽然我们都喜欢最新的趋势，比如大面积留白、无边框设计，但对于金融数据类产品来 说，数据只要有序的展示，就能很好的解决用户基本的诉求目标，通过快速扫描来找到相关内容。 不单单金融行业，每个行业、每个U|设计的点都值得我们去分析，每次分析总结后，都是为了下一版 本更好的呈现功能及内容，而不是盲目的追随其他类产品的设计手法。 希望这篇文章的梳理能对你有收获。设计道路，还有好长一-段路要走，不仅仅只是技能!