一张图带你快速掌握iOS设计规范

每次发文章,评论里总会有大堆小白们在问:~求最新iOS设计规范链接~~求中文翻译版~~你看的是哪个版本,我的怎么没有~

这次就做下基础知识普及,以更简单易懂的方式整理下iOS 9 的设计规范给大家。

iOS设计规范,指的是苹果开发者官网上面的 iOS 人机交互指南(iOS Human Interface Guideline)。制作这个规范的目的是为了让所有安装到iOS系统中的App都遵从某些特定的视觉特性、交互特性,以达到风格一致性的使用体验。另一个层面,也是便于让设计人员和开发人员能够更好的理解iOS系统,更合理的运用系统提供的功能和接口,更高效的制作出App。

概述

首先上一张整体结构图:

iOS 人机交互指南

iOS人机交互指南主要分为5个章节:

iOS UI设计基础知识(UI Design Basics)--主要介绍针对iOS系统的特性,在设计时要考虑到的各种影响因素。比如多尺寸屏幕的自适应;程序的启动与停止时的注意事项;iOS的布局、配色、字体规范等等。

iOS UI设计基础知识

设计策略(Design Strategies)--介绍了交互设计的一些原则以及设计实现App的建议流程。最后举了几个案例进行说明。


设计策略

iOS技术(iOS Technologies)--介绍了集成到iOS系统内的一些软硬件技术,方便在设计开发功能时加以利用。

关于iOS技术,个人认为只需要了解就可以了,在这里不做过多的赘述。

UI元素简介(UI Elements)--介绍iOS系统中的每个UI元素(交互控件)的使用方式和注意事项。在了解了这些UI元素后,设计者会更加了解系统提供了哪些设计元素,以便于提高开发效率和统一视觉、交互体验。也能很好的限制住设计师们野马一样的思维。

UI元素

图标与图像设计(Icon and Image Design)--介绍了iOS系统对于图标和图像的设计的一些要求和注意事项。


图标和图像设计

※ 以上思维导图请到我的个人公众号“产品范儿”(MobileGuideline)中下载。

预告:Android设计规范思维导图正在整理中,敬请期待。

iOS App设计原则

iOS的整体设计原则,在规范的第一章已经清楚的说明:

1,设计要服从于功能(或内容)

设计是为了更好的让用户使用功能、阅读内容,决不能为了追求设计上的完美而牺牲了功能的使用体验。

在规范中举了一个非常恰当的例子,比较两个计算器的设计:设计更完美、更炫目的计算器给用户带来的确是非常糟糕的使用体验。而相对来说更简洁直观的设计,则是经过无数次迭代苹果的设计师们最终选择的版本。

2,更加清晰明了的呈现UI

首先,页面的设计要突出重点:聚焦核心功能的呈现,巧妙并适当的加入修饰元素。

其次,细节的设计要清晰的展现:文字内容在各个尺寸的屏幕中都清晰的显示,图标的设计要精确和明晰的表现出其代表的功能,颜色的运用要突出主题并尽可能干净、纯粹,使用无边框按钮以突出功能。

3,利用层次感和动效为设计增添活力

视觉上的层次感、贴近自然的动画效果可以让用户便于理解并得到愉悦感。

利用层次可以表达出各UI元素间的层次关系,以及当前活动的状态。

利用自然的动效可以增强用户对交互逻辑的感知。

iOS App设计要点

样式

iOS设计规范建议的App设计流程是这样的:

① 去掉所有的UI修饰,只考虑核心功能以及功能间的关联。
② 利用iOS的主题样式来设计功能的UI,完善细节设计。
③ 确保设计出的UI适配各种设备以及各种操作模式。

其中提到的iOS的主题样式,指的是利用iOS系统提供的UI元素(控件)的样式来设计。这样设计的好处是:
· 保证了你的应用的交互体验与iOS原生应用的体验的一致性,用户使用起来没有学习障碍。
· 利用系统UI元素实现App,更便于与开发沟通,而且程序开发起来非常的方便,效率高并且错误率低。

