移动支付|配色、布局、交互设计，大牌设计师的良心分享( 三 ) 随行付|第三方支付

上图是尼古拉斯·加西亚·贝尔蒙特的“美国风场图” ，同样是描述风场，可以感受下同色系色彩面积不同，与不同色系带来的视觉体验与心理体验的不同。虽然颜色可以从研究物理层面上对视觉的冲击给人带来的不同感受，但更多对于设计师而言，能做到共情很重要，需要设计师自身能体验到这种色系的差别，有敏感的判断性，这种需要设计师多看案例，多观察生活而不断训练。

上图是我们做的图表配色案例，挑选了6中基础色规定了色调，作出明暗两套方案。
4.背景信息视觉暗示
这是可视化大屏设计中一个小的比较讨巧的方式，背景信息虽然在上面讲到的视觉层次上来说属于弱化的低层级，但是背景信息能够帮助读者更好地理解可视化数据。它能提供一种直观的印象，并且增强抽象的几何图形及颜色与现实世界的联系。设计时可以通过图表周围的文字引入背景信息。如下图：

5.巧用留白
留白这个说法在设计中很常见，但是这个说法并不专业。留白的设计方式属于构图中的一种，也是很考验设计师构成能力的一个点。如果做设计时间长的人会发现，在构图排版的时候，内容越多元素越多越好排，内容越少越不好做设计。现在很多的看起来“高大上”的网页设计或者 APP 界面设计大多都采用了大面积留白，仿佛这是一个设计趋势，许多人将这解释成：现在的信息太多太杂，人们需要整理简化，设计也越来越简化，所以留白盛行。事实上确实有这种社会趋势，但是更重要的是对于设计本身而言，简洁的设计是最难的，构成设计是最考验设计能力的。优秀的留白设计之所以高大上，并不是因为运用了留白的手段，而是设计师的构成能力十分优秀才可以做出如此优秀的作品。
我们可以尝试一下这种训练：给你一张白纸，如何切三刀构成出富有设计感的画面？接下来尝试如何切两刀构成出富有设计感的画面？最后尝试如果只是切一刀，如何使画面富有设计感？这样的训练可以培养构成的能力，等到可以一刀切出艺术品的时候，就可以称得上非常优秀的设计师了。
另外，在交互设计中如何留白，也是栅格化布局的一个应用点。众所周知，混乱是可读性的大敌。大量的文字和图形挤在一起，会让一幅图看起来混乱不清。而他们中留一些留白可以使图表变得很容易阅读。在一张大屏中可以用留白来分隔图形，从而划分出多个图表，形成模块化。留白会让可视化图表更易于浏览和分阶段处理。但是留白不可乱用，若不需要划分视觉元素，就不要用留白，会使内容产生歧义。

上图是设计师 Valentin Lacoste 的作品 “blank page syndrome” 运用了留白的构成方式设计出艺术性的美学动效。
6.动画的交互运用
动画与过渡效果可以增加可视化结果视图的丰富性与可理解性，增加用户交互的反馈效果，操作自然、连贯；还可以增强重点信息或者整体画面的表现力，吸引用户的关注力，增加印象。
但是，动画与过渡使用不当会带来适得其反的效果。如何巧用动画与过渡，需要做到以下几点：
>适量原则：动画不宜使用过多，避免陷入过渡设计的危机中
>统一原则：相同动画语义统一、相同行为与动画保持一致，保持一致的用户体验
>易理解原则：简单的形变、适量的时长、易判断、易捕捉，避免增加观赏者的认知负担。
第一类交互动画的作用主要作用于点击按钮的过渡动画，这类动画应用物理学动力学比较多，通过动效给人更加真实的交互体验。对于这类 motion design 的教学案例，比较权威的是谷歌的 Material Design 如下案例：