为Android和iOS设计|两个平台的故事

　　无论您是在内部工作，还是代理机构，公司都需要应用程序。成立的公司尤其需要迎合现有客户和他们使用的设备。通常这意味着Android和iPhone的新应用程序。无论您是在内部工作，签约还是代理机构，公司都需要应用程序，其原因有很多。成立的公司尤其需要迎合现有客户和他们使用的设备。通常这意味着Android和iPhone的新应用程序。

　　在理想的世界里，我们花了几个月的时间来设计两个应用 但实际上，很多项目都没有这么多时间。对于我所使用的任何应用程序，截止日期已经足够设计一个应用程序，更不用说将项目完全分成两个。

　　通常情况下，你正在设计一个应用程序，调整之前，将其交给两个开发团队。如果您是以这种方式设计应用程序，那么了解两种平台之间的差异很重要，而且您可以快速体验每种平台的体验。

　　开始之前：选择您的方式

　　保持你的对手靠近您可能会对一个系统有个人偏好。我一直使用iPhone，所以我对iOS的UI模式有了更自然的理解。首先要做的就是与其他平台交手，最好的办法就是购买另一个设备，Android就是我的例子。把这个作为你项目的主要设备甚至是一个好主意，真正感受到这个平台。

　　如果你在内部工作，让他们给你买一个测试设备。如果有任何问题，与管理层沟通，了解替代平台的价值将会增加您的设计工作(两种设备的成本贵于自己的口袋，但对于企业而言，这相对于设计和开发一个新的应用程序)。如果你是自由职业者，你应该可以把它写在税单上。

　　2.选择一个潜在客户当我们在同时为两个平台设计的时候，在处理时间有限的真实世界的时候，你将不得不接受一开始就优先考虑一个平台的现实。做出这个决定不是基于你的个人喜好，而是基于你的应用程序的市场。在你的市场上有更多的人使用Android手机吗?这是一个付费应用程序吗?目标受众是什么?提出这些问题将有助于您决定哪个更可取。

　　3.了解规则阅读Android 和iOS的 UI准则。在过去，苹果公司以对其指导方针更加严格而着称。要在应用程序商店中获得应用程序，需要大约两周的审批流程。Play商店没有审批流程。不过，由于Android平台的进入门槛较低，设计质量一直较差。Google正在考虑用他们的材料设计指南改变这一点。

　　有很多好的和免费的UI工具包可以用于你的项目(你会发现在本文最后列出了一些)。使用这些组件自然会给你的应用程序一个本地的感觉。但是，即使你获得了UI工具包，知道在哪里出现差异以及平台之间的相同位置也是非常棘手的，所以这就是我想要帮助的地方。

　　设计你的应用程序

　　按照这些简单的步骤，您的应用程序将在正确的轨道上适应Android和iOS设备。

　　一般风格

　　自从iOS7以来，苹果已经转向了一种平坦的设计风格，并且抛弃了定义iPhone早年的skeuomorphic阴影，纹理和效果。Android在开始时更为系统化，而另一方面却略微有所改进。Google的新材质设计指南为现实世界提供了更微妙的参考，采用分层的纸张方法提供更多的层次结构。

　　2.真正的按钮Android手机有一个后退按钮，可用于返回到应用程序中的以前的屏幕。

　　iPhone没有这个按钮，所以需要有一种方法可以回到上一个屏幕。这通常是通过屏幕左上方的背字形完成的，但需要在应用程序的各个旅程中考虑。

　　3.全球元素全局元素(如状态栏和标题)出现在设计的所有页面上。如果您希望应用程序具有本机特性，则不应该改变这些小节的高度或样式，所以我建议您在每个平台的首页设计中定义一次。然后，您可以在每个模型中使用占位符(或主操作系统的状态栏和顶部栏)，但向开发人员指出它应该是全部相同的。

　　每个平台上的导航栏之间有细微的差异。在Android上，文本是左对齐的，而iOS则是居中。在iOS上，很多公司用他们的公司标志替换了主页的标题，但这不是Android上的最佳实践。状态栏(包括网络，电池和时间信息)是本机组件，您不需要考虑设计。只要确保在展示模型时使用正确的模型以避免混淆或分心。

