Hi, I'm Facai Wo, a ux designer at Shanghai.
Here I will share some understanding about design and feel free to share your idea.

iOS HIG 摘录

读了好久,终于把苹果的官方ios hig文档看完了。了解了苹果的设计原则,对用户的尊重,以及对于最有效设计的坚持。曾经读了翻译过的中文文档,不光版本有点久,翻译过来的文字总是感觉不出味道。通过花了N天断断续续的阅读,翻译,终于把这篇文档的大概内容摘录下来,给大家做一个参考,也给自己一个总结。有些句子可能很难理解,推荐还是看原文吧!这里只是摘出来一个大纲和少数的感想。(sorry,从evernote转出来的时候,图片没有上传成功,点此链接查看共享到evernote的带有图片的原文)



iOS Human Interface Guideline
概览

  • 伟大的app非常注重平台特性和人机界面设计原则。

  • 伟大的app需要有一个明确的定义。(这个app的feature是什么,用户群是谁。)

  • 伟大的app根植于细节。

  • 人们渴望在app里找到ios特有的技术。(人们希望在app上能够找到ios设备上所特有的技术,比如multitasking,printing,voiceover。人们认为在app上看到这些技术理所当然,但你却需要很大一部分工作把这些功能和你的app结合起来。)

  • 所有的app都需要一定程度的自定义工作。

平台特性
屏幕显示是最重要的,无论屏幕的大小怎样。pix是我们在图形软件里所用的单位,point是设备上显示上的尺寸。一般情况下,1pix=1point,但是retina上1point=2pix。所以苹果推荐的44*44point的最小点击区域,在iphone4上为88*88pix。设备的转向可能会改变。在iphone上启动画面最好是竖着的,但是对于ipad,用户期望启动画面和他们现在的方向一致。这是ipad与iphone的不同。移动设备用手势而不是鼠标来操作以下为iphone的手势

  • tap            to press or select 相当于鼠标的点击

  • drag           to scroll or pan 为了滚动或平移

  • flick            toscroll or pan quickly 快速滚动或平移

  • swipe          in a table view,to reveal the Delete button

  • double tap   to zoom in or out   用于快速缩放至内容的中心

  • pinch          to zoom in or out 用于缩放

  • touch and hold    在可编辑文字区域,显示光标位置

  • shake         摇晃  启动撤销或者重做命令

