iOS APP体验设计:从程序猿和设计湿说起

iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以“借鉴”的案例。 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外,没有找到更好的设计哲学和方法论。

事实上,即便认真地研读了HIG和Zen of Palm,甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因,得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理 构成。我这里讲的设计湿不是美工!这是前提。因为美工只关心好不好看,他们几乎不关心(或者不懂)产品的易用性。

如何鉴别程序员和设计师呢? 你无法用会不会写代码来区分他们(毕竟很多设计师是会写编程的,例如彩程设计的设计师们,反之亦然),但是你却可以用通过他们平时思考方式来区分他们。

程序员: “哇!这个功能好!我们能不能在我们的APP中加上呀?
”  这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹(或者心里的感叹)。

设计师答:“我们凭什么要加这个功能呢?

程序员更倾向于关注功能本身
,希望把所有好的东西都加到自己的作品中。例
如,好的设计模式,高效的算法,看似绚丽的特效。一般程序员的作品有两类,第一类是功能比北京的车子还要多,你需要一本牛津字典一样厚的说明书才能搞懂如
何使用。另一类有十分绚丽的特效,界面飞来飞去,一走神就以为自己在耍杂技了。

设计师更倾向于关注产品整体
,他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣: 一张好的照片有三个要素  1.有一个鲜明的主题。 2.  画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题,所有有主题不相关的重点通通砍掉。

不幸的是,很多iOS的开发者是从程序猿跳出来做的。 泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了!!!有木有!!!有木有!!!” , 于是他们做出来的东西可以用下图简要地说明:

没错!问题不在于功能是不是足够的多,而是体验是否足够的好,是否能解决问题。而尤其在做iOS的APP设计的时候,由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为,主要区别有以下三点:

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题,我们可以从传统的电脑使用说起。 我们控制电脑通常是通过鼠标, 手用鼠标控制屏幕的指针, 移动到某个位置,
点击、双击、拖动等完成操作。 我们看到的是屏幕,操作的是鼠标。我们的视觉焦点是屏幕,操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。 因此,我们想打开一张图,只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一,当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计,例如:拿出你的iPhone,把手放在iPhone上,你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域,其中绿色区域是安全区域,代表我们心理上认为一定可以准确地点到的区域;而黄色区域代表我们心理上会有点忐忑,不能确定是否能点中的区域。例如某拍照软件的设计:

没错,问题不言而喻。 从UI的设计上来看,如果是个网页的话,视觉的确没什么问题(当然,删除按钮放在修改的旁边本来就是愚蠢的做法,这一点就先不说了)。但是由于视觉焦点和操作焦点同一的原因,点击修改就变得十分困难与紧张,何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转,我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转,点了链接后就进入了一个全新的空间。空间感知为网状的,没有头没有尾,在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中,进入APP通常都是一个固定的点,每个操作就带入另一个空间,如果失去了空间感知,就像失去了地图,用户会很容易有迷失的感觉。

而由于屏幕的大小等因素,APP不能直接告诉用户空间是什么样的,但是可以通过各种手段来给用户以暗示。例如:

Camera+
中,两个主要的场景,一个是拍照,一个是照片管理。两者之间空间是上下的关系,当用户在拍照场景下点击相册时,界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示:

更复杂一些的空间暗示,如Reeder iPhone
版。空间中的每个位置十分清晰,并且用动画的方式流畅地向用户暗示这种空间感。不仅如此,Reeder iPhone版的加星去星的空间感知不是上下左右,而是前后的关系。请自行购买后体验。

除此之外,Reeder iPad
版本和Our Choice
的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例(视频)。Our Choice在选章节的场景进入章节内文时,选章节的场景会缩小,通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

3. 体位化设计

以iPad为例子,通常我们使用iPad的时候有两种体位,第一种是把iPad放在桌面上进行操作,这种体位使用APP,无论按钮在哪里,点击都需要用一只手完成,两个步骤间的按钮距离远近也不会成为负担。 而当手握着iPad的时,这种特殊体位,问题就出现了。

(如果你有手机,请现在拿在你的手上)倘若你只希望用一只手完成操作,你会发现,你用大拇指点击屏幕中所有点,却只有绿色区域是很易点击的。如下图所示,iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计,是因为设计没有考虑到操作姿势,以至于左边一排不常用的功能占据了最重要的黄金区域,而常操作的区域却远离易操作的区
域。 操作起来就比吃掉一只死苍蝇还难受。 而后者,好的体位化设计,所有的常用功能,一只手,不需要太多移动就可以全部完成:
上篇文章,下篇文章,标记未读,标记加星。

当然,如果你是我们《牛壹周》的忠实读者,那你一定记得我们的风火轮(详见牛壹周1.2之无敌风火轮
)和一阳指(牛壹周1.1更新手记
)?
没错,我们坚决地去掉了一阳指,因为这是一个漂亮却难用的设计(至少不是一个好的体位化设计)。
我们在架构上保留了风火轮(当然,只是在程序中保留,但并未启用),因为这是一个很好的体位化设计案例。
例如,在阅读杂志的时候,我们常要翻下一篇文章,传统的操作是先进目录,然后再找到要看的文章,再跳转。
而使用风火轮,如视频所示,你的手完全不用离开屏幕,无论你的手有多大多少,无论你是左撇子还是右撇子。

