iOS 12 人机交互指南(总结篇)

本文是iOS 12 人机交互指南系列篇的总结篇,一起来看看~

image
  • 2018年6月5日,苹果在美国圣何塞举办的2018苹果全球开发者大会(WWDC2018)上,发布了iOS12系统。
  • 2018年9月18日,苹果正式向用户推送iOS12正式版系统更新。
  • 2018年10月31日,iOS12界面交互设计规范指南(英文记iOS Human Interface Guidelines)翻译完成。

iOS界面交互设计规范指南,整体按主题共划分为10个章节,每个章节下又细分不同小节;不同章节侧重点自然是迥异,斯认为所面向读者身份也有偏重。

如:第二章所描述的APP整体架构,产品经理便可做深入研究;而第三章的交互模块,当属交互设计师领域范畴;第五章的视觉设计及第六章的图标图像,则非常标准化的阐述了像素级的设计规则,UI设计师可奉为圭臬。

以下一一道来:

第一章:主题与基本界面元素

苹果官方直接以iOS命名,用两篇文章为iOS整体设计风格及设计原则定下了基调。其中主题一文,可概括为三大设计原则和六大基本特性。

三大设计原则有:清晰、遵从和深度。

  • 所谓清晰,意味着所有表现层面的文本、图标、图像等均是清晰易懂的,且应该是本着功能驱动设计的原则,最终能达到可以巧妙的突出重点内容且表达其不同的可交互性。
  • 而遵从,更强调的是通过干净美观的界面和清晰流畅的动态效果,去帮助用户更好的理解界面内容并与之进行交互。
  • 最后所谓的深度,其实想表达的一方面是单页面中视觉层面的层级,另一方面则是整体应用不同页面间的交互层面上的层级。

相较于三大设计原则,六大基本特性则更具像化。文中分别从美学完整性、直接操作性、隐喻性、一致性、反馈性和用户控制性进行了描述。

  • 其中美学完整性,代表了一款应用的视觉表现和交互行为与其功能整合的优良程度,如:功能性应用比较适合通过标准化的控件和可预知的交互行为,来保持用户的专注性;而反之,游戏类应用则需要利用更加吸引人的视觉表现,来鼓励用户深入探索的同时,为其带来无穷的乐趣和刺激。
  • 直接操作性,以微信摇一摇为例,讲述了通过包括旋转屏幕或手势控制等方式直接对屏幕上的对象进行交互,会更有助于用户理解从而提升用户的参与度。
  • 隐喻性,以控制开关为例,通过隐喻用户在现实中的交互方式,能够使用户更快的学会使用应用。
  • 一致性更为容易理解,一致的界面元素,风格统一的图标,标准的字体样式级一致的文字描述。
  • 反馈性,拿进度条为例,旨在表明应用应该对用户的每个交互行为都提供明确的反馈。
  • 最后用户控制性,也是苹果比较注重的,其实侧面体现了苹果对于用户的尊重,一定不能剥夺用户的控制权,但可以通过建议或警告的方式对用户进行引导。

相较于上篇文章,基本界面元素一文则要简单具体许多,三大基本的界面元素,构成了一个应用表现层面的所有。

栏、导航栏、搜索栏、状态栏、标签栏、工具栏,第七章有分别的详细描述;视图、警告框、图像、页面等等均为视图,第八章详细记载;控件、按钮、进度条、筛选框等等即为控件,详见下文第九章节。

以上,算是比较详细的对第一章节进行了介绍,推荐包括产品经理,交互设计师,UI设计师甚至是iOS开发工程师在内的人员均能牢记在心。

文章详细点击查看《iOS 12 人机交互指南(一):主题与基本界面元素》

image

第二章:APP结构

有辅助功能,加载,特殊情境状态,导航,应用启动,请求许可及设置七篇文章;整体主要讲述了APP整体性结构功能,如清晰明确告诉用户当前所处应用位置的导航,应用首次启动的启动体验,轻松有趣的加载状态,应用权限的请求许可,甚至是针对残障人士的辅助性功能。

文章详细点击查看《iOS 12 人机交互指南(二):App架构(Accessibility)》

image

第三章:交互

内容章节比较多,共有3D触摸、音频、身份认证、数据输入、拖拽、反馈、文件处理、手势操作、近场通信及撤销重做。建议此部分可以有目的性的侧重摘选相关章节进行阅读,如:拖拽、反馈、数据输入等比较常用,剩余部分可通读后于后期有具体需求时再做翻阅即可。

文章详细点击《iOS 12 人机交互指南(三):交互(User Interaction)》

image

第四章:系统功能

顾名思义偏重讲述的即为系统功能,共计有虚拟现实、多任务、通知、打印、快速查看、评分评论、截屏、电视八个章节,推荐只需关注通知及评分评论两个章节即可。

文章详细点击《iOS 12 人机交互指南(四):系统功能(System Capabilities)》

image

第五章:视觉设计

强烈建议UI设计师熟读烂记,七篇文章,从页面适配及布局、动画、品宣、颜色、术语、字体到视频。均非常具体的在视觉设计层面进行了详细的描述,其中更是有像素级别的明确设计规范。另外值得一提的是第一个页面适配及布局小节,建议iOS开发工程师也可做阅读,一定会有所收获。