所以,熟读“UI元素”这章的内容,是每个设计者和开发者的必要工作。

App生命周期

生命周期这个词是来源于Android设计规范,iOS没有特别的强调这个概念。而理解整个App的生命周期对于App的设计来说确非常关键。

整个生命周期可以理解为这个过程:

启动 -> 前台运行 -> 退出 -> 后台运行 -> 后台终结(内存释放) 

iOS系统的内存释放机制在设计规范里面没有体现,因为这个算法也在不断的优化没有必要让过多的人了解。但是需要我们熟知的是:在点击Home键返回桌面时,程序从前台切换到后台,此时要记录当前画面的流程状态和必要的信息以便下次回到应用恢复。这个过程在设计时就要考虑清楚。

布局

iPad的自适应布局方式主要是利用AutoLayout(一种自适应布局的程序实现方法)和“常规”与“紧凑“两种尺寸类别来定义的。

利用AutoLayout实现的屏幕布局,会在不同设备的屏幕尺寸下选择不同的尺寸类别,以达到在该设备下的最佳显示效果。具体的适配方式如下图:

利用这种自适应布局方式,可以让程序开发(以及UI设计)对应多屏幕布局变得更加容易,更加高效。从显示效果上讲,也更加协调并保证了一致性。下面以印象笔记为例,看下自适应布局的效果。

在对应Pad版布局时,利用了UI元素中的Split View Controller,将不同层级的两个内容视图同时显示出来,以提高大屏幕的使用效率。

颜色

App设计时应选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。同一主色应贯穿整个App,根据功能的不同,可以选择另一种颜色作为强调色。

设计颜色时要考虑:
· 如果你要创建多样的自定义颜色,要确保它们能够和谐共存
· 当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容
· 考虑选择一种基准色颜色来表征交互性与状态
·避免同时对交互控件和非交互控件使用同一颜色
·色彩可以向用户传达信息,但不一定会以你希望的方式(种族、文化、生活习惯对颜色的看法不同)
· 不能让颜色喧宾夺主,让用户分心

字体

在iOS9之后,San Francisco成为了系统默认字体。基于San Francisco的动态字体(Dynamic Type )可以实现:
· 为用户提供最易辨认、体验最好的不同大小的字号。
· 能自动调整文字的粗细,字母间距以及行高。
· 为语义上有区别的文本模块指定不同的文本样式,比如正文、脚注或者标题。
· 随着用户调整文字属性,文本可以动态的进行调整响应。

设计时还要考虑:
· 根据内容的轻重缓急来响应用户调整文本尺寸的变化
· 通常情况下,应用中整体应该使用单一字体
· 确保自定义字体在所有的样式和尺寸时都是清晰的。

动画

动画效果不仅能够给用户带来震撼的视觉体验,合适的动效还可以达到以下的目的:
1,传达当前的状态和提供反馈。
2,增强操作感。
3,帮助用户直观的了解到其动作的结果。

设计动效时还要考虑:
· 动效的设计是为了突出功能,不要喧宾夺主、不要过度使用动效耗费性能、不要在价值不高的动效上花费更多的开发工作量。
· 尽量利用系统动画,系统默认的动画可以为App提供与iOS系统的动效一致性的体验,随意修改往往会出现违和感。如果自定义动效,也尽可能与系统动画的样式相匹配。
· 在同一App中动效要保持一致。


最后,建议大家收藏iOS 人机交互指南官网地址,在每次iOS版本更新或新机型发售时,该指南都会有所更新。

iOS Human Interface Guidline

如果有需要本文中的思维导图以及中文版设计规范全文,请私信我或关注我的微信公众号“产品范儿”(MobileGuideline)下载。


本文由 @周博文 原创发布于简书,未经许可,禁止转载。

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

推荐阅读更多精彩内容