跨平臺(tái) UI/UX 設(shè)計(jì)示例 —— Android & iOS 篇

0 評(píng)論 3353 瀏覽 1 收藏 7 分鐘

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

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

廢話不多說(shuō),直接開始。這個(gè)系列的構(gòu)成非常簡(jiǎn)單,就是直接展示截圖,對(duì)比分析。

Instapaper

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

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

Pocket Casts

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

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

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

Airbnb

Airbnb 在兩個(gè)平臺(tái)上的交互和布局幾乎是一樣的,但是,Airbnb 還是分別遵循了兩個(gè)平臺(tái)的視覺(jué)慣例和交互規(guī)范,比如 Android 版本中 Drawer 只能從邊緣拉出,而 iOS?版則可以從屏幕任意區(qū)域右滑進(jìn)入側(cè)邊菜單。

Airbnb iOS?版本的一級(jí)菜單做得非常漂亮,開啟時(shí)有華麗的飛入動(dòng)畫,背景有漂亮的毛玻璃效果 (圖案是模糊的用戶頭像)。而 Android 版本則中規(guī)中矩得多,采用了普通的 Drawer 樣式,但是還是添加了主界面后退的細(xì)微的漸變動(dòng)畫,同時(shí),加入了分割線與圖標(biāo)。

 

這一篇就寫這么多吧,看了上面說(shuō)的這些應(yīng)用,希望某些人能夠意識(shí)到”在不同平臺(tái)上統(tǒng)一交互”是一件多么不靠譜的事情。還有一些截圖我留到下一篇,這樣能至少確保這作為一個(gè)”系列”能有兩篇以上的文章…

文章題圖來(lái)自?Opoloo?的博客?The War For Android Is Over.

原文來(lái)自:極客公園

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!