随时随地手机APP营销实战
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

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

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

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

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

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

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

图2-7 APP中的扁平化设计和应用

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

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

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

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

(1)抽屉式导航设计和宫格式导航设计

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

图2-8 抽屉式导航设计和宫格式导航设计

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

(2)列表式导航设计和组合导航设计

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

图2-9 列表式导航设计和组合式导航设计

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

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

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

图2-10 文本框类辅助动画和图标类辅助动画

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

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

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

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

图2-11 节日人性化的设置

要点提示

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

远离老土的颜色

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

(1)APP界面设计规范

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

图2-12 APP色彩使用标准

(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%就表示宽度占屏幕(或者叫“视区”,是指所打开浏览器窗口的大小)的一半。