1.2 APP设计概述

自从智能手机普及以来,手机成为互联网的新宠,并加快了移动互联网的发展脚步。面对众多数量的手机APP软件,如何脱颖而出,首先需要做好APP的界面设计。手机APP界面设计一定要考虑到界面的视觉设计和界面设计的用户体验。下面我们就来详细讲解一下。

1.2.1 设计界面元素要统一

界面设计是为了满足软件的专业、标准的需求而产生的,是对软件的使用界面进行美化优化及规范化的过程。具体包括软件启动界面设计、软件框架设计、按钮设计、面板设计、菜单设计、标签设计、图标设计,滚动条及状态栏设计,如图1-21所示。

图1-21

不同手机界面的总体色彩和风格应该接近或类似系统界面的总体色调,这样更符合人的心理视觉,而风格杂乱的界面可能会使用户眼花缭乱,不适应。在设计操作流程时,也要遵循系统的规范性,尽量使所有的操作都统一化,这样可以更有利于用户掌握,从而更快地学会使用软件。

除了考虑界面的统一性之外,还应该注重软件界面的个性化。手机界面的统一性是基于手机系统视觉效果而言,个性化则是基于软件本身的特征和用途而言。界面效果的个性化包括如下几个方面。

实用性

为手机界面制作图标时,应该尽可能考虑到屏幕的局限性,选择具有典型行业特征且线条简单的图形,确保清晰性和有效性。界面构架的功能操作区、导航控制区等都应该统一规范,不同功能模块的相同操作区域的元素风格也要一致,让用户能够迅速掌握不同模块的操作。

界面构架

手机界面中的导航区、功能操作区和内容已显示区域都应该统一范围,且风格色调应该尽量接近。不同功能模块的相同操作区域的元素风格也应该协调统一,使整个界面统一在一个整体之中,这样有利于用户快速辨别不同的功能,并轻松学会操作使用。

界面色彩的个性化

色彩会影响一个人的情绪,不同的色彩会让人产生不同的心理效应,反之不同的心理状态所能接受的色彩也是不同的,不断变化的事物才能引起人的注意。自然欣赏、社会活动方面,色彩在客观上是对人们的一种刺激和象征;在主观上又是一种反应与行为。界面设计的色彩个性化,目的就是用色彩的变换来协调用户的心理,让用户用软件产品时保持一种新鲜感,它是通过用户根据自己的需要来改变默认的系统设置,选择一种自己满意的个性化设置,达到产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术,在手机的软件界面设计过程中,应用这一设置可以更大地提升软件的魅力,满足用户的多方面需要,如图1-22所示。

图1-22

界面的分类

根据界面的不同特点,可以将界面分为以下几类。

软件界面:从狭义上来说,软件界面就是指软件中,面向用户而专门设计的用于操作使用,以及反馈信息的指令部分。优秀的软件界面设计,具有简洁美观、突出重点等特点;从广义上来说,软件界面就是某样事物面向外界而展示它特点及功能的组成部分的界面,如图1-23所示。

图1-23

手机界面:手机现已成为人们生活的必需品,几乎人手一部。美观的手机界面也成了人们装饰自己手机的一部分,如图1-24所示。

图1-24

游戏界面:游戏分为不同类型,所以界面的风格也不一样。一般三维效果应用较为普遍,颜色新颖、版式新奇,主题明确,如图1-25所示。

图1-25

播放器界面:播放器界面一般都很简洁、精美。界面中的元素、按钮都会风格统一。看起来具有整体性,美观时尚,如图1-26所示。

图1-26

网站界面:网站界面设计承载着图像、视频、动画等多种新媒体,网页的内容更是丰富多彩。网站界面设计最重要的是注重用户的体验效果,使用户能够方便快捷地搜索到需要的信息,如图1-27所示。

图1-27

1.2.2 以用户为中心的设计

通俗地说,针对使用者的需求和感受来估量,并且围绕使用者为中心进行产品的设计,并不是让使用者去适应产品。所以说无论产品的使用流程、产品的信息架构、人机交互方式等,都需要考虑使用者的使用习惯、视觉上的感受和理想的交互方式等。

一个好的并且以使用者为中心的产品设计,设计的产品应具有很高的有效性和使用者满意度,延展开来,还包括对使用者来说产品的易学程度、对使用者的吸引程度,以及在体验产品时的整体感受等。

(1)一个产品的来源可能有很多种情况,用户需求、企业利益、市场需求,也可能是技术发展所驱动。从本质上来说,这些不同的来源并不矛盾。一个好的产品,首先是用户需求和企业利益(或市场需求)的结合,其次则是低开发成本的需求,而这两者都可能引发对技术发展的需求。

①越是在产品的早期设计阶段,能充分地了解目标用户群的需求,结合市场需求,就能越大程度上降低产品的后期维护甚至回炉返工的成本。如果在产品中给用户传达“我们很关注他们”这样的感受,用户对产品的接受程度就会上升,同时能更大程度上容忍产品的缺陷,这种感受绝不仅仅局限于产品的某个外包装,或者某些界面载体,而是贯穿于产品的整体设计理念,这需要我们从早期的设计中就以用户为中心。

②基于用户需求的设计,往往能对设计“未来产品”很有帮助,好的体验应该来自用户需求,同时超越用户需求。这同时也有利于我们对于系列产品的整体规划。

