6個技巧幫你把IOS的UI轉換成安卓!

來源:互聯網
上載者:User

   想適配兩個完全不同的平台,有哪些需要注意的點呢?今天這篇文章總結了6個值得新手學習的地方,包括表徵圖、螢幕密度尺寸、設計等等,來收吧!

  1. 不要轉換

  你不應該在安卓上使用同一套規格的UI。iOS有一個能讓你一鍵返回案頭的“物理home鍵”。然而,安卓上的按鍵是“返回、home和多任務”。

  這意味著什麼?

  一位安卓使用者可以從一個應用輕鬆跳轉到另一個應用。這是一個很大的不同之處。

  因此,iOS通常會有一個結合了縱向和橫向的UI結構,但安卓則更偏向於縱向。

  這些“返回、home和多任務按鍵”都在螢幕底部,因此你不能把tab(標籤)放在底部的位置。

  2. 熟悉新詞

  你經常能挺到諸如“DP”、“SP”和“9 Patch”這樣的詞。DP和SP是尺寸單位,而9Patch是組件格式的名稱。

  DP是Density-independent Pixels的簡寫,它是一個永遠不會改變大小的絕對單位。

  SP和DP很像,但是它是可以伸縮的。如果使用者在裝置的設定裡調大文字,那麼通過SP定義的字型大小就會受到影響。

  Yahoo News Digest

  9 Patch是一個能讓組件可大可小的格式,對於大幅縮小檔案體積大有協助。舉個例子,它可以被用來作為帶有陰影的按鍵。點選連結查看具體細節。

  9 Patch圖片(左邊那張)可以驚人地擴張成如右圖那般的尺寸

  3. 理解螢幕密度和尺寸

  和iPhone不同,有百來個不同的生產商在基於安卓系統研發他們的手機。舉個例子,OpenSignal.com的網站上有一份乍看美不勝收實則細思極恐的安卓片段化資訊圖。

  不過這並不是說你要去為所有這些機子設計,所以不必驚慌。

  安卓有一個螢幕密度的系統能適應於每個螢幕尺寸。因此你只需要留意那5到7個不同的尺寸就可以了。

  對於1080 x 1920 pixels(XXHDPI)來說,所有像素值除以3便是DP。

  如果你以1080 x 1920 px開始你的設計,你並不僅僅是在為Nexus 5設計,那些組件和規格同樣可以完美適配於其它的XXHDPI手機,比如Galaxy S4, HTC One 或 LG G2。

  下面我們回到DP的話題…

  DP是針對所有顯示屏的一個絕對數值單位。要實現正確的像素值,你必須在每個解析度上做乘除法。比如,如果對於1080 x 1920 px(XXHDPI)來說,所有像素值除以3便是DP。

  是的,你必須在這裡做一些數學乘除,這也是為什麼有一些設計師從320 x 480px開始(這樣每個數字都是DP了)。然而,我更喜歡從1080 x 1920px開始,因為這是最流行的尺寸。但一切隨你。

  在任何情況下,你都應該為最佳化app於不同的螢幕尺寸和解析度而做出努力。我建議你在app上線之前,在至少五個不同解析度的裝置上進行測試。要知道,即便他們解析度不同但比例還是非常接近甚至一致的,因此你不必太擔心原始排版被打亂或需要重新設計的問題。

  Yahoo News Digest. 為各個解析度適配。

  4. 表徵圖

  安卓上表徵圖的風格更加實心和圓潤。

  Material Icons

  安卓的可伸縮表徵圖系統能自動地在不同尺寸之間切換。然而這種切換可能會導致位元影像變模糊。為了確保你的位元影像不受影響,你應該在適配每個尺寸上花點時間。

  Yahoo News Digest. 表徵圖為各個解析度進行適配

  5. Material Design

  去年的時候Google發布了它的Material Design,這是一個全新的設計語言。不容置疑的是它確實是一個絕佳的設計方向。去他們的網站上看看,理解基本的UI原理。然而,不要太過糾結於顏色或者陰影這些特定的視覺設計。你完全可以玩出更多創意。

  6. 更多

  軟鍵

  典型的安卓裝置在螢幕上有特定的Home, 返回和菜單按鍵。然而,三星是以實體按鍵的形式應用在他們的硬體裝置上的。這讓一切又變得些許不同。確保你的排版能在三星和其它裝置上都說得通。

  外掛程式

  安卓的外掛程式從最早開始就是其獨一無二的特點之一。你可以在主屏建立簡單且實用的卡片(但它只提供局限的功能)。多看看別人是怎麼做外掛程式的,然後在開始設計之前和你們的工程師談談實現的問題。

  訊息

  一個典型的訊息往往由表徵圖+文字或圖片+文字組成。安卓4.x和5.x使用了不同的方式,這點也需要注意。

  7. 一些有用的連結

  這裡有一些實用的連結(譯者註:有一些被牆了,MD規範網上中文版都有,其它幾個不需要翻譯-即便是英文):

  Google Material Design(General)

  Google Material Design(Patterns)

  androidux.com

  pttrns.com

  materialup.com

  重複一遍,不要無腦轉換。多用用安卓,兩者之間的區別是巨大的。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.