这是一本实用的跨平台设计指南

为不同平台设计和开发感觉就像在不同国家之间旅行。吃饭、睡觉、参观景点都是一样的，但是这些国家的风俗习惯和社会制度会限制你的吃饭、睡觉和参观景点的方式。在一些国家，把人推上火车是可以的，用刀叉吃汉堡是可以的，但在其他国家可能并非如此。同样，如果您首先在 iOS 上开发产品sketch layout，不要指望将其直接移植到 上不会出现任何问题。您的应用程序会在 中感到迷失。在设计和开发之前，了解各个平台的习惯和惯例非常重要。根据平台规范设计和开发您的应用程序，以便该平台上的用户可以轻松理解和使用您的应用程序。无论您使用哪个平台，您都可以获得最清晰、最真实的产品版本。本文将告诉您一些实用技巧，帮助您将应用程序从 iOS 平台转移到 （或从 转移到 iOS），以避免平台文化之间的差距。

“在进行设计和开发工作之前，了解每个平台的风格和习惯非常重要。”

学习

它是一种新的跨产品、跨平台设计方法，使用模拟现实生活中的层次关系、大胆的图形设计和有意义的动作来帮助软件定义其行为。它是 5.0及以上设备的默认视觉语言，因此学习系统原理对您的项目开发非常有帮助。

设计规范提供全面的规范。当你从iOS平台转向设计和开发应用程序时，有几个单独的点需要特别注意。

表面和深度

iOS 使用模糊效果来表示深度，而 使用凸起的表面和阴影来表示层次结构。这些属性应用的对象可帮助您构建将在整个应用程序中使用的空间模型。

互动与运动

非常强调刺激用户发起的运动和触摸反馈。当您点击某个组件时，您的手指会产生触摸波纹；当您点击按钮时，按钮会升起（实质上使其阴影变长）以适应手指的反馈。这种“磁性”响应在触摸反馈中很常见，这与 iOS 和网络的异常变色反馈不同。该磁响应是“真正的数字”( )。

此外，正常状态和按下状态之间的触摸波纹和磁反馈效果的平滑过渡比使用两个图像要好得多。这是视觉设计中微观连续性概念的一个很好的例子。

布局

和iOS严格遵循网格系统，就像图形设计一样。一切都遵循 8dp 网格规则（参见下面的 DP），在整个应用程序中创建一致的视觉节奏。例如，按钮通常为 48dp 高，应用程序列通常为 56dp，组件之间的间距通常为 8dp 的倍数。

此外，文本和其他元素通常采用参考线左对齐或右对齐，这与书籍和杂志中的垂直布局规则非常相似。手机的标准参考线是 16dp 和 72dp，但这些可以根据特定应用程序的需求重新制定。

字体

字体在和中扮演着非常重要的角色。 手机的默认字体是一个字体系列，其中包括许多粗细和变体。与 iOS 一样，该品牌的字体调色板应该集成到应用程序中。由于 排版引擎和光栅化因 设备而异，因此最好在多个 设备上测试字体。有时，相同的字体在不同的字体格式下看起来会有所不同。可能会出现一种字体格式看起来不错而另一种则不然的情况。所以一定要制作 OTF 和 TTF 字体的样本。最后，字体使用4dp稍细的基线网格，因此字体的高度应该是4dp的整数倍，如：20dp、24dp、32dp、32dp、36dp等。

安卓有何不同？

现在明白了一点，我们来说说平台和iOS平台有什么不同。

设计时以密度无关像素（dp）为单位，制作1x矢量图像。

在方面，一个非常重要的特性是测量单位使用密度无关像素（-pixel），通常缩写为DIP或DP。如果你之前在iOS或Web上进行过设计，那么DP基本上就相当于iOS点或CSS像素。使用 DP 作为单位可确保您的设计在不同密度的 设备上具有一致的物理尺寸。

中定义了 DP：

1dp=1px@1x（双倍图像的情况下，1dp=1px，双倍图像的意思）

“以 DP 为单位进行设计可确保您的设计在不同密度的 设备上具有一致的物理尺寸。”

