Android 10 步驟

主頁橫幅

這份指南可協助您開始進行 Android 設計,方法是使用基本的 Android UX 模式和 Material Design,將現有的 iOS 行動設計轉換為 Android 設計。

這些項目會依設計同位性列出,並依效率排序。如果您採用共用的基礎設計系統,則可使用自己的系統 (而非 Material Design 3) 轉換設計。Android 和 iOS 都秉持內容優先的理念。

之後,品牌形象可以透過顏色、字體和形狀呈現。這不僅能讓內容更容易閱讀,還能更輕鬆地建立凝聚力。

從 iOS 設計開始

開始之前,請先複製 iOS 應用程式。iOS 應用程式可分為三個區域:工具列、檢視畫面和控制項。您可以運用這個結構完成翻譯作業,最後再設定樣式。

請參閱 Android 應用程式的各個部分

1. 刪除 iOS 系統 UI

刪除狀態列和主畫面指標。現在操作更簡單了。

已刪除 iOS sysUI

2. 調整影格大小

您可以使用 Android 精簡尺寸 (412 dp)。不過,即使在視窗類別大小內,也請考慮裝置範圍。舉例來說,您可以先在 360 dp 進行測試,以配合較小的螢幕,然後在所有視窗類別大小中調整。

調整影格大小

3. 改用 Android 系統資訊列

Android 系統 UI 會因使用者的裝置和設定而異,但顯示標準系統 UI 有助於提供設計的更多情境。將通知列放在頂端,底部則放置手勢操作或三按鈕操作導覽列。

詳情請參閱「Android 系統資訊列」。

調整影格大小

4. 視導覽方式而定

將 Tabbar (底部導覽) 換成導覽列

回顧一下流程圖。您的 iOS 應用程式是否使用「更多」選單?(HIG 最佳做法建議不要使用這種模式)。請將項目數量限制在五個以下,將底部導覽列保留給主要導覽,並評估是否可將次要項目 (例如個人資料或設定) 移至頂端應用程式列,或者您是否有可轉換為 FAB 的主要動作?

主要導覽列應一律顯示在父項檢視畫面 (流程圖中某個區段的頂層)。如果子檢視畫面 (父項檢視畫面下的任何內容) 在導覽階層中較高,且不是強制回應,則可包含主要導覽。

使用適當的圖示和標籤更新底部導覽列。這兩個平台都會避免在導覽目的地之間出現橫向移動。

更新後的導覽列

請依序逐節分解,先是父項檢視畫面,然後是子項檢視畫面。應用程式列由左側的導覽和標題,以及右側的操作項目組成。

如果應用程式使用導覽匣選單,而非底部導覽列,所有父項檢視畫面都會顯示匣子圖示。

如果應用程式沒有邊欄或導覽匣,父項檢視區塊就不會顯示主要導覽圖示。

Android 應用程式列中的標題預設為靠左對齊。

更新的應用程式列

子檢視畫面會在導覽圖示位置顯示向上箭頭。請勿與「返回」混淆。向上箭頭會將使用者在使用者流程中,透過應用程式的導覽階層向上移動一個層級,而返回或邊緣滑動則位於系統導覽中,可將使用者向後移動,甚至將使用者帶離應用程式。

那要如何使用模態檢視畫面呢?如果是全螢幕強制回應視窗 (例如影片播放器和圖片),這會與孩童檢視模式應用程式列類似,但導覽圖示應變更為關閉,以關閉強制回應視窗。

6. 更多模態

先從大型強制回應檢視畫面開始,這類畫面最適合用來引導使用者專注於某項工作。在 iOS 上,這些通常會顯示為工作表,使用者可以向下滑動。

完成更換應用程式列。如果是 iOS 頁面模式,請將頂端頁面部分和背景顯示內容換成全螢幕對話方塊應用程式列。

額外好處:看看是否有任何 iOS 強制回應工作表可以轉換為底部功能表

