APP设计；跨平台 UI/UX 设计示例

这将会是一个系列文章，而这些文章存在的目的是为了告诉某些国内知名互联网厂商”什么才是真正的跨平台 UI/UX 设计”。至于会不会有其他的篇，这个要看心情…因为我实在是不怎么想去用 iPhone…

废话不多说，直接开始。这个系列的构成非常简单，就是直接展示截图，对比分析。

一、举例说明Instapaper 的跨平台设计思路很有代表性。

在 Android 上，它采用了 Drawer 形式的一级导航，而且遵循”平台惯例”将搜索放在 Action Bar 而不是 Drawer 中。另外你也可以注意到，iOS 和 Android 版本的 Instagram 配色上略有不同，iOS 版本的对比度更高，Android 版本的背景色和文字颜色都更加柔和，分别切合了两个平台的用色风格。阅读界面是 Instapaper 的核心。在 Android 和 iOS 版本的阅读界面中，菜单按钮和通知栏都会在阅读时自动隐藏，而且 Android 版本的 Instapaper 还会在 Android 4.4 上将 Nav Bar 自动隐藏，进入 Immersive Mode。Android 和 iOS 版本上的菜单按钮位置安排和图标风格都不尽相同，iOS 版本的 Instapaper 图标由纤细的线条组成，符合 iOS 7 上的图标规范。而 iOS 版本在菜单编排上选择了将删除按钮隐藏 ，Android 版则将分享按钮隐藏进 Action Overflow，同时在 Action Overflow 中提供了翻页模式和在浏览器中打开的选项。

二、关于Pocket Casts

Android 和 iOS 版本的 Pocket Casts 可以说是风格截然不同的两个应用。所有播客和一级导航页面可能是他们最相似的地方了。即使如此你也可以注意到 Android 版本的未听标记采用的是角标，而 iOS 版采用的是角章。另外，Android 版本在暂停播放时，迷你播放器会留在屏幕底部，而 iOS 版本则会隐藏迷你播放器 —— 毕竟 iOS 设备屏幕空间比 Android 设备要宝贵得多。另外，在 iOS 版中，迷你播放器的背景是有白色半透明 + 高斯模糊效果，符合 iOS 7 一贯的规范。两者在顶级导航上也略有不同。和 Instapaper 一样，Pocket Cast 在 Android 上采用了 Drawer 作为顶级导航方式，而在 iOS 上使用了一个专门的导航列表页。需要注意到的是，所有的图标在两个版本上都是有区别的。而且 iOS 上还多出来了一个正在下载的默认过滤器。正在播放页面的风格也可以说是截然不同。Android 版本利用 Android 设备平均更大尺寸的屏幕展示大尺寸的播客封面营造视觉冲击力，而常用按钮 也加上了秒数标识  而避免了控制条区域留白过多。睡眠定时，查看列表则进入了 Action Overflow，不仅如此，Action Overflow 中还提供了标为已听，停止播放和停止并标为已听的功能。而直接卷动播客封面就可以查看这期播客相关的注记。而 iOS 版本的背景是变暗模糊的播客列表比 起 Android 版本多提供了一个音量控制按钮。注记功能和列表都被做成了按钮放在右上角。另外很重要的一点区别是，Android 版本由于采用了 Drawer，所以可以直接由播放界面来到任何一个过滤器列表或者所有博客界面，或者进入设置。

三、关于Airbnb

Airbnb 在两个平台上的交互和布局几乎是一样的，但是，Airbnb 还是分别遵循了两个平台的视觉惯例和交互规范，比如 Android 版本中 Drawer 只能从边缘拉出，而 iOS 版则可以从屏幕任意区域右滑进入侧边菜单。Airbnb iOS 版本的一级菜单做得非常漂亮，开启时有华丽的飞入动画，背景有漂亮的毛玻璃效果 ）。而 Android 版本则中规中矩得多，采用了普通的 Drawer 样式，但是还是添加了主界面后退的细微的渐变动画，同时，加入了分割线与图标。看了上面说的这些应用，希望某些人能够意识到”在不同平台上统一交互”是一件多么不靠谱的事情。

三、关于Duolingo

这个有爱的英语学习应用斩获了 iOS 和 Android 平台双份的年度最佳应用奖项，让我们来看看它是怎么处理跨平台 UI/UX 设计这个问题的.首先，Duolingo 在 Android 上提供了用 Google+ 登录的选项，对于广大 Android 用户 而言用 Google+ 登录是非常方便的。

（1）主界面上大致布局是类似的，但是 Android 版本可以直接从右侧抽屉打开语言选择功能 。比较有意思的是 iOS 版本提供了商店功能，而 Android 版没有。

（2）Android 版本采用了 Navigation Drawer，在 Drawer 中显示当前学习的进度和排行榜，而 iOS 版本则是提供了一个专门的页面显示更详细的学习状态，往下卷动则是排行榜。

（3）即使是在这个整体结构似乎完全一样的界面上，Duolingo 也针对两个平台进行了调整。比如，在 iOS 版本中，卡片的圆角弧度更大，按钮都变成了圆角的，标题置中。而在 Android 版本上，圆角弧度减小了非常多，返回键也换成了 Up 箭头 + 应用图标。由于学习过程的界面相似度过高我就不截图了。

四、关于Between

在 Android 版本上，Between 采用了 Android 特有的日期选择器样式，并且调整了它的配色使其符合 Between 的特有品牌配色。主界面也有很明显的区别. iOS 版本版本遵循 iOS 一贯的规范，将导航分类放在底部，并且把聊天放在了 Tab Bar 中，而 Android 版本则采用了 Fixed Tabs，并且允许滑动切换。聊天按钮则被放在了底部 。并且，两边的字体选用也是不同的 。

五、关于饭本

饭本的 iOS 和 Android 版本可以说是截然不同的两套界面。Android 版本的 Drawer 结合了 iOS 版本首页和侧滑菜单的功能，进行了集中展示。而 iOS 则把两者拆开，在侧滑菜单中腾出更大的空间显示用户的头像和主页背景图。作为饭本核心的好友动态界面，有很明显的区别 。新建评价按钮的风格有所不同。 iOS 版本的喜好标志 显示在头像右下角，而 Android 版则显示在最右侧，更加清晰. iOS 版中对店的评价和用户/店名之间不折行，而 Android 版本折行。即使是在新建界面这种完全可以把两个版本做成一样的地方，饭本也做了细微的区别。可以注意到 iOS 版本按钮是有渐变色的，而且创建榜单按钮全部元素都做了圆角化处理，两边的发起提问按钮的问号风格也是不一样的 ，我反而觉得 Android 版本那个问号更适合 iOS 版本用。

这一篇就写这么多吧，看了上面说的这些应用，希望某些人能够意识到”在不同平台上统一交互”是一件多么不靠谱的事情。这期特别加入了饭本这样优秀的国内应用，特地来打某些口口声声说”这是国情”的人的脸。还有一些截图我留到下一篇，这样能至少确保这作为一个”系列”能有两篇以上的文章…对了，另外，如果你知道什么堪称典范的跨平台交互设计，欢迎在评论中告诉我。这样的话我就可以把这个系列继续进行下去而不用担心素材不足的问题了。

温馨提示：转载发布内容如有侵权，请后台联系我们会在第一时间撤销，我们希望在资源共享的同时，与您共同维护互联网的良好生态，谢谢！