从布局到图标的所有设计都以 DP 为单位。设计时使用矢量设计软件，例如 或 或形状工具，可以使计算尺寸变得更容易，并且可以在不牺牲任何视觉质量的情况下完成。让你的光栅图像看起来正常。

导出图标或其他静态图片时，导出的关键分辨率转换如下：

请注意， 会扩展您的资源，因此您不必总是为每种大小提供资源。开发人员还有许多用于自动生成缩小版的工具。另外， 5.0内置了矢量图标，并且有很多工具可以导出各种密度的图标资源。有关单位和密度的更多信息，请参阅规格和 DPI 设计指南。

应用程序与活动

应用程序是“活动”的集合，每个“活动”都是应用程序的一个内部页面。 “活动”由“意图”（）连接起来。例如，您按下活动 A 页面中的按钮，这会触发“启动活动 B”意图。听起来很简单，对吧？真正让 () 强大的是：

“() 允许你构造一些东西而不必重复它。”

例如，假设您正在构建一个消息应用程序。发送照片是一个非常常见的功能。你的第一反应可能是设计一个相机界面，然后是一个图片选择器，也许还有一个照片编辑器功能。幸运的是，() 省去了你重做相机、图片选取器、图片编辑器等功能，还可以让用户选择自己想要的相机应用、图片选取器、图片编辑器（当然前提是是用户已经安装了这些应用程序）。现在，流程变成：

用户单击“发送照片”按钮，然后触发“拍摄照片或选择照片”意图 ()。大多数 相机应用程序都支持此 ()。

iOS8提供的很多应用扩展相当于上面提到的中的使用意图()。例如，要允许在其他应用程序和您的应用程序之间共享照片和文本，只需确保“写入消息”活动 () 支持“共享此文本”和“共享此照片”意图。

() 还允许在应用程序内打开网页。例如，如果应用程序的某个特定活动（）声明可以支持“查看*”意图（），那么在单击网页链接后，将给用户两个选择：在浏览器中浏览或在中浏览网页应用程序（可能保存首选项）。

系统状态栏、导航栏、物理按钮

在系统中，用户可以随时使用“返回键”、“返回主界面键”、“多任务键”（最近使用过的任务）等功能。 使用这三个物理按钮作为硬件按键和软件底部的导航栏（不要与 iOS 导航栏混淆，后者更像是 中的顶部栏，带有一个小房子图标标题和操作）。

设备还将提供持久状态栏sketch layout，提供本地时间、信号强度、电池使用情况和通知等信息。

系统还会计算应用程序的导航栏（如果有的话），自动留出空间，减少一部分占用屏幕的比例，剩下的部分就可以为你的应用程序放置了。例如，在 Nexus 5 上，屏幕尺寸为 360 x 640 dp。当屏幕处于纵向时，导航栏的高度为 48dp，状态栏的高度为 24dp，因此您的应用程序仍然具有 360 x 568 dp 的空间。展示。

你可以隐藏状态栏（在某些情况下，甚至是导航栏），但当你这样做时，最好此刻离开系统UI，并将界面设计成允许用户随时使用系统。功能。 4.4和 5.0引入了新功能：允许您重新设计UI以根据系统UI呈现您的应用程序，使您的应用程序更加身临其境。

最后，物理按键的音量键是可用的，因此大多数情况下，不需要在应用程序中显示音量控制。

系统返回键

无论是带有物理键系统导航栏的设备，还是带有虚拟键系统导航栏的设备，都存在系统返回键。

作为设计师，很少会重新定义“后退”按钮，通常也不需要自定义自动后退按钮的行为。默认情况下，按后退按钮会关闭当前页面并返回上一页，即使上一页属于另一个应用程序（例如，另一个应用程序使用 () 打开照片编辑应用程序。）如果您只打开一个应用程序且位于该应用程序的第一个屏幕上，按“返回”按钮将返回到主界面。在Home界面按“返回”按钮不会有任何作用，仍然停留在Home界面。

