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

标签: 产品设计 设计思想 | 发表时间:2013-01-06 01:26 | 作者:P迪
分享到:
出处:http://www.alibuybuy.com

本文来于 Computer Arts(数码艺术),全球领先的数码设计杂志,文章译者 @C7210

文中的图标出自 Jamie Jones之手,突出人机交互、用户界面以及各类设计规范,配合文章给出的十条设计贴士,可以帮你塑造更好的iOS应用整体体验。

 

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

01-human-interface-guidelines

苹果的 人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书。通读之后你会发现,这套规范当中涵盖的主题非常全面,上至产品方向,下至界面元素的细节,所有这些“规则”都有助于你从基础层面上更好的理解iOS应用设计的方法和原理。

只有充分的了解平台特性,对自由发挥的空间及局限有清晰的认知,我们才能更合理更有效的落实创新思维。

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

2.正确的使用界面元素

02-ios-interface-elements

人机界面设计规范当中的“ iOS用户界面元素使用规范”一章为你详细的介绍了应该在何时何处如何使用各种类型的原生界面元素,包括导航栏(navigation bar)、标签栏(tab bar)、列表、按钮等等。

要使产品在最基础的层面上符合用户的认知、降低学习成本,我们必须吃透这些原生界面元素的使用原理及相关的设计模式。

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

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

03-device-limitation-enviroment

设计iOS应用与设计网站有所不同,我们需要考虑的因素有很多,包括移动设备自身的功能特性、显示屏的规格局限以及特定的上下文使用环境等。

用户在使用移动设备的时候,可能身在户外,或是呆在室内,这类具体情况会对人机交互的会话进程产生相应的影响。在对产品概念及设计方案进行测试验证时,要尽量将原型部署到实际设备当中,在最贴近实际应用场景的环境当中进行操作。

推荐阅读:

4.订制化的应用图标

04-icon-image-guidelines

应用图标对于产品能否给用户留下良好的第一印象起着至关重要的作用,而且通常情况下我们要考虑的不只是一两个尺寸的图标。

iOS人机界面设计规范中的“ 图标的订制化及图片创建规范”一章详细的列出了使用在不同场景及设备状况下的图标规格,另外,你还可以在这里找到很多关于创建图标及相关图片资源的设计规范及建议。

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

5.考虑不同的屏幕定向

05-device-screen-orientation

用户在执行调转屏幕定向的操作时,通常已经在预期当中做好深入探索内容的准备了。所以,对于具有内容获取及编辑功能的应用产品来说,特别需要考虑在不同的屏幕定向方式下提供不同的内容操作模式。

另外,不同的定向方式也会产生持机方式转变的问题,例如从单手变为双手,所以相关交互模式的切换也是我们需要同时考虑的问题。

推荐阅读:

6.触摸,而不是点击

06-touch

移动应用的界面设计应该以设备特有的输入方式作为基石。iPhone和iPad是典型的电容触屏设备,用户只需通过手指进行“直接操纵”,而无需借助任何外部输入设备。

然而,手指的接触面要比鼠标光标的尺寸大很多,而且用户在执行操作时是无法看到手指下面的内容的,所以对于某些尺寸很小的交互元素来说,需要将实际的可触击区域扩大到其可视边界之外。

类似这样的限制因素都是我们在设计过程中需要时刻考虑到的。

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

7.隐形的网格

07-44-grid-touch

iOS人机界面设计规范建议,界面中的可交互元素在宽度或高度上不要小于44像素(约1/4英寸或7毫米),否则很难保证用户能够准确的辨识并触击。

另外,在移动应用的上下文环境中,足够大的按钮不仅便于操作,而且可以让用户维持必要的注意力,避免被周围的环境所干扰。

与Web设计中的网格系统类似,在iOS应用界面设计过程中,可以试着采用单元规格为44像素的网格作为参考来规划界面元素的布局。

8.保持专注

08-focus-funtion

移动应用产品要专注在首要目标与核心任务上,在一两件事情上做到最好,而不是以一般水平同时做很多件事。

对于非游戏类应用来说,简短、流畅、能够在最短时间内不受干扰完成任务的体验是最重要的,切莫把效率型和实用型的产品做成沉浸型。

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

9.界面元素的伸缩性

09-stretchable-view

可伸缩的界面元素的背景图片制作方法有些类似于Fireworks中的九宫图方式。

如果你需要实现一个圆角矩形按钮,并且希望它在任何尺寸规格下都可以保持相同的圆角半径,那么必须使用弹性视图(stretchable view)进行创建;系统会使用图片中间的部分作为“伸缩”的背景,而四个圆角保持不变。

10.理论基础

10-basic-guidelines

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

Via: Computer Arts

作者博客: BeForWeb

 


© 推荐 for 互联网的那点事, 2013. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

苹果 iOS 移动应用开发新手入门指南教程中文版 (来自官方的最佳编程入门学习资料) (@iplaysoft)

《至关重要的设计》–创造有情感体验的设计 (@70man)

iOS App体验设计

iPad应用的十大用户体验设计准则

那些在设计iOS应用时犯过的错误
无觅

