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

   1.1 为iOS而设计(Designing for iOS)

  iOS 表现了以下三大设计原则:

  遵从(Deference):UI应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力。

  清晰(Clarity):各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计。

  深度(Depth):视觉的层次感和生动的交互动画会赋予UI新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦。


  无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下列方法进行设计考虑:

  首先,去除掉UI元素让应用的核心功能突显出来,并明确之间的相关性。

  然后,使用iOS的主题来定义UI并进行用户体验设计。完善细节设计,以及适当合理的修饰。

  最后,保证你设计的UI可以适配各种设备和各种操作模式,使得用户在不同场景下都可以享受你的应用。

  在整个设计过程中,时刻准备着推翻先例,质疑各种假设,并以内容和功能视为重点来驱动每个细节的设计。

  1.1.1 设计跟随内容 (Defer to Content)

  尽管清新美观的UI和流畅的动态效果都是iOS体验的亮点,但内容始终是iOS的核心。

  这里有一些方法可以确保你的设计既可以提升功能体验,又可以关注内容本身。

  充分利用整个屏幕。系统天气应用是这个方法的绝佳范例:用漂亮的全屏天气图片呈现现在的天气,直观地向用户传递了最重要的信息,同时也留出空间呈现了每个时段的天气数据。


  重新考虑(尽量减少)拟物化设计的使用。遮罩、渐变和阴影有时会让UI元素显得很厚重,导致影响到了对内容的关注。相反,应该以内容为核心,让用户界面成为内容的支撑。


  用半透明UI元素样式来暗示背后的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在iOS中,半透明的控件元素只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸——它并没有遮挡屏幕剩余的部分。


  1.1.2 保证清晰 (Provide Clarity)

  确保你的应用始终是以内容为核心的另一个方法是保证清晰度。这里有几种方法可以让最重要的内容和功能清晰可见,且易于交互。

  使用大量留白。留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。


  让颜色简化UI。使用一个主题色——比如Notes中用了黄色——高亮了重要区块的信息并巧妙地用样式暗示可交互性。同时,也让应用有了一致的视觉主题。内置的应用使用了同系列的系统颜色,这样一来,无论在深色或浅色背景上看起来都很干净,纯粹。


  通过使用系统字体确保易读性。iOS的系统字体(San Francisco)使用动态类型(Dynamic Type)来自动调整字间距和行间距,使文本在任何尺寸大小下都清晰易读。无论你是使用系统字体还是自定义字体,一定要采用动态类型,这样一来当用户选择不同字体尺寸时,你的应用才可以及时做出响应。


  使用无边框的按钮。默认情况下,所有的栏(bar)上的按钮都是无边框的。在内容区域,通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。当它被激活时,按钮可以显示较窄的边框或浅色背景作为操作响应。


  1.1.3 用深度层次来进行交流 (Use Depth to Communicate)

  iOS经常在不同的视图层级上展现内容,用以表达层次结构和位置,这样可以帮助用户了解屏幕上对象之间的关系。

  对于支持3D触控的设备,轻压(Peek)、重压(Pop),以及快捷操作(Quick Actions)能让用户在不离开当前界面的情景下预览其他重要内容。


  通过使用一个在主屏幕上方的半透明背景浮层,这样文件夹就能清楚地把内容和屏幕上其他内容区分开来。


  如图所示,备忘录(Reminders)以不同的层级展示内容条目。用户在使用备忘录里的某个条目时,其他条目会被集中收起在屏幕下方。


  日历具有较深的层级,当用户在翻阅年、月、日时,增强的转场动画效果给用户一种层级纵深感。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。


  当用户选择了某个月份,年份视图会局部放大该月份,过渡到月份视图。今天的日期依然处于高亮状态,年份会显示在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来以及如何返回。


  类似的过渡动画也出现在用户选择某个日期时:月份视图从所选位置分开,将所在的周日期推向内容区顶端并显示以小时为单位的当天时间轴视图。这些交互动画增强了年、月、日之间的层级关系以及用户的感知。


  1.2 iOS应用解析 (iOS App Anatomy)

  几乎所有的iOS应用都应用了UIKit framework中定义的组件。了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中做出更好的决策。


  UIKit提供的UI组件可以大致分为以下4种类型:

  栏(Bars):包含了上下文信息来指引用户他们所在的位置,以及控件来帮助用户导航或执行操作。

  内容视图(Content Views):包含了应用的具体内容以及某些操作行为,比如滚动、插入、删除、排序等等。

  控件(Controls):用于执行操作或展示信息。

  临时视图(Temporary Views):短暂出现给予用户重要信息或提供更多的选择和功能。

  UIKit除了定义UI组件元素,还定义对象如何实现功能,例如手势识别、绘图、辅助功能和打印支持。

  从编程的角度来看,UI组件元素其实是视图的子类,因为它们继承了UIView。视图能绘制屏幕内容并知道用户何时在其范围内触屏。视图的所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

  要在应用中管理一组或者一系列的视图,通常需要使用视图控制器。它能协调视图的内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。

  这里有一个关于视图与视图控制器如何结合并呈现iOS应用的UI的例子,如图。


  尽管开发者认为真正起到作用的是视图和视图控制器,但一般用户感知到的iOS应用是不同屏幕内容的集合。从这个角度来看,在应用里,屏幕内容一般对应于一个独特的视觉状态或者模式。

  注:一个iOS应用程序包含一个窗口。但是,不同于计算机程序中的窗口,iOS窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。

  在iOS Human Interface Guidelines中,屏幕(screen)这个词和大部分用户理解的一样。作为一个开发者,你也许需要阅读一下其他与UIscreen相关的章节,这样你可以更好的了解如何关联外部屏幕。

时间: 2024-10-29 13:35:41