(2)随着用户有着越来越多的同类产品可以选择,用户会更注重他们使用这些产品的过程中所需要的时间成本、学习成本和情绪感受。

①时间成本,简而言之就是用户操作某个产品时需要花费的时间,没有一个用户会愿意将他们的时间花费在一个对自己而言仅为实现功能的产品上,我们的产品应该传达出积极的情绪感受,让用户快速地完成他们所需要的功能,这是最基本的用户价值。

②学习成本,主要针对新手用户而言,这点对于网络产品来说尤其关键。同类产品很多,同时容易获得,那么对于新手用户而言,他们还不了解不同产品之间的细节价值,影响他们选择某个产品的一个关键点就在于哪个产品能让他们简单地上手。有数据表明,如果新手用户第一次使用花费在学习和摸索上的时间和精力很多,甚至第一次使用没有成功,他们放弃这个产品的几率是很高的,即使有时这意味着他们同时需要放弃这个产品背后的物质利益,用户也毫不在乎。

③情绪感受,一般来说,这点是建立在前面两点的基础上,但在现实中也存在这样一种情况:一个产品给用户带来极为美妙的情绪感受,从而让他们愿意花费时间去学习这个产品,甚至在某些特殊的产品中,用户对情绪感受的关注高于一切。例如在某些产品中,用户对产品的安全性感受要求很高,此时这个产品可能需要增加用户操作的步骤和时间,来给用户带来“该产品很安全很谨慎”的感受,这时减少用户的操作时间,让用户快速地完成操作,反而会让用户感觉不可靠。

1.2.3 手机界面设计常用的5种布局

在设计手机界面时,合理的布局可以让信息看起来层次分明,用户可以很容易地找到自己想要的信息,产品的交流率和信息传递的效率也都会大大提升。下面介绍了手机界面设计中常用的5种布局。

(1)竖排列表布局:手机屏幕一般列表是竖屏显示的,文字是横屏显示的,所以竖排列表可以包含比较多的信息。列表长度没有限制,在视觉效果上显得整齐美观,用户接受度也很高,所以是最常用的布局之一。竖排列布局一般用于并列元素的展示,包括目录、分类、内容等,如图1-28所示。

图1-28

(2)横排列表布局:这是并列元素横向显示的一种布局,一般常见的工具栏都采用这种布局。横排列表中可以显示的数量比较少,是由于受手机屏幕宽度的限制,在原色数量较少的情况下比较适合这种布局。在界面需要展示更多的内容时,竖排列表是不二之选,如图1-29所示。

图1-29

(3)九宫格布局:九宫格布局是非常经典的设计,展示形式简单,一眼就能看懂,用户接受程度很广范。虽然它有时候让人有种设计陈旧的感觉,不过它改变原来的一些体式在目前来说还是比较流行的,如图1-30所示。

图1-30

(4)弹出框布局:弹出框在版面设计上是很常见的。在需要它的时候才弹出,其他时间,弹出框会把内容隐藏,用来节省屏幕空间。弹出框可以在原有的界面上进行操作,不需要弹出界面,体验起来还是比较方便的。在安卓系统上,弹出框的使用很普遍,比如菜单、单选框、多选框等,在苹果手机系统上使用得相对少一些。

(5)标签布局:在搜索界面和分类界面时,会采用标签的方式来展现,增加了应用的趣味性。

1.2.4 提升关注内容

高品质APP的优势显而易见,但使APP品质提高并不是容易的事。一个更好的APP将进入良性循环,更高品质的APP将转换成更高的用户评价,也就是更多好评、更多下载、更高忠诚度和更长使用时间。高品质APP更有可能获得有口皆碑的正向效应。

衡量一个APP是否成功的大多数方法,取决于使用者的行为。例如使用者相关的关注量,其中包括下载数、每日活跃安装数,这些都突显出了使用者的重要性。

(1)倾听用户

首先倾听用户,可以从阅读和回复使用者在购买APP的网络中的评论做起;还有一个倾听方法,就是进行产品公开测试或可信任测试,利用这一点,可以将下一个准备发布的版本提交到购买网站前,先提供给部分早期试用者。

(2)提升稳定性和清除缺陷

我们都知道,APP的总体稳定性对于评级及使用者满意度有很大的影响,也有非常多的工具和技术可以在不同设备和用户场景中对APP进行测试和优化。其中一项值得注意但尚未被善用的工具——界面/APP执行猴(猴子),可以用来捕获稳定性方面的问题。同时,在大多数安卓设置中有内建的谷歌错误报告机制,用户可以借此向开发者报告APP的崩溃。

(3)改进UI响应

让使用者流失的最重要的一点,就是给他们提供缓慢、迟钝的APP设计。研究表明,速度是非常重要的,对于任何界面,无论是桌面、浏览器或手机都是一样。而事实上,速度的重要性在手机上被进一步放大,因为使用者通常是在途中或者匆忙之间获取信息。

(4)注重细节

一个需要特别关注的细节是APP图标的质量和一致性,必须确保APP的图标(特别是启动图标)足够清楚明了,在所有分辨率下都能够保持像素级的完美,尽可能遵循图标准则。

1.2.5 启动和退出

启动引导页面和退出页面的设计对APP来说非常重要,简洁的3~5个页面传递给用户APP更新的重要功能、引导用户体验、重大活动推出等。而退出页面的设计,在简洁或者可爱的效果之下,会让使用者流连忘返,对APP的使用更加有兴趣了,如图1-31所示。

图1-31