不管你是在家，在公司，还是在设计师工作室工作，互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要，这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。
在理想的情况下，我们希望能花上好几个月的时间来分别为两类设备设计一款 App，但是实际上，我们没那么多的时间。就我所负责的项目而言，每次的时间都仅够我设计一个 App。通常情况下，我们也都只设计一个 App，然后在交给 iOS 和 Android 开发团队之前将它们做一些微调。要按照这种方式进行 App 设计，首先我们应当预先了解这两个平台之间的差异，这样你才能够使得你设计的 App 在这两个平台上的外观都能显得自然。
在设计开始之前1. 了解另外一种系统你很可能有自己更加喜欢的一个系统，像我一直使用 iPhone，所以我可能对 iOS 上的 UI 样式有更多的了解。在进行跨平台设计的时候，你应当首先去做的一件事是了解另外一个系统，当然最好的方式去新买一只手机，对于我来说，就是 Android 设备。
2. 选择一个优先的平台由于我们一次要对两个平台进行设计，在时间有限的情况下，你需要接受的一个事实就是——必须有一个平台需要优先设计。如何选择优先的平台并不在于你的个人喜好，而是在于你设计的这款 app 的市场定位如何。你所处的环境中有更多人使用 Android 设备吗？它是收费 App 吗？你的目标受众是谁？问问自己这些问题有利于你决定哪一个平台应当是被优先满足的。
3. 了解设计规范阅读 iOS 和 Android 的设计规范。在过去，iOS 被认为有着更加严格的设计规范，有时候为了让 App 能够上线 AppStore，你需要走一个大约两周长的流程。而在 Play store 里则不存在这样的审批流程。然而，恰恰由于 App 上线如此开放，Android 平台上的 App 质量一直因为良莠不齐而饱受诟病，Google 为此推出了 Material Design 来试图解决这个问题。
对于 Web 设计者而言，他们早就熟悉了 MD 了
网上有很多免费而且好用的 UI kit，你可以将它们用在你的项目中，你可以在这片文章的最后找到一些 kit 资源的下载链接，使用这些组件将会给你的 App 带来一些原生的感觉。但是即使你使用了这些 UI kit，想要了解“什么时候应当做出区别以及什么时候两个平台应当保持一致”还是需要一些技巧的。在这里，我将向你分享一些我的经验。
设计你的 App遵循这些步骤，你的 App 就能同时在 iOS 和 Android 保持完美！
1. 总体的样式从 iOS7 以后，Apple 就一直在采用扁平化的设计模式，去除了所有不必要的纹理和阴影等效果——和早些年间的版本完全不同。Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。
2. 实体按钮Android 有一个返回按钮，点击它可以返回上一个屏幕。
iPhone 上则没有这样一个按钮，所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。
3. 通用元素两种平台之间的确存在着一些通用的元素，比如说状态栏和标题栏，它们会出现在每一屏的顶部。你不应当改变导航栏的高度，如果你想让 App 看起来更加原生的话。所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。
不同平台上的导航栏有一定的差别。在 Android 上文本是左对齐的，然而 iOS 上是居中对齐的。在 iOS 上，很多企业都用它们的 logo 来替换首页标题栏中的文字，但是在 Android 设备上这不是一个好的主意。状态栏（显示你的网络、电量和时间信息）是系统组件，你不需要考虑设计它，只要确保它们不会对他人造成误解就好了。
4. 导航或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。Android 上最主要的导航方式是抽屉菜单，Android 用户们通常在这个菜单内进行跳转。而且在整个 App 中，这种体验是一贯的。Apple 的导航样式更倾向于 tab bar，它位于屏幕的底部，并且以一种很简单的方式实现上部内容的切换。当你设计 App 的结构的时候，你可以为不同的平台设计不同的导航样式。
5. 要不要用卡片式？在 UI 设计中，卡片正逐渐成为一种主要的 UI 设计样式，它们可以应付多种情况，而且给用户提供了一种能够呈现有效内容的便捷方式。视觉上，卡片非常适应于 Android 的 Material Design（它事实上源自于纸张的灵感）。使用阴影和卡片之间的合理间距能够创建一种自然的外观。
在 iOS 上，使用卡片设计需要更加的小心谨慎，尽管一些大型的 App，诸如 Facebook 和 pinterest 的确使用了一种略微偏离 iOS 视觉规范的设计风格。Instagram 使用了一种完全扁平化的设计风格，尽管从结构的观点上看，用户的每一条推送都能被视为是一张卡片，instagram 的设计很值得你去花时间揣摩，它是如何遵循 iOS 视觉规范的。如果你要在 iOS 平台上应用阴影，你最好小心谨慎，尽量使得这些阴影不是那么的明显。
6. 排版iOS 系统上的默认字体是 Helvetica Neue，在 Android 上则是 Roboto。尽管这两种字体在外观上有显著的差异，但是这两个字体的尺寸却是近乎相同的。如果你想要在设计的时候节省时间，那么用一款字体就可以，但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时，我建议你还是同时用这两种字体测试效果。
如果你想要精益求精，那么你就要对不同平台上的设计规范更加注意。比如如下几条：
- Android 的 MD 设计需要用到更多的空格来进行布局
- 在 MD 中字体大小的变化会更加多样
- 在 iOS 上，字体没那么多大小差异，但是在字体重量上（Font weight）有更多的变化，同样允许你创建主次结构
- 两个平台都使用比较细的字体来现实正文内容，然而，在下面的例子中，Android 使用了轻（Lighr）和常规（Regular）字体，而 iOS 使用了粗体（Bold）和常规字体
这是一个非常简单的例子，向你展示了排版方面的一些细微的不同可以导致印象上的巨大差异——你能很快分辨你是在用 Android 手机还是在用 iPhone！
7. 网格和触摸元件iOS（@1x 下 44px）和 Android（1:1 比率下 48p）都有对可触摸元件的设计规范。MD 规范同样建议对所有元素使用 8dp 网格对齐。
在最近的项目上，我发现遵守 Android 的这些设计规范会更加安全，因为大一些的 48px 的按钮在两个平台上都表现良好，而且 MD 的规范更加全面，还经常更新。不管怎么说，你都应该在设计中使用网格，但是我们发现定义更加明确的 Android 网格会更好用一些。
8. 按钮样式这里是 MD 下定义的几个按钮类型：
- 浮动动作按钮（Floating action buttons）：最传统的有边框的按钮，阴影厚重明显，将它们从页面上分离出来。它们仅应当被用于背景，或者谨慎地在卡片上使用，不应当在警告框或者弹出框上使用，因为使用这种按钮，就会创建一层视觉深度。这种按钮的填充颜色一般使用 App 的主色，而下一种按钮，通常使用辅助的颜色。
- 扁平化按钮（Flat buttons）： 通常文本使用 App 的主色，没有边框，它们通常使用间距和大写字母来强调不同内容之间的分离关系。
和 MD 相比较，iOS App 在外观上是完全扁平化的，没有层级深度和阴影。主要按钮有填充颜色，次级按钮反转颜色，也就是说，有着主色的边框和文字。这种方案有时候会受到一定的限制，特别将它是用于标签栏等元素的时候。要用好这种设计模式，你必须对不同的颜色在你的 App 中分别代表什么有一个清晰的概念。
9. 动作表单动作表单（Action sheets）允许用户在多项操作中进行选择。比如，当我点击（或者长按）我想要分享、上传、复制或者删除的图片时。
iOS 和 Android 用近乎相同的方式解决这种问题。首先，动作表单都是出现在屏幕的地步，然后在主要内容上罩上一层阴影。然而，它们在创造不同的深度和其他细节方面有着一些不同。
- Android 在动作表单上加了一层厚重的阴影，表明它是脱离于原先的内容的。
- iOS 的动作表单没有阴影，仅仅是在原先的背景上防止了一个有一定透明度的灰色图案。
/1 
窥视卡
雷达卡
发表于 2015-8-25 16:12:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
