细节是魔鬼,设计在于细节
 首页> 读。设计

iOS 8人机界面指南(一):UI设计基础

中文翻译PDF下载:iOS人机界面指南(一):UI设计基础

1.1 为iOS而设计(Designing for iOS)

iOS 的革新关键词如下:

  • 遵从UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力。
  • 清晰:各种大小的文字应该易读,图标应该醒目,去除多余的修饰,突出重点,很好地突显了设计理念。
  • 深度:视觉的层次和生动的交互动作会赋予UI新的活力,不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。

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

无论你是重新设计一个现有的应用或是重新开发一个,请尝试下列方法:

  • 首先,去除了UI元素让应用的核心功能呈现得更加直接并强调其相关性。
  • 其次,直接使用iOS的系统主题让其成为应用的UI,这样能给用户统一的视觉感受。
  • 最后,保证你设计的UI可以适应各种设备和不同操作模式,这样用户可以在不同场景下舒适地享用你的应用。

在整个设计过程中,时刻准备着推翻先例,假设问题,并以重点内容和功能(为目标)来驱动每个细节设计。

1.1.1 以内容为核心(Defer to Content)

虽然明快美观的UI和流畅的动态效果是iOS体验的亮点,但内容始终是iOS的核心。

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

充分利用整个屏幕。天气应用是最好的例子:漂亮的天气图片充满全屏,呈现用户所在地当前天气情况这最重要的信息,同时也留出空间呈现了每个时段的气温数据。

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

尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。

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

尝试使用半透明底板。半透明的控件——比如控制中心——关联了使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。在iOS中,透明的控件只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸一样——它并没有遮挡屏幕剩余的部分。

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

1.1.2 保证清晰度(Provide Clarity)

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

使用大量留白。留白让重要内容和功能显得更加醒目。此外,留白可以传达一种平静和安宁的视觉感受,它可以使一个应用看起来更加聚焦和高效。

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

让颜色简化UI一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色,无论在深色和浅色背景上看起来都干净,纯粹。

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

通过使用系统字体确保易读性。iOS的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体,务必使用动态型,这样你的应用可以在用户选择不同字号时做出应对。

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

使用无边框的按钮默认情况下,所有bar上的按钮都是无边框的。在内容区域,无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时,该按钮呈现高亮的浅色状态来作为操作响应。

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

1.1.3 用深度来体现层次(Use Depth to Communicate)

iOS经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。

通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。

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

备忘录以不同的层级展示,如插图所示。用户在使用备忘录里的某个条目时,其他的条目被收起在屏幕下方(译者按:其实这个视觉提示使用起来很隐晦)。

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

日历有较深的层级,当他们在翻阅年、月、日的时候,以及增强的交互动画给用户一种层级纵深感(循序切换的层次,从年到月到日)。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。当用户处于月份视图时,点击年份视图按钮,月份会缩小至年份视图中的所处位置。

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

今天的日期依然处于高亮状态,年份出现在返回按钮处,这样用户可以清楚地知道他们在哪儿,他们从哪里进来并且知道如何返回。

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

类似的过渡动画出现在用户选择一个日期时:月份视图从所选位置分开,将当前的周日期推向屏幕顶端并翻转出以小时为单位的当天时间视图。这些动画加强了日历上年月日之间的关系的感知度。

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

1.2 iOS应用解析(iOS App Anatomy)

几乎所有的iOS 应用都应用了UIKit framework中定义的组件。了解这些组件的名字,作用和构成能够帮助你设计应用过程中做出更好的决定。

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

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

Bars包含了导航信息,告诉用户他们所在的位置并包含了一些能帮助用户浏览或启动某些操作的控制按钮。

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

控制按钮:展示信息或者控制动作。

临时视图:短时间出现,给用户重要信息或者额外的选择或者其他功能。

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

从编程的角度来说,UI组件被认为是不同类别的视图,因为他们从UIView得到继承。视图能绘制屏幕内容并且知道用户何时触摸了屏幕。视图的所有类型有:控件(比如按钮和滑块),内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。

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

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

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

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

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

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

1.3 适应性和布局(Adaptivity and Layout)

1.3.1 为自适应而开发(Build In Adaptivity)

人们通常想随心所欲地使用自己喜欢的应用程序。在iOS 8及未来的版本中,你可以使用不同分辨率和自动布局来帮助你定义屏幕布局视图,视图控制器以及需要随显示环境改变的视图(显示环境display environment的概念指的是设备的整个屏幕或者其中一部分,比如一个跳出菜单区域或一个分视图控制器的主视图部分)。

iOS定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸有着较易拓展的空间,而压缩尺寸约束了空间的使用。想要定义一种显示环境,你需要定义横纵尺寸类型。如你所想,iOS设备可以有横屏竖屏两种不同的使用模式。

iOS能随着显示环境和尺寸类别变化而自动生成不同布局。举个例子,当垂直尺寸从压缩变为常规时,导航栏和工具栏会自动变高。

当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。关于如何在Interface Builder中更好的使用尺寸类别,你可以查阅Size Classes Design Help

注:在一种尺寸类别中,持续使用Auto Layout进行小的布局调整,比如拉伸或压缩内容。

下面的实例可以帮助你理解尺寸类型是如何适配不同设备的显示环境。例如:iPad在长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad显示环境一直处于垂直和水平的常规状态。

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

iPhone的显示环境可根据不同的设备和不同的握持方向而改变。

竖屏时,iPhone6 Plus使用的是常规高度和压缩宽度类型。

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

横屏时,iPhone6 Plus使用的是压缩高度和常规宽度类型。

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

其他iPhone型号,包括iPhone6使用相同的尺寸类型设置。

竖屏时,iPhone 6,iPhone 5 和iPhone 4S使用的是压缩宽度和常规高度。

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

横屏时,这些设备在宽高上使用的都是压缩类。

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

1 2 3 4

发表评论

还可以输入 1994 个字符

全部评论 (0)
切换登录

注册

切换注册

登录

忘记密码 ?