在即将发布的iOS5中,iPad的键盘设计也很好地体现了所谓体位化设计的精髓:

时间: 2024-12-31 22:55:35

iOS APP体验设计:从程序猿和设计湿说起的相关文章

移动用户体验设计:iOS APP体验设计

文章描述:iOS APP体验设计. iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以"借鉴"的案例. 目前除了苹果的<Human Interface Guidelines>和前Palm的<Zen of Palm>外,没有找到更好的设计哲学和方法论. 事实上,即便认真地研读了HIG和Zen of Palm,甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP.其原因,我得从程序猿和设计湿说起.

iOS App体验设计

编者按:本文来自成都彩程设计的CTO肖轶翔「@yxshawn」,关注「iOS,http://www.aliyun.com/zixun/aggregation/11432.html">人机交互,UED,音乐人,多媒体,哲学,科幻,电子,迷幻」.他在文中对iOS 应用和普通网站设计进行了对比,并提出了自己的设计理念. iOS APP体验设计不像互联网的体验设计那样,有一堆的方法论和可以"借鉴"的案例. 目前除了苹果的<Human Interface Guideline

程序猿与设计狮之间的那些事儿

  很久没聊过设计师职场了,今天说回那个千古难题:工程师与设计师的1像素之争.设计师认为一像素至关重要,非改不可,工程师认为小题大做,精力没花在刀刃上,有的设计师也容易因此沮丧,如果你是其中之一,推荐来看会代码的设计师如何解决这件事. @JingDesign :无意挑起所谓的职位之间的矛盾,直到今天看到这样一篇文章的时候,是的,这是一篇关于程序猿和设计狮之间的文章,起源是这样的,一位网友在某社区上提了一个问题: 开发人员拒绝按照 UI 标注还原设计,如何让他理解精确还原的重要性,从而去修改代码?

杀程序猿祭天?看看这些简直是神经病的APP的更新说明

好像暴风影音APP,最近又火了. 倒不是因为他们又推出了什么裸眼3D看岛国片之类出格的活动,而是因为这样一句APP更新说明. 程序猿招你惹你了,暴风我警告你,将来如果报道出现了偏差,你可是要负责任的. 当然,喜欢给自己加戏的APP更新说明,暴风不是第一个. 比如下面这位 呵呵,暴风这你也能忍?我要是你,我这一巴掌就糊上去了 更危险的还在后面-- 这款APP你很有前途,我爱某人决定亲自会会你. 喂我发现了一个BUG,快点给我解冫 好吧-- 其实,APP更新说明 也不是一直都这么杀气腾腾的 比如--

程序猿日记S01E03

"Wake me up when it's done." 礼物文化 有一次给组员分享程序猿该如何去尽力帮助到其他人,如何赢得声誉.在日常开发过程中,我们在实现业务需求的同时,抽象出可复用的模块,提供API供业务层调用.不同的程序猿会设计出不一样的API,好的设计往往是遵循一定原则的.网上比较经典的是Google API Design指南,可以作为一个模板来Review我们日常的API设计.以前看过一本书,<以用户为中心的软件设计>,一个很重要的思想就是如何让设计的软件更易于

程序猿媳妇儿注意事项

作者: Arale  来源: 简书  发布时间: 2016-08-11 15:42  阅读: 121974 次  推荐: 705   原文链接   [收藏]   十一年前我和程序猿第一次见面,还是大一军训期间.我甚至不确定程序猿是否记得那是第一次见面.当时不小心装伪文艺参加了吉他社,想借一本吉他入门书,然后同在吉他社热心的海哥说他一同学有,就带着我去拿书了.于是我们第一次"见面"了,我只看见一个对着电脑,佝偻着背的背影......严重怀疑程序猿根本没抬头看一眼那个已经晒得像反转熊猫一样

程序猿的新博客开通啦!

以前在新浪博客发表代码,由于新浪博客对代码的发表不太支持,所以现在搬家到CSDN,感觉这才是为 程序猿专门设计的博客,很喜欢这里的代码发表格式!赞一个! 原博客地址是:  http://blog.sina.com.cn/iecoder

写给程序猿们的交互设计

编者按:看到此文时恍惚回到自己学习网页的时候,那时候只知有编程,不知有设计.各个论坛大部分时候讨论的也是如何用 Frame 实现页面的分区,如何做出圆角,以及写一大段 javascript 代码或者做个 flash 只为让页面看起来更眩一点.后来 css1.0, 2.0 陆续出现,html 4.0 4.1 以及如今的 html 5 也逐渐淘汰掉了表现样式的标签.视觉传达思想开始陆续进入程序猿与产品经理的视线,从网页到现在的 APP,经历过野蛮生长阶段后,只有那些功能与视觉传达同样优秀的产品才能笑

简析 IOS 程序图标的设计

程序图标主要作用是为了使该程序更加具象及更容易理解,除了上述的作用外,有更好http://www.aliyun.com/zixun/aggregation/8936.html">视觉效果的图标可以提高产品的整体体验和品牌,可引起用户的关注和下载,激发起用户点击的欲望. 表现形态 在有限的空间里表达出相对应的信息,在IOS 程序图标设计中,直观是第一个解决的问题,不应该出现大多繁琐的修饰,当然还要有很好的视觉表现力,使用户可以更容易理解此应用的实际作用,更轻松地辨识此应用.下面来说说几种表现