BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

十条设计贴士,帮你塑造更好的iOS应用整体体验

十条设计贴士,帮你塑造更好的iOS应用整体体验

2013年的第一篇,也不知道是不是有什么可以庆贺和纪念的。这个假期没少下雪,印象里在1号之后就没见过太阳的样子了;倒是这样夜晚的时候灯光昏黄的吹吹空调听听B.B.King,还真有那么点迷离。

假期中间回去金山海边爸妈家,温度更低,风雪更大,这种季节没什么人还会到海边溜达了,沙滩上原本那些摩天轮和海盗船一类的娱乐设施也都拆除掉了,彻头彻尾的肃杀荒凉。有意思的是在家里翻箱倒柜找到几本1997至2000年间买的杂志,比如Music Heaven啊通俗歌曲啊这些;拍了照片放到微博上,立刻有朋友评论说我完全暴露了年龄,哈。

这次选取了Computer Arts官网当中的一篇小文章。CA,国内叫做“数码艺术”,记得没错的话我是从2006年3月开始购买的,那阵子算是刚刚进入Web这个行当叭,看什么都新鲜,发现这本杂志之后简直就忘乎所以了,无论是内容还是杂志本身的排版设计都让我无法自拔...不过到了09年之后就不怎么买了,感觉它变了...怎么变的我也说不上,总之不再那么爱了。倒是偶尔会在RSS订阅里发现一点可以读读的小文章,所以这次也算是纪念自己曾经对CA的爱叭。十条设计贴士,帮你塑造更好的iOS应用整体体验。

btw,其实这次的图标我不是很喜欢,冷冰冰的赶脚,不过其他几个备选的还没这个顺眼呢。

1.以规则为基础进行创新

01-human-interface-guidelines-rule-creative-ios-app-user-experience-design-tips.jpg苹果的人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书。通读之后你会发现,这套规范当中涵盖的主题非常全面,上至产品方向,下至界面元素的细节,所有这些“规则”都有助于你从基础层面上更好的理解iOS应用设计的方法和原理。只有充分的了解平台特性,对自由发挥的空间及局限有清晰的认知,我们才能更合理更有效的落实创新思维。

推荐阅读:先了解规则,再寻求创新 - 关于iOS应用界面自定义

2.正确的使用界面元素

02-ios-interface-elements-rule-creative-ios-app-user-experience-design-tips.jpg人机界面设计规范当中的“iOS用户界面元素使用规范”一章为你详细的介绍了应该在何时何处如何使用各种类型的原生界面元素,包括导航栏(navigation bar)、标签栏(tab bar)、列表、按钮等等。要使产品在最基础的层面上符合用户的认知、降低学习成本,我们必须吃透这些原生界面元素的使用原理及相关的设计模式。

相关阅读:移动应用界面设计模式 - 搜索、排序、筛选

3.考虑设备的特性、局限及使用环境

03-device-limitation-enviroment-rule-creative-ios-app-user-experience-design-tips.jpg设计iOS应用与设计网站有所不同,我们需要考虑的因素有很多,包括移动设备自身的功能特性、显示屏的规格局限以及特定的上下文使用环境等。用户在使用移动设备的时候,可能身在户外,或是呆在室内,这类具体情况会对人机交互的会话进程产生相应的影响。在对产品概念及设计方案进行测试验证时,要尽量将原型部署到实际设备当中,在最贴近实际应用场景的环境当中进行操作。

推荐阅读:

4.订制化的应用图标

04-icon-image-guidelines-rule-creative-ios-app-user-experience-design-tips.jpg应用图标对于产品能否给用户留下良好的第一印象起着至关重要的作用,而且通常情况下我们要考虑的不只是一两个尺寸的图标。iOS人机界面设计规范中的“图标的订制化及图片创建规范”一章详细的列出了使用在不同场景及设备状况下的图标规格,另外,你还可以在这里找到很多关于创建图标及相关图片资源的设计规范及建议。

相关阅读:移动应用的视觉美学 - 谈三款拥有高收入的应用产品

5.考虑不同的屏幕定向

05-device-screen-orientation-rule-creative-ios-app-user-experience-design-tips.jpg用户在执行调转屏幕定向的操作时,通常已经在预期当中做好深入探索内容的准备了。所以,对于具有内容获取及编辑功能的应用产品来说,特别需要考虑在不同的屏幕定向方式下提供不同的内容操作模式。另外,不同的定向方式也会产生持机方式转变的问题,例如从单手变为双手,所以相关交互模式的切换也是我们需要同时考虑的问题。

推荐阅读:

6.触摸,而不是点击

06-touch-rule-creative-ios-app-user-experience-design-tips.jpg移动应用的界面设计应该以设备特有的输入方式作为基石。iPhone和iPad是典型的电容触屏设备,用户只需通过手指进行“直接操纵”,而无需借助任何外部输入设备。然而,手指的接触面要比鼠标光标的尺寸大很多,而且用户在执行操作时是无法看到手指下面的内容的,所以对于某些尺寸很小的交互元素来说,需要将实际的可触击区域扩大到其可视边界之外。类似这样的限制因素都是我们在设计过程中需要时刻考虑到的。

推荐阅读:又是为了触屏移动设备而设计

7.隐形的网格

07-44-grid-touch-rule-creative-ios-app-user-experience-design-tips.jpgiOS人机界面设计规范建议,界面中的可交互元素在宽度或高度上不要小于44像素(约1/4英寸或7毫米),否则很难保证用户能够准确的辨识并触击。另外,在移动应用的上下文环境中,足够大的按钮不仅便于操作,而且可以让用户维持必要的注意力,避免被周围的环境所干扰。与Web设计中的网格系统类似,在iOS应用界面设计过程中,可以试着采用单元规格为44像素的网格作为参考来规划界面元素的布局。

8.保持专注

08-focus-funtion-rule-creative-ios-app-user-experience-design-tips.jpg移动应用产品要专注在首要目标与核心任务上,在一两件事情上做到最好,而不是以一般水平同时做很多件事。对于非游戏类应用来说,简短、流畅、能够在最短时间内不受干扰完成任务的体验是最重要的,切莫把效率型和实用型的产品做成沉浸型。

相关阅读:初创型团队容易在用户体验方面犯的十个错误

9.界面元素的伸缩性

09-stretchable-view-rule-creative-ios-app-user-experience-design-tips.jpg可伸缩的界面元素的背景图片制作方法有些类似于Fireworks中的九宫图方式。如果你需要实现一个圆角矩形按钮,并且希望它在任何尺寸规格下都可以保持相同的圆角半径,那么必须使用弹性视图(stretchable view)进行创建;系统会使用图片中间的部分作为“伸缩”的背景,而四个圆角保持不变。

10.理论基础

10-basic-guidelines-rule-creative-ios-app-user-experience-design-tips.jpg当你第一次读到iOS界面设计规范当中的“用户界面原则”一章时,多半缺乏耐心的略读过去,因为这章看上去稍显理论化了一些,好像布道一样。不过我还是建议各位花些时间认真阅读这部分内容,你会发现这里都是实打实的设计建议,例如保持界面设计的一致性、为用户的操作提供反馈等。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (2)
终于可以评论了呀~ 支持一个!
哈哈打开评论试下