关于multitasking。在ios4 和之后的版本,当当前app退出后,会停留在后台,直到被唤醒或者终止。multitasking的ui在屏幕的最底部。当app被唤醒的时候恢复关闭时的状态,而不用重新加载界面。最小化app的帮助尽量让app简单易用,就像苹果原生的应用一样。用safari浏览网页内容用户可以zoom in 或者zoom out 来缩放网页,同样可以平移网页。safari支持cookies,html5 和css3.你可以用heml5的<audio><video>标签来嵌入视频音频,用css3的transform,transition,animation,来实现2d或者3d动画。话说回来,ios上的safari是目前对heml5和css3支持最好的浏览器。safari会把tap解释为电脑上的onclick事件,其他的如hover则不支持。safari支持web app的全屏显示,以使得他们看起来更像本地应用。用户界面设计准则一个伟大的用户界面设计遵循着一个原则,以用户的思考和操作为中心,而不是设备有多牛。一个漂亮的直观的,引人注目的界面能增强应用的功能,能造成用户的粘性。1美学完整性美学完整性不是说界面多漂亮,而是外观与功能结合的多好。
2一致性一致性不是对其他app的抄袭,而是能够很好地利用标准控件和范例。让人们的操作习惯可以迁移。与苹果ios的标准一致与软件自身一致
3直接操作用两个指头而不是一个缩放按钮来实现缩放。
4反馈用户的操作期望立即得到反馈,以确定操作是否在执行,轻微的动画就能达到很好的效果。慎用声音作为主要的反馈方式,因为用户可能会静音。
5采用比喻当在app中的物体与现实中一样时,用户很快就知道怎么运用它。例如文件夹,游戏中的拖拽,水果忍者中的划等等。
6让用户去控制让用户自己做决定,而不是应用。最好的应用在给用户权利和避免错误操作之间能够达到很好地平衡。在做出可能有破坏性的操作时,确定一下;应用设计策略所有伟大的app开始都有一个很好的想法但是想法到成功不是一条简单的路,下面将会有一些策略。给你的app下一个明确的定义做这个app的主要目的是什么,用户群是谁?具体方法如下:列出所有的你认为用户可可能会喜欢的功能。头脑风暴,不要怕多,之后会逐步减少的。定义你的用户特征。除了你的用户是移动的,并且期望漂亮的界面,简单的交互,考虑一下具体的特征。通过用户定义,过滤出做主要的功能。将这一方法贯穿开发的始终。为设备而设计拥抱ios的ui paradigms控件看起来应该是可点击的应用结构应该简洁,容易导航。ios提供了navigation bar实现层级导航,tab bar 实现不同组的内容间的导航。用户反馈轻,但是简单明确。重新考虑 web-based design网页常常是多任务的,但是app常常需要目的明确确保你的app可以让用户做些什么。为触摸而设计让用户尽情的滚动吧,虽然网页上大多内容在第一屏,但移动设备上滚动才是王道。重定位主页的icon。剪裁你的自定义ui使之符合任务的需要每个自定义ui都有他的原因。如果你的应用包含很多详细数据的操作,人们希望它易于理解,多数是标准的ui。如果是内容为主的app,不要让你的自定义ui太抢眼。如果是游戏,或是故事驱动的体验,那还是自定义吧。尽可能减小用户的认知负担。保持一致性。不要让ui盖过内容重新设计一个标准控件时,请慎重。原型当开始投入工程师开发程序之前,先用原型来测试下。可以是纸面原型,线框图,或者更简单一点用xcode模板。案例研究:过渡到ios有时候把桌面程序或者网页变成app比从头开始还费劲。首先,考虑人们是怎样用ios设备的:移动设备与电脑不同,两者有完全不同的用户体验。人们往往是在路上或其他地方使用移动设备,容易分散注意力。所以,你的任务是把用户拉进来,让用户尽可能快而容易的沉浸其中。记住2/8法则。大部分用户只用到app的很少功能 。所以你不需要列出所有的功能。从桌面浏览器过渡到safari用户体验参考
1 聚焦在最主要的任务上    分析每一屏都需要哪些内容。当你想在屏幕上加一些东西的时候,问问自己这个信息或者功能,用户现在需要吗?如果不,那么他或许应该放在别的地方或者考虑他是不是真的必要。2 评估用户真正感兴趣的内容在游戏中,用户在乎体验的过程,不愿管理,消费,产生内容,你只需要让游戏的故事动人,画面漂亮。如果不是开发游戏,下面有一些建议:

  • 尽可能减少控件的数量,以减少他们在ui中的权重。

  • 轻微的自定义一下控件,使他们符合你的ui特征。

  • 当一些控件暂时不需要的时候,隐藏他们吧,当需要的时候再出来。

3 将经常用到的放在上面的位置,因为最容易看到,和触摸。当用户从上到下浏览时,信息应该从概括到详细,从高级到低级。4 让用户明白逻辑上的流程放一些标记,如返回按钮,让用户知道他们在哪,该如何操作。在大多数情况下,只给用户一条路径。5让使用简单,明显试着让用户立刻就能明白你的app是干吗的,你不能假定他们有很多时间来学习。让主要的功能立刻显现出来。你可以这样做:

  • 最小化表示选择的控件数目

  • 合适的使用标准控件和手势,符合用户的预期

  • 正确的标示控件上的标签,让人明白他在干什么

