资深UI传授的十大界面设计理念

专业调查显示，26%的应用在下载后只打开过一次。任意一款APP都包含了开发者和推广者的大量精力，但是最终达不到想要的营销效果，相当于前期的付出都打了水漂。APP使用率低的重要原因之一是APP界面设计很差，那么，开发者如何提升APP界面质量呢？

关于APP界面设计理念，用一句话概括就是“简洁轻快的界面设计更符合现代用户的心理需求”。从用户体验角度出发，专注于产品的质量，追求人性化设计理念。

扁平化设计，拒绝冗杂繁重

在近几年中，APP的界面设计风格发生了翻天覆地的变化，由原来的3D、拟物发展到扁平、简约。为何APP界面设计会朝着扁平化发展呢？

随着APP承载的信息量越来越大，加剧了超负荷现象。其中一部分信息是重要的，但是大部分信息却是无关紧要的。所以，APP开发者就需要不断地评估APP为用户提供的价值，过滤掉华而不实的功能，如图2-7所示是两款不同APP的扁平化设计界面。

设计APP界面时，去掉用户界面的繁杂元素才是提升用户视觉体验的王道。因此，设计者始终要本着“简约就是金科玉律”的原则设计APP。

导航设计，APP结构一目了然

当设计者确定了APP的设计需求和设计流程后，开始着手设计APP界面或者是APP原型图。在这个时候，设计者都要面临的第一个问题是：如何将这些信息以最优的方式组合起来？

导航设计成了承接和组合APP各个元素的最佳方式，良好的APP导航设计模式对整个APP的用户体验起到关键作用。而移动应用界面的导航设计是多种多样的，下面将介绍几种比较常见的导航设计。

（1）抽屉式导航设计和宫格式导航设计

抽屉式导航是将菜单隐藏在当前页面后，点击入口按钮即可像拉抽屉一样拉出菜单，如图2-8（a）所示。抽屉式导航界面设计的优点是节省页面展示空间，让用户将注意力聚焦到当前页面。因此，抽屉式导航比较适合不需要频繁切换页面的APP，但是设计者在使用这种导航设计方式时需要注意的是，一定要提供菜单滑出的过渡动画，给用户足够的缓冲空间。

宫格式导航是将APP的主要入口全部聚合在同一个页面，方便用户能够直接选择需要的功能，如图2-8（b）所示。宫格式导航具有简约而不简陋的优点，导航清晰且明显，并能提升用户的使用体验。但是设计者在设计宫格的颜色时，切忌不分青红皂白地使用色彩，这可能会让用户混淆功能，还会对颜色产生疲倦感。

（2）列表式导航设计和组合导航设计

列表式导航是APP导航设计中必不可少的一个信息承载模式。列表式导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常不会出现在APP首页，如图2-9（a）所示。列表式导航结构清晰、易于理解、冷静高效，能够帮助用户快速定位并找到对应的页面，并且列表项目可以通过间距、标题和字符等进行分组。

当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合式导航，如图2-9（b）所示。组合式导航设计用图表的形式展现快捷入口，也可以将它理解为一种图形化的文字链。这种导航设计方式灵活，对于用户而言，能够满足用户对APP功能界面设计的创新要求，就APP架构页面来说，组合式导航设计能快速适应架构的调整。

辅助动画，视觉营销的利器

辅助动画是APP界面必不可少的元素，适当地增加辅助性动画可以给用户明确的反馈提示，例如，加载页面动画、下载动画、发送成功动画、提示动画以及APP更新动画等，如图2-10所示是京东金融APP的辅助性动画提示。

辅助动画给用户提供有意义的反馈，帮助用户直观了解操作的结果，减少用户在等待功能响应时引起的烦躁感，此外，辅助性动画的种类丰富，既可以是简单的文本框，也可以是精美有趣的动画，还可以是幽默的文字，能给用户留下深刻印象，提升用户在使用时的愉悦感，这一细节的设计也能成功吸引用户使用APP，并且逐步培养忠诚用户。

人性化设置，产品设计的基础守则

在现实生活中，每逢喜庆节日，商家都会张灯结彩，烘托出节日的气氛，为消费者营造出一种热闹的、红火的和温馨的消费环境，进而刺激消费者的购买欲望，提升商品的销售量。

