BOB电子竞技:提炼「iOS人机交互说明手册」

  相信对于产品设计人员来说,对于 iOS 人机交互说明手册(iOS Human Interface Guidelines)应该都不陌生,作为苹果官方出品的文档对于我们在 iOS 以及移动产品设计上面有很大的指导和参考意义,值得每一个产品设计人员反复阅读。但由于该文档篇幅较长、涉及的内容细则广泛,所以这里将其中提到的一些重点和值得注意的部分做了一个总结和大家分享  以 iPhone 4S 为例,PPI为326,而PPI和屏幕大小的换算公式为PPI=a^2+b^2/c^2(a、b为区域像素大小,c



  相信对于产品设计人员来说,对于 iOS 人机交互说明手册(iOS Human Interface Guidelines)应该都不陌生,作为苹果官方出品的文档对于我们在 iOS 以及移动产品设计上面有很大的指导和参考意义,值得每一个产品设计人员反复阅读。但由于该文档篇幅较长、涉及的内容细则广泛,所以这里将其中提到的一些重点和值得注意的部分做了一个总结和大家分享

  以 iPhone 4S 为例,PPI为326,而PPI和屏幕大小的换算公式为PPI=a^2+b^2/c^2(a、b为区域像素大小,c为尺寸大小)。所以,将公式反推就可以得到iPhone 4S的最小点击区域的实际尺寸为0.19in。另外,我们知道1in=25.4mm,所以iPhone 4S的最小点击尺寸在屏幕上的尺寸为:

  也就是说在iPhone 4S上,我们的设计最终效果应该保证用户可操作元素的最小尺寸不得小于4.8mmx4.8mm,大概是成年人食指的大小。

  一致性带来的好处是界面UI的统一美观,并且用户可以沿用原来对于产品的理解很快上手,减少学习成本。文档中具体提到三点:

  其中统一的部分概念比较广泛,从交互方式、图标定义、文案术语含义到UI组件、操作结果等等,最终的目的就是希望能够让用户舒服的使用产品

  iOS官方内置的程序会给用户的每一个操作提供可视的反馈。例如,当用户点击列表项时,该项的背景会变成高光。同样用户也希望在我们的应用里能得到类似的反馈,反馈告诉他们的操作会有何结果以及确定程序正在运行,所以我们应该:

  所以,我们应该根据应用不同的风格来定义不同样式的状态栏,比如说导航栏不是透明的,就不要选用透明的状态栏

  其中 - 导航栏左侧为返回按钮,写着上一级的标题 - 中间为当面这一屏页面的标题 - 右侧为与当前内容相匹配的控件

  使用分段返回按钮会导致很多问题: - 分段控件太长,都没空放标题了 - 没法展示某一段的选中状态,段越多每一段的可点击区域越小,用户想按某一个不好按 - 当层级很深时,选择层级的哪一部分来展示是个问题

  如果程序有更多的tab,tab栏可以展示前四个,第五个放一个「更多」,用列表的方式呈现其余的项目,如下图:

  iOS 官方不建议在浮出层上提供关闭按钮,而是应该当浮出层没有必要存在的时候就应该消失。对于没有必要存在的情况,官方是这样定义的:

  另外,千万不要在浮出层上面展示任何的东西,除非是警告框。当然更加不要在浮出层上面再展示浮出层

  另外,由于当图标显示到用户桌面时,iOS会自动为图标添加高光、投影、圆角(可禁止)等效果,所以为确保我们的图标与 iOS 提供的加强效果相配,我们制作的图标应当:

  最后,不管如何,设计规范是死的人是活的。这类文档在我们产品设计的实际过程中应该是起到指导和参考的作用,而不是盲目的遵循从而被这些条条框框所框死。我们应该试着去理解其中每一个说明和条目背后的目的和意义,从而才能以此出发创造出更好的交货和产品。另外,分享一个很好的iOS人机交互说明手册中文翻译版本,点我查看

  公司地址:北京市朝阳区酒仙桥路4号751 D·Park正东集团院内 C8座105室 极客公园

上一篇:人机界面及伺服控制器的卷烟系统介绍 下一篇:人机交互技术在虚拟偶像中的应用研究