Feed enhanced by Better Feed from Ozh

相关 [ios 应用 设计] 推荐:

送给 iOS 应用 UI 设计者:iOS 界面元素 PSD 素材

- 马克叔叔 - 果迷网
早在 8 月份我们曾给大家推荐过 Jonatan Castro 和 Joshua Geiger 的 OS X Lion 下应用程序 UI 素材文件,无论你是专职 UI 设计师,或是开发人员,或只是突发奇想,都可以使用这些制作精美的、专业水准的素材构建自己心目中的软件界面. 今天我们再给你带来 Teehan+Lax 制作的 iOS 系列的界面素材 PSD 文件,前边的是iPhone 4S 以及 iOS 5 的图形界面素材,后边的是旧版本 iOS 以及 iPhone、iPad 的素材.

30个iOS系统的App应用程序Icon设计

- emilo - 创意悠悠花园
今天分享:30个iOS系统的App应用程序Icon设计,希望其中有你喜欢的,或者可以给你带来灵感. Read the rest of 30个iOS系统的App应用程序Icon设计 (47 words). © emilo for 创意悠悠花园, 2011. Post tags: App应用程序, Icon设计, iOS, 系统.

为设计iOS应用寻找灵感的12个去处

- - Kevin Cao's Blog
专注于分享UI界面的细节,按照设计元素进行分类:. 专注iPhone的UI分享:. 这个网站有一个iPad客户端,设计很精美: http://itunes.apple.com/us/app/stylapps/id444930066. 专注于App网站设计的分享:. 最后推荐一个包括了图标、界面、App网站和设计资源的整合型:.

设计 iOS 应用时需要知道的 5 件事

- - 博客 - 伯乐在线
英文原文: 5 Things to Know When Designing for iOS,翻译: oschina. 根据我们制作优秀的 iOS 应用的经验,我们认为设计师应该在心里的牢记适用于 iOS 的 5 件事. 虽然本文关注的重点只在 iOS 应用,但大部分的意见也适用于其他移动平台. 这似乎是显而易见的,设计应用而不是网站实际上需要转变思维方式.

iOS应用架构谈(一):架构设计的方法论

- - 博客园_知识库
  之前安居客iOS app的第二版架构大部分内容是我做的,期间有总结了一些经验. 在将近一年之后,前同事zzz在微信朋友圈上发了一个问题:假如问你一个iOS or Android app的架构,你会从哪些方面来说呢.   当时看到这个问题正好在乘公车回家的路上,闲来无聊就答了一把. 在zzz在微信朋友圈上追问了几个问题之后,我觉得有必要以文章形式专门来讲一些个人见解.

iOS应用架构谈 网络层设计方案

- - Casa Taloyum
iOS应用架构谈 view层的组织和调用方案. iOS应用架构谈 网络层设计方案. iOS应用架构谈 动态部署方案. iOS应用架构谈 本地持久化方案. 网络层在一个App中也是一个不可缺少的部分,工程师们在网络层能够发挥的空间也比较大. 另外,苹果对网络请求部分已经做了很好的封装,业界的AFNetworking也被广泛使用.

知己知彼——iOS应用“爱玩”的产品设计与用户分析

- - 腾讯CDC
  前段时间完成了我个人的一个iPhone应用“爱玩”,这是一款可以提供音乐演出、讲座沙龙等各种同城活动信息的App,2011年9月底在苹果商店上线.   App下载链接: http://itunes.apple.com/zh/app/id464760869.   意料之外的是“爱玩”在10月28日至11月4日的那周登上了苹果商店的首页,排在新品榜的第三位,在随后的11月5日到11月12日那周登上热门产品榜的第十位.

为何许多 iOS 应用图标采用高光(gloss effect)设计?

- - 知乎每日精选
Gloss effect,这是 2007 年随第一代 iPhone 发布而带来的奇异审美(更多的原因其实是这个效果制作太粗糙). 首先几乎所有的 iPhone 预装应用都有这个效果,然后是 web app,即「add to home screen」添加网址链接到主屏幕的方式,所生成图标也带这个高光效果(HTML 中设置 apple-touch-icon-precomposed 可豁免).

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

- - 互联网的那点事
本文来于 Computer Arts(数码艺术),全球领先的数码设计杂志,文章译者 @C7210. 文中的图标出自 Jamie Jones之手,突出人机交互、用户界面以及各类设计规范,配合文章给出的十条设计贴士,可以帮你塑造更好的iOS应用整体体验. 苹果的 人机界面设计规范给人的感觉有点像枯燥的技术手册,但它绝不是那种可有可无的产品说明书.

iOS 7第三方应用重设计的解决方案及案例参考

- - 人人都是产品经理
乍看上去,“为iOS7重设计”无非就是新的应用图标、无边框按钮、与导航栏配色相匹配的状态栏等等. 不过如果你再深入挖掘一些,便会发现很多耀眼的地方都体现着iOS7的三大设计主题,即“依从、清晰、纵深”. 对于某些应用来说,这些改变带来了设计上的极大改善,而另外一些则甚至比从前还要糟糕,不仅可用性被破坏,而且品牌识别效应也大打折扣.