与内置的app使用方式保持一致。用户明白怎样在具有不同层级的屏幕之间导航,怎样用tab bar切换应用的模式,6减少用户输入输入内容会花费大量时间。让用户输入选择时变得容易。使用表格或者picker。而不是让用户输入。从系统获得信息,如果能的话。比如用户的通讯录,日期等。7 减少文件操作在ios里并没有像finder一样的程序,尽量减少像保存文件,操作文件的属性等。8加强用户之间的联系。尽管ios是私人的设备,但是它同样鼓励用户之间的合作和交流。当适合的时候,与其他用户分享信息,比如他们的位置,观点,和最高分等等。人们很希望分享对他们来说很重要的信息。当一款应用允许与其他人,应用或者设备共享数据时,他的价值就会大大增加。对于ipad考虑一下可能会有两个人在使用同一台设备。比如,两个人可能对着玩一个游戏,或者一款乐队应用可以让不同的人分别敲鼓,弹琴等。
9 弱化settings如果能的话,避免在你的app里出现settings。setting里一般是用户很少改的内容,而且当打开setting时必须先退出当前的app 。当你设计一个用户期望的app时,减少settings,如果你需要用户的信息,从系统中查询,而不是让用户输入。让用户使用app的配置选项来配置app。配置选项让用户在不离开app的情况下就可以设置。在主界面提供配置选项,或者on the back of a view。根据这个选项重要程度和使用频度来决定他是放在主界面还是放在back if a view。下面有两个例子:在主界面放最主要的功能和用户希望经常改动的。ipad的calendar允许人们以日,星期,月来查看日程,这些配置选项在主界面,因为查看日历的不同方面是一个主要的任务,而且人们经常要切换。当一个选项不是那么长用的时候,就把他放在 back of a view,比如Whether,尽管提供摄氏度和华氏度很重要,但是人们并不会经常改,所以把他放在back of the Whether view,仍然可用,但不会太扎眼。
10 适度的使用品牌元素合适的使用品牌颜色和图像,避免从用户关心的内容中拿走空间,不要看起来像广告。比如在顶部的bar之下再放一条什么也不做只是关于品牌的广告,既减少了内容的空间,又让人反感。一种合适的不那么扎眼的方式是自定义一个背景。
11 让你的搜索快速,并且有价值如果应用中要显示或处理大量数据,搜索是一个有效的方式。以下有几条原则:

  •    为你的数据建立索引。

  •    实时地过滤信息,使结果更快的呈现。

  •    如果需要两三秒来呈现实时搜索,那还是算了吧。

  •    把搜索条放在list上方

  •    当他们可用时,立刻显示placeholder content,和部分搜索结果,如果必要的话。 If necessary, display placeholder content right away and partial results as they become available.)

  •    如果搜索结果天然分成几类,提供一个范围选择条。( Consider providing a scope bar if the data sorts naturally into different categories.)

   12 给app写一个描述确保避免所有语法拼写错误。减少大写字母的数量描述重要bug的修复13 让ui元素保持一致性原文说了一大堆,其实就是说遵照苹果的规范,自己别乱改~~控件用默认的,图标尽量用默认的等等。
14 考虑写实性想象你设计的东西或场景是与用户交流的,来表达app的实质,不要觉得必须保持完全的相似。通常情况下,一个夸张或者增强的portrayal,比一个仅仅是“像”的设计,看起来更加真实。使用动画增强应用的写实性。
15 用漂亮的图形取悦用户如果使用了木纹,皮革等,确保他们看起来真实,并且值得。创造高分辨率的图像,如果可以。
16 搞定屏幕方向的改变不论屏幕如何旋转,始终聚焦于主要内容上。当你想阻止用户旋转时,再三考虑。因为人们有那个期望,如果能满足的话最好。如果只能在一个方向上,你应该:

  •    在登录的时候就使用所支持的方向,不论当前方向如何。

  •    不需要加上一个元素说可以支持旋转,多此一举。

如果你的应用需要对旋转进行反应,比如游戏,可以使用app-specific 方式。如果屏幕布局比较复杂,考虑使用one-step change当用户旋转屏幕时,了解用户的根本需求。很多时候用户旋转到横屏,是为了看到更多内容,如果你仅仅是把元素放大,就没什么意思了。在ipad上,用户期望在所有方向上使用设备。下面有几条原则:

  • 考虑如何重新呈现附加信息或者辅助功能。尽管我们要求始终应该聚焦在最主要的信息上,但是你可以改变一些附属的内容呈现的方式。

  • 避免布局上的gratuitous changes

  • 如果可能的话,避免文字在旋转时格式的改变。人们会找不到刚才读到哪了。如果必须改变格式的话,使用一个动画,让人明白他是怎么变的。

  • 为每一个方向做一张登陆图片。


