以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://pcuseman.com/?p=202

iPhone App的特点及基本设计方法

作者:江洋  |   发布: (编辑)kent.zhu   |   时间:2010-12-03 15:19:14 文字大小:- +

iPhone App的特点


iPhone有自己的特点和气质,因此他的App不同于其他键盘手机甚至Android这种触屏手机。

首先iPhone只有一个物理按键Home,而这个按钮主要是在系统级操作上起到一些作用,在一个应用中,绝大多数情况都是退出功能。在480 x 320这个对手机而言很大的屏幕上要包括以下3个模块,才能对一个App进行操作。

1、虚拟键盘

iPhone虽然与Android同为触屏,但没有物理键盘(而Android有可能有物理键盘),所有的输入操作都需要屏幕中的虚拟键盘来实现,同时需要考虑虚拟键盘的遮挡问题。

2、目录导航

没有物理按键做为目录菜单的呼出功能,完全不同于Symbian和Android系统,包括导航也需要屏幕中的虚拟按钮来实现。

3、功能操作

需要把所有的功能集成在App中,比如我们可以用Tab bar来做功能的分类,工具栏来做具体视图的功能操作集合。

我们再来看看用户对iPhone的使用习惯

显然支持单手操作并不是iPhone应用的特性,当然也有一些游戏需要双手进行(沉浸式应用),但因为iPhone有一块非常灵敏支持手指多点触控的电容屏,所以手指直接在屏幕上的操作更加直观和更具操控感,不需要任何中间设备(按键或是鼠标)来控制。

iphone 握机姿态

1、自上而下的操作:

用户多数情况下会如上图的姿态,一手握机,大拇指做为主要操作和点击手指,我们可以看到不管是iPhone系统应用还是很多其他的优秀应用,大多使用很多的列表,因为拇指在滑动列表时会非常顺畅和方便,而且操作速度非常快,所以很长的列表不会成为iPhone应用的障碍,这与其他手机平台上的特性不同,更何况在表格的情况下,单击顶部的状态栏可以快速回到顶部。

2、减少输入

这与《移动设备交互设计》书中的一些观点一致,即对于手持设备我们要尽量的减少用户输入,特别对于iPhone这种虚拟键盘而言,即便电容屏再灵敏,对于每次都准确的触动面积很小的虚拟键盘也并不是一件轻松的事情,我们要尽量使用选择器,或是输入提示suggestion来减少成本。

3、足够大的按钮面积

对于iPhone这块电容屏来讲,虽然很灵敏,但接受的感触面积并不小,且用户又是直接用手指操作,所以我们要对应用中的所有按钮要适合指尖来操作,跟据官方给出的设计指导,44*44pix是一个较理想的面积。

4、多点触控手势

相对于设备的软硬件来说,手指总是保持可用,它是人体的一部分,可以灵活的做各种动作,而且直接触控屏幕非常直观,且用户也非常愿意使用这些看上去很酷手势动作,比如可以对图片用两个手指拉开来放大,合并来缩小,直接拖动来调换顺序,摇晃来进行刷新等。当然我们要考虑这些手势在不同应用的不同使用场景,不要滥用。

总之,iPhone应用的是线性的,连贯的,直观的依赖滑动操作,手指点击,以及各种手势给人很酷的感觉。

iPhone App的基本设计方法


1、iPhone应用的分类

1) 高效型

这类应用可以帮助用户快速完成一个任务,注重内容的组织逻辑功能和信息架构的展现,以方便用户快速高效的使用,最终完成任务。此类应用一般包含大量的列表及每个列表中的任务功能。最典型的就是系统自带的“Mail”应用,这是一个非常典型的高效型应用。

高效型应用mail

此类应用给用户的感觉是层层进入,内容逐步具体化,直到可以完成用户的任务。

另外一个非系统应用且典型的就是QQ,可以看一下是不是也遵循这个特点。

2)实用工具型应用