　　4.导航也许iOS和Android平台最大的区别在于导航。Android上的主要导航模式是一个抽屉菜单。Android用户自然会选择这个菜单项目，并且在整个体验中，它往往是无所不在的。苹果的指导方针更倾向于位于屏幕底部的标签栏，并允许轻松访问应用程序的顶级区域。当您决定应用程序的顶级架构时，可以为两个平台规划两个单独的菜单。

　　正如你在这里看到的，有两种导航模式：Android的抽屉菜单和iOS的标签栏。在处理个别视图时，隐藏导航层有时会更容易。

　　5.卡片，不是?卡片正在成为数字设计的主要UI模式。它们是多功能的，并且允许用户以适合移动行为的方式快速消费内容。从视觉上看，卡片非常适合Android的材质设计(受到纸质的启发)。在卡片之间使用阴影和合理的排水沟会自然地创造一种本地的外观和感觉。

　　在iOS上，使用卡需要更多的关心和考虑。即使像Facebook和Pinterest这样的大型应用程序也会使用与iOS指南略有不同的方式使用卡片。iOS指南建议在透明胶片和叠加层中使用深度，但基本视图通常更平坦。Instagram使用完全平坦的设计风格，尽管每个帖子可以被视为从建筑的角度来看卡片。值得一看的是，在iOS风格下，Instagram如何获得相同的组件感受。如果你要在iOS上使用卡片，使用任何阴影都要非常温柔，尽量保持它们的微妙。

　　6.版式iOS上的系统字体系列是Helvetica Neue。在Android上，它是Roboto。虽然字体的风格明显不同，但字体的度量十分相似。如果您节省了时间，您将足够安全，只需使用一个，但可以与开发人员沟通，为系统实施正确的字体。当处理重要的布局和字体大小的极值时，建议至少用两种字体测试版式。

　　如果您想要多走一步，您需要再次关注每个平台上的排版和布局约定，再次参考上述指南。几个概括：

　　a: Android Material Design在布局中使用充足的空白区域 b: 在材料设计中还有更多的字体大小的使用。大量空间的标题提供了层次结构 c: 在iOS上，尺寸的变化不大。但字体权重的变化稍微有点多，这仍然允许您创建 一个层次结构。 d: 通常，这两个平台在字体系列中使用较轻的权重。但是，在下面的例子中， Android设计使用了Roboto的轻量级和常规权重，iOS设计使用了Helvetica Neue的粗体和常规权重。

　　这是一个非常简单的例子，强调即使以简单的方式，印刷术可以立即告诉你，如果你正在处理Android或iOS应用程序。

　　7.网格和触摸目标iOS(44px @ 1x)和Android(48dp - 48px，比例为1：1)的触摸目标的指南略有不同。材料设计指南还建议将所有元素对齐到8dp 方形基线网格。

　　在我所研究的最新项目中，我们发现遵循这些Android准则更为安全，因为(a)较大的48px触摸目标对于两个平台都是安全的，(b)Material设计的布局更加明确和最新。无论哪种方式，你将需要一个网格来处理，但Android更严格的定义，我们发现8DP的工作。这意味着在水平和垂直平面上以8dp为增量设置文档，以创建平铺网格布局。

　　8.按钮样式Material Design中定义了几种按钮样式：

　　㈠ 浮动动作按钮： 最传统形状的按钮。阴影很沉重，把它们从页面上提起。这些只能用在背景上，或者只用在卡片上。他们不应该用于警报或弹出窗口，因为这样做会造成太多的深度。主要行动采取你的口音的颜色，而次要版本通常是不太突出的颜色。㈡ 平面按钮：本质上是重音颜色的文本，没有任何边界元素。他们使用填充和所有帽的情况下给他们的结构。

　　与Material Design相比，iOS应用程序的外观通常很平坦，不会使用深度或阴影。主按钮具有填充颜色，而辅助按钮则使用相同颜色的笔划反转出来。这个比喻可能会变得有限，尤其是当与制表符和其他要素相比时。为了获得这个非常平坦的风格，重要的是要有明确和一致的隐喻什么颜色在您的应用程序的意思。

　　iOS也有一个纯文本样式按钮，但它不共享Android的大写样式，字体重量较轻。