17 让目标的大小和指尖一样屏幕的大小会变,可之间的大小不会变,建议至少44*44pix。
18 使用轻微的动画来交流动画如果不影响主任务的进行,或者减慢速度,是一个很好的与用户交流的方式。适度的动画可以

  •    Communicate status

  •    提供有用的反馈

  •    增强直接操作的感觉

  •    帮助人们看到操作的结果

加动画一定要深重,有时候动画会起到反作用,降低app的表现。加的动画尽量与内置的app一致,如果可以。因为人们习惯了。动画同样要保持一致性。
19恰当的支持手势

  •    不要给常规的手势赋予不同的意义

  •    仅仅使用复杂的手势当做快捷键,而不是唯一实现的方式。

  •    避免定义新的手势

  •    对于ipad考虑使用多手指手势。包括gestures made by more than one person


20 只有必要的时候才要求用户保存iOS apps should take responsibility for saving people’s input, both periodically and when
they open a different document or quit the application。
21 Make Modal Tasks Occasional and Simple
22 启动要快速

  •    显示一个登录图像

  •    避免任何类型的startup体验,阻止用户立刻使用app

  •    在iphone上选择合适的status bar style

  •    避免让用户提供setup信息

  • 考虑到2/8法则,当前的设置已经满足了大多数用户,不需要在提供setup information。

  • 从其他地方得到尽可能多的信息。

  • 如果必须要setup information,让用户在你的app里输入。

  •    存储用户退出时的信息。  


23 时刻准备着退出用户可能因接电话或者按了home键退出了程序,所以尽可能快而且经常性的存储资料,当退出时,存储当前的资料。
24 不要让程序自动退出用户会以为系统崩溃了。提供一个警告框,说明问题。
25必要的话,提供版权声明。
26 对于ipad  增强交互体验,而不只是增加功能。最好的ipad应用往往使用极具创新的方式与用户进行交互,他们有一个明确的定义,确定的任务。     不要加上那些与主任务无关的功能。反而应该想一些方法让用户看到更多内容,和用户有更多交互。让你的ipad应用脱颖而出,尽可能的加强你的用户体验。
27 for ipad 减少Full-Screen TransitionsYou can use UI elements such assplit viewandpopoverto lessen the need for full-screen transitions.
28 for ipad  限制你的信息层级使用ipad的大屏让用户从一个地方得到尽可能多的信息。尽管并不愿在一屏放太多东西,但你并不想让人们觉得需要看很多屏才能找到所需的信息。     总体来说,把主屏聚焦在主要内容上。然后在附加的视图上显示额外的信息。     在 split view 的又半部分添加导航条允许人们到达上一层级。     Use anavigation barin the left pane of a split view to allow people to drill down through a fairly shallowhierarchy. Then, display the most specific information (that is, the leaf nodes in the hierarchy) in the right
pane.     Use apopoverto enable actions or provide tools that affect onscreen objects. A popover can display theseactions and tools temporarily on top of the current screen, which means people don’t have to transition toanother screen to get them.     Use asegmented controlin a toolbar to display different perspectives on the content or different information categories。     Use atab barto display different information categories or, less often, different application modes. In iPadapplications, a tab bar is more likely to be used as a filter or category switcher than as a mode switcher.
29 for ipad 把所有的tool  bar 移到顶部。


ios技术使用参考(iOS Technology Usage Guidelines)     ios提供了很多大家非常喜欢的技术,比如多任务,复制粘贴,local notifications,push notifications。对于用户来说这些都是ios的一部分,但要把他们用到你的app里,还得花些功夫。Multitasking(多任务处理)多任务处理允许人们快速的在最近使用的app之间切换,因为app在退出的时候可以挂载在后台。一个挂载在后台的app可以不用重新加载ui而快速启动。但是这对app提出了更高的要求:

  • 时刻准备着程序被中断,然后重新开始

  • 保证你的ui可以搞的定两倍高的状态栏。

 

  • 当人们从游戏或其他app退出时,保证他们进来时和出去时是一样的。

  • 保证你的音频工作的很好

  • 正确的使用本地通知

  • 可以的话,在后台把用户启动的任务完成。

