(转)iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合
突然就到了周日傍晚。你永远不会知道自己的生活在接下来的一周当中能够发生多少变化;各种不可预知性所带来的更多是快感还是焦虑与不安,冷暖自知。相比之下,白天工作当中那些需求列表与排期文档就显得那么可爱了,哪怕有各种临时任务或需求变更,也最多只是让人在身体上疲劳一些而已。但有些事就远没这么简单了。
无名无状的话说到这里。今天的这篇更新是iOS7界面设计规范预发布版本第一章的最后一个小节了;我这边的汉化工程暂时告一段落。正如之前提到的,接下来会有我现在的一些同事参与进来,大家一起贡献更多的力量。届时,相关内容可能会首发到团队博客当中。那,眼下先感谢各位最近两周的鼓励与支持呗;从下周开始,没有意外的话,Beforweb会继续回到各种UX文章的更新上来。
重要:这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的,是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化,届时,你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。
译文最后更新时间:2013-06-30
使用标准UI元素
尽可能使用UIKit框架定义的各种标准UI元素。使用标准UI控件而非自定义元素,你和你的用户都会受益:
- 如果iOS本身经过重新设计,那么标准的UI元素在系统更新时可以随之自动更新,而自定义的UI元素不会。
- 人们会立刻了解怎样使用你的应用,因为他们已经习惯于标准的UI元素。
为了充分发挥系统标准UI元素的价值,你必须:
在使用任何一个标准UI元素的时候都要依照设计规范的指导。当一个UI元素无论看上去还是用起来都符合用户的期待时,他们就可以依靠已有的经验来更快更容易的使用你的应用了。你可以在UI元素一章中找到各类UI元素的规范。
通常,不要为标准的交互行为创建自定义UI控件。首先问问自己,为什么要创建一个行为方式与标准UI控件完全相同的自定义控件?如果你只是想要一种订制化的外观,可以考虑通过UIKit框架当中用来订制外观的API来改变标准UI元素的样式,或是改变元素的配色风格。如果你想得到的行为与标准控件的行为有些许区别,那么首先要确认能否通过属性的调整来使标准元素完成同样的目标。如果你需要的是彻头彻尾的订制化交互行为,那么在设计自定义控件的时候,要确保它看上去不会与标准控件相似。
技巧:Interface Builder可以帮你很轻松的创建标准UI元素、使用订制外观的API、设置外观属性、向控件中添加系统预设或自定义图标等等。可以参考Xcode用户指南了解更多详情。
不要为系统预设的按钮和图标赋予其他的含义。iOS提供了很多按钮与图标,你要读懂相关的文档,了解这些按钮与图标在语义上的含义,不要单纯依靠自己对它们外观的理解。如果你发现预设的按钮或图标无法准确的代表你想要表达的功能含义,那么可以自己创建。你可以在栏按钮图标一节当中找到相关规范,帮你更好的设计自定义图标。
如果你的应用可以带来沉浸型的体验,那么打造完全自定义的控件是合理的做法。因为你在创建一种独特的体验环境,对于用户来说,探索与该环境进行互动的方式也是他们所期待的体验之一。
对横竖屏切换的响应
人们通常会希望能够在任何定向方式下使用iOS设备,所以最好让你的应用可以在这些情况下做出恰当的响应。
让用户在横竖屏状态下都能聚焦于最重要的内容。这个目标具有最高优先级。人们需要在应用当中查看他们所关注的内容,并与之交互;如果横竖屏切换会使用户失掉焦点,他们便会感到迷失,并觉得丧失了对应用的控制权。
通常,要让应用能够运行在各种定向模式当中。人们可能会期望在任何定向方式下使用你的应用,能满足他们的期望是最好的。特别是iPad用户,他们会希望你的应用能够运行在他们当前所使用的任何持机方式下。当然,有些应用确实只能运行在竖屏或横屏当中;如果你的应用是这样,那么你应该参考以下几点原则:
- 应用在启动时只按照默认支持的定向方式进行加载,忽略当前设备的屏幕方向。如果一款游戏或媒体浏览类型的应用只能运行在横屏下,那么就直接以横屏模式启动,即使设备本身是处于竖屏状态的;这种时候人们会明白需要调转屏幕才能正常浏览内容。
- 避免在界面中通过UI元素提示人们调转设备屏幕。直接按照默认支持的定向方式启动应用,这就已经清楚的告诉用户需要旋转设备了,不需要再增加多余的UI元素进行引导。
- 同时支持两种子状态。譬如,如果你的应用只能运行在横屏当中,那么无论当前横屏的方式是Home键在左手边还是右手边,人们都可以正常使用;如果人们在使用过程中将设备调转180度,那么应用最好也可以进行响应,自动调转180度。
如果对于你的应用来说,调转屏幕方向是用户输入方式的一部分,那么你可以通过特定的方式进行订制化的处理。例如,在一款游戏当中,人们需要通过旋转屏幕来产生相应的行为,那么游戏本身就不可以再响应横竖屏切换的规则了。这种情况下,你可以允许用户在进入主线流程之前仍然能够切换子状态(Home键在左手边或右手边),而一旦进入主线流程,那么旋转屏幕就只能用来触发游戏当中的特定行为。
在iPhone上,判断用户在调转屏幕方向时的需求所在,并进行响应。人们从竖屏切换到横屏时,通常是因为想要“看到更多”。如果你只是简单的将内容尺寸放大,那么未必能满足用户的期望。试着调整每一行文字显示的字数,如果需要,甚至是重新调整UI布局,使其能够呈现更多的内容。
在iPad上,尽量支持所有的定向方式,满足用户的期望。由于iPad自身屏幕规格较大,所以上一条中提到的“用户旋转屏幕以便看到更多”的需求是相对较弱的。相比于iPhone,人们不太关注于iPad的设备框架限制,以及Home键的位置,所以在很多时候,人们不会将iPad看做一种有默认定向方式的设备。如果可以,尽量让人们在任何持机状态下都能在iPad中与你的应用进行互动。
在为iPad应用设计横竖屏响应规则的时候,遵守以下几点规范:
- 考虑改变辅助信息或功能的展示方式。虽然你必须确保重要内容始终能够获取用户注意力的焦点,但对于次要信息或功能,可以考虑随着横竖屏切换而改变呈现方式。以iPad内置的邮件应用为例,账户和邮箱列表就属于次要信息(当前选中邮件的详情是主要内容)。在横屏时,次要信息被放置在左侧面板中,而竖屏时,则是呈现在弹出面板里的。对于某些游戏,在横屏状态时的界面边界到了竖屏当中也许需要进行重绘,这就有可能导致边界上下留出额外的空余空间。这种情况下,可以考虑在这些空余空间当中展示一些游戏辅助信息或对象。
- 避免无意义的布局变化。尽量在所有定向方式下都提供具有一致性的体验。具有相似性的体验可以让用户通过已经掌握的使用模式在横竖屏当中轻松操作。如果你的iPad应用会在横屏时以网格的形式展示图片,那么在竖屏时,就没有必要一定更改为列表形式。
- 如果可能,在切换横竖屏时尽量避免对信息内容样式的重新定义。尽量保持内容具有相似的格式样式,特别是对于文字内容来说,不要让用户因为切换横竖屏所导致的版式变化而无法找到之前阅读到的地方。如果有些内容样式必须发生变化,那么要通过动画过渡效果来帮助人们更好的跟随这些变化。例如,当横竖屏切换时,内容当中必须增加或减少一行文字,那么可以考虑在增加和减少的过程里使用渐入和淡出的动画效果。为了让自己设计出更好的横竖屏切换方案,可以想象一下,如果你是在现实世界当中与这些内容进行物理性的互动,那么它们有可能表现出怎样的行为规律。
- 为横竖屏各提供一张单独的启动图片。这样,无论人们在那种持机方式下打开应用,都可以感受到平滑的启动体验。与iPhone当中的系统首屏不同,iPad的系统首屏是支持横竖屏切换的,人们有可能在任何方式下退出前面一个应用,并继续打开你的应用。
弱化文件和文档的处理过程
iOS可以帮助人们创建和管理文件,但这不意味着人们在使用iOS设备时必须思考文件系统方面的问题。
在iOS当中,不存在类似OS X系统中的Finder这样的应用,用户也不应该被要求与文件直接打交道,特别是不该去面对任何会让他们联想到文件源数据或存储位置一类信息的东西,例如:
- 确认打开或保存文件的对话框。
- 关于文件访问权限的信息。
尽量让人们在不需要打开桌面端iTunes的情况下管理各种文档。考虑使用iCloud来帮助用户访问他们在不同设备上的内容。要为用户提供更好的iCould体验,可以参考iCould一节。
如果你的应用提供创建及编辑文档的功能,那么可以尝试提供某种“文档选择器”,帮助用户打开已有文档或创建新文档。理想情况下,这样的文档选择器应该:
- 具有高度的图形化外观。让人们可以轻松的通过图形化的界面外观来识别出他们想要的文档。
- 让人们使用最少量的手势来完成目标操作。例如,通过封面流或网格的形式组织文档,让用户通过滑动手势进行浏览,并通过点击来打开。
- 提供新建文档的功能。不要让用户必须到其他地方创建新文档,而是直接在文档选择器当中点击文档图形上的某种默认占位图片来直接创建。
提示:你可以使用Quick Look预览功能让用户在你的应用中对文档进行预览,即使你的应用并不支持这类文档的打开操作。参考Quick Look一节了解更多。
给用户一种安全感,让他们知道自己的工作成果始终会被保存,除非他们主动取消保存或进行删除。如果你的应用提供创建及编辑文档的功能,要确保这些数据无需用户手动执行也可以得到保存。iOS应用应该承担起帮助用户保存输入内容的责任,无论是他们在当前文档仍然处于打开状态的时候去查看另外一个文档还是切换到其他应用。
不过,如果你的应用的主要功能并不是创造内容,但你需要让人们可以在查看信息与编辑信息在两种模式间进行切换,那么在这种情况下你可以提醒用户对信息变更进行保存。通常,可以在查看信息的视图界面中提供“编辑”按钮,当用户点击了这个按钮之后,就会进入编辑状态,同时原来的“编辑”按钮变为“保存”和“取消”这两个按钮。这种变化可以提醒人们,他们现在正处于编辑模式,可能需要执行保存操作,而“取消”按钮则为他们提供了在不保存变更的情况下直接退出编辑模式的出口。
必要的时候提供设置方式
有些应用可能需要向用户提供安装或设置选项,不过多数应用是不需要的,或是可以推迟必须进行设置的环节。成功的应用可以让多数用户立刻上手使用,而且会在UI当中提供一些可以调整体验模式的方法。
尽量避免将用户打发到系统的“设置”当中进行操作。要记得,用户必须首先离开你的应用才能进入系统的设置,你不会希望鼓励用户这样做的。
如果你能按照目标用户群当中大多数用户的期望来设计产品,就可以减少这种设置方面的需求。如果你需要用户的某些信息,可以首先试着从系统当中存储的用户信息当中进行查询,而不是让用户再次进行输入。如果你决定必须在应用中提供设置功能,可以参考iOS应用编程指南当中的“The Settings Bundle”一节了解更多信息。
如果有必要,让用户尽量在你的应用内部进行设置。在应用内提供设置选项,可以让相应的变更可以直接体现出来,让用户即时的看到变更结果,而无需在你的应用与iOS的“设置”之间进行切换。
如果需要,尽量在应用的主界面中提供设置选项。特别是当设置选项对应着应用的主要任务,或是用户可能频繁的变更设置的时候,最好将相关的设置选项直接放置在主界面当中。如果你要提供的设置功能对用户来说只是偶尔才会用到,那么就尽量将它们放在单独的界面当中。
译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。
(转)iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合的更多相关文章
- (转)iOS7界面设计规范(2) - UI基础 - iOS应用解析
今天再来一发,然后结束掉周六的忙碌,去吃零食,还有冰啤酒:其实现在打嗝还有小龙虾味儿呢. 第二篇更多的是从技术的角度对iOS界面组成原理进行了简单的解析,篇幅很短,可稍作了解:更多关于iOS开发入门的 ...
- (转)iOS7界面设计规范(8) - UI基础 - 术语和措辞
讨厌周一,讨厌一周.今天中午交互组聚餐,却很开心:大家都是很厉害的人,你可以感到他们身上的能量,可以感到有些什么东西正在推着自己尽力向前走.这是一种很健康的状态,同时也很难得,自然越发需要珍惜.从无到 ...
- (转)iOS7界面设计规范(7) - UI基础 - 交互性与反馈
现在只是周日下午,可怎样都觉得整个周末就这样即将过去了,不免沮丧.看了好多集小丸子了,又不免觉得现在其实是在放暑假,可以一天一天的窝在家里做任何事,任何事.再上一篇iOS7设计规范,然后本周末就到这里 ...
- (转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色
明天就是周四了.貌似前几天还在恨周一呢.话说今天几乎开了一整天的会,正经事情没做多少:这种感觉比一整天从早到晚12个小时的忙碌于一件事情还要让人感到疲惫的对叭?那今天的iOS7设计规范更新又是一篇很简 ...
- (转)iOS7界面设计规范(1) - UI基础 - 为iOS7而设计
今天开个新坑.其实老早就想做这事儿了.记得前一两年,苹果官方还会在开发者中心提供中文的HIG(Human Interface Guideline),后来给没了:网上能够找到的中文版本不知是官方还是同行 ...
- (转)iOS7界面设计规范(12) - UI基础 - 品牌
重要:这是针对于正在开发中的API或技术的预备文档(预发布版本).虽然该文档在技术精确度上经过了严格的审核,但并非最终版本,仅供苹果开发者计划的注册会员使用.苹果提供这份机要文档的目的,是帮助你按照文 ...
- (转)iOS7界面设计规范(6) - UI基础 - 模态情境
继续规范.现在听着Clapton的Wonderful Tonight,想想看,整个高二暑假都在为这首歌着迷,经常夜里一边做英语暑期作业一边循环这首歌,心里特别静的赶脚.13年过去了,再听起来,就像隔着 ...
- (转)iOS7界面设计规范(4) - UI基础 - 布局
好吧,第四篇的样子,节奏还好:我怎么又是刚吃过小龙虾的状况呢. 今天的话题是布局,篇幅很短:我自己好喜欢这样,在还有些剩余时间和精力的情况下,一个话题一个话题的推进,做做译文,并热切的希望这些内容在自 ...
- (转)iOS7界面设计规范(3) - UI基础 - 启动与退出
周二晚间来第三发,搞得好像今天是周六的赶脚.发掉之后再奖励自己一点冰啤酒吧,然后扑床去.天气热起来了,各位注意防暑降温呗.走起. 重要:这是针对于正在开发中的API或技术的预备文档(预发布版本).虽然 ...
随机推荐
- JSTL配合正则表达式在JSP中的应用
<%@ page language="java" import="java.util.*,cn.com.Person" pageEncoding=&quo ...
- (转)SQL Server 2008将数据导出为脚本 [SQL Server]
之前我们要将一个表中的数据导出为脚本,那么只有在网上找一个导出数据的Script,然后运行就可以导出数据脚本了.现在在SQL Server 2008的Management Studio中增加了一个新特 ...
- asp.net 面试基础题
WebSite和WebApplication的区别1)当改变后台代码时,WebApplication需重启浏览器或者重新生成解决方案,而WebSite则不用:2)WebSite没有Solution,没 ...
- ORACLE之SQL语句内部解析过程【weber出品】
一.客户端通过监听连接到数据库,数据库开启一个server process进程来接收客户端传过来的sql. 1.这条sql语句从来都没有被执行过.(硬解析) 2.这条sql语句被执行过.(软解析) 二 ...
- 读书笔记_Effective_C++_条款二十四: 若所有参数皆需类型转换,请为此采用non-member函数
class A { private: int a; public: A(int x) :a(x){} A operator*(const A& x) { return A(a*x.a); } ...
- mysql定时执行及延时执行,实现类似sql server waitfor功能
熟悉SQL Server的人都知道,它有一个很有用的功能,waitfor time和waitfor delay,前者表示在某个时间执行,后者表示等待多长时间执行.在我们测试功能和定时执行的时候特别有用 ...
- angular ng-bind-html 对src路径失效 解决方案
json内容 ;<img src="/newsfile/1506271512489.jpg" width="600" height="450&q ...
- js版iphone通讯录分组列表效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- 判断Python输入是否为数字
在接收raw_input方法后,判断接收到的字符串是否为数字 例如: str = raw_input("please input the number:") if str.isdi ...
- http://www.cnblogs.com/zhuli19901106/p/4356419.html
http://www.cnblogs.com/zhuli19901106/p/4356419.html