交互设计干货 | IOS与Android的设计规范

关于设计规范的重要性就不多说,这篇文章主要通过举例对比,来帮助大家深刻认识两大移动平台(IOS&Android)的设计规范以及它们之间的差异。

首先,从平台的页面布局上看,两大平台布局方式上明显存在差异,如图:

图1

我们对两大平台分别从页眉、页脚进行详细解说,先是IOS平台,

图2

IOS的页眉,也就是我们说的导航栏,用于实现在应用不同信息层级结构间的导航,有时也可用于管理当前屏幕内容。具体效果,如图3,

图3

在顶部放一个标题,表示当前页面的一些内容,在左侧有个返回按钮,这个按钮是依赖于当前页面是属于第一层级还是第二层级,如果属于第二层级,就需要有一个返回的按钮,以及返回上一级的标题是什么,然后右上角有个设置的入口,这样看还是抽象的话,那就直接看实际效果的,如图4,

图4

熟悉了IOS页眉的设计,再来看页脚的,IOS的页脚,也就是我们说的工具栏,用于放置操作当前屏幕中各对象的控件,如图5,

图5

工具栏上既可以放icon,也可以放文字,看个具体例子就知道怎么用了,如图6红色圈中形式,

图6

至于选择icon还是文字,要根据实际情况抉择,如果功能入口很多,icon是更好的选择。如果功能没有那么多又想表达更加清晰的意思,建议使用文字。

IOS的页脚除了是工具栏外,还可以是标签栏。标签栏可以让用户在不同的任务、界面和模式中进行切换,图7是常见的设计方式,

图7

具体的可以看下appstore的设计,

图8

但是值得注意的是,底部标签不要太多,最多5个。

在了解了IOS平台页眉页脚的设计规范后,这时候来对比下Android平台在这上面的设计有何不同,首先还是从页眉上说明;

Android的页眉放置的是操作栏(action bar),用于实现app内视图的切换和层级间的导航(返回上层),还会放置一些重要控件。常见的设计方式如图9,

图9

在这里不得不提一下,在图9中看到的“下拉菜单”是android4.0的设计风格,进入android5.0后,Material Design被广泛应用,这时候的操作栏我们叫应用栏了,是用来显示应用的标识、应用导航、内容搜索以及其他操作,比如这样的,

图10

从上面图中不难看出,android4.0和5.0的区别在于下拉菜单变成左侧抽屉导航,看下对比图,

图11

在这里也有个设计小技巧,上面我们列的都是一级导航,当导航条目很多时,我们就会考虑设计二级导航,而这时候如果选择把二级导航直接加在一级抽屉导航里,像这样,

图12

如果是选择这样的设计,不难看出,左侧导航条目变得非常多,也不便于用户进行切换。那么这时候,我们可以把左侧的二级导航放到页面中,实现在某一个主导航下面进行子导航的一个切换,如图:

图13

以上是IOS和android在页面布局上的不同,而在控件上,两者也存在着差异,我们可以列举几个常见的,比如滑块控件、开关控件等,具体的可到官网下载相关控件进行对比,这里不一一列举了,

图14
图15

除了页面布局和控件上的不同,两大平台在手势操作上也有些差异,我们常见的手势有点击、双击、长按等,

图16

那在操作上,各个手势所达到的效果也不同,而IOS平台跟Android平台在同一个效果上所使用的手势也会有所不同,比如删除行为,IOS使用轻扫手势,而Android则是长按删除。

图17

以上就是对两大平台间在设计规范上的简单介绍,而在具体细节上的不同,可参考下面的导图,

图18

在设计时遵从最基本的原则也是体现一个交互设计师的专业性,认识设计规范也是为了避免在工作上犯了最不应该犯的错,希望上面的总结对你有所帮助。



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

推荐阅读更多精彩内容