请注意，“返回”按钮与应用详情页（如二级、三级页面）顶部导航栏的“返回”按钮不同。 “后退”按钮可以用作临时引导，而顶部导航栏上的后退按钮用于整个应用程序层次结构的导航，永远不会让用户离开应用程序。请记住，顶部导航栏上的后退图标与右侧的文本无关，这与 iOS 正好相反。如果导航栏上有文字，则表示当前页面的标题（不是返回图标的注释）。

底部标签

在iOS系统中，通常使用底部标签栏来切换模块页面，而平台规范建议使用顶部标签栏来切换模块页面。此外， 应用程序可以使用底部栏来显示操作（例如“完成”按钮、“下一步”按钮等）。

“在 上，最好避免使用底部标签栏。”

在 上，最好避免使用底部标签栏。这有助于平台上的不同应用程序保持一致的体验，并防止操作以及页面和模块之间切换的混乱。

iOS中的底部标签栏通常位于应用程序信息层次结构的顶层，导航栏通常放置在这里。因此，这些标签通常会在整个应用程序中使用。在系统中，如果有隐藏的抽屉菜单导航栏，其优先级应该较高，并且标签应放置在层次结构的第二级。单击选项卡将使您返回到新页面，顶部有后退图标（该选项卡不再存在）。

手势

手势操作将使应用程序的使用体验更快、更流畅、更愉快。在某个平台上，你总会注意到用户对手势交互的期望。在 上，大多数手势都是通用的，用户也会期望您的应用程序也是如此。规范中对手势有完整的解释，但在实际应用中最重要的是正确使用几个关键手势。

水平滑动在触摸设备上几乎无处不在。然而，与 iOS 不同的是，在 设备上水平滑动选项卡会切换选项卡——这是一个关键的预期行为。除了对标签进行操作之外，滑动通常会切换轮播并从集合中删除元素（例如从列表中删除元素）。页面的水平滚动在 平台上不太常见，固定页面边界更常见。

设备习惯于垂直连续滚动页面，并且不鼓励固定页面边界。鼓励使用滚动技术，例如固定点来优化每个滚动位置的布局。一个具体的例子：应用程序的某些栏可能会在您滚动时隐藏，但在您停止滚动时重新出现。

从屏幕左边缘滑动和从屏幕右边缘滑动也是常见的手势。 iOS 向左滑动可返回上一页。 将边缘滑动定义为两种习惯：第一，如果左侧或右侧有隐藏的抽屉菜单栏（汉堡菜单），从边缘向内滑动会打开隐藏的抽屉菜单。 。第二个是，如果您从边缘滑动带有内容的标签，则会更改标签。

最后要考虑的是长按。在 设备上，长按某个元素会选择它，然后开始拖动或不执行任何操作。应避免使用长按功能显示上下文相关菜单，并且最好减少为长按功能提供转到其他功能的快捷键的预期行为。由于长按功能是一种相当隐藏的手势，其行为通常并不明显，因此最好遵守平台规范。如果您确实希望小部件具有上下文操作，最好使用屏幕提示。

显示（例如溢出菜单和弹出窗口）。

尖端：

1、采用DP为单位，基本相当于iOS和CSS的像素。 1dp = 1px @1x()

2.在设备上，该应用程序可以与其他应用程序深度集成，并且不需要重写一些摄影和社交网络功能。

3、设备提供系统的“返回”键、“HOME”键和“当前任务”键用于任务切换。

4. 应用程序不应再有底部标签栏，而是使用可滑动切换的顶部标签栏。

5. 长按选择要拖动的对象或不执行任何操作。但最好不要使用长按来导致意外行为。

设计实践

现在我们已经解释了 iOS 和 之间的一些核心差异，让我们看看一些好的实用建议。

设计时，画布应该设置成什么尺寸？

设计师最常问的问题之一是在开始设计时画布应该有多大。虽然没有适合所有 设备的精确数字，但下表应该是了解此问题的良好起点。一般来说，5英寸的手机屏幕和9英寸的平板设备作为设计尺寸。

什么是可拉伸 UI 元素？

有一个内置程序支持可拉伸图像（如自定义按钮之类），这与iOS的可拉伸图形类似。在系统中，可拉伸的图像被称为“点九图像”。 九点图形包含沿图形周边拉伸的像素、填充颜色和光学边界信息。

