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

 

 


废话少说，开始吧。这个系列的构成很简单，就是直接显示截图，对比分析。

 


首先举个例子说明Instapaper的跨平台设计思想很有代表性。

 


在Android上，采用抽屉形式的一级导航，遵循“平台约定”将搜索放在动作栏而不是抽屉。另外，你还可以注意到，iOS和Android版本的Instagram颜色略有不同，iOS版本的对比度更高，而Android版本的背景色和文字色更柔和，分别符合两个平台的颜色风格。阅读界面是Instapaper的核心。在Android和iOS版本的阅读界面，阅读时会自动隐藏菜单按钮和通知栏，Android版本的Instapaper会自动隐藏Android 4.4上的导航条，进入沉浸式模式。安卓和iOS版本的菜单按钮排列和图标样式不同。iOS版本的Instapaper图标由细线组成，符合iOS 7上的图标规范。而iOS版本选择在菜单布局中隐藏删除按钮，Android版本在Action Overflow中隐藏共享按钮，在Action Overflow中提供翻页模式和在浏览器中打开的选项。

 


二.关于口袋造型

 


Pocket Casts的Android和iOS版本可以说是两个风格完全不同的应用。所
有播
客和主导航页面大概都是他们最相似的地方。即便如此，你还是可以注意到安卓版的闻所未闻的标记是角标，而iOS版的是角标。另外，安卓版暂停时，迷你播放器会停留在屏幕底部，而iOS版会隐藏迷你播放器——毕竟iOS设备的屏幕空间比安卓设备要珍贵得多。另外，在iOS版本中，迷你播放器的背景具有白色半透明+高斯模糊的效果，符合iOS 7的一致规范。它们在顶级导航上也略有不同。像Instapaper一样，Pocket Cast在Android上使用抽屉作为顶部导航模式，在iOS上使用特殊的导航列表页面。需要注意的是，两个版本的所有图标都不一样。iOS上有一个默认的过滤器。正在播放的页面风格截然不同。Android版本使用Android设备的大屏显示大播客封面，营造视觉冲击，常用按钮也标有秒，避免控制栏区域出现过多空白。睡眠时，查看列表进入操作溢出。除此之外，Action Overflow还提供了标记为听到、停止播放、停止、标记为听到的功能。您可以直接滚动播客封面来查看与此播客相关的注释。iOS版本的背景是暗灰色的播客列表提供了比Android版本更多的音量控制按钮。注解功能和列表在右上角做成按钮。另一个重要的区别是安卓版本使用了Drawer，所以你可以去任何过滤列表或者所有博客界面或者直接从回放界面输入设置。

 


三.关于Airbnb

 


Airbnb在两个平台上的交互和布局几乎是一样的。但是Airbnb仍然分别遵循两个平台的视觉约定和交互规范。比如Android版本的抽屉只能从边缘拉出，而iOS版本的抽屉可以从屏幕的任意区域滑入侧面菜单。Airbnb iOS版本的一级菜单非常漂亮，背景是华丽的飞进动画和漂亮的磨砂玻璃效果。而安卓版则柔顺得多，采用了普通的抽屉风格，但加入了主界面后退的微妙渐变动画，同时加入了分割线和图标。看了上面提到的这些应用，希望有人能意识到“在不同平台上统一交互”是多么的不靠谱。
 



 


三.关于多林戈

 


这个热爱英语学习的应用获得了iOS和Android平台的双年度应用奖。让我们看看它如何处理跨平台的用户界面/UX设计。首先，多林哥提供了在Android上用Google+登录的选项，对Android用户来说非常方便。

 


(1)主界面上总体布局类似，但安卓版可以直接从右边抽屉打开语言选择功能。有趣的是，iOS版本提供了存储功能，而Android版本没有。

 


(2)Android版采用Navigation Drawer，显示当前学习进度和排行榜，iOS版提供专门页面显示更详细的学习状态，排行榜向下滚动。

 


(3)即使在这个整体结构看起来一模一样的界面上，多林哥也对两个平台进行了调整。例如，在iOS版本中，卡片的圆角较大，按钮呈圆形，标题居中。在安卓版上，圆角的弧度缩小了很多，回车键换成了上箭头+应用图标。因为学习过程的界面太相似了，我就不截图了。

 


四.关于之间

 


在安卓版上，Between采用安卓独有的日期选择器风格，并调整其配色以满足Between独有的品牌配色。主界面也有明显的区别。iOS版本遵循iOS的一致规范，将导航分类放在底部，在Tab栏中聊天，Android版本使用固定Tab，允许滑动切换。聊天按钮放在底部。而且两边字体也不一样。

 


关于餐书

 


凡本的iOS和Android版本是两个完全不同的界面。Android版的抽屉结合了iOS主页和侧滑菜单的功能，做了集中显示。IOS将两者分开，在侧滑菜单中腾出更多的空间来显示用户的头像和主页的背景图片。作为核心好友动态界面，有明显的区别。新评估按钮的样式不同。iOS版本最喜欢的logo显示在头像的右下角，Android版本显示在最右边，更清晰。在iOS版本中，店铺的评价和用户/店铺名称之间没有线，而在Android版本中，没有线。即使在新的界面中，两个版本可以做得一样，米书也有细微的区别。你可以注意到iOS版本的按钮都是渐变颜色的，创建列表的按钮所有元素都是四舍五入的，两边发起问题的按钮问号样式都不一样。相反，我觉得Android版本的问号更适合iOS版本。

 


这篇文章到此为止。看了上面提到的这些应用，希望有人能意识到“在不同平台上统一交互”是多么的不靠谱。本期特别加了凡本等优秀的国产应用，还有一些口口声声说“这是国情”的人被打脸了。我留几个截图给下一个，至少可以保证一个“系列”有两篇以上的文章……是的，另外，如果你知道什么是典型的跨平台交互设计，请在评论里告诉我。这样我就可以继续这个系列，不用担心素材不足。

 


app开发
不知道找谁好？在这里当然推荐迅速网络，迅速网络不仅有十年的app开发、
小程序
开发经验，同时拥有上百人的开发团队和上千的开发案例。如果您有
app定制
开发
、
小程序定制
开发
这方面的需求，可以联系迅速网络客服。

特别申明：本站的主旨在于收集互联网运营相关的干货知识，给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿，并不代表本站认同其观点， 也不对网站内容的真实性负责，如有侵权，请联系站长删除