1.一切从点击开始 我们是如何使用iPhone应用的
即使用户再喜欢一个应用,他也不会全身心投入去体会每一丝微小的细节。
你用一个3.5英寸的屏幕和车水马龙、人声鼎沸的大千世界进行这一场激烈的斗争。我们称之为人类学接触(human contact)。故我们应该更加小心地排布好屏幕上的信息。使用漂亮、大而醒目的视觉风格,并减少输入。
移动环境使用户不能集中精神,故使用的过程会切成一段一段的。优秀的应用能将其自身融入用户繁忙的日程中。这就需要关注界面的效率,尽量只需要一两下点击即能搞定。这需要在视觉上做减法。对使用周期较长的应用,也需要为快速点击进行深入的交互和设计。
作为应用的设计师,必须去想象你的应用不是孤立的,而是与众应用皆为邻里。你的应用也随之和其他应用共享手机空间,互相传递信息,偶尔还会相互争斗。
用户们对于应用的关注来的快去的也快,你必须尽一切努力提高用户体验去满足用户需求。
测试发现,很多的iPhone用户提到多点触摸时,感觉其难以操作,甚至连标准的双指放大缩小的手势都觉得如此。所以,要尽可能选择使用单手指操作,例如用双击来放大地图。只有把手势座位一种完成某个操作的快捷方式,并确保这个操作能够以另外一种(虽说效率一般会更低些)方式完成,这样人们总有办法完成任务。
手指不灵活。这个笨拙的工具,每次点击都会点到一大片像素,更糟糕的是,手指还会遮挡住屏幕。想要设计好触摸操作,就需要仔细认真的工作,并关注人类工程学。
别人并不想简化你的应用,它们想要的是简单易用。优秀的应用是透明的,它不会挡住我们的去路。你的任务就是在用户体验设计的过程中,确保每一张页面、每一个行为都能传递欣喜,提高效率并能达到目标,让每个元素都能触动人心。
2.能触动人心吗? 精心设计你应用的目标
越是专注于单个需求,应用就越能成功。你需要抓住用例中的“起因”。“起因”不仅仅要考虑用户为什么需要这些功能或是内容。还需要考虑用户为什么用户需要在这样一台小小的手持设备上操作。
你的应用与众不同地为用户解决了什么问题?功能、内容还有炫目的动画可能是应用的重要组成原因,但用户决不会因此买单。总的来说,用户使用你的应用的原因是“为什么要用”。你需要抓住用例中的“起因”。起因不仅仅要考虑用户为什么会需要这些功能或内容,还需要考虑为什么用户需要在这样一台小小的手持设备操作。
每个移动用户启动程序有三个方面的动机:1.我有个微任务要做 2.我想看看附近情况 3.我有些无聊
生产力型和参考型应用应能适应工作被随时打断的情况。所以为了迎合这种新的工作方式,只有高效的界面才能触动人心。
iPhone包含有各种传感器,触动人心的应用能利用这个优势,为用户个人的任务和信息提供相关帮助。
如何让你的应用独树一帜?有独特的激励机制;紧密地面向特定受众;有别人无法提供的利基的内容;有全新方式来展示信息;有简单有效的技术;有大量的社区用户在应用中互动;能同样解决问题却更便宜;应用会增强你在网站或现实世界中的所见所做之事。
找出能实现想法的最低要求,而后再进行优化,提高它的使用效率,令人满意,最后变得完美无瑕。
做网站的附属应用时,要想着如何在移动网站上做改进,而不是全盘照搬原网站。
3.小小触摸屏 为尺寸和触摸设计
iPhone的交互隐喻全都和点击、滑动、轻拂有关。直接操作屏幕中的物体,这些物体会像现实生活中一样做出反应。
拇指是有热区的,右上角和右下角是右手用户最难点击的区域。故常用的按钮一半都放在屏幕底部的左边,不常用的按钮还有会改变数据的点击目标可以很安全地塞到右上方去,这样可以减少误点的发生。
iPhone点击目标位44px,故很多按钮高度,列表项,顶部的导航栏为44px。该尺寸被推荐为是一个点击目标可点且易点的最小值。故所有的按钮或点击目标最小都应该保持44*44px(包括按钮自身延伸出的整个点击区域)。实际上,所有点击目标的最小尺寸是44*30px。按钮大小并不是唯一决定点击精度的因素,你还得考虑按钮间距。
当你的应用要用到滚屏时,要确保应用的主要操作能固定在屏幕上。
对于移动工具,要削减功能,减轻色度,减少按钮、图标等控件,免得让界面变得拥挤。
用“秘密面板”、“隐藏之门”将高级工具分散到次级视图中。通过这种方式来减少边框界面。
4.有条不紊 学着苹果做应用
HIG(iPhone Human Interface Guidelines)iPhone人机交互指南
苹果的导航模型:1.平铺页面 2.标签栏 3.树形结构
平铺界面:如天气。很适合在实用工具应用中使用。由于没有信息层级,没有组织结构,所以信息构架达人把这种组织方式称为平铺列表。这种方式很适合于浏览并发现方式,慢慢浏览查看同样类型不同内容的页面。为了让大家在浏览页面的时候能保持方向感。平铺页面应用的底部,添加了标准页面分页控件,也就是那一排小点(只能左右切换)。缺点:没法从第一屏直接跳到最后一屏。故页面不超过10个。且,尽量避免滚屏。
标签栏:是附着在屏幕底部的Dock。标签栏是切换选择操作模态的理想方案。标签栏实现在屏幕的底部,高度是49px。
树形结构:将层级信息分类到一棵倒置的树的树枝上。树形结构对管理一大摞的分类项目十分适合。这种组织、导航的方式很适合列表。即表格视图。
一张页面临时取代了整个应用的显示屏,我们称这种处理方式为“模态视图”。
5.标准控件 使用内置的界面元素
多用标准控件,一致性将增加可靠性
屏幕上不能超过两条“栏”--上边导航栏,下边就标签栏或者工具栏。不要把搜索框固定着,而要让它顺着屏幕滚动。
多用表格视图。表格视图是最广通神大的iPhone标准界面元素。
认真为每个文本输入框选好键盘,选择是否开启自动纠错功能。
减少配置项。不用把配置项放到“设置”应用里。
6.与众不同 创建自己独特的视觉风格
触动人心的设计会让应用魅力十足。在开始设计之前,为你的应用选好个性方向。
在标准控件上使用自定义颜色和图形,能让空间焕然一新。奢华的材质能增加你的应用的感知价值,逼真的界面元素让用户有点击欲。
图标重在意义清晰而不是个性。图标干净的轮廓胜过浮华的细节。
从真实世界借鉴界面隐喻,但是要确保借鉴的应用能适合于手机,同时最好能用标准控件。
大胆不怕冒险。
7.第一印象 介绍你的应用
你应用的主要功能应该容易明了,只需稍微做些探索,或借助像迎宾毯一样的首次提示即可完成任务。
应用的图标要清晰明了,用来描述应用的功能、界面、名称或品牌。
在图标设计中,要加强轮廓。
名称短才是好。
把启动图像做成假的应用背景,这样可以减少启动的感知时间
创建出运行暂停的错觉
为首次使用的用户提供简单的迎宾毯式的指示标牌
应用的首页应该特别清晰。如果可以的话,多使用主面板视图的方法。
8.滑!捏!拂! 用手势来操作
当你在应用中添加了非标准手势后,要确保通过可见的控件,同样也能完成这个功能。
帮助大家发现自定义手势的最好方法就是:通过替换或扩充对应的标准手势,让自定义手势既不显露,却又一览无遗。
摇动不能拿来用作具有破坏性的操作,比如删除内容、清空页面。
单指操作比双指操作好。
在界面上适当的地方要求用户做难做的操作或有一定难度的手势,这样可以防止误点悲剧的发生。 (触屏自卫设计,如滑动来解锁)
每次点击都要伴随有视觉响应,才能让大家安心地感觉到自己的手势有预期效果,有节制地加上音效。
除了用来出发撤销/重做对话框或某些新奇用法以外,要避免使用摇动手势。
9.了解横屏 屏幕旋转
先要把你应用的一个屏幕方向优化好,然后再添加对横屏的支持。
在横屏中通过不同方式来展现内容,而不是一味地放大。
可以不用横屏里重新组织内容和信息,而用横屏来提供图形内容。
注意不要把重要内容和功能藏在屏幕旋转后。
设计横屏时,有很多需要牢记的因素:1.导航栏和工具栏会被压扁。2.从竖屏开始。3.注意动画效果。4.四面兼顾。5.要做就要全做。
要避免你的受众在屏幕旋转、布局改变时,迷失了方向。
10.礼貌的对话 警告、打断和更新
不要轻易使用模态警示框。
正确使用警告的方法:1.应用不能进行。2.请授权。3.不要使用警告框来弹出欢迎消息。4.不要弹出来让用户到App Store里打分。5.一会儿就能好的小问题就不要用警告框了。
通知框的使用方法:1.提供详细的内容控制。2.确保要有“安静时分”。3.让声音可选
主屏幕标记在不妨碍用户的情况下,对应用的状态进行了实时汇报,往往更可靠、更能帮助到用户。
菊花转时用来表示“我正在运行中”的。官话叫做“活动状态指示器”。
模态按钮是指一个按钮,会根据应用的状态不同和用户所做的事情不同而改变外观。
使用进度条、娱乐项目、预载内容的方式,让你的应用看起来更快。
11.吃没?隔壁的兄弟 和其他应用打成一片
用好共享内容的建议:1.尽量浏览,减少输入。2.输入个人信息。3.混到一起。4.扩充已有信息。
不要自己搞一套联系人、日历事件或照片应用。要使用全系统通用的地址簿、日历和相册。
提供方法,让用户可以将现有记录创建或添加到现有联系人和日历事件里。
大方地将次要任务链接到其他应用里去完成,同时也让你的应用能接受链接。
过多的在应用中切换,会让用户愚钝。
在网页视图和地图视图中,采用“够用就好”的原则。