《触动人心--设计优秀的iPhone应用》一

1、能触动人心吗?

a.关注“五要素”--人物(应用的受众)、事件(受众会做的事情)、时间(环境如何)、地点(环境如何)、起因(受众的动机和目的)。发掘你应用触动人心的先决条件,你的应用与众不同的为用户解决了什么问题?计划好用例和应用场景--一个简单的故事,以用户为主人公,在特定的环境完成特定的任务。将注意力集中在五要素特别是起因上,因为起因不仅需要考虑用户为什么需要这些功能或内容,还需要考虑为什么用户需要在手持设备上进行操作。

b.关注你应用的功能该如何才能适用于离开办公桌后的情境。要考虑三种移动用户的心态:(1)想完成微任务(移动设备及其适合断断续续的活动--微任务)。满足此心态的这类应用(如快速记录想法的便签)简单提供较少功能却能让人更快更轻松的完成任务,为短暂而频繁的使用而优化,能利用用户大多数闲暇时间,且能适应工作随时被打断的情况。在设计此类应用时要根据短暂的活动即微任务来设计最终功能。(2)想了解周遭所发生的事件(如人生三急时找个厕所)。手机包含各类传感器,如摄像头、音频和位置服务。确定你的受众,利用好用户个人当前所处的环境,适时地为他们个人的任务和信息提供恰好的帮助。(3)想打发无聊时间。用以打发无聊的应用,它们共同的主线都是让人探索(无论是用户自己输入的内容、历史记录,还是最新的新闻、社区交流或推荐的内容)。收集个人信息的应用(如减肥日记和待办事宜),本质上都是记录用户过去已完成的或将来要完成的事项。完成收集并跟踪信息的微任务,让用户能够整理好收集到的数据,来查看他们目前的进度,并确定努力的方向。

c.确定好与类似应用的区别所在。“技能”和“魅力”让应用与众不同。如何独树一帜?找到切入点。(前提是你很清楚你的应用要做些什么,你也很了解别人会如何边做其他事情边用你的应用。)有独特的激励机制,紧密的面向特定受众,有别人无法提供的利基内容,有全新方式来展示信息,有简单有效的技术,有大量的社区用户在应用中互动,能同样解决问题却更便宜,应用会增强你在网站或现实世界中的所见所作之事,或是无法抗拒的魅力,个性和长相都是魅力之一。(应用的表象过分花哨可能在诱导用户的过程中,让用户分心造成用户的不满,且会掩盖应用真正要传递的信息和功能。)

d.不断更新内容或打造社区,这两种方式都能让你的应用在用户手机上待得更久。对于管理个人事务的工具(如日历、记账工具等),只要用户什么时候想看或操作就会回来打开这些工具,或社交类(如微信和短信等)只要有潜在需求,就对用户还有用。游戏应用可以通过应用内购买来提供附加关卡,这种方式不仅能让玩家继续玩乐还可以为公司创造附加收入,游戏内容也同时随着你玩的程度的提高而扩充,这是不断进步的成就系统。在应用中看了足够的章节,完成了足够的挑战,学习了足够多的课程时,成就系统就可以为你解开新的内容。在执行成就系统的同时加入社交,打造社区。人类永远是社会动物,我们都希望所玩之物能让我们有所交流、竞争和贡献。(如游戏应用中的竞技功能,还有其他应用中的分享功能,社区中的评论功能都属于人与人之间的互动。)你不必自己亲自建造平台,只要把你的应用接入到已有的社交网络即可(如微信)。

