from:http://beforweb.com/node/214
今天开个新坑。其实老早就想做这事儿了。记得前一两年,苹果官方还会在开发者中心提供中文的HIG(Human Interface Guideline),后来给没了;网上能够找到的中文版本不知是官方还是同行的自发翻译,总之要看最新的内容还是需要拿来官方的英文文档,估计多数朋友也是这样的。
那么就趁着iOS 7刚刚发布测试版本的时机,开始做这件事吧。之前一周里,到处都在传阅官方发布的新版设计文档,越来越多的人在自己的设备里安装了测试版本,可见大家的关注程度;所以说我爱这一行呢,有点大事小情的大家都能在第一时间反应起来。关于系统本身,毁誉参半吧,东西都摆在那里,建议自己玩玩看;我个人来说,只是觉得视觉风格太娘了;又能怎样呢,反正看看如今的世界,哪里不是漫山遍野的一派娘炮。扯远了。第一篇走起吧;先做着,回头整理出框架,也和《iOS Wow Factor全书自发编译》一样扔到侧边栏去做个固定的栏目好了。
重要:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。
译文最后更新时间:2013-06-15
iOS7涵盖了以下3个方面的设计主题思想:
无论你是在重新设计一款已有应用,还是在创建新产品,请考虑按照苹果官方重新设计内置应用的方式来进行你的工作:
虽然明快而漂亮的UI以及流畅的动画效果是iOS7当中的体验亮点,但内容才是其真正的核心。
下面这些方法将确保你的设计能够提升界面的功能性,并使其更好的依从于内容。
斟酌嵌入式结构及可视化的界面框架的用法,考虑能否将内容直接扩展至屏幕边缘。天气应用就是个很好的例子:通过漂亮的全屏方式呈现当前的天气情况,用户能够立即发现最重要的信息,而且每小时的气象数据也有充分的空间得以展示。
浮雕效果、渐变、阴影,这类视觉表现形式有时会使UI元素过于沉重,进而在视觉上喧宾夺主,压倒内容。要聚焦于内容,让UI扮演辅助支援型的角色。
半透明的视觉形式可以体现出当前操作对象周围的环境背景,使用户知道有更多的内容可用。
提供清晰的视效,这是确保使内容处于核心地位的又一种方式。下面这些方法可以使最重要的内容及功能清晰易读、便于操作。
留白可以使重要的内容及功能更加突出。同时,留白还可以传达出一种平静和稳定的感觉,使应用看上去更加专注和高效。
一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息,并巧妙的暗示出元素的可交互性。同时,它也可以为应用带来具有一致性的视觉主题。
iOS7中的系统字体可以自动调整字间距及行高,使文字内容更加易读,在用户所选择的任何字号下都表现良好。
与以往依靠浮雕效果暗示元素可交互性的方式不同,在iOS7中,我们可以选取含义准确的标题文字,搭配一种关键色或系统色,来表达这是一个可交互的UI元素。新的通讯录应用使用了系统提供的蓝色来告诉用户,屏幕上的多数内容是可以对交互动作做出响应的。
iOS7会在不同的层面上显示内容,以体现内容间的层级和位置关系,这有利于用户理解屏幕上各种元素之间的关联。
文件夹在视觉表现形式上采用了半透明背景,并悬浮于主屏幕之上,这能使其中所包含的内容与屏幕上的其他元素得以区分开来。
当用户在使用提醒事项应用中的某个条目时,其余的条目都会排列在界面底部的不同层面上。要查看所有条目,用户需要展开这些层面,如下图所示。
新的日历应用当中使用了增强的动画过渡效果,可以在用户切换年、月、日视图模式时带来到明显的纵深感。在下图所示的年份滚动视图中,用户可以立刻看到今天的日期,并能够执行其他的相关操作。
当用户选择了某个月份后,年份视图会自动放大扩展,而月份视图则会从它的后面呈现出来。
类似的动画效果还会发生在月份与日期的切换当中:月份视图向外扩展,呈现出日期视图。
今天再来一发,然后结束掉周六的忙碌,去吃零食,还有冰啤酒;其实现在打嗝还有小龙虾味儿呢。
第二篇更多的是从技术的角度对iOS界面组成原理进行了简单的解析,篇幅很短,可稍作了解;更多关于iOS开发入门的内容可参考“设计师应该了解的iOS应用开发基础知识”一文。另外,非常感谢各位朋友在微博上的支持与鼓励,不过有一点需要注意,目前做的这个版本(2013-06-15)并非iOS7设计规范的最终版;该版本的作用及注意事项详见下面的重要提示。
重要:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。
译文最后更新时间:2013-06-15
几乎所有的iOS应用都会用到一些由UIKit框架所定义的UI控件。对这些基本控件的名称、角色和作用加以了解,你将能更好的在打造界面的过程中做出正确合理的设计决策。
UIKit框架提供的UI元素可以分为4大类:
除了定义UI元素以外,UIKit框架还定义了那些可以完成诸如手势识别、绘制、辅助支持、打印支持等功能的对象。
从编程的角度来讲,UI元素可以被看做是不同类型的视图(views),因为它们都继承自UIView类。一个视图知道怎样将它自己输出到屏幕上,知道怎样捕获用户在它的范围内执行的点击行为。
要在应用中管理一组或一系列具有继承关系的视图,你通常需要使用视图控制器(view controller)。视图控制器可以协调不同视图的显示方式,在用户发起行为后执行相应的功能,并且对界面切换时所需的动画过渡效果进行管理。
下图展示了视图和视图控制器是怎样协同工作来呈现iOS应用界面的:
虽然开发者们习惯于从视图和控制器的角度来思考问题,但用户只会将应用看做是由一个个界面所组成的整体。从这个角度讲,每一“屏”都对应着应用中的一个明确的视觉状态或模式。
注意:每个iOS应用都包含一个窗口(window)。与桌面应用中的概念有所不同,iOS中的窗口没有真正的可视部分,而且不能从屏幕上的一个地方移动到另外一个地方。多数iOS应用只有一个窗口;那些支持外接显示设备的应用会有多个窗口。
iOS界面设计规范当中会用到“屏(screen)”这个词,因为它能被多数用户所理解。作为开发者,你可能还会在其他不同的上下文当中读到“屏”的概念,例如被用来指代UIScreen对象(用于访问外界显示设备)。
一般情况下,用户可以在一到两分钟内对一款应用做出评估。如果你能利用这段时间迅速地呈现最有用的内容,就能充分激发新用户的兴趣,并且给所有用户带来出众的体验。
重要:绝不要在用户安装好你的应用之后告诉他们需要重启设备。重启需要花费时间,而且会让你的应用看起来非常难用且不可信赖。
如果出于内存使用或其他方面原因,使你的应用确实只有在设备重启之后才能正常工作,那么你需要首先解决这类问题。请参考iOS应用开发指南中的“高效地使用内存”。
尽可能地避免使用无意义的启动画面(欢迎画面)或其他类似的启动体验。最好让用户在启动你的应用之后可以立刻开始使用。
应用安装完成后,不要让用户必须进行设置才能使用。取而代之地:
尽可能晚些让用户登录。比较理想的状况是,让用户在不登录的情况下也能在应用当中尽量多的浏览内容,并使用部分功能。如果在用户上手你的产品之前就强迫他们登录,则会导致启动流程变得累赘拖沓。
一般来说,要按照默认的屏幕定向方式启动应用。对于iPhone,竖屏是默认的定向方式,而对于iPad来说,设备当前所处的状态就是其默认定向方式。如果你的应用只能在横屏模式下运行,那么要始终以横屏状态启动,让用户在必要的时候自己调转设备的方向。
最好让横屏应用能够同时支持两种模式的横屏,也就是Home按键分别在左侧和右侧的状况。如果设备当前已经处于横屏状态,那么横屏应用就应该按照当前的定向方式加载,除非你有充分的理由不这样做。在其他情况下,可以按照Home按键在右侧的方式加载横屏应用。
可以提供一张与应用首屏看上去几乎一致的启动图片,iOS会在应用被打开的同时即刻展现这张图片,这可以让用户觉得你的应用加载起来非常快,降低对等待时间的感知,使真正的内容有相对充裕的时间可以进行加载。可以参考启动图片了解相关的实现方法。
如果可能,不要让用户在初次加载应用时阅读免责声明或必须对用户协议进行确认。你可以直接在App Store当中展示这些内容,使人们在下载应用之前就能有所了解;不过,虽然这种方式通常能最大限度的减少麻烦的产生,但也不是一直可行的。如果在某些情况下你必须在应用内提供这类内容,那么要确保这些内容与整体UI保持和谐统一,与产品实际的业务功能带来的用户体验达成平衡。
在应用重启后,要恢复到用户退出时的状态,让他们可以中断的地方继续使用。不要让用户必须记住之前是通过怎样的步骤到达退出时的状态的。可以参考状态的维持与重置来了解相关的实现方法。
iOS应用永远不会有用来执行关闭或退出的操作。用户退出一个应用的方式就是切换到另外一个应用、回到系统主界面,或是使设备进入睡眠模式。
当人们从你的应用切换到其他地方,iOS的多任务机制就会将它转至背景当中,并使用其他应用的UI替换掉当前的。为了应对这种情况,你的应用应该具备以下能力:
有些应用即使处于背景状态也需要保持工作,譬如,用户会希望在查看待办事项或玩游戏时让另外一款应用继续播放音乐。可以参考多任务来了解怎样正确而优雅的处理这种情况。
永远不要以程序化的方式自动退出iOS应用,因为用户有可能将这种情况误解为程序崩溃。如果出于某些原因,你的应用无法按照预期正常的工作,你需要告诉用户当前的状态,并让他们了解自己能够做些什么。取决于问题的严重性,你有两种选择:
布局所关乎的远不止“界面元素在屏幕上看上去如何”这么简单。通过布局,你可以让用户知道哪些东西是最重要的,他们有哪些事情可做,内容之间具有怎样的关联。取决于设备类型及横竖屏定向方式,同一款应用的界面布局也可能会有不同的模式。
确保交互元素具有足够大的尺寸,以便用户可以很容易的与内容和功能进行互动。可点击对象的实际点击区域尽量不小于44*44像素。
将重要的内容和功能放在权重更高的位置上,使用户的注意力可以更好的聚焦在主要任务上。通常,将最重要的元素放在前半屏是比较好的做法,另外,对于阅读习惯是从左到右的用户来说,更贴近屏幕左侧的位置也是更容易引起关注的。
利用视觉表现形式的权重和平衡,向用户展示界面元素之间的相对重要程度。尺寸较大的元素拥有更高的权重,相比于尺寸较小的元素来说,更能吸引目光,看上去也更加重要。
通常情况下,要防止UI元素在外观上具有不统一的表现形式。尽可能让具有相似功能的元素同时具有相似的外观。人们一旦留意到不一致的外观表现,就很容易假设这背后是有原因的,并倾向于花费时间去搞清楚这种差异究竟代表什么。
确保界面中的主要内容在默认尺寸下可以被阅读和理解。不要让用户必须横向滚屏才能看到完整的文字内容,或是必须执行放大操作才可以看清楚内容图片。