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

0 評論 8194 瀏覽 1 收藏 7 分鐘

為了告訴某些國內知名互聯網廠商”什么才是真正的跨平臺 UI/UX 設計”,NovaDNG 怒而揮筆寫就了這個系列的第二篇。

上期的跨平臺 UI/UX 設計示例得到了很好的反響,于是我還是做了第二期. 接上期,再來三個應用。

Duolingo

這個有愛的英語學習應用斬獲了 iOS 和 Android 平臺雙份的年度最佳應用獎項,讓我們來看看它是怎么處理跨平臺 UI/UX 設計這個問題的.首先,Duolingo 在 Android 上提供了用 Google+ 登錄的選項,對于廣大 Android 用戶 (他們中的大部分應該都是強行被 Google 要求注冊 Google+ 的苦逼 G+ 用戶們) 而言用 Google+ 登錄是非常方便的。

Duolingo 1

主界面上大致布局是類似的,但是 Android 版本可以直接從右側抽屜打開語言選擇功能 (當然也可以通過點擊國旗圖標打開右側抽屜)。比較有意思的是 iOS 版本提供了商店功能,而 Android 版沒有。

Duolingo 2

左上角按鈕也是不一樣的。Android 版本采用了 Navigation Drawer,在 Drawer 中顯示當前學習的進度和排行榜,而 iOS 版本則是提供了一個專門的頁面顯示更詳細的學習狀態,往下卷動則是排行榜。

Duolingo 3

即使是在這個整體結構似乎完全一樣的界面上,Duolingo 也針對兩個平臺進行了調整。比如,在 iOS 版本中,卡片的圓角弧度更大,按鈕都變成了圓角的,標題置中。而在 Android 版本上,圓角弧度減小了非常多,返回鍵也換成了 Up 箭頭 + 應用圖標。

由于學習過程的界面相似度過高 (但是依然有區別,比如圓角按鈕/卡片,還有進度指示條) 我就不截圖了。

Between

Between 最近更新了 2.0 版本,大方向上靠近了 iOS 7 UI 和 Android Design。

between 1

在 Android 版本上,Between 采用了 Android 特有的日期選擇器樣式,并且調整了它的配色使其符合 Between 的特有品牌配色。

between 2

主界面也有很明顯的區別. iOS 版本版本遵循 iOS 一貫的規范,將導航分類放在底部,并且把聊天放在了 Tab Bar 中 (當然我覺得這個底欄設計得并不好,圖標也沒按照 iOS 7 的一貫標準采用細線和填黑來區分選中與否),而 Android 版本則采用了 Fixed Tabs,并且允許滑動切換。聊天按鈕則被放在了底部 (很明顯是山寨 Path 的 UI)。并且,兩邊的字體選用也是不同的 (Roboto vs. Helvetica)。

飯本

RB1

飯本的 iOS 和 Android 版本可以說是截然不同的兩套界面。Android 版本的 Drawer 結合了 iOS 版本首頁和側滑菜單的功能,進行了集中展示。而 iOS 則把兩者拆開,在側滑菜單中騰出更大的空間顯示用戶的頭像和主頁背景圖。

RB2.2

作為飯本核心的好友動態界面,有很明顯的區別 (甚至連頂欄配色都有所不同)。新建評價按鈕的風格有所不同 (iOS 版本的依然沒有遵循 iOS 7 的慣例)。 iOS 版本的喜好標志 (心或者破碎的心) 顯示在頭像右下角,而 Android 版則顯示在最右側,更加清晰. iOS 版中對店的評價和用戶/店名之間不折行,而 Android 版本折行。

RB3

即使是在新建界面這種完全可以把兩個版本做成一樣的地方,飯本也做了細微的區別。可以注意到 iOS 版本按鈕是有漸變色的,而且創建榜單按鈕全部元素都做了圓角化處理,兩邊的發起提問按鈕的問號風格也是不一樣的 (我反而覺得 Android 版本那個問號更適合 iOS 版本用。

 

這一篇就寫這么多吧,看了上面說的這些應用,希望某些人能夠意識到”在不同平臺上統一交互”是一件多么不靠譜的事情。這期特別加入了飯本這樣優秀的國內應用,特地來打某些口口聲聲說”這是國情”的人的臉。還有一些截圖我留到下一篇,這樣能至少確保這作為一個”系列”能有兩篇以上的文章…

對了,另外,如果你知道什么堪稱典范的跨平臺交互設計,歡迎在評論中告訴我。這樣的話我就可以把這個系列繼續進行下去而不用擔心素材不足的問題了。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!