e.要想的多,但是要做的精,只提供“够用就好”的功能。最开始计划应用时,尽可能多的考虑各种受众、功能以及与其他应用不同的地方,大胆想象。然后,罗列出所有的功能,将大多数功能点扼杀,反复推敲,大胆删改,要合理的甄选每一条触动人心的功能点。紧密关注特定任务,关注少数几个用例,留下那些用户切实需要的用来完成任务的少数功能点。(这是因为移动设备有些不足点--难以抓住用户的注意力和时间,不大的分辨率,吃紧的内存,缓慢的处理器。你每添加一个功能点,都是在抢夺这些资源,添加了过多的功能点就会拉低应用的体验。冗余的功能让界面变得混乱,任务流变得冗长。功能过多只会导致运行缓慢不堪。)最开始你就要确定应用的最关键一项任务是什么,接着回到根据“五要素”提炼出的最重要的用例上,然后确定用户需要频繁完成的任务,抓住相应的用例。(待办事项管理型应用的关键任务是添加新事项,日历管理的是浏览日程。)一旦确定了关键任务,接下来所有的设计工作都将围绕这些点展开,你要认真考虑你的应用如何才能帮助用户在匆忙中完成微任务。次任务会在考虑主要行为时很自然的浮现出来,别把次要功能做的太复杂,找出能实现想法的最低要求,然后再进行优化,提高它的使用效率。(如在待办事项管理器中添加事项时就能想到查看、编辑和标记完成的功能。)精选需求点,挑选出大多数用户大部分时间都需要的功能,,别纠结于小众群体的边缘需求。先对你的受众有个清晰的感觉,方可为这些用户削减你的功能,要注意你是否能根据用户对你应用的期望给出最少的功能点,即“够用就好”。

f.做网站的附属应用时,要想着如何在移动网站山做改进,而不是全盘照搬原网站。以下是几点秘诀:(1)高效是功能之一。移动场景中,最重要的用户需求之一就是使用高效。(2)本地应用能更优美的展示内容。应用为手机屏幕所设计,能提供优美动感的控件,优美的界面能超越移动网站。(3)暂留先用(存放离线内容)。应用相比于移动站点来说,应用可以预存内容以备离线阅读。(如有些新闻类应用就可以在有网络时抓取并预存下所有最新的文章,以备在网络盲区阅读。维基百科中的“列队”功能。)


2、为尺寸和触摸设计

a.人类工程学问题:要考虑你应用的手感。你的界面在单手把持的情况下是否还能使用?拇指是否容易点到常需点击的元素?如果是左撇子呢?按钮是否够大,容易点击?是否需要丝毫不差才能点中?iPhone的交互隐喻全都和点击、滑动以及轻拂有关。应为这种拇指点击的方式优化你的设计。

b.要将主操作放置在拇指的“点击热区”中。虽然拇指能滑到整个屏幕,但只有三分之一的屏幕是真正容易触及的--也就是拇指正对的区域,为了获得人类工程学上的舒适体验,你应将主点击目标放置在方便拇指点击的热区中。这就是为什么工具栏和标签栏一般都放在手机屏幕的底边,这个点击区域也给了我们提示,该如何组织好点击目标的视觉层次。常用的按钮还有导航标签应该放在屏幕底部的左边,不常用的按钮还有会改变数据的点击目标可以很安全的塞在右上方去。(如可以改变、删除、排序列表项目的“编辑”按钮一般放在右上角可以减少误点的发生)要根据你应用最常发生的用例来排布页面元素,引导点击。包括按钮和列表项在内的很多iPhone标准控件,都会横跨整个页面,平等的对待了左右手拇指。只要空间允许,最好是用通栏控件。

c.44是个神奇的数字。确保点击区域至少有44像素(这是手指按压屏幕所触及的范围)大小,然后基于44像素的设计韵律进行设计。元素的大小时常影响着交互设计,定义好每个可点击元素的大小十分重要。行为越重要,越频繁,相关的目标就要做的越大,所以大按钮靠谱。理想状态下,所有的按钮或点击目标最小都应该保持44*44像素,但这并不是说你看到的点击目标一定要这么大,其实还包括了按钮自身延伸出的整个点击区域。当有限的控件压缩了点击目标的时候,实在没有办法只要能保证点击目标的高或宽之一是44像素,你可以将另外一条边压缩成至多30像素,即实际上,所点击目标的最小尺寸是44*30像素。

d.大胆使用空白,不要让你的设计显得拥挤不堪。按钮大小并不是唯一决定点击精度的因素,你还得考虑按钮间距。当你的应用在屏幕底部使用标签栏来切换模式或视图时,操作系统会自动帮你分配好标签与标签之间的空间,并将数量限制到5个(不会限制死5个,但是iPhone不推荐标签栏图标超过5个。)在页面底部要给手指留有空间,当目标离应用的标签导航栏太近时很容易误点。如果你不得不在标签栏和工具栏旁边放置点击目标的话,务必保证目标够大。

