设计原生iOS应用程序和原生Android应用程序之间的差异 。

设计原生iOS应用程序和原生Android应用程序之间的差异 。

原文地址https://medium.muz.li/differences-between-designing-native-ios-apps-and-native-android-apps-e71256dfa1ca
原文作者:SteelKiwi Inc.

要创建最佳的原生应用程序设计,您应该牢记iOS和Android平台之间的差异。这些平台不仅在原生应用程序的外观方面有所不同; 它们在结构和交互方面也有所不同。您需要牢记这些差异,以通过原生应用程序设计给用户提供最佳用户体验。

iOS和Android的原生移动应用程序具有各自操作系统平台特殊的功能。Apple和Google的设计指南建议尽可能使用平台标准导航控件:页面控件,选项卡,分类控件,表视图,组合视图和拆分视图。用户熟悉这些控件是如何在每个平台上运行的,因此如果您使用标准控件,您的用户将直观地知道如何操作您的应用程序。我们专注于iOS和Android上的交互设计模式之间的主要区别,以阐明iOS和Android上的应用程序看起来不同的原因 - 以及它们为什么应该这样做。我们还提供原生应用程序设计模板和原生移动应用程序示例,以帮助您可视化我们正在谈论的内容。

导航模式的差异

在屏幕之间跳转是移动应用程序中的常见操作。在设计导航模式方面,考虑到iOS和Android不同的应用程序设计指南是非常重要的。Android设备底部有一个通用导航栏。使用导航栏中的后退按钮非常简便的返回上一个屏幕或步骤,它几乎适用于所有Android应用程序。


全局导航条(Android)

另一方面,Apple的设计方法却截然不同。没有全局导航栏,因此我们无法使用原生iOS应用程序设计中的全局后退按钮返回。这会影响iOS移动应用程序的设计。屏幕内部应该有一个左上角是一个返回按钮的原生导航栏。


返回按钮(iOS)

Apple还在应用程序中引入从左到右的滑动手势,以跳转到上一个屏幕。此手势几乎适用于所有应用。


从左向右滑动手势 - 返回(iOS)

在这种情况下,iOS和Android之间的区别在于,在iOS设备上的原生应用程序中,从左向右滑动手势将返回到上一个屏幕。相同手势在Android设备上通常用于切换选项卡。但与iOS不同的是,Android设备上有一个底部导航栏,后面的按钮会返回上一个屏幕。

记住平台之间的这种差异以保持与其他移动应用程序的一致性始终很重要。


从左向右滑动手势 - 在标签之间切换(Android)

iOS和Android中应用内导航模式有所不同

“Material Design Guidelines”中有一些不同的导航选项。Android应用程序中使用的一个众所周知的导航模式是抽屉导航和选项卡的组合。

抽屉导航是一个通过点击汉堡菜单图标从左侧或右侧滑入的菜单。选项卡位于屏幕标题的正下方,内容组织处于较高级别,允许用户在应用中切换不同的视图,数据集和功能。

左—抽屉导航菜单, 右—选项卡

Material Design中还有一个名为bottom navigation的组件。此组件对于Material Design应用程序也很重要。底部导航栏使您可以轻松浏览和切换顶级视图。Material Design Guidelines不建议同时使用底部导航和选项卡,因为它可能会在导航时造成混淆。

底部导航(材料设计)

在Apple的UI指南中,没有与抽屉导航菜单类似的标准导航控件。相反,Apple的指南建议将全局导航放在选项卡中。选项卡显示在应用程序屏幕的底部,可以在应用程序的主要类别之间快速切换。

通常,选项卡包含的类别不超过五个。我们可以看到,此组件类似于Material Design中的底部导航,但更常用于iOS应用程序中。

左上角 - iOS分段控制; 右下角 - iOS标签栏(HIG)

虽然在两个操作系统中都有类似的功能(选项卡和类别控制,底部导航和标签栏),但导航仍然是iOS和Android之间的主要区别之一。存在两个客观差异,例如Android中的全局导航栏及其在iOS中的缺乏,以及这两个系统的视觉差异。

Apple认为主要导航元素应位于前台,汉堡包菜单应仅用于存储不是用户执行的日常任务的功能。不同的是,Android应用程序通常的做法是在汉堡菜单中隐藏主导航。

自定义标准控件需要额外的开发时间,并且对于用户来说是不熟悉的

如果您希望应用程序中的每个元素在不同平台上看起来相同,那么您需要进行额外的开发工作才能创建最佳的移动应用程序设计。最复杂的用例涉及默认控件,如单选按钮,复选框,切换按钮等,并且需要自定义视图实现,以在iOS上显示类似iOS的控件或类似Android的控件。

每个平台都有其独特的交互。在每个操作系统中尊重用户习惯的设计是良好的设计。在为iOS和Android设计移动应用程序时,牢记平台之间的差异非常重要,这样您就可以设计出满足用户期望的应用程序。

在两个平台上的一个不同的元素的设计示例是日期选择器。Android用户不熟悉iOS中常见的老虎机卷轴式日期选择器。在Android中使用这种样式的日期选择器需要自定义视图,这可能会变得复杂,增加了开发的复杂性和持续时间,并使您的应用程序设计看起来与Android平台不同。

左 - 标准iOS控件; 右 - 标准的Android控件
左 - 标准iOS选择; 右 - 标准的Android选择

iOS和Android中的按钮样式

