這將是一系列的文章，這些文章的目的是告訴一些國內(nèi)知名的互聯(lián)網(wǎng)廠商“什么是真正的跨平臺UI/UX設(shè)計”。至于會不會有其他文章，就看心情了…因為我真的不想用iPhone…
廢話少說，開始吧。這個系列的構(gòu)成很簡單，就是直接顯示截圖，對比分析。
首先舉個例子說明Instapaper的跨平臺設(shè)計思想很有代表性。
在Android上，采用抽屜形式的一級導(dǎo)航，遵循“平臺約定”將搜索放在動作欄而不是抽屜。另外，你還可以注意到，iOS和Android版本的Instagram顏色略有不同，iOS版本的對比度更高，而Android版本的背景色和文字色更柔和，分別符合兩個平臺的顏色風(fēng)格。閱讀界面是Instapaper的核心。在Android和iOS版本的閱讀界面，閱讀時會自動隱藏菜單按鈕和通知欄，Android版本的Instapaper會自動隱藏Android 4.4上的導(dǎo)航條，進(jìn)入沉浸式模式。安卓和iOS版本的菜單按鈕排列和圖標(biāo)樣式不同。iOS版本的Instapaper圖標(biāo)由細(xì)線組成，符合iOS 7上的圖標(biāo)規(guī)范。而iOS版本選擇在菜單布局中隱藏刪除按鈕，Android版本在Action Overflow中隱藏共享按鈕，在Action Overflow中提供翻頁模式和在瀏覽器中打開的選項。
二.關(guān)于口袋造型
Pocket Casts的Android和iOS版本可以說是兩個風(fēng)格完全不同的應(yīng)用。所有播客和主導(dǎo)航頁面大概都是他們最相似的地方。即便如此，你還是可以注意到安卓版的聞所未聞的標(biāo)記是角標(biāo)，而iOS版的是角標(biāo)。另外，安卓版暫停時，迷你播放器會停留在屏幕底部，而iOS版會隱藏迷你播放器——畢竟iOS設(shè)備的屏幕空間比安卓設(shè)備要珍貴得多。另外，在iOS版本中，迷你播放器的背景具有白色半透明+高斯模糊的效果，符合iOS 7的一致規(guī)范。它們在頂級導(dǎo)航上也略有不同。像Instapaper一樣，Pocket Cast在Android上使用抽屜作為頂部導(dǎo)航模式，在iOS上使用特殊的導(dǎo)航列表頁面。需要注意的是，兩個版本的所有圖標(biāo)都不一樣。iOS上有一個默認(rèn)的過濾器。正在播放的頁面風(fēng)格截然不同。Android版本使用Android設(shè)備的大屏顯示大播客封面，營造視覺沖擊，常用按鈕也標(biāo)有秒，避免控制欄區(qū)域出現(xiàn)過多空白。睡眠時，查看列表進(jìn)入操作溢出。除此之外，Action Overflow還提供了標(biāo)記為聽到、停止播放、停止、標(biāo)記為聽到的功能。您可以直接滾動播客封面來查看與此播客相關(guān)的注釋。iOS版本的背景是暗灰色的播客列表提供了比Android版本更多的音量控制按鈕。注解功能和列表在右上角做成按鈕。另一個重要的區(qū)別是安卓版本使用了Drawer，所以你可以去任何過濾列表或者所有博客界面或者直接從回放界面輸入設(shè)置。
三.關(guān)于Airbnb
Airbnb在兩個平臺上的交互和布局幾乎是一樣的。但是Airbnb仍然分別遵循兩個平臺的視覺約定和交互規(guī)范。比如Android版本的抽屜只能從邊緣拉出，而iOS版本的抽屜可以從屏幕的任意區(qū)域滑入側(cè)面菜單。Airbnb iOS版本的一級菜單非常漂亮，背景是華麗的飛進(jìn)動畫和漂亮的磨砂玻璃效果。而安卓版則柔順得多，采用了普通的抽屜風(fēng)格，但加入了主界面后退的微妙漸變動畫，同時加入了分割線和圖標(biāo)?？戳松厦嫣岬降倪@些應(yīng)用，希望有人能意識到“在不同平臺上統(tǒng)一交互”是多么的不靠譜。
三.關(guān)于多林戈
這個熱愛英語學(xué)習(xí)的應(yīng)用獲得了iOS和Android平臺的雙年度應(yīng)用獎。讓我們看看它如何處理跨平臺的用戶界面/UX設(shè)計。首先，多林哥提供了在Android上用Google+登錄的選項，對Android用戶來說非常方便。
(1)主界面上總體布局類似，但安卓版可以直接從右邊抽屜打開語言選擇功能。有趣的是，iOS版本提供了存儲功能，而Android版本沒有。
(2)Android版采用Navigation Drawer，顯示當(dāng)前學(xué)習(xí)進(jìn)度和排行榜，iOS版提供專門頁面顯示更詳細(xì)的學(xué)習(xí)狀態(tài)，排行榜向下滾動。
(3)即使在這個整體結(jié)構(gòu)看起來一模一樣的界面上，多林哥也對兩個平臺進(jìn)行了調(diào)整。例如，在iOS版本中，卡片的圓角較大，按鈕呈圓形，標(biāo)題居中。在安卓版上，圓角的弧度縮小了很多，回車鍵換成了上箭頭+應(yīng)用圖標(biāo)。因為學(xué)習(xí)過程的界面太相似了，我就不截圖了。
四.關(guān)于之間
在安卓版上，Between采用安卓獨有的日期選擇器風(fēng)格，并調(diào)整其配色以滿足Between獨有的品牌配色。主界面也有明顯的區(qū)別。iOS版本遵循iOS的一致規(guī)范，將導(dǎo)航分類放在底部，在Tab欄中聊天，Android版本使用固定Tab，允許滑動切換。聊天按鈕放在底部。而且兩邊字體也不一樣。
關(guān)于餐書
凡本的iOS和Android版本是兩個完全不同的界面。Android版的抽屜結(jié)合了iOS主頁和側(cè)滑菜單的功能，做了集中顯示。IOS將兩者分開，在側(cè)滑菜單中騰出更多的空間來顯示用戶的頭像和主頁的背景圖片。作為核心好友動態(tài)界面，有明顯的區(qū)別。新評估按鈕的樣式不同。iOS版本最喜歡的logo顯示在頭像的右下角，Android版本顯示在最右邊，更清晰。在iOS版本中，店鋪的評價和用戶/店鋪名稱之間沒有線，而在Android版本中，沒有線。即使在新的界面中，兩個版本可以做得一樣，米書也有細(xì)微的區(qū)別。你可以注意到iOS版本的按鈕都是漸變顏色的，創(chuàng)建列表的按鈕所有元素都是四舍五入的，兩邊發(fā)起問題的按鈕問號樣式都不一樣。相反，我覺得Android版本的問號更適合iOS版本。
這篇文章到此為止?？戳松厦嫣岬降倪@些應(yīng)用，希望有人能意識到“在不同平臺上統(tǒng)一交互”是多么的不靠譜。本期特別加了凡本等優(yōu)秀的國產(chǎn)應(yīng)用，還有一些口口聲聲說“這是國情”的人被打臉了。我留幾個截圖給下一個，至少可以保證一個“系列”有兩篇以上的文章……是的，另外，如果你知道什么是典型的跨平臺交互設(shè)計，請在評論里告訴我。這樣我就可以繼續(xù)這個系列，不用擔(dān)心素材不足。
2021-04-15 09:18:46分類：APP開發(fā)
閱讀()