超实用的IOS 9人机界面指南(1):UI设计基础的相关文章

超实用的IOS 9人机界面指南(2):设计策略

  设计原则 美学完整性 美学完整性不评判应用的视觉设计,也不是用来描述应用的风格特征.美学完整性是指在一款应用的视觉表现和交互行为与功能结合后所传达出的整体一致性. 人们关心应用是否提供了应有的功能,但是也会潜移默化甚至是很直接地被应用的视觉表现和交互行为所影响.举个例子,一款协助用户完成任务的应用,可以通过使用精美而又无干扰的装饰性元素.标准的控件和可预期的交互行为很好地帮助用户聚焦在任务本身上.这样,应用就能传达出清晰而一致的信息,使得人们信任它.但是,如果应用使用干扰的.琐碎的或随意的U

超赞的IOS 8人机界面指南(1):UI设计基础

  今天这篇长文让人激动到手发抖,腾讯译者糖箔糊的心血译作,整篇2万多字,源自官方超详细的IOS 8人机界面指南,非常用心的作品,文字到位,逻辑清晰,保证任何一个细节读起来都能明白晓畅,趁着IOS 8 刚刚发布,赶紧提前学起来,千万记得收藏呦! 小技巧:Word 2013会自动检测目录,阅读模式下学习非常方便! 1.1 为iOS而设计(Designing for iOS) iOS 的革新关键词如下: 遵从 :UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力. 清晰 :

[ISUX译]iOS 9人机界面指南(一):UI设计基础

[ISUX译]iOS 9人机界面指南(一):UI设计基础 raina 2015.10.29 文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy) 1.3 适应性和布局(Adaptivity and Layout) 1.

[ISUX译]iOS 9人机界面指南(三):iOS 技术

[ISUX译]iOS 9人机界面指南(三):iOS 技术 UI规范 summer 2015-11-29 3247浏览 0评论 专为0基础小白量身打造的UI设计入门课程(ps,ai软件+图标技巧),在线学习2个月包教会(公开课3位师傅),拜师费1500,随到随学,可插班.抢名额请加qq群:429369013咨询. 本文译自苹果官方人机界面指南 iOS Human Interface Guidelines ,由腾讯ISUX设计师翻译整理,非发文者一人之作. 文章索引 3.1 3D触摸(3D Touc

IOS 9人机界面指南(4):UI元素

  4.1 栏 4.1.1 状态栏 状态栏展示了关于设备及其周围环境的重要信息. 默认(深色)内容 浅色 状态栏: 是透明的 始终固定在整个屏幕的上边缘 不要创建自定义状态栏. 用户依赖系统默认状态栏的一致性.就算你可能会在应用中隐藏它,也不宜定制一个新的UI来代替原有系统状态栏. 避免滚动内容直接透过状态栏显示. 你不会希望用户在滚动的时候看到五花八门的内容和状态栏自身的元素混合在一起.想要让用户感受到内容区域够大的同时,最大限度地保证可读性,请保证在状态栏后面添加一块背景,用以模糊出现在状态

APPLE WATCH人机交互指南之UI设计基础

  千呼万唤始出来!随着Apple Watch开卖的日子临近,我们终于等来了Apple Watch的官方文档(HIG)!发布会的时候,许多用户都对水果神教的智能手表的设计表示怀疑,为什么要这么设计?答案就隐藏在官方的这份设计指南当中. 1.为Apple Watch设计 重要提示:这是一份针对API或技术的初步文档.苹果公司所提供的这些信息,可以帮您规划文中所述的苹果公司的技术和编程接口.这些信息可能随时会被修改,根据这份文档所设计的软件和界面应通过最终版本的操作系统和软件的测试.最新版本的文档可

手把手带你入门IOS 8人机界面设计

  在去年,Apple针对新时代用户彻底更新了其设计语言.现在的设计语言相对之前大为简化,能够让设计师将精力集中到动画和功能上,而不是繁复的视觉细节上. 很多人都曾问过我:设计应当如何入门?成为一名优秀设计师有没有捷径可走?要我说,虽然没有捷径,但确实有几个适用于iOS的设计技巧和规则能够从全局角度改变你的设计方式. 当然,即便你目前的设计目标是完全不同于iOS的平台,相互之间的设计理念也是相通的,你可以将在web和印刷领域学习到的技巧运用到iOS设计中去.iOS 8是一个让设计寻回根源的平台,

聊聊IOS人机界面指南中的三个关键词

  翻了下这几年的iOS人机界面指南,开篇始终是遵从(Deference),清晰(Clarity),深度(Depth)这三个关键字,从iOS7到iOS9从未变过.在iOS>中UI作为内容的支撑,始终服务于内容,就像乔帮主说的"设计不只是看上去的样子和感觉,设计的关键在于它如何发挥作用." 一.遵从 (Deference) 设计为内容服务,UI作为内容的支撑,可以帮助用户更好地理解内容并与之交互,且不会分散用户对内容本身的注意力.以内容为中心被反复强调,而平时设计师却常常会因为过度

苹果iOS人机界面指南

苹果iOS人机界面指南用户界面原则 好的人机界面规范遵从于用户思考和行动的方式,而不屈从于设备的性能.一个缺乏吸引力,复杂的,或违悖逻辑的用户界面,却会让原本优秀的应用变得索然无味.反过来, 一个漂亮的,直觉感知的,引人入胜的界面能强化应用程序的功能,并且能在用户心中激发出正面的情绪. 整体之美 整体之美,并不是简单地指应用界面有多漂亮,而是指应用的外观和功能是否完美地结合.例如,用来处理实际工作的应用通常会简化装饰性的UI元素,并置于背景中,而将重要的地位让给任务本身,因而会仅提供标准的控件和