e.所做之处,都要让主内容在上,操作在下。(将重要的信息放在顶部,将重要的操作放在底部)最重要最常见的信息应该放在应用主要按钮和操作的上面,屏幕的顶部--新闻头条一般在顶部,且符合我们操作任何现实设备中的方式。屏幕底部是掌上设备拇指点击最舒适的区域,但也是最容易被手挡住的区域。为了方便看清信息,信息应该摆放在你应用操作的上方。

f.主操作要容易够着,在切实可行的情况下避免使用滚屏。质疑滚屏,如果一屏之下能合适的放下所需内容,那就尽量不要使用滚动。如果信息不在中央,那用户很有可能看都不看。滚动需要脑力加体力,要多一次思考,多一次滑动,设计师要消灭多余的脑力劳动和体力劳动。让用户一眼看完一屏里的所有内容,可以让他们能关注内容,而不用费神去想屏幕下边会是些什么。消灭滚屏只不过是一条容易执行的设计策略,而不是目的,只要你应用的内容需要,该用滚屏的时候还是要用。满屏的信息会给你的用户带来操作负担和理解负担,但并不代表为了保持界面美观易懂你就一定要舍去详细信息,而是要将复杂的东西做的看起来并不复杂。正确的质疑滚屏就是让你认识到不能将所有信息放在一个页面上。优秀的应用会简单的给出需要知晓的大局信息,然后,用户可以用点击不同的地方来“提问”,获取更多的相关信息。(只要身体上的舒适程度的话,点击手势要比滑动滚屏来的容易。)比点击数量更重要的是点击质量。每次点击后,用户得到的越多,点击质量就越高,多点几下也就还好。而且大部分时候,多余的点击比长长的滚屏负担要少。只要你将最重要的工具和信息放置在了主屏,你就可以放心的把次要内容放在其他视图里。只要分清了主次,用户浏览非滚屏页面就不用忙于扫视、定位内容的位置。在非滚屏的页面上,每次访问内容和操作总是保持在原来的位置上,这样用户就更容易在应用里畅游,获取所需信息,而不用停下来思考。即使是长文本,也有创新方式可以替代滚屏(如读书应用里的翻书隐喻来替代滚屏)。滚屏是某些应用不可获缺的操作,待办事宜、文章、邮件不可避免会很长,而且滚屏常常是查看这类长内容的最佳方式。当你的应用要用滚屏时,要确保应用的主要操作能固定在屏幕上。

(界面上的所有操作应该都是大部分受众最常用的功能,要冷眼看待每个按钮和图标:这个元素会不会被用户注意到?用户是否看得懂这个元素的含义?元素是不是有意义?每个工具都要与近旁的主要任务紧密关联,附属功能和附属内容要放到次屏中,或全部剔除。文本标签要简练,语句不拖沓。屏幕上每个元素都会消耗用户的认知成本,每个元素都会减慢视线扫描,减缓理解时间和决策时间,别让用户思考。)

g.用“秘密面板”、“隐藏之门”将高级工具分散到次级视图中。通过这种方式来减少边框界面。如果你的应用要满足受众更高级的要求,基本上你就要在应用上额外加些新功能、新工具还有新内容,但是尽量让额外的界面让路于主内容。虚拟键盘(如推特发微博输入文字时隐藏在键盘后的更高级功能)和滑动面板(如新闻类应用屏幕底部出现约50像素的广告横幅)能让你的应用来回切换界面,展开新工具、新内容。触发秘密面板的元素(开启面板的线索)在视觉上必须要有清楚的标识,至少还要放在正关注的内容旁边,这样就能提示用户还有其他操作可做。


当你开始计划设计应用时,先从大局层面上组织设计--考虑它到底要干什么,而先不要顾虑太多细节(按钮、颜色、图标等)。应用基础的操作就是基于页面间简单的移动,每张页面都完成一个任务或展示特定内容,关键在于如何串起这些页面。理解好标准导航方式和控件会让用户更加习惯你的应用。

三种导航模型


3、苹果的导航模型

平铺导航