iAd 富媒体广告在ios4或之后的版本,你可以在你的app里嵌入广告,获得分成当用户浏览的时候。
Quick Look Document Preview(快速预览文件)在ios4和之后的版本,用户可以在你的app里预览文件,即使你的app并不能打开。比如你可能允许用户预览下载的或从别人那接受的文件。
sound (声音)明白用户的期望。静音在用户只是为了产生声音时不起作用。比如:

  • 媒体播放

  • 闹钟

  • 语言学习软件

  • 语音聊天软件等

不论你用了什么技术,电话总是可以打断当前运行的app,没有什么比一个来电更重要。
VoiceOver and Accessibility
Edit Menu用户使用编辑菜单在text view,web view,image view里实现剪切,粘贴,选择等操作。你不能改变编辑菜单的颜色和形状。Undo and Redo用户通过摇晃来启动撤消操作。然后会显示alert

  • 撤销

  • 重做

  • 取消

你可以以一种更通用的方式来指定:

  • 用户可以撤销或者重做的动作

  • 可以支持多少步的撤销

Keyboards and Input Views
自定义的输入视图可以替换掉系统的输入键盘。Location Services
Local and Push NotificationsLocal and Push Notifications允许你在app并不在前台运行的时候告诉用户一些东西。比如:

  • 告诉用户有新的短消息

  • 一件事将要发生

  • 新的数据能够下载

  • 某些数据已经被改了

local notifications是由app scheduled,由ios来发送,不管当前app是否在前台。比如:calendarpush notification是由app的远程服务器发送到apple push notification的服务器,再发送到所有装了这个app的设备上。当local 或者push notification 到达时,app如果没在前台运行,你可以用下列方式通知用户:

  • 在homescreen的app图标上显示小红圈。(当消息并不十分紧急的时候)

  • 显示一个alert(消息十分重要)

声音在这里可以使用。如果app正在运行,你可以根据app的需要来显示信息。

ios ui元素使用参考(iOS UI Element Usage Guidelines)ios提供了强大的ui框架。bars
状态条(The Status Bar)当你将要隐藏状态条时请慎重,因为用户必须退出app才能看到时间,电池电量等。ipad的状态栏只有一种,二iphone则有三种。灰色,纯黑,黑色带50%的不透明度。导航条(Navigation Bar)使用当前视图的标题作为导航条的标题,左边为返回上一层,右边按钮为对当前内容的操作。考虑在顶部放一个segment bar ,如果这能够使你的内容层级变浅。(如下图)导航条是可以透明的如果你觉得合适的话。不要创建多级返回按钮。如果你觉得不得不创建这样的面包屑导航,那说明你的层级太深了,考虑用别的方法使层级扁平化。不要忘了,屏幕旋转的时候,导航条的高度是会变的。
工具条(tool bar)在iphone上tool bar 通常在底部,但在ipad 的顶部。同样旋转后,在iphone上tool bar的高度会发生变化,ipad则不会。
tab bartab bar无视设备旋转,高度是不会变的。不论在app的任何位置,都要accessible。(很重要)最多可显示5个tab,多余的会显示在more里面。不要用tab bar来表示对当前元素的操作,这应该用tool bar。正确使用tab bar 的方式是在应用的层级上组织信息。安排app的结构。有效的扁平化app 的层级。在ipad上考虑把他tab bar结合split view 或者popover来用。tab bar上有一个小红圆圈带着白色数字,可以提示有新的信息等等。这个比较特别。在ipad上尽量控制tab的数目在7个以下,多了就会增加app的复杂度。内容视图(content view)
popover(ipad only)popover视图可以包含很多控件和视图。比如:

  • Table, image, map, text, web, or custom views

  • Navigation bars, toolbars, or tab bars

  • Controls or objects that act upon objects in the current application view

