跨平台UI/UX设计示例——Android & IOS篇

这将会是一个系列文章，而这些文章存在的目的是为了告诉某些国内知名互联网厂商”什么才是真正的跨平台 UI/UX 设计”。这个系列的构成非常简单，就是直接展示截图，对比分析。

Instapaper

Instapaper 的跨平台设计思路很有代表性。在 Android 上，它采用了 Drawer 形式的一级导航，而且遵循”平台惯例”将搜索放在 Action Bar （Drawer 展开时不可见） 而不是 Drawer 中。另外你也可以注意到，iOS 和 Android 版本的 Instapaper 配色上略有不同，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 版本多提供了一个音量控制按钮（因为 iTunes Music 也可以直接在屏幕上控制音量？ 我不明白原因）。注记功能和列表都被做成了按钮放在右上角。另外很重要的一点区别是，Android 版本由于采用了 Drawer，所以可以直接由播放界面来到任何一个过滤器列表或者所有博客界面，或者进入设置。

Airbnb

Airbnb 在两个平台上的交互和布局几乎是一样的，但是，Airbnb 还是分别遵循了两个平台的视觉惯例和交互规范，比如 Android 版本中 Drawer 只能从边缘拉出，而 iOS 版则可以从屏幕任意区域右滑进入侧边菜单。

Airbnb iOS 版本的一级菜单做得非常漂亮，开启时有华丽的飞入动画，背景有漂亮的毛玻璃效果 （图案是模糊的用户头像）。而 Android 版本则中规中矩得多，采用了普通的 Drawer 样式，但是还是添加了主界面后退的细微的渐变动画，同时，加入了分割线与图标。

Duolingo

这个有爱的英语学习应用斩获了 iOS 和 Android 平台双份的年度最佳应用奖项，让我们来看看它是怎么处理跨平台 UI/UX 设计这个问题的

首先，Duolingo 在 Android 上提供了用 Google+ 登录的选项，对于广大 Android 用户 (他们中的大部分应该都是强行被 Google 要求注册 Google+ 的苦逼 G+ 用户们) 而言用 Google+ 登录是非常方便的。

主界面上大致布局是类似的，但是 Android 版本可以直接从右侧抽屉打开语言选择功能 (当然也可以通过点击国旗图标打开右侧抽屉)。比较有意思的是 iOS 版本提供了商店功能，而 Android 版没有。

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

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

由于学习过程的界面相似度过高 (但是依然有区别，比如圆角按钮/卡片，还有进度指示条) 我就不截图了。

Between

Between 最近更新了 2.0 版本，大方向上靠近了 iOS 7 UI 和 Android Design。

在 Android 版本上，Between 采用了 Android 特有的日期选择器样式，并且调整了它的配色使其符合 Between 的特有品牌配色。

主界面也有很明显的区别 iOS 版本版本遵循 iOS 一贯的规范，将导航分类放在底部，并且把聊天放在了 Tab Bar 中 (当然我觉得这个底栏设计得并不好，图标也没按照 iOS 7 的一贯标准采用细线和填黑来区分选中与否)，而 Android 版本则采用了 Fixed Tabs，并且允许滑动切换。聊天按钮则被放在了底部 (很明显是山寨 Path 的 UI)。并且，两边的字体选用也是不同的 (Roboto vs Helvetica)。

由于聊天界面看起来比较丑 (但是 Android 版本依然提供了 Up 按钮)，我就不上截图了。

饭本

饭本的 iOS 和 Android 版本可以说是截然不同的两套界面。Android 版本的 Drawer 结合了 iOS 版本首页和侧滑菜单的功能，进行了集中展示。而 iOS 则把两者拆开，在侧滑菜单中腾出更大的空间显示用户的头像和主页背景图。

作为饭本核心的好友动态界面，有很明显的区别 (甚至连顶栏配色都有所不同)。新建评价按钮的风格有所不同 (iOS 版本的依然没有遵循 iOS 7 的惯例)。 iOS 版本的喜好标志 (心或者破碎的心) 显示在头像右下角，而 Android 版则显示在最右侧，更加清晰 iOS 版中对店的评价和用户/店名之间不折行，而 Android 版本折行。

即使是在新建界面这种完全可以把两个版本做成一样的地方，饭本也做了细微的区别。可以注意到 iOS 版本按钮是有渐变色的，而且创建榜单按钮全部元素都做了圆角化处理，两边的发起提问按钮的问号风格也是不一样的 (我反而觉得 Android 版本那个问号更适合 iOS 版本用。