“Material Design Guidelines”中有两种类型的按钮 - 平面和凸起。这些按钮用于不同的情况。Material Design中按钮上的文本通常都是大写的。有时我们在本机iOS应用程序中也会找到大写按钮文本,但通常我们找到的是标题大小写。

左 - 标准材料设计按钮; 右 - 标准的HIG按钮

还有一种类型的按钮 - Android上的浮动操作按钮和iOS上的呼叫操作按钮。浮动操作按钮表示应用程序中的主要操作。例如,邮件应用程序中的撰写按钮或社交网络应用程序中的新帖子按钮可以是浮动操作按钮。iOS应用程序中主要操作的类似设计是行为按钮,该按钮位于标签栏的中心。

左侧 - iOS中的标准CTA按钮; 右 - Android中的标准浮动操作按钮

Android中的原生底部列表与iOS中的活动视图操作列表之间的差异

Android中有两种类型的底部列表:list列表和表格列表。list底部列表有两种类型的内容:具有不同情景操作的列表和在用户点击“共享”图标后显示的应用程序列表。我们可以在iOS活动视图操作列表中找到相同类型的内容。但这些组件看起来与Android底部列表不同。

左 - 标准材料设计底部列表; 右 - iOS应用中的操作表

分辨率的差异

iOS和Android的分辨率指南略有不同(iOS为44px @ 1x,Android为48dp / 48px @ 1x)。Material Design Guidelines还建议将所有元素与8dp方形基线网格对齐。

排版差异

San Francisco是iOS中的系统字体。Roboto是Android中的标准字体。Noto是Chrome和Android不支持的所有语言的标准字体。您需要密切关注每个平台的排版和布局规范。

左 - 材料设计排版; 右 - HIG排版

Microinteractions

在设计方面,第一印象通常是用户的最后印象。

这就是为什么从一开始就吸引用户的注意力如此重要。在应用程序设计和开发过程中,我们可以通过微交互和动画为用户创建一个非常着迷的体验。

让我们明确关于两个平台的交互和动作的主要规则和建议,并查看详细示例。

重点和重要性 - 交互将用户的注意力集中在应用程序中真正重要的内容上,因此只有在真正需要时才需要使用它们。两个平台都不鼓励过多的动画,因为它们会分散用户的注意力并使用户感到紧张。

一致性和层次结构 - 请务必记住,交互通过显示元素彼此之间的关系来帮助用户在应用中定位自己。从一个屏幕到另一个屏幕的自然,流畅的过渡使用户保持沉浸其中。动作向导为如何执行操作提供了有用的建议。

尽管使用微动画的基本建议在“Material Design Guidelines”和“人机交互指南”中非常相似,但仍有一些明确定义的差异。用户习惯于这些特定于平台的过渡,并觉得十分自然。

这就是为什么要特别注意熟悉的交互是十分重要的,这将改善用户体验并在每个平台上看起来自然。

iOS

iOS用户习惯于iOS中使用的微妙动画,例如平滑过渡,设备方向的流畅变化和基于物理的移动。当移动没有意义或似乎违反物理定律时,iOS用户会感到迷失方向。例如,如果用户通过从屏幕顶部向下滑动来显示视图,则他们希望能够通过向后滑动来退出视图。HIG强烈建议,除非您正在创建诸如游戏之类的沉浸式体验,否则您可以使自定义过渡动画与内置动画相媲美。

Android

根据“Material Design Guidelines”,在转换期间,转换的界面元素分为传出,传入或固定。项目所属的类别会影响其转换方式。

动画引导用户注意。当UI改变外观时,动作在转换之前和之后提供元素的放置和外观之间的连续性。导航转换是与界面进行整体交互的重要元素。它们通过表达应用程序的层次结构帮助用户定位自己。例如,当元素扩展以填充整个屏幕时,扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

导航转换是与界面进行整体交互的重要元素。它们通过表达应用程序的层次结构帮助用户定位自己。例如,当元素扩展以填充整个屏幕时,扩展行为表示新屏幕是子元素。它展开的屏幕是它的父元素。

父级视图对子视图过渡的例子(Material Design Guidelines)

在父屏幕上,嵌入的子元素在触摸时会抬​​起并在适当的位置展开。

过渡将重点放在子屏幕上,同时加强了父子视图之间的关系。

共用相同父级的屏幕(例如相册中的照片,个人资料中的部分或流程中的步骤)一致地移动以加强他们的关系。视图从一侧滑入,同时同级的视图在相反方向上离开屏幕。

选项卡位于同一高度,并在水平方向上一起移动

在应用程序的顶层,选项通常被分组为主要任务(可能彼此不相关)。这些屏幕通过更改不透明度和比例等值来转换。

结论

当然也有例外:一些iOS应用程序遵循Material Design Guidelines(如Gmail),一些Android应用程序遵循人机交互指南(如Instagram)。

左 — Gmail on iOS; 右 — Gmail on Android
左-Instagram on iO;右 -Instagram on Android

但有一点是显而易见的 - 使用原生组件为两个操作系统设计移动应用程序要快得多。因此,最好花时间对应不同的系统平台设计而不是开发一个应用程序模型,因为一个应用程序模型是Apple的人机交互指南和Google的Material Design组件的混合,然后由于自定义元素而花费大量时间进行开发。

想要查看本机设计应用示例,其中我们使用本机元素以及具有强大样式的自定义界面?访问我们的DribbbleBehance页面,以更好地了解我们的能力。

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

推荐阅读更多精彩内容