文章详细点击《iOS 12 人机交互指南(五):视觉设计(Visual Design)》

image

第六章:图像图标

整个章节分别从图像大小和分辨率、应用图标、自定义图标、启动页以及系统图标五篇文章,详细具体的阐述了整个设计规范中图标图像等像素级别的设计要求。而值得注意的是,苹果官方将启动页一文也放置于此章节中,并且着重对作为应用刚开始启动至首屏间承载过渡功能的启动页进行了说明。

说到此处,有必要统一下叫法,目前行业内比较通用的几个页面有引导页、启动页以及广告页。

  • 首先所谓引导页,是指在应用首次被安装打开后,用以对应用进行介绍以及对用户进行引导的一系列页面,页面数量2到5页不等,仅出现一次。
  • 而启动页,是指应用没次启动时,自开始启动至屏幕首页显示时的过渡页面,苹果对于此页面的定义更倾向于过渡性质的页面。
  • 而行业内所谓的广告页,则赋予了启动页另一个身份。总的来看,广告页即为启动页,区别只在于广告页承载了启动页所不具备的广告而告之的特性。

文章详细点击《iOS 12 人机交互指南(六):图标图像(Icons and Images)》

image

第七章:栏

应用三大基本界面元素之一,对于栏的统一定义值得明确提出,导航栏、搜索栏、状态栏、标签栏、工具栏;此为苹果官方所定义的五大栏的概念。而行业内除去此五类所述栏的概念,均为凭自身理解所引入的概念,建议以上述苹果官方定义为准。

  • 其中导航栏,一定是位于屏幕上方,状态栏之下的,其主要作用在于实现一系列有层级的应用页面间的导航。
  • 搜索栏,仅应用于系统内搜索之用。
  • 状态栏,出现在屏幕最顶端,可供发挥的空间不大。
  • 标签栏,属最常用的位于屏幕下方的用以划分应用模块以及提供应用在不同部分间快速切换的途径。
  • 工具栏,同样处于屏幕底部,但区别于操作栏的是,工具栏仅用于对当前视图的操作提供相应的入口。

文章详细请点击《iOS 12 人机交互指南(七):栏(Bars)》

image

第八章:视图

应用三大基本界面元素之一,也是所承载内容最多的元素,基本可以理解为应用所有表现层面的内容均以不同形式的视图加以呈现。视图章节内容丰富,共计包含功能表单、活动视图、警告框、集合、图像视图、地图视图、页面、浮层、滚动视图、分列视图、表格视图、文本视图以及网页视图在内的十三个视图。

各篇文章分别以不同形式的视图,阐述了对于不同类型内容所应使用的适合的视图,以及具体的使用方式和事项。此处建议包括产品经理,甚至是iOS开发工程师在内的各相关角色人员,均能细细品味。

文章详细点击《iOS 12 人机交互指南(八):视图(Views)》

image

第九章:控件

三大基本界面元素的最后一个,可以理解为控件是构成应用的各种细小零部件。如按钮、编辑菜单、标签、页面控件、筛选框、进度指示器。刷新控件、分段控件、滑动条、调数器、开关、文本输入框;文章囊括了所有应用程序设计,以及开发的过程中所应用到的控件。

整体文章可从两个层面理解:

  • 一个层面当属如何使用适合的控件去表述适合的内容;
  • 另一个层面为如何正确标准的使用具体的控件体现对应的内容。

文章详细点击《iOS 12 人机交互指南(九):控件(Controls)》

image

第十章:扩展功能

相较于前九章,第十章更多的讲述的是整体iOS系统层面不同应用间的交互及扩展。应用程度较低,可做简要查看。

文章详细点击《iOS 12 人机交互指南(十):扩展功能(Extensions)》

以上,便是iOS12交互设计规范的全部内容;本不是细腻之人,也非设计师之行列。权当抛砖引玉,欢迎反馈交流。

最后以个人产品生涯奉之圭臬的一句话结束此文,我心有猛虎,细嗅蔷薇。

相关阅读

iOS 12 人机交互指南(一):主题与基本界面元素

iOS 12 人机交互指南(二):App架构(Accessibility)

iOS 12 人机交互指南(三):交互(User Interaction)

iOS 12 人机交互指南(四):系统功能(System Capabilities)

iOS 12 人机交互指南(五):视觉设计(Visual Design)

iOS 12 人机交互指南(六):图标图像(Icons and Images)

iOS 12 人机交互指南(七):栏(Bars)

iOS 12 人机交互指南(八):视图(Views)

iOS 12 人机交互指南(九):控件(Controls)

iOS 12 人机交互指南(十):扩展功能(Extensions)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,406评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,976评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,302评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,366评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,372评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,457评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,872评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,521评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,717评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,523评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,590评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,299评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,859评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,883评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,127评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,760评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,290评论 2 342

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    X先生_未知数的X阅读 15,967评论 3 119
  • 作者:人生如寄 前段时间,曾心血来潮之际,将微信头像换成了十多年前的照片。 看照中玉人,再看镜中自己,恍若是梦。那...
    般若9阅读 447评论 0 1