你可以用popover view来显示当前选择对象的额外信息。显示split view的左半部分,当旋转到竖屏的时候。当用户点击popover之外的时候,记得保存信息。不要把popover弄得太大。确保popover的宽度在320point到600之间。
split view
每个部分都可以包含下列对象或视图。 ● Table, image, map, text, web, or custom views ● Navigation bars, toolbars, or tab bars.与popover相比少了Controls or objects that act upon objects in the current application view。
表格视图(table view)表格视图有一列,多行。ios定义了两种类型的表格:plain ,groupedplain table 在表格右侧可以有可选的index,table可以有header和footer。grouped table没有index,同样有header和footer。对于表格视图有一些特有的表格元素可以扩展表格视图的功能,除非特别说明,这些元素只用于表格视图。表格视图有几种不同的显示方式,每种有特定适合的用途。默认subtitlevalue1value2以上所有的表格类型都可以添加表格元素。使用参考:

  • 你可以使用表格提供一个可选择的列表。(当显示的元素上级是在table里的时候,可以用plain style 或grouped,若不是则用plane style)

  • 使用table来显示层级信息

  • 来显示逻辑上成组的信息

  • 显示带有索引的信息,如通讯录等。(当使用索引的时候,避免使用其他表格元素,因为会遮挡)

  • 当用户选择一个条目的时候,提供反馈。(当选择的时候高亮条目,当选择后显示一个新的视图,或者打钩表示当前已选等)

  • 考虑为用户对条目的操作添加动画。

  • 如果表格包含很多内容,不要等所有都加载完再显示,可以先显示一部分简单的信息。

  • 如果数据加载很慢,给用户一个信号说明正在加载。

  • table行高要一致




text view(文本视图)text view是一个圆角矩形,高度自定。并且支持滚动,如果内容太多的话。如果text view允许用户编辑,那么当点击的时候会出现键盘,键盘的输入模式由用户的语言设置决定。对于text view,你可以控制字体,颜色,对齐,但只能是全部,不能对部分字符进行控制。默认是黑色的系统字体,左对齐。
web view(网页视图)web view可以显示html。web view会对web内容做一些处理,比如会把电话号码转换为一个电话的链接。不要使用web view去创建类似浏览器的东西,因为已经有safari了。
Alerts, Action Sheets, and Modal Views这三种视图都是临时性的,出现时用户不能和app的其他部分进行交互。
alert(警告)一个警告框至少有一个按钮,用户点击后令警告消失。警告框通常有一个标题,和一小段内容。警告框的背景是系统定义的,不能改变。一个本地的或者推送的信息同样可以使用警告框。避免频繁使用alert。以下情况下都没有必要:

  • 仅仅是为了让某些信息更加明显。重新设计

  • 通知正在进行某项任务。使用progress bar 或者indicator

  • 向用户确认某项任务。使用action sheet 而不是alert

  • 告知用户一些他们也无能为力的错误。

alert text的书写需要注意很多地方:

  • 告诉用户当前的情况,以及他们可以怎么做。

  • 标题简短,尽量在一行上。

  • 避免像 “错误” “警告” 这样毫无意义的标题。

  • 不要使用“你”“我”“你的”等之类的词。

  • 合适的使用大写。

  • alert message太长会出现滚动条

  • 在两个方向上测试alert

  • 一般情况下,使用带有两个按钮的alert

  • 正确的使用alert btn的颜色,在两个按钮的情况下,左边的往往是暗的右边是亮的,若只有一个,则是亮的。

  • 给alert btn合适的标题。使用动词比如“取消”“忽略”等等

action sheetaction sheet用来显示一组由用户触发选择。action sheet通常至少有两个按钮让用户选择下一步的操作是什么。在ipad上action sheet通常与popover一起。使用参考:

  • 提供可选的不同方式完成一项任务

  • 在完成一项危险的动作之前再次确认。

  • 在iphone上使actionsheet的背景与导航条及工具条相适应。

  • 在action sheet上加一个cancel按钮,这样用户就可以安全的放弃当前的操作。

  • 使用红色的按钮表示危险的操作

  • 在action sheet上避免滚动


Modal View
modal view覆盖了整个应用的屏幕,加强了用户进入一个相对独立的可以完成某些事的模式的感觉。modal view可以显示text view如果需要的话。通常情况下会包含一个取消按钮,和一个完成当前任务的按钮。使用参考:

  • 当你需要完成一个相对独立的不属于主任务的操作时。比如写邮件,发信息等。

  • 在ipad上选择合适的modal view 样式

    • 全屏。当需要完成一个相对复杂的任务时。

    • page sheet。固定宽度768point。

    • form sheet。540*620point。位于屏幕中央。

    • current context。使用当前上一级视图的大小。

  • 为当前的任务提供一个标题。

  • 当显示modal view的时候选择一个合适的动画。


