跨平台 UI/UX 设计示例 — Android & iOS 篇 (之一)

标签: 交互设计 移动设计 跨平台设计 | 发表时间:2013-12-31 09:27 | 作者:dream
出处:http://www.boxui.com

跨平台 UI/UX 设计示例 —— Android & iOS 篇 (之一)

为了告诉某些国内知名互联网厂商”什么才是真正的跨平台 UI/UX 设计”,NovaDNG 怒而挥笔写就了这个系列的第一篇。

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

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

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 样式,但是还是添加了主界面后退的细微的渐变动画,同时,加入了分割线与图标。

 

这一篇就写这么多吧,看了上面说的这些应用,希望某些人能够意识到”在不同平台上统一交互”是一件多么不靠谱的事情。还有一些截图我留到下一篇,这样能至少确保这作为一个”系列”能有两篇以上的文章…

相关阅读:http://www.boxui.com/ued/interaction-design/13878.html

相关 [跨平台 ui ux] 推荐:

跨平台 UI/UX 设计示例 — Android & iOS 篇 (之一)

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

文章: Calatrava:自由构建UI的跨平台移动框架

- - InfoQ cn
移动是未来计算的趋势,越来越多的人使用移动设备来访问互联网. 但是目前至少三大平台:iOS、Android、移动Web. 相比桌面Web,移动用户需要更好的体验、界面和设计. 然而移动设备受限于电池、不可靠的网络连接和小尺寸屏幕. 创业者之翼为创业新星免费提供甲级办公场所,详情请点击. 2012RIA天地行•西南游戏开发者大会11月25日,火热报名中.

UX交付物(二)

- - CSDN博客互联网推荐文章
UX交付物(一)分析了:. 内容盘点(Content Inventories). 继续第6-10种UX交付物分析. 数据分析(Analytics). 我们通过对观察,分析数据可以更真实的,深层次的了解产品. 产品经理很多时候也要负责看数据. 不管是自己产品的数据,还是竞品的数据都要看. 这方面做得真不多,还是介绍几个我看过比较经典的例子比较实际.

UX交付物(一)

- - CSDN博客互联网推荐文章
之前读《 Search Pattern》的时候,作者提及自己的一篇博文《 User Experience Deliverables》,保存在Bookmark好久,今天一读,我和我的小伙伴们都惊呆了,好文. 作为一个产品经理或者说UX人员,我们不写代码,我们不出图,那我们拿点啥出来交货呢.

另类UX让你输入强口令

- Gin - 酷壳 - CoolShell.cn
昨天和大家说了一下关于口令破解的一些东西,那篇文章告诉我们需要设置一个比较强的不易破解的口令. 今天在网上看到一个强大的jQuery插件,叫NakedPassword,其通过“强大的用户体验”让你输入一个比较强且不易被破解的口令. 虽然有点另类,但是我个人相当欣赏这个UX,因为UX实在是太到位了——只有你输入的口令比较强,图片中的女人才会脱光衣服.

Mobile App 七大 UX 設計經驗

- - Inside全文
圖片來源: uxpassion. 投稿作者:Leon Lu([email protected]). 喜歡研究軟體架構的美,雖然每次架構設計還是常有不足;喜歡專案管理方法論的妙,雖然每回專案時程還是常 Delay;喜歡與三五好友大談移動科技的樂,天馬行空是我們的樂趣. 產品使用的第一印象是至關重要的,因為使用者在意的是產品使用過程中是否和當初的 First Impression 一樣的令人樂不釋手.

一淘ux图标设计总结

- - UX 一淘体验中心
为全平台设计——ux图标设计总结. 现在各平台多样化的同时,各大公司也努力的在做平台的统一化,并逐渐成为主流. 平台统一会成为主流的原因在于多样化不利于统一的品牌形象,相对资源消耗也比较大,不利于后期发展. 这次的图标设计,也将以这主流思想为核心. 由于设计将在各个平台产品中使用,各个产品线的设计统一就成为基础.

Android 应用中十大常见 UX 错误

- - 互联网的那点事
Android 开发者关系团队每天都会试用无数的 App 或者受到无数的开发者发来的请求评测的 App,在评测如此之多的应用之后,他们总结出了10个最常见的错误. 作为一个长期使用 Android 的用户,我在使用 Android 应用的时候经常遇到各种各样的交互上的问题,并且早就想整理它们写一篇文章了.

谈谈人机交互设计 (UX) 的三个半原则

- - 盒子UI
一些设计的基本原则往往是通用的、甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴. 一个设计师&产品经理应该在决策时下意识的、本能的考虑这些原则. 就像以前很多零售业者能够一抓准,你要一斤糖,他抓起来就是一斤,不多不少,靠的就是不断的练习+思考,最后将其变成了自己的本能.

[转] jQuery ui框架

- - CSDN博客Web前端推荐文章
   jQuery ui框架很多,除了官方提供的 jquery UI(如果你还不知道什么是 jQuery UI,请看 下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于 jquery核心类库实现的ui框架.