此类应用一般交互操作非常少,也没有很深的层次结构,往往都是直接了当的展示信息,一般会在“背面”(通常会有一个翻转的效果)展示设置功能。最常见的就是“天气”和“股票”两个系统自带的应用。

3)浸入式应用

大多指游戏类应用,但也有一些实用工具,比如电子罗盘,所谓浸入式应用一般是全屏模式,专注一个任务或是娱乐的深入体验,没有过多的文字,而将用户的注意力放在如何使用它。

2、设计iPhone应用

1)iPhone应用的基本结构

状态栏:这是ios系统的一部分,除了浸入式应用外,其他应用一般都会保留这个bar。

导航栏:这里包括当前的title,当前的主要操作的控件和返回的导航功能

工具栏:对当前内容区可执行的功能动作。

标签栏:可以理解为全局导航,方便快速切换功能或是导航。工具栏和标签栏在一个视图中只能存在一个。

iPhone App结构
2)移植你的应用

大多数情况下我们都是把web端的应用移植到手机上,而在web端的应用,如果我们列出一个功能结构图,可能会包含100项以上的功能点,你可以做如下工作:

①考虑这个web端的产品,核心功能是什么,任何一个产品都会有核心功能,以及附加功能,比如QQ,核心功能就是IM,即时通信,可能截屏是一个附加功能,尽管用的人非常多。确定核心功能后,以及围绕核心功能尽可能少的扩展功能和逻辑。
②对确认的功能结构考虑在iPhone上的信息架构模型,上文说过,iPhone应用是线性的连贯操作,一层一层进入直到完成最后的任务,所以你要按这个思路去整理信息架构,一般来说,操作的深度不要超过3层,如果超过3层就要对产品形态进行扁平化处理,即由深度改为广度,因为随着深度的增加,每一级别都会有不同的功能,甚至有承载上一级的功能或逻辑,深度越多,这些功能就会越复杂,而在手机如此小的空间上就很难进行合理组织。

可以延伸阅读kentzhu同学更多的限制,更简单的设计


③合理利用iPhone应用的结构及标准控件。
标签栏,可以理解为web应用中的全局导航或是主要子功能的切换,这个bar可以贯穿于主要视图的底部,方便用户快速跳转,比如下图这个标签栏。

标签栏

导航栏,可以理解为web应用中的局部导航,子导航或是面包屑,显示当前位置,同时还承载了1个或两个主要功能操作。可以方便用户返回,或是对当前视图进行1-2个最重要的操作。如下面这个导航栏。

导航栏

工具栏,可以理解为web某个具体页面中的一些主要操作功能,比如上传,搜索等。如下面这个工具栏。

工具栏

这是ios系统应用mail中,具体邮件打开后的工具栏,包括了对当前邮件的几个主要操作。对于你的应用,你也可以把一些操作放到主视图区中以按钮的形式展现,不放在底部的工具栏。但我们说,iPhone用户更习惯于iPhone一些“标准”操作,习惯iPhone的标准逻辑,所以把主要的操作以底部工具栏的方式展现似乎更好一些。

使用引喻的标准控件

控件
我们看到滑动效果的开关,突起效果的分段按钮,转盘选择器等,代替了传统web中死板无生气的标准控件。

④调用系统提供的功能接口
例如iPhone提供的地理位置接口,可以为你的应用提供不同于web端的特殊功能,设计出更具有特色的产品,更能满足移动用户的需求。

最后,我想说iPhone应用是简洁的,包括设计上的简洁和功能上的简洁,不应该有太多的功能分支,不管你是否能组织好这些功能,过多的功能总会把用户搞晕。iPhone应用是有特殊气质的,你可以把他设计的完全符合iPhone使用的特点,甚至带有一点炫酷,而不用考虑低端用户,因为使用iPhone并且可以装App的用户,他的使用经验不会太差。

更多
打印  |  相关话题:iPhone 移动设备的交互和设计   |  类别:设计思想  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买