移動設(shè)計師指南——跨平臺轉(zhuǎn)移設(shè)計

如果您是設(shè)計專業(yè)的學生或初級設(shè)計師，并且您即將深入研究您的第一個移動項目，那么這里有一些指導，說明在為這兩個平臺調(diào)整移動設(shè)計時要記住什么。

想一想 2009 年你的第一部智能手機上的應用程序。擬物圖標、漸變按鈕和背景紋理？還記得 Android 手機上的深色背景和充滿活力的字體嗎？

我相信你能分辨出 2009 年和 2022年移動應用程序設(shè)計之間的區(qū)別。但你真的能指出今天 iOS 和 Android UI 設(shè)計之間的巨大差異嗎？盡管如今的移動界面清晰且用戶友好，但扁平化的設(shè)計方法使所有移動平臺樣式看起來都非常相似。

多平臺移動設(shè)計的總體目標是實現(xiàn)品牌一致性并與特定平臺的約定保持一致。但是，真正確?？缙脚_版本、制造商、屏幕尺寸和密度的樣式和布局一致性的唯一方法是使用自定義 UI 組件。在進行定制時，您總是冒著創(chuàng)建用戶感覺不“在家”的風險。

因此，這里對平臺進行了簡要比較，這將幫助您決定使用標準組件設(shè)計還是自定義組件設(shè)計。

風格哲學

Google Material Design 更偏向于可定制和流暢的界面，而 iOS 一直更偏向于清晰直觀的界面。在他們的核心理念中，你可以很容易地找到他們特定風格特征的基礎(chǔ)。

屏幕深度

使用應用程序時，深度感至關(guān)重要。用戶需要關(guān)注對完成任務很重要的屏幕元素，例如按鈕、輸入字段和導航欄。

材料設(shè)計為 UI 層使用不同的陰影樣式。陰影值取決于標記特定 UI 元素重要性的 Z 軸。iOS 設(shè)計使用漸變、背景模糊和半透明顏色疊加來實現(xiàn)相同的層次結(jié)構(gòu)。

顏色

材料設(shè)計調(diào)色板更接近 CMYK 模型而不是 RGB。它包括各種較深或較淺的基本顏色?；绢伾饕糜?UI 重音，例如操作、項目標題、圖標等。相同顏色的陰影用于標簽欄、抽屜和其他導航元素。

相反，iOS 的調(diào)色板簡單而充滿活力。常見的 UI 元素，如列表項、條形、背景等，大多以灰色、黑色或白色的陰影呈現(xiàn)，而鮮艷的顏色則用于圖標、按鈕、鏈接和其他強調(diào)色。

排版

iOS 和 Android 的排版層次結(jié)構(gòu)有所不同。顯示和正文字體大小的巨大對比使內(nèi)容在兩個平臺上都顯得更加生動和有趣。在典型的 Android 屏幕上，對比度是通過使用更大的尺寸和更薄的字體來實現(xiàn)的。在 iOS 11 中，通過帶有大而加粗的標題和小標題的權(quán)重層次結(jié)構(gòu)，對比度更加明顯。

重要的是要記住，在 Material Design 中，標題和文本在屏幕上大多是左對齊的，尤其是在導航元素方面。在為 iOS 設(shè)計時，您應該保持操作按鈕和較小的標題居中，而標題、副標題和正文可以左對齊。

圖標樣式

Material 設(shè)計鼓勵使用扁平圖標，而 iOS 設(shè)計更喜歡細的 1px 或 2px 線條圖標。這是一個很小但很重要的樣式細節(jié)，在為另一個移動平臺調(diào)整應用程序時應該考慮。如果您的應用具有特定的圖標樣式，則您不一定要遵循此規(guī)則?？纯?iOS 11 中的新鎖屏，他們似乎正在擺脫只使用輪廓圖標的方式。

邊框

一個簡單的單像素筆劃重音在高分辨率 Android 設(shè)備上可能看起來很棒，但不要忘記 Android 設(shè)計應該在大多數(shù)屏幕密度下都有效。在這些情況下，開發(fā)人員必須重新考慮設(shè)計元素并考慮應用程序代碼中的不同情況。

品牌推廣

品牌顏色及其色調(diào)的使用在 Material design 中更為占主導地位，而 iOS 指南建議使用更微妙的品牌方法。在 iOS 中，它應該只在 UI 元素中可見，例如圖標、顯示圖形、按鈕或鏈接。

應用程序圖標

新的 Android 應用程序圖標是自適應的，這意味著它們旨在適應不同設(shè)備的不同蒙版形狀（圓形、圓角矩形……）。iOS 應用程序圖標仍僅限于圓角矩形。

動畫和過渡

UI 動畫應該只在與用戶行為相關(guān)時使用，并且它們應該讓人感覺不顯眼。

Material 動畫風格是紙張分層哲學的產(chǎn)物，運動風格包含大量的漣漪效果和戲劇性的形狀擴展，而 iOS 動畫則更加微妙和自然。

導航

清晰自然的導航保證了健康的信息架構(gòu)。除了風格差異之外，了解導航系統(tǒng)的基本特征也很重要。

抽屜

Material Design 提供了很多隱藏內(nèi)容的組件，讓用戶更容易找到最相關(guān)的功能。例如，如果您有很多內(nèi)容，您可以隨時使用抽屜。在抽屜外面展示關(guān)鍵功能，把不那么重要的東西放在抽屜里。

有許多使用抽屜的 iOS 應用程序。然而，iOS 抽屜沒有原生組件或設(shè)計指南，因為推薦的導航解決方案是原生標簽欄。

標簽欄

在 Android 應用中，主屏幕的底部導航欄僅在頂級導航中可見，因此不要從導航根目錄走得太深。

iOS 設(shè)計理念始終把內(nèi)容放在首位，很少隱藏任何東西。原生標簽欄使用戶能夠在主要內(nèi)容之間輕松切換，并鼓勵用戶探索應用程序。標簽欄始終存在，并且很容易在導航的更高和更深級別之間切換。

返回鍵

Android 應用程序同時具有向上按鈕（集成在應用程序中）和后退按鈕（本機組件）。向上按鈕可讓您備份導航根目錄。后退按鈕通常會將您帶回與向上按鈕相同的屏幕，除非您之前已從一個應用程序切換到另一個應用程序。在這種情況下，后退按鈕將帶您返回上一個應用程序。

在 iOS 應用程序中，即使您可以在選項卡欄中的選項卡之間切換，導航較低級別的每個屏幕都應該有一個返回按鈕，因為這是您可以向上導航根的唯一明顯方式。