随着互联网的发展，越来越多的企业都设计爱屁屁。为了满足多样化的顾客需要，一般都需要同时开发运行在 Android 和 iOS 设备上的 App。如果要给两种设备都做设计那需要的时间成本就太高了，那么样才能设计出一种就能同时在两个平台上都显得很自然呢？

据经验你只要遵循这些步骤，你的 App 就能同时在 iOS 和 Android 保持完美！

1.设计一个总体的样式

从 iOS7 以后，Apple 就一直在采用扁平化的设计模式，去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。

2.Android 实体按钮

Android 有一个返回按钮，点击它可以返回上一个屏幕。

iPhone 上则没有这样一个按钮，所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。

3.通用元素设计

两种平台之间的确存在着一些通用的元素，比如说状态栏和标题栏，它们会出现在每一屏的顶部。你不应当改变导航栏的高度，如果你想让 App 看起来更加原生的话。所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。

不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的，然而 iOS 上是居中对齐的。在 iOS 上，很多企业都用它们的 logo 来替换首页标题栏中的文字，但是在 Android 设备上这不是一个好的主意。状态栏（显示你的网络、电量和时间信息）是系统组件，你不需要考虑设计它，只要确保它们不会对他人造成误解就好了。

4.导航设计

或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单，Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中，这种体验是一贯的。Apple 的导航样式更倾向于 tab bar，它位于屏幕的底部，并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候，你可以为不同的平台设计不同的导航样式。

5.排版

iOS 系统上的默认字体是 Helvetica Neue，在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异，但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间，那么用一款字体就可以，但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时，我建议你还是同时用这两种字体测试效果。

6.网格和触摸元件

iOS（@1x 下 44px）和 Android（1:1 比率下 48p）都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。

在最近的项目上，我发现遵守 Android 的这些设计规范会更加安全，因为大一些的 48px 的按钮在两个平台上都表现良好，而且 MD 的规范更加全面，还经常更新。不管怎么说，你都应该在设计中使用网格，但是我们发现定义更加明确的 Android 网格会更好用一些。

7.按钮样式

这里是 MD 下定义的几个按钮类型：

1. 浮动动作按钮（Floating action buttons）：最传统的有边框的按钮，阴影厚重明显，将它们从页面上分离出来。它们仅应当被用于背景，或者谨慎地在卡片上使用，不应当在警告框或者弹出框上使用，因为使用这种按钮，就会创建一层视觉深度。这种按钮的填充颜色一般使用 App 的主色，而下一种按钮，通常使用辅助的颜色。

2. 扁平化按钮（Flat buttons）： 通常文本使用 App 的主色，没有边框，它们通常使用间距和大写字母来强调不同内容之间的分离关系。

8.动作表单（Action sheets）设计

动作表单允许用户在多项操作中进行选择。比如，当我点击（或者长按）我想要分享、上传、复制或者删除的图片时。

iOS 和 Android 用近乎相同的方式解决这种问题。首先，动作表单都是出现在屏幕的地步，然后在主要内容上罩上一层阴影。然而，它们在创造不同的深度和其他细节方面有着一些不同。

下拉按钮

只存在于 Android 上，它允许用户快速选择功能。然而，记住，这并不是 iOS 原生的控件之一。在下面的例子中，用户点击 profile，然后弹出了一个下拉菜单，提供了几个选项。

特殊数据输入

像特定的一些数据的输入，比如日期和时间，Android 现在有了原生的对话框，虽然它们看起来像是警告弹出框，一个例子是日历输入。iOS 使用完全不同的方式解决这个问题，它会在屏幕的底部弹出一个转轮让用户进行选择。在设计这些东西的时候要小心，并且和开发人员做好沟通。

9.分类控制

分类控制允许用户以一种简单的方式在不同内容之间进行跳转。在不同的平台上，该控件的使用方式是完全相同的，但是在视觉上有着显著差异，因此要注意使用正确的形式。在 iOS 上，分类控制控件的外观很像我们刚才提到的按钮。而在 Android 上，通过间距来展现它们的分离关系，同时用下划线来标明目前所处的位置。

10.弹了框

正确地处理这一类型的控件十分重要，因为他们也许会涉及到一些很重要的操作，例如注册，确认条款，甚至是确认支付。我们需要让他们看起来是原生的，以便产生一种安全感和信任感。

Android 的警告框使用的按钮样式，就是我们先前提到过的扁平按钮，你可以在 MD 说明文档中找到它们应有的尺寸。动作按钮位于卡片的右半部分。实际上，所谓的按钮其实就是一个文本。它们使用大写字母将它们和其他内容区别开，并且使用 App 的主色。

11.ico

不管你是使用免费的 icon，和专门的 icon 设计师合作，还是自己设计 icon，不同的平台上对 icon 都有特别的样式要求。即使你要自己绘制 icon，或者是请专门的 icon 设计师帮你绘制，你也有可能用到它们（做你的占位符吧！）。

12.面包菜单、载入图片

不幸的数字 13（注：最后的晚餐的在场人数）。通常来说，警告框和表示载入的图标留给开发者做决定。你或许已经经历过弹出框和警告框的设计和 App 的其他部分样式完全脱节的情况。那是因为通常 iOS 和 Android 平台都有对这些情况的默认的处理方案，但是你也可以利用你的方案进行替代。在这里，让你的设计能被真实还原的最好的方式就是和开发人员多进行沟通。

13.通用ui控制

复选框，单选框和输入框，以及开关都是应该有着原生感觉的控件。像警告框和对话框一样，这些控件保持默认样式的话能够给用户带来熟悉感和信任感。尽可能多地使用原生控件，用户自然知道如何使用他们，并且在涉及到敏感信息和支付事宜的时候能够更信任你的 App。

在下面的例子中，我们可以看到两个平台上的差异其实是很小的，小到你在设计的时候可以忽略这些差异，用其中一种形式设计，但是不要忽略细节上的差异所带来的原生的感觉。使用你的 UI 库，并且在开发的早期和开发人员做好说明。

在同一个设计稿中同时呈现出原生 iOS 和 Android 的感觉也并非一件不可能的任务。尝试在设计之初就注意到这些差别，并且注意对控件的使用，并且在设计过程中和开发人员保持紧密的联系。

本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址：https://www.mcykj.com/show-19-254-1.html转载请注明出处！