购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.2 iOS系统的UI特色

一款优秀的App除了在功能设计与代码质量上都能达到较高水准外,其UI设计还要具备操作系统的特征。因此,在为iOS系统的App设计UI之前,需要先了解iOS系统在UI设计上的一些特色。与其他移动操作系统相比,iOS系统在UI设计上的独特之处主要体现在它始终以内容为核心、保证清晰度和明确深度层次三个方面。

2.2.1 以内容为核心

好的UI设计必然是以内容为核心的,iOS系统就完美地做到了这一点。在iOS系统中,所有的UI设计都依从内容进行,以便用户能够快速理解内容并与之产生互动。

1. 充分利用整块屏幕

iOS系统充分利用了整块屏幕,重新考量了插图和视觉框架的使用,将App的内容扩展到整个屏幕,让用户有更多的查看空间。iOS系统内置的天气App就是一个很好的例子,漂亮、简洁的全屏式UI非常直观地呈现出某个地点当前天气的关键信息,并且背景会随着天气的变化而变化,如下左图和下中图所示。通过向下滑动,还可以了解到更多天气数据,如下右图所示。

2. 去除不必要的修饰效果

浮雕、渐变和阴影等修饰效果有时会让UI元素显得沉重,反而喧宾夺主。移动UI设计的主要目的是突出UI中的内容,而不是表现绚丽的效果。iOS系统就充分做到了这一点,所有系统UI的设计都尽可能少地使用边框、渐变和投影,保证了内容的主体地位。下图所示为iOS系统内置的地图App的UI,其中的UI元素基本没有添加修饰效果。

3. 利用半透明和模糊暗示更多的信息

半透明效果可以提供情境,帮助用户看到更多可用的内容,并给人以短暂停留的暗示。在iOS系统中,半透明元素只模糊渲染在其正背景后的内容,但屏幕上的其他部分并不会模糊。随着系统版本的不断升级,半透明的底板明度也变得更高。下图即展示了半透明UI元素的应用。

2.2.2 保证清晰度

信息的清晰呈现是iOS系统最明显的特点之一。纵观iOS系统的所有内置App,不难发现,它们的UI设计不但文字非常清晰,而且图标表意明确,能够真正体现App的实用性。iOS系统主要通过使用大量留白、用颜色简化UI和使用系统字体确保易读性等方式实现信息的清晰呈现。

1. 大量使用留白

在iOS系统中可以看到很多App的UI设计都采用大量留白的方式。留白会让重要的内容和功能更为突出、更易于理解。同时,留白还可以烘托出安静平和的氛围,这会让App看上去更加专注和高效。下图所示为iOS系统中几个内置App的UI效果,可以看到其使用了大量的留白来突出重要的信息内容。

2. 用颜色简化UI

iOS系统为每一款内置App都选择了一种主题色,所有的UI配色都围绕该主题色展开。例如,播客App以紫色作为主题色,而健康App则以红色作为主题色,如下图所示。这样做的好处是能突出App的重点,并巧妙地暗示其交互性。同时,同一主题色还能给App带来一致性的视觉主题。iOS系统的内置App使用了一系列纯净的系统颜色,这些颜色无论在深色还是浅色背景中都能使信息内容显得干净、纯粹。

3. 使用系统字体以确保易读性

UI设计最重要的作用之一是让尽可能多的人在各种条件下都能清晰地阅读内容。iOS系统默认的字体能够自动调整字间距和行高,这会让文本内容更易于阅读,并且该字体在任意字重下都能良好显示。下图所示为iOS系统默认的中文字体和英文字体的应用效果。

4. 无边框的按钮设计

操作按钮是用户与设备实现人机交互的重要控件。相较于Android系统中丰富的按钮样式,iOS系统中所有的条栏按钮都采用了无边框的设计风格,这也是iOS系统的特色之一。无边框按钮会在按钮的内容区域内使用情境、颜色和一个动作导向的标题来暗示其交互性。下图所示为iOS系统内置App中的按钮效果。

2.2.3 用深度来体现层次

iOS系统会在不同的分层UI上显示更多的内容,并且这些清晰的视觉图层和真实的运动能够帮助用户理解UI对象的层级关系。在iOS系统的内置App中,连续、顺畅的触摸操作和可发现性不但可以提升用户在使用过程中的愉悦度,而且能够在明确上下文关系的前提下让用户使用某些功能或获取更多额外的信息。

以iOS系统内置的日历App为例,当用户在日历的年度、月份和日视图之间切换时,强烈的转场动画会给人一种纵深感和层次感。如下图所示,滚动到年度视图下,一眼就能看到当天的日期并执行其他日历任务;而当用户选中某个月份,年度视图会以放大效果消失,并随之展现月份视图,并且当天的日期仍然保持红色高亮,而年份则出现在返回按钮中,这样用户便能准确了解当前日期。通过这些转场效果,强化了年度、月份和日视图之间的层级关系。 LZC6rlY+2ALe7fXMN60GCwFfRX86sadE8Reyfzf+MIEhQ7enxuiwG0wM5XG5KVwJ

点击中间区域
呼出菜单
上一章
目录
下一章
×