想一想 2009 年你的第一部智能手机上的应用程序。拟物图标、渐变按钮和背景纹理?还记得 Android 手机上的深色背景和充满活力的字体吗?

我相信你能分辨出 2009 年和 2022年移动应用程序设计之间的区别。但你真的能指出今天 iOS 和 Android UI 设计之间的巨大差异吗?尽管如今的移动界面清晰且用户友好,但扁平化的设计方法使所有移动平台样式看起来都非常相似。
多平台移动设计的总体目标是实现品牌一致性并与特定平台的约定保持一致。但是,真正确保跨平台版本、制造商、屏幕尺寸和密度的样式和布局一致性的唯一方法是使用自定义 UI 组件。在进行定制时,您总是冒着创建用户感觉不“在家”的风险。
因此,这里对平台进行了简要比较,这将帮助您决定使用标准组件设计还是自定义组件设计。
风格哲学
Google Material Design 更偏向于可定制和流畅的界面,而 iOS 一直更偏向于清晰直观的界面。在他们的核心理念中,你可以很容易地找到他们特定风格特征的基础。屏幕深度
使用应用程序时,深度感至关重要。用户需要关注对完成任务很重要的屏幕元素,例如按钮、输入字段和导航栏。材料设计为 UI 层使用不同的阴影样式。阴影值取决于标记特定 UI 元素重要性的 Z 轴。iOS 设计使用渐变、背景模糊和半透明颜色叠加来实现相同的层次结构。
颜色
材料设计调色板更接近 CMYK 模型而不是 RGB。它包括各种较深或较浅的基本颜色。基本颜色主要用于 UI 重音,例如操作、项目标题、图标等。相同颜色的阴影用于标签栏、抽屉和其他导航元素。相反,iOS 的调色板简单而充满活力。常见的 UI 元素,如列表项、条形、背景等,大多以灰色、黑色或白色的阴影呈现,而鲜艳的颜色则用于图标、按钮、链接和其他强调色。
排版
iOS 和 Android 的排版层次结构有所不同。显示和正文字体大小的巨大对比使内容在两个平台上都显得更加生动和有趣。在典型的 Android 屏幕上,对比度是通过使用更大的尺寸和更薄的字体来实现的。在 iOS 11 中,通过带有大而加粗的标题和小标题的权重层次结构,对比度更加明显。重要的是要记住,在 Material Design 中,标题和文本在屏幕上大多是左对齐的,尤其是在导航元素方面。在为 iOS 设计时,您应该保持操作按钮和较小的标题居中,而标题、副标题和正文可以左对齐。
图标样式
Material 设计鼓励使用扁平图标,而 iOS 设计更喜欢细的 1px 或 2px 线条图标。这是一个很小但很重要的样式细节,在为另一个移动平台调整应用程序时应该考虑。如果您的应用具有特定的图标样式,则您不一定要遵循此规则。看看 iOS 11 中的新锁屏,他们似乎正在摆脱只使用轮廓图标的方式。边框
一个简单的单像素笔划重音在高分辨率 Android 设备上可能看起来很棒,但不要忘记 Android 设计应该在大多数屏幕密度下都有效。在这些情况下,开发人员必须重新考虑设计元素并考虑应用程序代码中的不同情况。品牌推广
品牌颜色及其色调的使用在 Material design 中更为占主导地位,而 iOS 指南建议使用更微妙的品牌方法。在 iOS 中,它应该只在 UI 元素中可见,例如图标、显示图形、按钮或链接。应用程序图标
新的 Android 应用程序图标是自适应的,这意味着它们旨在适应不同设备的不同蒙版形状(圆形、圆角矩形……)。iOS 应用程序图标仍仅限于圆角矩形。动画和过渡
UI 动画应该只在与用户行为相关时使用,并且它们应该让人感觉不显眼。Material 动画风格是纸张分层哲学的产物,运动风格包含大量的涟漪效果和戏剧性的形状扩展,而 iOS 动画则更加微妙和自然。
导航
清晰自然的导航保证了健康的信息架构。除了风格差异之外,了解导航系统的基本特征也很重要。抽屉
Material Design 提供了很多隐藏内容的组件,让用户更容易找到最相关的功能。例如,如果您有很多内容,您可以随时使用抽屉。在抽屉外面展示关键功能,把不那么重要的东西放在抽屉里。有许多使用抽屉的 iOS 应用程序。然而,iOS 抽屉没有原生组件或设计指南,因为推荐的导航解决方案是原生标签栏。
标签栏
在 Android 应用中,主屏幕的底部导航栏仅在顶级导航中可见,因此不要从导航根目录走得太深。iOS 设计理念始终把内容放在首位,很少隐藏任何东西。原生标签栏使用户能够在主要内容之间轻松切换,并鼓励用户探索应用程序。标签栏始终存在,并且很容易在导航的更高和更深级别之间切换。
返回键
Android 应用程序同时具有向上按钮(集成在应用程序中)和后退按钮(本机组件)。向上按钮可让您备份导航根目录。后退按钮通常会将您带回与向上按钮相同的屏幕,除非您之前已从一个应用程序切换到另一个应用程序。在这种情况下,后退按钮将带您返回上一个应用程序。在 iOS 应用程序中,即使您可以在选项卡栏中的选项卡之间切换,导航较低级别的每个屏幕都应该有一个返回按钮,因为这是您可以向上导航根的唯一明显方式。