controls(控件)
activity indicator表示当前任务正在进行,当任务完成时,自动消失。默认情况下,它是白色的。合适的话,自定义activity indicator的大小和颜色,与当前的背景一致。date and time picker
他的大小是固定的。和iphone的键盘一样大。date and time picker有四种模式:

  • date and time  显示日历日期,小时,分钟和可选的上下午。默认为此种模式。

  • Time   显示几点几分,上下午可选。

  • Date   显示日月年。

  • countdown number

Detail Disclosure Button当需要显示一个与当前对象相关的额外信息时,使用Detail Disclosure Button,在一个独立的视图中显示内容
Info Buttonios有两种形式的info btn,一种暗的,一种亮的。
Label用标签来显示静态的文字。
Network Activity Indicator
Page Indicator
pickerpicker用来显示一组用户将要选择的选择项。对于picker,用户最好知道其余的选项是什么,因为大量的选项是隐藏的。如果你有很多未知的选项,慎重选择。考虑使用table view,如果你的选项很多。因为大量数据下,table滚动的快些。

Progress View(进度条)进度条用来显示已知总时间的当前进度情况,进度条有两种样式:

  • default style

  • bar style

Rounded Rectangle Button(圆角矩形按钮)圆角大小与grouped tableview一致,默认按钮的背景是白色的。
Scope Bar(范围选择条)scope bar允许用户定义搜索的范围,他必须和搜索框一起使用。
search bar(搜索条)搜索条可以附加一些可选的元素:

  • 搜索框里默认的文字

  • 书签按钮

  • 清空按钮

  • 一个描述性的标题

search bar有两种样式,蓝色,黑色。
Segmented Control它的高度是固定的。在iphone上,至多有5个segments。避免图文一起使用。尽管它支持文字和图片。因为位置实在不够大。
slider(滑块)一个滑块由轨道,按钮,两侧可选的图片组成。如果合适的话,自定义滑块的外观。
switchswitch只有在table view里才能使用
text field(文本域)文本域接受单行的用户输入。使用文本域从用户那里得到少量信息,当你想要用文本域之前,考虑有没有其他更好的方式,比如picker 或list等。自定义文本域让用户更好的明白怎么用。比如:你可以用左边的部分(图中的start)来表示目的,右边增加额外的功能,比如书签。让键盘来适应输入的内容。
系统提供的按钮或图标

  • 正确的使用系统提供的图标

  • 避免设计与默认的过度相似的图标

工具条和导航条的标准按钮的使用

pege curl btn允许用户卷起底部的角落,翻看下面的信息比如:Maps自定义图标参考

  • 对于所有的图像建议使用png

导航条,工具栏,tab 条所用的图标

  • 使用白色带有合适的透明度

  • 不要包含投影

  • 使用抗锯齿处理

  • 确保光源为90度

  • 你所提供的用于导航条,工具栏,和tab栏的图标实际上只是作为一个蒙版,ios会自动创建图标的样式。所以没有必要做一个全彩色的。

  • 不需要为按钮的各个状态分别制作图标,系统会自动提供。

  • 确保所有的图标在视觉上是一样大的。


登陆图片让我们看看ios对于登陆图片的要求:

  • 登陆图片看起来应该与app的首屏差不多,给人程序已经加载完成的假象。

  • 不要用登陆图片造成“应用正在登陆”的感觉,比如说闪屏

  • 不要提供一个about页面

  • 不要提供品牌元素,除非他们是你的app首屏的一部分。

ps:但是大家貌似都不是这么做的,大多数app都把首屏当做宣传自己,确立品牌形象的一种手段。但下面还有另外一段话,我们来读读:如果你认为遵循这些原则,会让你的app平凡,乏味。那么你对了。记住,登陆图片不是作为一种艺术化的表达,只是为了让用户感觉你的app登陆很快。下面是setting的登陆图片。

苹果当然可以这么做,他自己的应用,不需要在灌输品牌形象,只需要加载速度。但不知名的app就不得不在登陆图片上做文章了。



评论

© FACAI WO | Powered by LOFTER