　　信息信息预读操作表允许用户从一个UI项目的多个操作中进行选择。例如，当我触摸(或长时间按压)图像时，我可能想分享，上传，复制或删除图片。

　　iOS和Android以稍微不同的方式处理这个问题。首先，在屏幕底部显示类似的动作表，作为当前视图的叠加。

　　借助操作表，覆盖图和提醒，iOS和Android使用不同的详细信息来指示图层的深度：㈠ Android叠加层具有纯色和略微的投影，表示它是上面的纸张层。㈡ iOS叠加层没有阴影，但在背景上有轻微的透明度。

　　下拉按钮只存在于Android上，这是一个快速的选择方法。请记住，但是，没有一个本地的iOS等价物。在下面的示例中，用户在步骤1中按下配置文件，并在该位置显示一个简单菜单以选择其中一个可用配置文件。这些菜单也经常从操作栏的覆盖按钮中用三个垂直点表示。

　　特定的数据输入对于像日期和时间的特定输入，Android现在带有内置的对话框。这些看起来像警报弹出窗口，但用户界面特别迎合输入这种类型的数据。显示一个日历输入的例子。Android为输入日期提供了一个优化的覆盖。iOS处理这个问题的方式很不一样，就像一个底部表单出现的轮子一样。在计划这些时要小心，并在输入组件的早期与开发人员进行交流。

　　10.分段控制分段控件用于在单个视图中的不同内容之间切换。他们的使用是相同的，但他们在每个平台上的视觉非常独特，所以使用正确的风格是很重要的。在iOS上，有三个选项卡，类似于前面讨论的线路按钮。在Android上，它们用简单的下划线表示，并给予更多的空白来表示它们的交互。

　　11.警报获得这些权利的风格很重要，因为他们可以控制重要的行为，如注册，接受条款，甚至确认付款。我们希望他们觉得可靠和本土。

　　Android提醒使用之前显示的平面按钮样式，尺寸可以在材料设计指南中找到。这些操作位于警报的右下角。按钮实际上是完全基于文本的。他们使用全部大写字母给他们更多结构，并且他们运载您的app的主要行动颜色。

　　在iOS上，操作由分隔符分隔。他们通常是在句子或标题情况下，因为他们从单独的块获得他们的结构。他们是在现场集中，他们将再次继承你的积极的色彩。

　　12.图标图标设计是UI设计中的专业领域。无论您是使用免费的图标，调试图标设计器，还是自己设计图标，每种平台都有独特的风格。iOS普及线图标，非常细的笔画。Android系统图标有较粗的笔划，或者是完全可靠的图标。过去，Android图标使用透视或三维扭曲，但是现在他们的指南指定了直观的二维图标。下面是一个用于比较的几个图标的简单示例，或者使用Android 或iOS图标指南的直接链接

　　13.小吃，敬酒，加载图像倒霉13.有几个UI细节可以通过裂缝。常见的警报和加载图标通常留给开发人员。你可能有经验的流氓spinners和奇怪的警报已经感觉与应用程序的其余部分不协调。这些东西往往是原生的解决方案，但他们可以调整到您的应用程序的风格。这绝对是一个与开发者合作的领域，是决定你的工作方式的最好方式。

　　14.通用的UI控件单选按钮，复选框，字段和开关是功能组件，应给予本地的感觉。与警报和对话一样，这些控制和输入对于用户来说是一个信任和熟悉的领域。尽可能使用本地组件，以便人们(a)知道如何使用它们，(b)信任您的应用程序的敏感数据或付款细节。

　　在下面的例子中，我们看到Android和iOS的开关和单选按钮。再一次，这些差异足够小，可以让你用一种设计来进步，稍后再调整，但是细微的差别对于本地化的外观是必不可少的。尽可能多地使用你的UI工具包来处理这些组件，并且在这个过程的早期再和开发者进行交流。

Android(左)和iOS(右)

　　总结用一种设计在iOS和Android上为您的应用创建原生的感觉不是不可能完成的任务。尝试从一开始就保持这些调整的顶部，注意在一个平台上感觉不同步的组件，并始终与开发人员密切合作。

*请认真填写需求信息，我们会在24小时内与您取得联系。