由于第9点图片包含一些附加信息，因此其文件名必须以“.9.png”为后缀，以区别于普通的png图像文件。

自从有了兴趣，点九图就变得不太实用了，因为它提倡简单的形状（圆角矩形等），而这些形状可以直接用代码编写。不过点九图仍然为我们提供了高度自由度的UI元素定制。如果您使用“第九点”创建可拉伸的 UI 组件，请记住为各种分辨率提供相应的“第九点”图像，以便您的 UI 组件在任何屏幕上看起来都很干净。有一些工具可以让您轻松创建不同分辨率的九点图像，例如 Asset。

安卓旧版本

大家关心的问题之一是针对各个版本的进行设计，以及这些版本的视觉风格和用户界面框架的差异。例如，尽管 5.0 对共享元素转换提供了良好的支持，但它们在早期的 版本中仍然不可用。

您可能会立即认为您需要设计两个版本的应用程序，一个适用于 5.0 及更高版本，另一个适用于其他早期版本的 。这种方法虽然可行，但不是必须的。

“大多数元素都有非常清晰和精确的路径，可以在跨系统版本中使用。”

事实上，设计（和开发） 的早期版本并不是那么具有挑战性。大多数元素都有清晰、精确的路径来支持其跨版本应用。例如：

“与开发人员及时、尽早的沟通非常重要。”

尽早与您的开发人员讨论如何在以前版本的 上最好地实现您的应用程序非常重要。您不必为早期的系统版本做很多额外的设计工作。

安卓平板电脑设计

实际上没有必要重新设计一个完全独立的应用程序，除非你想为 平板电脑用户做一些独特的事情。单一应用程序的设计应使其能够同时适用于手机和平板电脑。

成功适配大屏的关键是适应性。 平板电脑的屏幕尺寸从7英寸到12英寸不等，因此不能只为一种尺寸设计固定尺寸。与响应式网页设计（Web）一样，您应该考虑如何在不同的屏幕尺寸上布局您的应用程序。更具体地说，考虑应用程序的主要内容元素并问自己几个问题：

1.每行最多可以有多少个字？ （每行超过 75 个字符？）

2. 图像的长宽比是多少？在不使布局变得怪异的情况下，图像的宽可以是多少？

3. 按钮最多可以有多宽？

回答这些问题可以帮助您发现内容在较大空间、图像大小、文本大小或附加内容和导航之后可能发生的自然内容中断。这种方法将为您提供更灵活的用户界面，而不受纯粹设备大小设计的限制。这也使得竖屏和横屏之间的切换变得更加容易，这是平板用户所期待的功能。

如果您了解自然内容断点，则在将应用程序从 iOS 移植到 时需要记住以下几点。与苹果的 iPad 不同，大多数 平板电脑的屏幕比例为 16:9（Nexus 9 是一个例外）。这意味着全屏观看视频固然很棒，但当你遇到稍短的横屏布局时，你可能需要垂直滚动，而很多内容可能无法适应稍窄的竖屏。同样，基于内容的断点是你最好的朋友——始终首先考虑内容，然后考虑屏幕尺寸。

有关 平板电脑设计的更多信息，请查看规格、应用程序和资源以及 this-oldie-but- 。

尖端：

1. 设计您的应用程序，然后针对平板电脑和旧版 设备优化设计 — 无需为每种设备尺寸设计单独的应用程序。

2. 有一个干净且标准化的方法来实现它，并且它也适用于各种版本。

3. 设计框架或原型时使用常见的画板尺寸。

4、系统提供了点九绘图工具，内置拉伸信息，而不是拉伸图形本身。

下一步

设计与其他移动平台设计不同，有一套核心的平台标准，以及一套完整的记录良好的建议和指南。

更重要的是，这给了设计师更多的创意和创新空间。它灵活开放，注重交互、视觉、动感设计的基础，并将其融入到整个产品和平台中，让设计师可以自由地表达自己的创造力。

当您考虑下一个应用程序时，请查看这些 应用程序示例。当您发布您的应用程序时，您还可以通过 + 和 告诉我们。

如有侵权请联系删除！