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

为什么要整理视觉设计要素？

一款App，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而“表现层”是指视觉设计层面，往往是用户与产品的最直观体验，一个优秀的产品必然要考虑如何做好界面设计。

在界面设计中包含了以下要素：“界面风格、色彩、banner、图标、图片留白”。本文主要从界面设计中的“界面风格、色彩”两大要素出发，并结合具体的基金案例，系统的介绍如何对表现层中的视觉要素进行更好地设计。

那我们就开始吧。

界面设计风格在不断变化，主题风格不明确的界面是不会引起用户喜欢的，只有保持统一的风格，才不会让用户在访问页面时产生错愕的感觉。界面风格大纲如下：

“扁平化设计” 所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。善于用颜色去鼓励用户探索。

目前市面上大部分App界面都为扁平化风格，扁平化设计已成为如今最流行的设计趋势。

它的优点：

• 快速高效

• 更迭快低成本运作

• 突出信息

“无框设计”是近两年流行起来的一种新的趋势，在扁平化的基础上更加简约，去除界面中的边框，分割线，用间距来区分内容。

它适合的界面类型：

• 以面积较大的图片为主            

• 内容有规律

• 小众且垂直的产品

现如今的渐变几乎成了时尚的代名词，渐变色彩可以在背景中替代纹理存在，也能结合图片和其他的UI元素来使用。不过和以往所看到的渐变不同，重新回归的渐变色设计有着不一样的使用技巧和特色，更加贴合这个时代的风格和需求。

它的优点：

• 让背景具备视觉吸引力

• 渐变色叠加能够让平淡的图片更加出彩

• 引导视线、强化品牌

  
  

在扁平化设计成为主流的今日，设计师们在这基础上变化出了新的设计风格，它变得更加趋向于立体化，这种转变将体现在一些光和阴影的运用，成为所谓“半扁平化设计”。

它的优点：

• 适量渐变阴影的使用将会在保留其简约风格的基础上使原本的扁平化设计更加复杂和写实化，为产品添加更多的趣味，同时更加强调界面的隐喻。

  
  

UI中的卡片借用了现实世界中的卡片的特征和概念。通常UI中的卡片是矩形的，其中承载图像、文本、链接、按钮等不同元素。卡片是容器，但是通常一个卡片中会集中承载一种或以一种元素为核心的一小组元素。不同的元素在不同的卡片中各司其职，不同的卡片组合到一起，构成功能性的页面，或者组合。

它的优点：

• 增加空间利用率

• 区分不同维度内容

• 提升可操作性

  
  

2、色彩

色彩是绝大多数设计给用户传递的最显著的视觉元素之一，是艺术表现的要素之一，不同的色彩对用户有着不同的感受和体验。色彩大纲如下：

色彩介绍：

一般界面的色彩搭配主要包括三种颜色：主色调、辅助色、点缀色，搭配比例分别为 6:3:1。不同色彩也有着相应寓意：

色环上相距 0° 的颜色为同类色，一般常用同一种色相的不同明度或不同饱和度的组合方式，例如蓝与浅蓝，红与粉红等。同类色搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。案例：

色环上相距 30° 左右的颜色为邻近色 ，例如紫与蓝紫，蓝紫与蓝，黄与红等。邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果。案例：

色环上相距 60° 左右的颜色为类似色，例如橙与黄，黄橙与黄绿等。类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉。

色环上相距 90° 左右的颜色为中差色，例如红与黄橙，蓝绿与黄等。中差色搭配对比效果明快、活泼、饱满、使人兴奋，同时不失调和之感。案例：

色环上相距 120° 左右的颜色为对比色，例如红与黄，红紫与黄橙，蓝与红等。对比色搭配对比效果强烈、醒目、刺激、有力，  容易形成视觉冲击，一般需要采用多种调和手段来改善对比效果。案例：

色环上相距 180° 左右的颜色为互补色，例如红与绿，黄与紫等。互补色搭配表现出一种力量、气势与活力，具有非常强烈的视觉冲击力。案例：

多色搭配顾名思义是由多种色彩组合而成的一种搭配方式，一般以不超过 4 种颜色为宜，规定一种作为主导色，其余作为辅助色使用。

多色搭配会让画面显得更加丰富、多彩，充满趣味性，但若控制不好，也容易让画面变花，失去平衡。搭配时须注意区分主次，按比例进行调和。案例：

3、结语

界面小结：

界面的设计直观展示了App的设计风格，一个APP开始启动设计时，第一步应该用主要页面定下整个APP的设计风格，然后其他页面按着统一的设计风格进行细致的设计美化。

统一设计风格能给用户呈现整体一致的视觉体验，有利于传达产品整体的品牌形象；也方便设计团队制定设计规范，减少设计风格不一致带来的沟通成本。

色彩小结：

色彩的搭配直接决定了APP的用色，色相、明度、饱和度是色彩的三个属性，不同的色彩具有不同的心理寓意，选色时需考虑产品的调性和受众人群；色环上距离（角度）越大的颜色对比效果越强，反之对比效果越弱，设计时应采用合适的色彩搭配。

色彩从来都不是越多越好，通常配色方案当中，色彩数量要控制在3种左右，设计师根据色彩对人们心理的影响，合理地加以运用，通过创建配色方案，系统地对品牌和UI界面的色彩进行管理，这确保了品牌和UI在色彩的运用上保持着高度的一致。