動作和活動頁面改為底部功能表。(分享畫面現在也支援翻譯)。

如要顯示快訊,請使用系統對話方塊。如果您使用這些訊息傳達重要資訊,且需要使用者以某種方式確認,請改用系統對話方塊。別忘了在此時也交換任何輸入內容和挑選器。

全螢幕對話方塊

7. 同層級內容

分頁、檢視分頁或滑動分頁。如果您在 iOS 上使用區隔控制項,這些控制項會轉換為 Android 上的分頁。兩者都是用來篩選類似但不相同的資訊檢視畫面。Android 分頁通常會附加至應用程式列,而且還能滑動切換內容,十分方便。

Android 分頁

8. 內容和控制項

視您設定的限制或大小調整行為而定,大部分內容可能已調整大小。但請利用這段時間檢查並設定邊界。在小螢幕上,16 dp 是合適的標準。

元件的基準格線是以 8 dp 格線為基礎,字體和圖示則是以 4 dp 為基礎。8pt 格線在 iOS 上運作良好,因此或許可以考慮將其做為兩個平台的起點。

控管將這些切換按鈕換成 Android 切換按鈕。使用 Android 核取方塊和圓形按鈕。Android 內建所有這些功能。

如果您有表單,請將 iOS 文字欄位換成 Android 文字欄位。Material 提供外框或填滿等選項,請選擇最符合您品牌形象的選項。

與 iOS 表格儲存格相比,Material 清單有以下差異:

  • 分隔線的使用次數不多。
  • 清單不會使用指標,盡量減少視覺干擾。
  • 尺寸符合 8 dp 格線。

Android 分頁

9. 樣式

顏色:UI 顏色包含強調色、語意色和表面色,這些顏色會組合成色彩配置。這些顏色會依角色套用至 UI。

類型:如果使用系統字型,請取代 San Francisco。Roboto 是 Android 的預設系統字型。不過,我們建議您使用主題和可下載的 Google 字型,展現品牌獨特風格。

圖示:與上述相同。如果使用 SF 符號,請仔細檢查是否已全部轉換為 Material Icons 或 Symbols。挑選適合你品牌的變化版本。你知道可以在任何平台上使用 Material Icons 嗎?

動態效果:Android 和 iOS 的動態設計不同,因此請為每個平台採用合適的動態效果。Material 動態效果可提供資訊、聚焦重點,並表達意念。漣漪是元件中使用的特殊醒目效果,可提供觸控回饋。動態效果系統是一組轉場效果模式,可充分運用容器轉換、共用軸、淡出淡入切換和淡出動畫。請考量設計中的元素是否含有持續性容器、元素之間的關係,以及元素進入或離開的方式。

已更新樣式

10. 整理

如果您要翻譯原型,現在很適合重新連線。透過主要導覽列返回。然後是應用程式列,請注意向上和向後之間的差異,並確保選取適合 Android 的頁面轉場效果 (如步驟 9 所述)。

您應該已準備好功能完備的原型,而且由於您已調整大小,因此可以交接。

清除設計

樣式和元件指南

如果您有現成的設計系統或樣式指南,可能會有自己的基礎樣式 (顏色、字體、圖示、形狀),可與 Material Design 一併使用,就像與 iOS 指南搭配使用一樣。您可以透過 Material Design 主題設定,使用顏色、類型和形狀,以品牌獨特風格自訂 Material Design 元件。

多平台產品通常會制定平台專屬的指南,這有助於您打造以使用者為中心的設計系統。

風格指南

最後,如果您沒有設計系統,請瞭解並非每個應用程式或產品都需要完整的自訂設計系統!建議建立單頁風格指南。樣式指南是列出設計基礎規格的文件。品牌宣傳指南通常會包含樣式指南。

您可以複製這個檔案,並做為更新樣式 (或符號、元件或程式庫) 的來源。