课程咨询 : 13964250717 QQ:3040130238

烟台UI培训 > 达内新闻 > 超实用的IOS 9人机界面指南:UI设计基础
  • 超实用的IOS 9人机界面指南:UI设计基础

    发布:烟台达内      来源:烟台达内      时间:2015-11-09

  • 模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息,但是也会临时性的阻止用户对应用的其他部分进行交互操作。

    超实用的IOS 9人机界面指南:UI设计基础

    理想情况下,用户可以与iOS 应用进行一种非线性的交互,所以,尽可能的减少你应用中的模态体验是最好的。通常情况,仅在以下情境可以考虑使用模态:

    • 必须引起用户关注的时候

    • 一个独立的任务需要完成或者很明确需要被放弃,为了避免在模棱两可的状态下遗漏用户信息的时候


    保证模态任务简单、简短和高度聚焦。 你肯定不希望用户使用模态视图时像使用应用中的一个mini应用一样。如果子任务过于复杂 用户会在进入模态情境时忽略了主要任务。在设计一个涉及视觉层次的模态任务时特别要考虑这一点,因为用户有可能迷失并且忘记如何回到之前的操作中去。如果一个模态任务必须包含不同视图的子任务,确保给用户一个独立、清晰的导航路径,并避免迂回。


    始终提供明显、安全的退出模态任务的途径。 确保用户在退出模态视图时可以预期操作的结果。


    一个任务需要多层级的模态视图时 确保用户理解点击非最高层级下的完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分,还是整个任务。因为有可能存在这种困惑,所以要尽可能避免在下级视图中添加完成按钮。


    保证提醒对话框的内容都是必要且可操作的。 提醒对话框会打断用户的体验并且要点击才会消失,所以要让用户感到提醒信息是有用的,打断是有价值的。


    尊重用户关于接收通知的偏好设置。 用户会设置接收应用通知的形式,确保遵重用户的喜好设置,否则可能会触怒用户,导致其关闭应用中所有的推送通知。



    1.7 交互性与反馈(Interactivity and Feedback)

    1.7.1 可交互元素吸引用户点击(Interactive Elements Invite Touch)

    为了暗示交互性,设计时会使用很多线索,包括点击的反馈、颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。

    在支持3D Touch的设备上,当用户按压主屏上的图标时,背景会虚化以此来暗示可以进行更多功能的选择。

    一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了对比,使用蓝色来标记可交互的元素,同时能提供统一的、易识别的视觉风格。

    返回按钮使用多个线索指明其可交互并传达其功能:它出现在导航中,显示了一个指向后方的图标,使用了关键色,并且显示了上一级页面的标题。

    一个图标或者标题提供了清晰的名称指引用户点击它。例如,地图中的标题“Flyover Tour”,“Directions to Here”,清晰的说明了用户可做的操作。结合关键色,就可以省去按钮边界或其他多余的修饰。

    在内容区域,必要时可以给按钮添加边界或背景。 位于栏(Bar)、动作列表(Action Sheet)和警告框(Alert)中的按钮可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,有必要使用边界或背景将按钮从其他内容中区分出来。例如,音乐,时钟,照片,App Store在一些特别的场景中使用这种按钮。

    照片管理中给分享按钮增加了边框,从其他解释性文本中区分出来。

    时钟在秒表和计时页面中给按钮增加背景来强调开始和暂停按钮,并且使按钮在易分散注意力的内容中更容易点击。

    应用商店中使用有边界的按钮,将按钮和整个内容条区分开来,点击整条内容查看详细信息,点击按钮进行下载安装。

    1.7.2 用户所知道的标准手势(Users Know the Standard Gestures)

    用户使用点击、拖拽、捏合等手势与应用和他们的IOS设备进行交互。使用手势拉近了用户和设备之间的距离,并且增强了直接操纵感。用户通常期待手势在不同应用之间都是通用的。


    用户在使用3D Touch时不需要学习额外的手势操作。当用户轻按屏幕并得到反馈时,很容易就能发现3D Touch提供的额外的交互方式。

    除了用户熟悉的标准手势,iOS还定义了一些系统范围内的操作,例如呼出控制中心(Control Center)或消息中心(Notification Center)。用户可以在任意应用下都使用这些手势。

    不要给标准手势赋予不同的行为。 除非你的应用是游戏,否则重新定义标准手势会使用户迷惑,且增加使用难度。

    不要创建和标准手势功能相似的手势操作。 用户已经习惯了标准手势的行为,没有必要让用户额外学习不同的操作手势来达到同样的操作结果。

    可以用复杂手势作为完成某任务的快捷方式,但不能是唯一触达方式。 最好给用户提供一些简单,直接的方式完成某操作,即使这种方法需要他们额外地多点击一到两次。简单的手势能让用户集中于当前的体验和内容,而不是交互操作本身。

    除非是游戏,否则避免定义新的手势。 在游戏或其他沉浸式的应用中,操作手势也是有趣体验的一部分。但是在普通应用中,帮助用户达成目标要比操作本身重要的多,所以最好使用标准手势,尽量避免让用户去发觉和记忆新的操作。

    在特定的环境中,可以考虑使用多指操作。 虽然复杂的操作并不一定适用于所有应用,但对用户会花大量时间使用的应用来说可以丰富体验,例如游戏或创建内容环境。但因为非标准手势可发现性差,要尽量少用,并且不要让这类手势成为完成任务的唯一方式。


    1.7.3 反馈有助于理解(Feedback Aids Understanding)

    反馈帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解他们动作产生的结果。UIKit的操作和视图提供了很多反馈类型。

    尽可能将状态或其他的反馈信息整合到UI中。 用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱将当前的状态显示在不影响当前内容的工具栏上。

    避免显示不必要的提醒对话框。 对话框是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。如果用户常看到很多没有重要信息的对话框,他们很快就会忽略所有对话框提醒。

    1.7.4 输入信息的方式要简单(Inputting Information Should Be Easy)

    不管用户是点击控件还是使用键盘,输入信息都会花费时间和精力。如果在发挥有用的效用前就让用户输入大量信息会减弱用户继续使用的欲望。

    让用户更容易的进行选择。 例如,使用选择器或者表格代替纯文本,因为大部分用户觉得从列表中进行选择要比打字容易的多。

    适时地从iOS中获取信息。 设备上存储了大量的用户信息。可以的话,不要让用户提供你可以轻易找到的信息,例如联系人或日历信息。

    提供有用的反馈来平衡用户的输入。 在使用应用的过程中,付出和回报的概念可以帮助用户感到进程在被推进。


    1.8 动画(Animation)


    细微、精美的动画遍布iOS的用户界面,他们使应用的体验更具吸引力,更具动态性。适当的动画可以:

    • 传达状态和提供反馈

    • 增强直接的操纵感

    • 将用户的操作可视化

    (译者注:以上为视频截图)

    谨慎地增加动画,特别是在那些无法提供沉浸式体验的应用中。 过多和无理由的动画会阻碍应用的流畅性,降低性能,还会分散用户在操作中的注意力。


    尤其是要有目的地,合理地应用动效和UIKit中的动态控件,并确保对结果进行测试。合理地使用动效可以提升用户的理解程度和愉悦感;应用过度使用动效会给用户带来迷惑和难以掌控的感觉。


    如果可以,保持自定义动画和内置动画的一致性。 用户习惯于内置iOS应用使用的精细动画。事实上,用户倾向于把视图之间的平滑切换,对设备方向改变的流畅相应和基于物理的滚动效果看做是iOS体验的一部分。除非,你的应用要给用户提供类似游戏应用的沉浸式体验,这种情况下自定义的动画可以区别于内置动画。


    使用风格类型一致的动画。 自定义动画之间也需要保持一致性,这样可以让用户在使用应用以之前建立的经验为基础。


    一般来说,自定义的动画要考虑动画的现实性和可信性。 人们乐意接受自由的艺术创作,但是当动效不合理或者违反物理学时,用 户会感到困惑。例如,当你从屏幕顶部下滑拖出一个视图的时候,你也要上滑将它收起,因为这么做可以帮助用户记住这个视图从何而来。如果你下滑到屏幕底部关闭这个视图,用户关于从屏幕上方呼起的心理模型就会被打破。


    1.9 品牌推广(Branding)

    成功的品牌推广不仅仅包括在应用中添加品牌元素。优秀的应用应该通过创建独特的外观和感觉来为用户提供愉悦、难忘的体验。

    在iOS系统之下可以很容易地使用自定义的图标、颜色和字体来创建区别于其他应用的UI。当你进行这些元素的设计时,牢记以下两点:

    • 每个自定义的元素本身都需要具备良好的观感和功能性,但它也应该与应用中其他元素保持一致,无论应用中其他元素是自定义的还是标准的。

    • 为了在iOS中感觉舒适,你的应用虽然不必看起来跟内置的一样,但是需要对它的遵从、清晰度和深度(如欲了解更多,参见1 为iOS而设计(Design for iOS))进行整合。花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味,并把它们在你的自定义元素中表达出来。


    当你需要让用户意识到你的品牌时,你应该遵循以下几点:


    以精致优雅不唐突的方式植入品牌元素。 用户使用你的应用来完成事务或者进行娱乐,他们不希望被强迫着去观看广告。为了获得最好的用户体验,你可以通过字体、颜色和图像的设计来潜移默化地地提醒用户你的品牌身份。


    避免远离用户关心的内容。 不要像上图中的反例那样将仅有品牌意义的内容放在屏幕顶部二级栏上持续展示,使正文内容空间被压缩,而是考虑以其他低侵入性的方法无处不在地展示品牌,如使用自定义颜色、字体,或巧妙地定制屏幕的背景。


    抵抗住诱惑,不要把你的 logo 贯穿整个应用。 移动设备的屏幕多数相当小,logo的每一次出现都会占据空间,从而将用户与他们想看的内容隔离开。而且,在应用中显示logo并不能像在网页中显示logo那样达到相同的目的:对于用户来说通常会很容易在不知道网页所属的情况下访问一个网页,但却极少有用户会在完全不看一个iOS系统中的应用图标的情况下就打开它。



    1.10 颜色与字体(Color and Typography)

    1.10.1 色彩有助于增进沟通(Color Enhances Communication)

    在iOS系统中,颜色会用于表明交互,传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。

    如果你要创建多样的自定义颜色,要确保它们能够和谐共存。 例如,如果你的应用的基本风格是柔和的色调,你就应该创建一个协调的柔和色调的色板用于整个应用。


    注意在不同情境下的颜色对比。 例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的颜色是否具有足够的对比度。


    虽然在设备上查看你的应用能够在一定程度上帮助你找到需要调整的地方,但这仍代替 了能产生可靠结果的更科学客观的方法。这种方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。


    当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容。 当你需要创建能匹配特别颜色的栏颜色时(比如一个已有品牌中的颜色),可能在你获得你想要的结果之前,你需要用各种颜色进行实验。栏的显示将会同时受到iOS系统所提供的半透明栏与藏在栏后面的应用内容的呈现所影响。

    API 注: 使用浅色(tintColor)的属性值给予栏按钮颜色,使用栏浅色(barTintColor)的属性值为栏本身赋色。


    注意颜色的盲区。 多数色盲的人很难区分红色与绿色。需要对你的应用进行测试以确保在其中你没有将红色与绿色作为区分两个不同状态或值的唯一方式,一些图像编辑软件或工具能够有效的帮你验证颜色的盲区。通常意义来说,使用多种方式来表征原色的交互性是非常好的


    考虑选择一种基准色颜色来表征交互性与状态。 内置的应用里的基准色包括比如备忘录中的黄色,和日历中的红色等等。如果你定义一种用于表征交互和状态的基准色,要确保你的应用中的其他颜色不会与它发生冲突。


    避免给可交互和不可交互的元素使用相同的颜色。 色彩是表明UI元素交互属性的方式之一。如果可交互和不可交互的元素使用相同的颜色,用户将会难以判断哪些区域是可点的。


    色彩可以向用户传达信息,但不一定会以你希望的方式。 每个人眼中的色彩是不一样的,不同的文化为色彩赋予的意义也是不相同的。花时间来研究如何使用色彩才可能会被其他国家或者文化接受。你要尽可能确定应用中运用的色彩向用户传达了恰当的信息。

    大多数情况下,不能让颜色喧宾夺主,让用户分心。 除非色彩是应用的目的和本质所在,通常情况下色彩应该用来从细微细节之处提升用户体验。


    1.10.2 优秀的排版提供清晰的传达(Great Typography Enables Clear Communication)

    Apple为全平台设计了San Francisco字体以提供一种优雅的、一致的排版方式和阅读体验。在iOS 9及未来的版本中,San Francisco 是系统字体。

    San Francisco搭配Dynamic Type,可以为您提供:

    • 一系列的字号大小,在任何用户设置,包括可访问性设置下,可获得优质的清晰度和极佳的阅读体验。

    • 自动调整文字的粗细,字母间距以及行高的能力。

    • 为语义上有区别的文本模块指定不同的文本样式,比如正文、脚注或者标题。

    • 文本可以根据用户在字号设置和可访问性设置中指定字体大小的变化作出适当的响应的能力


    下载San Francisco可访问 https://developer.apple.com/fonts/.(注意:iOS9中的San Francisco字体取名为SF-UI)。当你在你的app中采用San Francisco时,你可以调整模拟器>设置中的值来测试在不同尺寸下你的app的文本。


    注: 如果你是用自定义字体,你仍然可以采用Dynamic Type或根据系统的字号设置来规划字体范围。当用户改变设置时,你的应用也必须响应式的配合。如需了解如何使用文字样式并确保当用户改变文字型号设置时你的应用能够获取通知,可以参考Text Styles.


    San Francisco 有两类尺寸: 文本模式(Text)和 展示模式(Display)。 文本模式适用于小于20点(points)的尺寸,展示模式适用于大于20点(points)的尺寸。当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换。


    注: 如果你使 应用程序如Sketch或Photoshop来生成你的设计,那么当你设置的字体不小于20点的时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。(字间距是以用作于修改文字间距)。表格10-1 和 10-2分别是文本模式(Text)和展示模式(Display) 在不同字号下的间距值。

    为了突出某些文字或者为了在内容块之间建立视觉关联,你可以依赖由Dynamic Type支持的语义化样式,如标题、正文,你也可以指定字体权重,如细体或者半粗。使用 Dynamic Type样式使得你的内容能更好地表达含义,但如果你想要对你的设计有更好的把控能力,你可以对特定的文字设置特定的权重。


    例如,你可能想要增加某些文字的权重,来帮助用户可视化你的内容的层次结构,或者把用户的注意力吸引到特定的词或短语。


    另外,你可以通过增加较小文字的权重和减小较大文字的权重,在多个不同字号的、相邻的标签中建立视觉凝聚。字体权重在内容的整体风格和表达中有重要影响,因此你可以选择特定的权重来达到设计目的。


    文本尺寸的响应式变化需要优先考虑内容。 并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时,他们是想要使他们关注的内容更容易阅读;他们并不总是想要屏幕上的每个单词都更大。


    例如,当用户选择具备更大易用性的文本尺寸时,邮件将会以更大的尺寸显示邮件的主题和内容,而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。

    确保一个自定义字体在不同尺寸下的所有类型都具备可读性。 实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。

    例如:

    • 文本永远都不应该小于11点(points),即使是用户选择极小的文本尺寸。相较而言,内容样式使用17点的字号作为大尺寸,这也是默认的文本字号。

    • 通常来说,字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式,它们在极小、小和中尺寸的设置中均使用相同的字号、行距和字距。

    • 在最小的三种文本尺寸中,字间距相对较大;而在最大的三中文本尺寸中,字间距相对紧凑。

    • 标题和内容的样式使用相同的字体尺寸,同时,为了区分标题与内容样式,标题样式使用更重的值。

    • 导航控制栏的文本使用相同的字号,而内容文本的样式则使用大尺寸的设置(值为17点)。

    • 文本总是使用常规或者中重,一般不适用轻或者加粗。

    通常情况下,应用中整体应该使用单一字体。 多种字体的混杂会使你的应用看上去支离破碎和草率。相反,使用一种字体和少数样式。根据语义用途,使用UIFont类的API来定义不同文本区域的样式,比如正文或者标题。

    推荐文章

上一篇:带你从头开始认识UI设计师

下一篇:Win10 Mobile被曝将有重大UI/UX升级

最新开班日期  |  更多

平面设计免费训练营

平面设计免费训练营

开班日期:2015年12月30日

第一阶段 平面设计培训

第一阶段 平面设计培训

开班日期:12.28

第二阶段 AUI 商业美术

第二阶段 AUI 商业美术

开班日期:12.29

第三阶段 网页界面设计培训

第三阶段 网页界面设计培训

开班日期:12.30

  • 地址:海港路25号阳光100城市广场A座0402
  • 课程培训电话:13964250717 QQ:3040130238     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tarena.com.cn
  • 2001-2015 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56

    http://t.cn/RU1NFHv> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fef86a8e0cde22969cb8f7a05c8ef3ef0' type='text/javascript'%3E%3C/script%3E"));