动静之美:Sketch移动UI与交互动效设计详解
上QQ阅读APP看书,第一时间看更新

1.1 移动UI的发展

1.1.1 第一阶段:移动UI设计的目的是保证软件的可用

图1-1

在2007年苹果公司推出iPhone之前,世界上的手机大部分都是键盘手机,当时智能手机的市场还是诺基亚的天下,手机键盘的第1排和第2排一般是确定键、返回键、五维导航键和电话的接听与挂断键,顶部是信号栏,菜单和退出等功能按钮位置固定在下方,如图1-1所示。大部分智能手机运行的系统为塞班S60,除此之外,市场占有率较高的智能手机系统还有微软的Windows Mobile以及黑莓的BlackBerry OS。

当时手机上功能按钮的位置基本上是固定的,特别是同一厂商的不同手机之间的操作几乎相同。正因为如此,我把手机从诺基亚换成摩托罗拉的时候适应了很长的一段时间,因为两者的确定和退出按钮的顺序是完全相反的。

在这一阶段我们得出移动UI设计的一条很重要的启发:移动UI设计需要满足的最低要求必须是可用的。试想一下,如果当时手机厂商把功能菜单设计到屏幕的顶端,用户便无法通过按键选择,从而导致这个手机不可用。

1.1.2 第二阶段:从可用到易用

2007年,苹果公司发布了iPhone,如图1-2所示,号称重新定义了手机。事实上也确实如此,整个手机的正面只有一个按键(Home键),其余便是一整块屏幕。在苹果公司召开的发布会上,人们第一次看到iPhone时,整场惊叹声和掌声不断,这款完全使用触控操作,拥有流畅动效的手机彻底颠覆了人们对手机的认识。

图1-2

2008年,世界上运行的第一款谷歌研发的安卓(Android)系统手机HTC Dream(G1)发布,如图1-3所示。当时的安卓系统还非常不完善,甚至连虚拟键盘都不支持。但到2009年,全球首款搭载安卓1.6操作系统的手机HTC Hero(G3)发布,如图1-4所示。安卓开始有了同iPhone OS(在2010年更名为iOS)竞争的能力,并且HTC Hero手机成为2009年度最受欢迎的手机。

图1-3

图1-4

在该阶段的UI设计,随着手机性能和屏幕分辨率的不断提升,界面的精细程度和动效得到了前所未有的提升。相比2007年之前运行Windows Mobile系统的触屏手机,iOS和安卓设备的手机均使用了电容屏,即使没有触控笔也能精确点击,该阶段的UI均是为触控而生,UI界面设计结合对拇指热区的研究,以及使用眼动仪等设备来科学准确地定位用户的行为习惯,无论图标还是界面都是高度的拟物设计,通过对用户生活中物体的拟真来尽可能降低新用户的学习成本。

这一阶段我们得出移动UI设计的第2个重要启发:移动UI设计在满足可用的前提下,应尽可能地做到易用易用包括极低的学习成本,极少的思索过程以及可预见性的操作。极低的学习成本要求新用户在面对一个新事物时,能尽快上手,不需要或者尽量少地给出新手指导;极少的思索过程要求用户在使用一款软件的时候能用他已经掌握的知识知道如何操作,这一过程是很自然的、不需要花时间去思考的;而可预见性的操作是指用户在点击屏幕后出现的界面是符合他心理预期的。

这一阶段iOS和安卓的影响力越来越大,几乎垄断了整个触屏智能手机系统。

1.1.3 第三阶段:内容为王的设计追求减法和好用

到2010年,PC操作系统的霸主微软推出了移动操作系统Windows Phone,如图1-5所示。全球第一款搭载Windows Phone操作系统的手机诺基亚Lumia800于2011年上市,该系统采用全新的UI——Metro UI。该界面最大的特点是由动态磁贴(Live Tile)构成,与iOS和安卓以应用为主要呈现对象不同,Metro界面强调的是信息的本身。

图1-5

Windows Phone(WP)的推出是UI设计史上一个重要的里程碑,虽然Windows Phone的市场份额非常少,但是Metro界面引发人们对“内容为王”的思考。2013年苹果公司发布iOS7,如图1-6所示,将iOS的风格全面带入扁平化时代。而安卓则早在2011年发布的Android 4.0就有扁平设计的趋势,更是在2014年推出全新的设计语言Material Design,如图1-7所示,将移动UI的设计推向了一个新的时代。

图1-6

图1-7

在该阶段,移动UI的设计开始朝着“内容为王”的方向发展,以iOS为例,从2007年发布到2013年推出的iOS7中间已经有近7年的时间,大部分用户已经完全熟悉iOS的基本操作,此时便可以不再需要拟物化的界面来降低用户的学习成本,反而建议通过更少的视觉干扰来让用户将注意力集中在内容本身。在该阶段,手机屏幕越来越大,一些大屏手机用户已经不能单手操作,这时候移动UI设计更是同手势的运用相结合,如iOS系统的左滑出现删除界面,下滑出现搜索界面等。

这一阶段的移动UI设计更加理性和成熟,UI界面视觉元素占据界面比重越来越低,但是用户能在更少的时间获得更多的内容,并拥有了更加沉浸式的体验。由此我们得出的第3个启发:移动UI的设计在满足可用的前提下,做到了易用的同时应追求好用

通过对移动UI的发展的大致介绍,可以看到移动UI设计追求的过程是一个从可用到易用到好用的过程,并且也注意到硬件的发展和局限同样对移动UI的设计有着至关重要的影响。

判断一套UI是否优秀,视觉方面只是高层次的部分。我们首先应关注的是这套设计是否可行,毕竟设计界面的出发点,是为了解决用户的某个问题。

大家在今后对某UI进行分析的时候,也可以从这3个层次进行思考和分析,也同样建议大家利用业余时间多关注一下移动设备硬件的发展,了解我们设计的界面运行在何种设备上,对提升我们设计水平也有着很大的积极作用。