1. 能同時用於 Android 和 iOS的APP UI設計怎麼做
遵循這些步驟,你的 App 就能同時在 iOS 和 Android 保持完美!
1. 總體的樣式
從 iOS7 以後,Apple 就一直在採用扁平化的設計模式,去除了所有不必要的紋理和陰影等效果——和早些年間的版本完全不同。Google 的新 MD 設計規范有了一些更加細節的規定,通過一種叫「紙片」的方法來創造更多的層級關系。
2. 實體按鈕
Android 有一個返回按鈕,點擊它可以返回上一個屏幕。
iPhone 上則沒有這樣一個按鈕,所以需要有一種方式能夠讓用戶回到先前的屏幕。通常的解決方案是在屏幕的左上角放置一個返回鍵。
3. 通用元素
兩種平台之間的確存在著一些通用的元素,比如說狀態欄和標題欄,它們會出現在每一屏的頂部。你不應當改變導航欄的高度,如果你想讓 App 看起來更加原生的話。所以,我推薦你在設計的第一頁就定義好標題欄的樣式,然後在其他的屏幕上使用一個佔位的方框來替代,這樣能省下不少時間,但是你應當向程序員說明標題欄在不同的屏幕上都是一樣的樣式。
不同平台上的導航欄有一定的差別。在 Android 上文本是左對齊的,然而 iOS 上是居中對齊的。在 iOS 上,很多企業都用它們的 logo 來替換首頁標題欄中的文字,但是在 Android 設備上這不是一個好的主意。狀態欄(顯示你的網路、電量和時間信息)是系統組件,你不需要考慮設計它,只要確保它們不會對他人造成誤解就好了。
4. 導航
或許iOS 和 Android 平台之間最大的區別就在於他們的導航樣式了。Android 上最主要的導航方式是抽屜菜單,Android 用戶們通常在這個菜單內進行跳轉。而且在整個 App 中,這種體驗是一貫的。Apple 的導航樣式更傾向於 tab bar,它位於屏幕的底部,並且以一種很簡單的方式實現上部內容的切換。當你設計 App 的結構的時候,你可以為不同的平台設計不同的導航樣式。
5. 要不要用卡片式
在 UI 設計中,卡片正逐漸成為一種主要的 UI 設計樣式,它們可以應付多種情況,而且給用戶提供了一種能夠呈現有效內容的便捷方式。視覺上,卡片非常適應於 Android 的 Material Design(它事實上源自於紙張的靈感)。使用陰影和卡片之間的合理間距能夠創建一種自然的外觀。
在 iOS 上,使用卡片設計需要更加的小心謹慎,盡管一些大型的 App,諸如 Facebook 和 pinterest 的確使用了一種略微偏離 iOS 視覺規范的設計風格。Instagram 使用了一種完全扁平化的設計風格,盡管從結構的觀點上看,用戶的每一條推送都能被視為是一張卡片,instagram 的設計很值得你去花時間揣摩,它是如何遵循 iOS 視覺規范的。如果你要在 iOS 平台上應用陰影,你最好小心謹慎,盡量使得這些陰影不是那麼的明顯。
6. 排版
iOS 系統上的默認字體是 Helvetica Neue,在 Android 上則是 Roboto。盡管這兩種字體在外觀上有顯著的差異,但是這兩個字體的尺寸卻是近乎相同的。如果你想要在設計的時候節省時間,那麼用一款字體就可以,但是要和開發人員溝通在不同的平台上使用對應的字體。而在設計重要的布局結構和使用大號字體時,我建議你還是同時用這兩種字體測試效果。
如果你想要精益求精,那麼你就要對不同平台上的設計規范更加註意。比如如下幾條:
Android 的 MD 設計需要用到更多的空格來進行布局
在 MD 中字體大小的變化會更加多樣
在 iOS 上,字體沒那麼多大小差異,但是在字體重量上(Font weight)有更多的變化,同樣允許你創建主次結構
兩個平台都使用比較細的字體來現實正文內容,然而,在下面的例子中,Android 使用了輕(Lighr)和常規(Regular)字體,而 iOS 使用了粗體(Bold)和常規字體
這是一個非常簡單的例子,向你展示了排版方面的一些細微的不同可以導致印象上的巨大差異——你能很快分辨你是在用 Android 手機還是在用 iPhone!
7. 網格和觸摸元件
iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有對可觸摸元件的設計規范。MD 規范同樣建議對所有元素使用 8dp 網格對齊。
在最近的項目上,我發現遵守 Android 的這些設計規范會更加安全,因為大一些的 48px 的按鈕在兩個平台上都表現良好,而且 MD 的規范更加全面,還經常更新。不管怎麼說,你都應該在設計中使用網格,但是我們發現定義更加明確的 Android 網格會更好用一些。