跨平臺 UI/UX 設(shè)計示例 —— Android & iOS 篇

yoyo

2013-12-25

0 評論 3361 瀏覽 1 收藏

7 分鐘

[核心提示] 為了告訴某些國內(nèi)知名互聯(lián)網(wǎng)廠商”什么才是真正的跨平臺 UI/UX 設(shè)計”，NovaDNG 怒而揮筆寫就了這個系列的第一篇。

這將會是一個系列文章，而這些文章存在的目的是為了告訴某些國內(nèi)知名互聯(lián)網(wǎng)廠商”什么才是真正的跨平臺 UI/UX 設(shè)計”。至于會不會有其他的篇，這個要看心情…因為我實在是不怎么想去用 iPhone…

廢話不多說，直接開始。這個系列的構(gòu)成非常簡單，就是直接展示截圖，對比分析。

Instapaper

Instapaper 的跨平臺設(shè)計思路很有代表性。在 Android 上，它采用了 Drawer 形式的一級導(dǎo)航，而且遵循”平臺慣例”將搜索放在 Action Bar （Drawer 展開時不可見）而不是 Drawer 中。另外你也可以注意到，iOS 和 Android 版本的 Instagram 配色上略有不同，iOS 版本的對比度更高，Android 版本的背景色和文字顏色都更加柔和，分別切合了兩個平臺的用色風(fēng)格。

閱讀界面是 Instapaper 的核心。在 Android 和 iOS 版本的閱讀界面中，菜單按鈕和通知欄都會在閱讀時自動隱藏，而且 Android 版本的 Instapaper 還會在 Android 4.4 上將 Nav Bar 自動隱藏，進(jìn)入?Immersive Mode。Android 和 iOS 版本上的菜單按鈕位置安排和圖標(biāo)風(fēng)格都不盡相同，iOS 版本的 Instapaper 圖標(biāo)由纖細(xì)的線條組成，符合 iOS 7 上的圖標(biāo)規(guī)范。而?iOS?版本在菜單編排上選擇了將刪除按鈕隱藏（長按歸檔按鈕調(diào)出），Android 版則將分享按鈕隱藏進(jìn) Action Overflow，同時在 Action Overflow 中提供了翻頁模式和在瀏覽器中打開的選項。

Pocket Casts

Android 和?iOS?版本的 Pocket Casts 可以說是風(fēng)格截然不同的兩個應(yīng)用。所有播客和一級導(dǎo)航頁面可能是他們最相似的地方了。即使如此你也可以注意到 Android 版本的未聽標(biāo)記采用的是角標(biāo)，而 iOS 版采用的是角章。另外，Android 版本在暫停播放時，迷你播放器會留在屏幕底部，而 iOS 版本則會隱藏迷你播放器 —— 畢竟 iOS 設(shè)備屏幕空間比 Android 設(shè)備要寶貴得多。另外，在 iOS 版中，迷你播放器的背景是有白色半透明 + 高斯模糊效果，符合 iOS 7 一貫的規(guī)范。

兩者在頂級導(dǎo)航上也略有不同。和 Instapaper 一樣，Pocket Cast 在 Android 上采用了 Drawer 作為頂級導(dǎo)航方式，而在?iOS?上使用了一個專門的導(dǎo)航列表頁。需要注意到的是，所有的圖標(biāo)在兩個版本上都是有區(qū)別的。而且 iOS 上還多出來了一個正在下載的默認(rèn)過濾器。

正在播放頁面的風(fēng)格也可以說是截然不同。Android 版本利用 Android 設(shè)備平均更大尺寸的屏幕展示大尺寸的播客封面營造視覺沖擊力，而常用按鈕（快進(jìn)快退）也加上了秒數(shù)標(biāo)識（因為這個秒數(shù)可以自定義）而避免了控制條區(qū)域留白過多。睡眠定時，查看列表則進(jìn)入了 Action Overflow，不僅如此，Action Overflow 中還提供了標(biāo)為已聽，停止播放和停止并標(biāo)為已聽的功能。而直接卷動播客封面就可以查看這期播客相關(guān)的注記。而?iOS?版本的背景是變暗模糊的播客列表比起 Android 版本多提供了一個音量控制按鈕（因為 iTunes Music 也可以直接在屏幕上控制音量? 我不明白原因）。注記功能和列表都被做成了按鈕放在右上角。另外很重要的一點區(qū)別是，Android 版本由于采用了 Drawer，所以可以直接由播放界面來到任何一個過濾器列表或者所有博客界面，或者進(jìn)入設(shè)置。