圖片來源:Slash Gear

iOS 轉 Android 的 APP 設計指南

Apple 與 Google 在移動裝置上的體驗完全不同,各有擁護的粉絲。在 Android用戶越來越多之下,企業紛紛推出 Android 版的 APP。就設計師的職責而言,必須深度了解不同系統的設計規範使用者體驗差異,才能針對該系統設計出好的 APP。也因此,設計師 Min Seung Song 提供了 iOS 轉 Android 的 APP 設計上手指南。

1. 兩套系統差異大,設計不能直接套用

絕對不要將 iOS 的 UI 設計與規格直接套用於 Android 上(反者亦然),因為兩者的操作方式差異太大。例如:iphone 上皆有實體 Home 鍵,按下它後會直接退回桌面;而 Android 除了 Home 鍵以外,還有返回鍵,可一層一層的退回桌面;以及還有可切換不同 app 的多工按鈕。

多了兩個不同功能的按鈕,讓 Android 用戶可以方便於不同 app 間"瀏覽"、 “來回切換",而這些差異使得兩個系統的操作體驗上有極大差異。為了適應這些先天上操作邏輯的差異,iOS UI 在架構設計上,多為結合縱向與橫向;而 Android 的 APP 設計則為縱向架構。

剛剛提及的 Android 三個按鈕(Home/back/多工),會配置於手機介面的下方,因此你不能將 app 的分頁按鈕(tab)設計在螢幕下方,而 iOS 的 tab UI 則規定放置於螢幕下方。

2. 熟悉新詞彙

你可能會聽到ㄧ些專有名詞如: “DP”, “SP” 與 “9 Patch”。 其中,DP 和 SP 是尺寸的單位而 9 Patch 則是切圖格式。

DP(density independent pixels)是一個不會改變尺寸大小的絕對單位。SP 跟 DP 有些相似,但它是可以伸縮的(官方推薦在字體上使用)。例如使用者將手機上的字體設定為“huge”,則透過 SP 所定義的字體將會受到影響。

9 Patch 是一種獨特的切圖格式,它可以協助建立自動延展的物件,並大幅度地降低檔案大小。通常使用於帶有陰影的按鍵(android 5.0 之前陰影呈現的設定方法之一)。可參考官方說明

圖片來源:數碼維基

3. 了解螢幕尺寸與密度

與 iPhone 不同,Android 的手機製造商相當多,且規格不一。由 OpenSignal.com 所繪製的精美資訊圖表上可以看出其可怕 …

圖片來源:Open Signal

 

不過不用驚慌,你不需針對所有尺寸ㄧㄧ設計。Android 有螢幕密度調整系統,可以協助 UI 適應於各種尺寸的螢幕。基本上,你只需要注意5到7種不同的尺寸即可。

以 Google Nexus 5 的 XXHDPI 螢幕來說,通常以 1080×1920 pixels 為設計時的尺寸。但其規格與元件也可以通用於其他 XXHDPI 螢幕的手機,例如 Galaxy S4,、HTC One 或 LG G2 等。

恩,不是很懂對吧?我們只好再談一下 DP 了。DP 是絕對尺寸的單位,不會依密度而變動。然而,因為要在電腦上繪圖,所以必須正確的轉換為 pixel,此時你就要依螢幕密度不同除以或乘以不同數值以求 DP。例如,你繪製一 1080×1920 pixels 的原型,並以 XXHDPI 呈現,此時除以3就為 DP 值。

公式為:px = dp * (dpi/160)

沒錯,你需要應用些數學。有些設計師會由 320×480 pixels 開始繪製,但我更喜愛以 1080×1920 pixels 開始,因為這是個主流的尺寸。當然,一切由你決定。

最後,你應該要下點功夫在調整 UI 以適應不同的螢幕尺寸與密度。在推出前,我建議可在五種不同密度的裝置上進行測試。不過,其實比例都會相當接近,不用過於擔心要更改原始的設計。

4. Icon

Android 的 icon 風格更為扁平與圓潤。

此外,Android 的 drawable icon system 可以自適應其 icon 的大小,但放大縮小 icon 可能造成破圖(artifact)。為了確保你的圖示呈現最佳化,你還是得花點時間一一優化各尺寸的 icon。

5. Material Design

去年,Google 發佈了全新的設計語言-Material Design。無庸置疑的,它足以媲美蘋果,是相當出色的設計風格與手法。所以研究一下 Google 官方的設計指南吧!不過,在色彩與陰影的使用方式,你可能會不習慣,但這難不倒你的。(不要太過糾結於顏色或者陰影這些特定的視覺設計。)活用它並創造獨特的設計吧!

6. 更多特色

Soft Key(虛擬按鍵)

如第一段所述,典型的 Android 裝置皆有 “back"、"Home" 與 “多工" 的按鈕。這些可能會以實體按鍵呈現(如三星),或以虛擬按鍵呈現在畫面上。因此,在設計前需先注意這差異(因為可能佔掉 UI 呈現的空間,或產生更多有趣的互動方式,例如 LG 在虛擬按鈕區域上設有手勢功能,與放置其他功能之設計)。

Widget(小工具)

早在之前的版本,Widget 就是 Android 上相當具特色的功能之一。Widget 就是簡化與保留核心功能的 APP 模組,可放置於桌布上,讓使用者無需開啟 APP,直接進行操作或閱讀資訊。建議 iOS 設計師可以多參考相關 APP Widget 的作法,並在設計前向工程師請教。

Notification(通知中心)

由螢幕上方邊緣往下滑,可把通知列往下拉出,通知列上的內容組合大多是 icon + 文字或是圖片 +  文字。而Android 版本的不同也會有不同的處理方式。例如5.0版以後,各通知會以上下重疊的卡片呈現,以減少空間,但也可以快速的以滑動的方式展開。

7. 有用的資源

此外,以下整理了一些網站,在設計前不妨可參考看看:

  1. Google Material Design (General)
  2. Google Material Design (Patterns)
  3. androidux.com
  4. pttrns.com
  5. materialup.com

本文章已獲得作者 Min Seung Song 授權,原文出處 Rookie Guide:How To Convert iOS UI To Android

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: