金融APP界面 | 巧用五要素，有料更有颜（二）

前面我们讲到了“界面、色彩”两大要素（回顾），今天我们主要从界面设计中的“Banner、图标、图片留白”三大要素出发，并结合具体的基金案例系统的介绍如何对表现层中的视觉要素进行更好地设计。

那我们继续吧 : )

Banner是最常见的广告形式，其作用主要是新品展示推广、运营等营销活动推广；Banner可以从定位、设计排版、设计风格进行概括归纳。

1. 活动主题

主要是从传统节日（如情人节、母亲节等），或者运营促销活动（如电商双11、双12等）主题出发，营造活动氛围。示例▼

2. 产品属性

从产品颜色、包装、成分、用途、品牌调性等维度出发。示例▼

1. 左图右文

这种风格整体均衡，素材和文字均衡搭配。示例▼

2. 左文右图

这种风格整体均衡，突出文字。示例▼

3. 图文居中

作用：聚焦，增强视觉效果。示例▼

4. 框架式构图

作用：文字居中，左右填充，加强纵向对比。示例▼

1. 扁平化

经典的扁平化风格成为Banner中最常见的设计风格，它打造出一种看上去更“平”的界面。善于用颜色去鼓励用户探索；同时具有鲜明的互联网流行特征，符合用户的心理预期。示例▼

2. 2.5D建模风格

2.5D的建模现在成为设计中越来越常出现的元素。它强调对比，营造真实性、创造性，同时带有与生俱来的未来感，这样的风格可以迅速地调动用户的心理期待。示例▼

3. 简约风格

最明显的特点就是留白，大量的留白。素材图一般都很大，突出细节；排版简约，给人带来大气高端的印象。示例▼

4. 插画风格

作为设计当中最「设计师」的组成部分，插画本身有着强大的视觉吸引力。精心调制的细节，贴合语境的视觉内容，都是提升插画品质，增加转化率的重要手段。示例▼

5. 实物摄影风格

使用高清唯美的摄影图片能带给用户最直观的视觉观感，搭配适合的文案排版能让整款Banner拥有很强的吸引力。示例▼

6. 手绘风格

手绘风格可以用在文案上。产品本身也可以用手绘的形式，如上图左一，简单的几笔就让整个画面一眼就能看懂，而且充满乐趣。手绘风格用的最多的是点缀物，通过不同手绘风格的点缀物营造不一样的氛围。示例▼

7. 中国风风格

字体较多采用书法字体，元素有印章，中国山水画，墨迹，扇面，剪纸，园林窗格，古纹样，祥云，京剧，卷轴等等。在相关的主题中能营造出独一无二的用户场景体验感。示例▼

8. 科技风格

科技感的文字+科技感的背景图，高级一点的还包括科技感的小点缀。用色以蓝，黑色，紫等冷色调为主，画面给人硬朗，空间感，速度和力量的感觉。可以用到的点缀物有光效、金属效果、线条、光点，宇宙等。示例▼

9. 渐变风格

现如今的渐变几乎成了时尚的代名词，渐变色彩在Banner中可以在背景中替代纹理存在，也能作为设计元素使用。可带给用户新颖，时尚，具有冲击力与吸引力的观感。示例▼

10. 复古风格

复古的印刷元素拥有着独一无二的怀旧感与年代感，搭配适合的主题能让用户拥有绝佳的情感体验，从而被Banner所吸引。示例▼

2、图标

图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。

1. 线性图标

线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰。示例▼

2. 面性图标

面性图标可以简单理解为对线性图标的填充，但面性比线性更加稳重和扎实，对色彩的传达也清晰明显。示例▼

3. 线面结合图标

线面结合图标典型代表是「MBE风格」图标（注：MBE是以设计师名称命名的一种风格），其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。粗线条起到对画面的绝对分割，突显内容、表现清晰。示例▼

4. 扁平图标

扁平图标去掉了透视、纹理、渐变等能做出 3D 效果的元素，让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化。示例▼

5. 轻拟物图标

轻拟物图标没有拟物图标那么写实，也不像扁平图标那么「平」，而是利用淡淡的渐变和一些光影来达到两者之间的平衡，识别性高又不失美感。示例▼

图片在 Web 和 App 界面设计中是非常常见的，图片的质量和展现方式都会影响着用户对产品的感官体验。

UI界面中的图片常见比例：

1. 比例3:2

2：3≈0.666，较为靠近黄金比例，在相机拍照的全画幅尺寸比例即为2：3，其他尺寸均是通过裁切而成，因此在应用中看上去比较舒服。该比例多用于横图中，如商品列表、banner图中。示例▼

2. 比例4:3

3：4的设计在界面中也很常见，相比于2：3，图像更为紧凑，多用于图片占比重较大的APP中，也多用于产品列表、banner中。示例▼

3. 比例1:1

1:1的这种可将图片展示最大化的方式，增大用户点击范围，提高用户点击率。1：1也是正方形构图，这种构图图片占比比较大，因此多用于产品展示、头像、特写展示等场景的APP中，在电商设计中较为常见。示例▼

4. 比例16:9

16：9主要是电影中的常见构图，该构图给人视觉开阔的感受，多用于视频类APP中。示例▼

5. 比例16:10

16:10=16是最接近黄金分割1:0.618-1.618的，黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值。示例▼

4、小结

Banner

Banner的主要作用就是吸引用户关注，然后被点击，所以设计的时候应注意主题性明确，突出关键内容。

图标

图标可以辅助信息文字的传达，也可以对界面起到修饰作用，不同风格的图标传递出不同的视觉语言，根据场景的需要进行合适的选择，并保持风格的一致性。

图片留白

不同比例的图片所传递的主要信息各不相同，设计时需要结合产品的特点，并根据不同的要求来选择合适的图片比例。

图片的排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式。