a.平铺页面:没有信息层级,没有组织结构,就像一叠卡片(有时就一张)。这种方式很适合于浏览并发现方式,慢慢浏览查看同样类型不同内容的页面,适合在实用工具应用中使用,通常视觉精美,没有滚屏。为了让大家在浏览这叠页面的时候能保持方向感,平铺页面应用的底部添加了标准页面控件,即那一排小点。小点的数量代表了页面的数量,控件提示了用户你目前所处的位置。分页控件只让你每次翻过一页,而不能直接跳转到某个小点所对应的页面。所以在使用这类模型时,要控制好页面数量,要想把平铺页面作为主导航并用的好,一般页面以不超过10个为宜。平铺页面模型无法直接跳转到特定页面的弊端,使其并不适用于功能或内容结构相差悬殊的应用。在平铺页面里,滚屏更不可取,这是因为页面分页控件黏附于屏幕底部,会突然间截断滚屏内容。且如果添加了滚屏,横竖两个方向均可滑动,当上下滑动页面的时候,滑动方向不小心带点斜度却把下一张给滑了进来。两个方向的滚屏需要更多的精确度,所以也需要用户付诸更多的努力。

b.标签栏。标签栏就是在屏幕底部的一组用来在应用主功能之间切换的按钮。按苹果标准代码创建的标签栏显示在屏幕的底部,高度是49像素,每个按钮都包含一个文本标签和图标,限定最多5个按钮。标签栏最大的优势就是让你应用的主要功能展示在明显的地方。标签栏要避免出现“更多”按钮,避免重要功能被用户忽视和增加额外的点击。如果发现应用的导航分类超过5个最好用适合于数量较多的分类结构--树形结构的导航。

树形导航

c.树形结构(表格视图列表)。树形结构对管理一大摞的分类项目来说非常合适(如管理邮件、待办事宜和联系人等),还可以用树形结构来展示功能集合。树形结构的导航占用很少的界面空间,而且内容本身就是操作,不但节省很多空间,还为用户节省了多余的思考。

d.组合使用导航。有个很常见的设计模式是,使用标签栏导航来组织应用的主要功能,然后在某几个标签下又添加树形结构导航。平铺页面导航也能类似的嵌入到应用的二级页面中。


4、一张页面临时取代了整个应用的显示屏,这种处理方式称为“模态视图”。这种处理方式会暂时绕开应用的正常操作。模态视图的作用就是暂时绕开当前操作。    如果你在应用中使用了某种导航模型,那么模态视图就像是导航模型中的死胡同--滑出一个单屏,编辑、查看、操作页面上的内容。(“模式”就是一种与往常不同的应用行为的特定形态,一般带有流程中的界面变更的情况发生。)模态视图时暂时劫持应用正常操作的界面,这个模态视图会飞入现有的屏幕,让你去完成和页面内容相关的一些任务。有些控件和界面元素只有在次要任务中偶尔被用到,而模态视图很巧妙的将这些控件和界面元素暂时藏起。应用正常的页面浏览切换方式一般是左右滑出,而模态视图是从底部出来,覆盖现有的页面。(这种弹出方式在微妙间,强化了模态视图在流程上属于临时支路的形象。)为了让用户能方便的从模态视图中回到正常流程,所以除了在模态视图中加上必要的按钮和空件之外,还要加上“完成”或“取消”按钮。(在浏览器中用来改变或分享内容的工具,都通过模态视图的方式弹出。,如输入网址时出现的虚拟键盘,弹出的“书签”让你找到之前保存过的页面等。)

5、创建应用前先画好应用页面的流程图,要确保页面能清晰、有条理的串在一起。路径上每张页面都应该只做一件事情、完成一项任务或查看一种内容元素。你的草稿只要说个大概:需要哪些页面,每张页面上有什么操作,还有页面上的工具和内容的大致比例。此时你要做的就是组织好你的页面和任务优先级。

6、在概念阶段,最重要的就是:你要解决什么问题?你面向的受众是谁?他们又有什么期望?了解用户的心智模型,也就是了解用户需要应用来解决的问题是什么。用户不会纠结技术的背后工作原理,对于他们来说精力应该花在任务和目标上,用法该一目了然。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,585评论 4 365
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,923评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,314评论 0 248
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,346评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,718评论 3 291
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,828评论 1 223
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,020评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,758评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,486评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,722评论 2 251
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,196评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,546评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,211评论 3 240
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,132评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,916评论 0 200
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,904评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,758评论 2 274

推荐阅读更多精彩内容