iOS 10设计规范(一):概述

设计原则

iOS区别于其他平台的三个主要特征:

  • 清晰呈现

各种大小的文字清楚,图标明确易懂,不多余的修饰,由功能驱动设计,利用留白、颜色、字体、图形等元素巧妙地突出重要内容,引导用户行为。

  • 遵从内容

动效和界面设计的目的都是为了让用户更好地理解内容,而非喧宾夺主。充分利用整个屏幕,尝试使用毛玻璃效果(透明+模糊)可以让用户看到更多内容。尽量少用浮雕、渐变和阴影,让界面更轻,保证内容的核心地位。

  • 纵深层次

用清晰的视觉层级与动效传达出各元素之间的层级关系,有助于用户理解内容。通过点击发现内容,带来愉悦感,且不损失上下文环境。一些过场设计也可以传达出层次感。

为了达到最理想的效果,要时刻记住以下原则:

  • 审美层面上的完整性

这决定了一个APP是否将其功能与其界面、交互融合为一体。比如说,一个帮助人们完成正式任务的APP,设计上应该使用淡雅而不抢眼的图形、通用的标准化操作,并时刻给予明确的预期,让用户能专注于任务本身。相反的例子,比如一个游戏APP的界面,就应该是足够抢眼和吸引人的,因为这能够增强趣味性、激发兴奋感,让用户产生进一步探索的欲望。

  • 视觉统一性

一个APP内应该使用同一套规范标准,比如使用系统提供的组件、通用的图标、标准的字号和相同的术语。

  • 对屏幕内容直接操作

这有助于用户理解。当用户旋转设备或者对着屏幕上的内容使用手势的时候,用户可以立即看到他们的动作产生了什么效果。

  • 反馈

用户的每一个动作都应该有其对应的可感知的反馈。比如当用户点击某个元素时,需要短暂地高亮一下以示反馈;比如用流程指示器来表达冗长流程的不同状态;比如用动画或声音传达特定动作的效果。

  • 象征

当APP的视觉和交互元素跟日常经验相似时,用户会上手得更快——无论经验来源于线上还是线下。在iOS上用户是直接跟屏幕交互的,所以这种做法效果很明显。比如你把当前的页面移开,就漏出了下面掩盖的页面;比如你会拖着内容移动;比如切换开关、移动滑块、使用滚动条翻页,用户甚至可以像翻书一样在iOS中浏览书和杂志的内容。

  • 用户掌握控制权

APP可以给出后续操作的建议或者对可能的风险发出提醒,而不应该直接替用户作出选择。优秀的APP既能给用户选择权,又能避免预期外的结果。对用户而言,APP中的交互元素应该是熟悉且预期明确的,当用户作出具有破坏性的操作前是经过确认的,用户也可以轻易取消之前的行动(即使行动正在生效中)

iOS 10的新特性

在iOS 10中,你可以建立比之前功能更强的APP。当你在研究这些变化对你的APP有什么好处时,要特别注意设计规范。

搜索屏和首屏上的Widget。不需要打开APP,就可以得到实时的信息,或者使用特定功能。过去,用户只能在通知中心中添加Widget以便于快速进入APP。现在,用户在搜索屏上也可以添加Widget,只要在首屏或锁屏向右滑就可以看到了。开发者也可以在快捷菜单(使用3D Touch点击APP图标时出现)上显示Widget。

与「信息」应用整合。通过「信息」中对话页下方的扩展项整合其他APP,允许用户跟好友分享APP内的具体内容。可分享的内容包括文本、照片、视频、贴纸,甚至可以交互的内容(比如小游戏)

与Siri整合。整合后,可以让用户通过语音完成特定类型的特定操作,比如打电话、发信息、开始任务。

提升通知系统的能力。当用户使用3D Touch点击通知,或者在未锁屏时向下通知信息,让用户获得更详细的信息,并可以在不离开当前环境下做出操作。

基础交互元素

大多数iOS上的APP只要使用通用组件库(一套定义了各种常用交互元素的程序框架)就够了。这个框架在提供巨大的自定义空间的同时,还保证了APP跨系统的体验一致性。组件库中的元素既灵活又通用,适应性极强,能让开发者在任何iOS设备上设计高质量的APP,而且当系统更新时,APP内的组件也自动更新。

组件库分三类:

  • Bars(条形栏)

告诉用户他们在APP的什么位置,提供导航栏,还可以承载按钮或其他能够操作、传达信息的元素。

  • Views(内容区)

包括了用户在APP中看到的主要内容,比如文本、图形、动效和其他交互元素。views可以支持滚屏、插入、删除、整理等行为。

  • Controls(操作项)

操作行为、传达信息。比如按钮、开关、文本框、步骤指示条等。

组件库除了可以定义iOS的界面之外,还定义了APP可以调用的系统级功能。比如你的APP可以响应触摸屏上的手势,可以支持绘画、跳转、打印等功能。

iOS也跟其他技术框架做了紧密融合,比如Apple支付、健康组件(HealthKit)、研究组件(ResearchKit),让你设计出功能强大无比的Apps。

来源:

The Why·Liam·Blog by WhyLiam is licensed under a Creative Commons BY-NC-ND 4.0 International License.

WhyLiam创作并维护的Why·Liam·Blog采用创作共用保留署名-非商业-禁止演绎4.0国际许可证

本文首发于Why·Liam·Blog (https://blog.naaln.com),版权所有,侵权必究。

本文永久链接:https://blog.naaln.com/2016/07/ios-10-design-1/