而在线上的营销活动中，APP设计者也会在APP的Logo、按钮、图表和背景图片等地方加入节日主题元素，这样就会贴近现实的环境，消费者即使是在线上购物，也能感受到浓浓的节日气氛。因此，这就是一种很人性化的设计。如图2-11所示分别是京东商城APP春节界面和百度糯米APP春节界面。

要点提示

任何一款APP的每一个功能、界面颜色以及设计风格，甚至是一个小按钮，都是设计者经过深思熟虑的，APP设计者要在用户需求和公司需求之间找到平衡点，既能够为用户提供良好的用户体验，也能够保证公司的盈利。而关于节日元素，除了人性化体验的考虑，更重要的就是用户体验，APP设计者通过在APP界面中加入节日元素，制造出热闹的节日气氛，进而吸引到更多的消费者在线上进行消费，最终达到APP营销的目的。

远离老土的颜色

在APP界面设计中，色彩是很重要的一个设计元素。APP设计者如果能够灵活地进行色彩搭配，可以为APP的设计加分，提升用户的交互体验和视觉体验。那么，APP设计者该如何使用色彩打造出让用户惊艳的产品呢？

（1）APP界面设计规范

APP设计规范是指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的原则，使界面设计整洁和统一，减少界面元素的重复设计。APP色彩使用标准如图2-12所示。

（2）APP界面设计中色彩运用原理和对比原则

手机APP界面要给用户以简洁、整齐和条理的使用感，依靠的就是界面元素的排版、间距设计以及色彩的搭配。其色彩运用原理需要遵循以下原则。

●设计色调的统一：针对APP类型选择恰当色调，例如，杀毒类APP色彩搭配中，绿色代表安全，橙色代表危险预警，红色代表系统危险。总之，不同APP所代表的含义不同，设计者需要结合具体的APP来统一色调。

●标准界面的采用：当APP界面没有明确的规定时，APP设计需要做到跟操作系统保持统一，通过读取系统标准色表来进行选择。

●勿忽略色盲、色弱用户：进行APP色彩设计的时候，不要忽视了色盲、色弱群体。如果在APP中使用了特殊颜色表示重点或者特殊功能，设计者也应该使用特殊指示符、着重号以及图标等进行说明。

●颜色方案的测试：颜色方案的测试是APP设计搭配中的重要环节。因为每部手机的显示器和分辨率不同，APP界面色彩的表现在不同的手机中都不一样，所以，APP设计者应该经过严格测试，通过不同的机型去进行颜色测试。

●遵循对比原则：色彩对比原则很简单，就是浅色背景上使用深色文字，深色背景上使用浅色文字。例如，蓝色文字配以白色背景容易识别，在红色背景下则不易分辨，原因是红色和蓝色没有足够反差，但蓝色和白色反差很大。除非是特殊情况，APP界面中杜绝使用对比强烈，让人产生憎恶感的颜色。

●色彩类别的控制：在APP界面上尽量少使用类别不同的颜色，以免让用户眼花缭乱，反而让整个界面出现混杂感，界面需要保持干净、简洁和大方。

响应式网页设计

响应式网页设计是“响应式网页设计之父”Ethan Marcotte提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

响应式网站越来越受到欢迎，但是由于它没有固定的页面尺寸。在没有任何物理限制的情况下，让APP设计者感到无从下手。以下只分析如何运用响应式Web设计的各项基本原则来实现APP网页的布局。

（1）Web字体VS系统字体

Web字体能够让网页字体看起来很炫酷，但这些字体都需要先下载，字体越多，网页加载时间就越长，很容易影响用户体验。尽管系统字体加载速度快得多，但太过普通，不能吸引到用户的注意力。

（2）移动优先VS台式桌面优先

严格来说，移动优先和台式桌面优先的区别不大。而从移动端着手会带给APP设计者一些额外的限制，因此，建议APP设计者从两端同时入手。

（3）利用内容流营销

随着手机屏幕尺寸越来越大，内容所占的垂直空间也越来越多，内容会向下方延伸，产生内容流，为APP营销提供了一种新的营销方式。

（4）灵活地运用相对单位

APP设计者的设计对象可能是台式桌面，也可能是移动端屏幕，或者介于两者之间的屏幕类型。由于像素密度不同，设计者需要使用灵活可变，并且能够适应各种情况的单位，例如，百分比。在使用百分比时，宽度50%就表示宽度占屏幕（或者叫“视区”，是指所打开浏览器窗口的大小）的一半。