• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI培訓教程之ios與android ui適配

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2016-12-05 11:10

        這是一篇講解UI轉換的教程。如何將IOS系統的UI設計轉換成安卓系統的UI設計呢?這是很多UI設計師都在問或曾問過的問題。文章作者介紹了自己的經驗,包括:不要直接轉換、了解單位和組件縮放格式、屏幕尺寸DP和像素的換算、圖標適配、材質效果等。

        【IOS與安卓UI適配】

        1. 不要轉換

        編輯注:根據前后文的理解,編輯認為作者要表達的實際上是“不要直接轉換”,因為兩者物理按鍵、UI結構有很大不同。

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

        這意味著什么?

        一位安卓用戶可以從一個應用輕松跳轉到另一個應用。這是一個很大的不同之處,如圖2。

        【IOS與安卓UI適配】

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

        【IOS與安卓UI適配】

        安卓平臺中這些“返回、home和多任務按鍵”都在屏幕底部,因此(在安卓里)你不能把tab(標簽)放在底部的位置。如圖4,左圖為IOS的標簽,右圖為安卓的標簽。

        【IOS與安卓UI適配】

        2. 熟悉新詞

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

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

        SP和DP很像,但是它是可以伸縮的。如果用戶在設備的設置里調大文字,那么通過SP定義的字體大小就會受到影響。如圖5。

        【IOS與安卓UI適配】

        9 Patch是一個能讓組件可大可小的格式,對于大幅縮小文件體積大有幫助。舉個例子,它可以被用來作為帶有陰影的按鍵。點擊鏈接查看具體細節。9 Patch圖片(左邊那張)可以驚人地擴張成如右圖那般的尺寸,如圖6。

        【IOS與安卓UI適配】

        3. 理解屏幕密度和尺寸

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

        【IOS與安卓UI適配】

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

        安卓有一個屏幕密度的系統能適應于每個屏幕尺寸。因此你只需要留意那5到7個不同的尺寸就可以了。對于1080 x 1920 pixels(XXHDPI)來說,所有像素值除以3便是DP。如圖8。

        【IOS與安卓UI適配】

        編輯注:圖8中的X4、X3、X2等即為DP與像素的換算倍率。當尺寸為320x480px時,DP數值與像素值一樣。這也是為何下方作者說“這樣每個數字都是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上線之前,在至少五個不同分辨率的設備上進行測試。要知道,即便他們分辨率不同但比例還是非常接近甚至一致的,因此你不必太擔心原始排版被打亂或需要重新設計的問題。如圖9,Yahoo News Digest.為各個分辨率適配。

        【IOS與安卓UI適配】

        4. 圖標

        安卓上圖標的風格更加實心和圓潤。如圖10所示Material Icons。

        【IOS與安卓UI適配】

        安卓的可伸縮圖標系統能自動地在不同尺寸之間切換。然而這種切換可能會導致位圖變模糊。為了確保你的位圖不受影響,你應該在適配每個尺寸上花點時間。圖11為Yahoo News Digest圖標為各個分辨率進行適配的效果。

        【IOS與安卓UI適配】

        5. Material Design

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

        【IOS與安卓UI適配】

        6. 更多

        按鍵

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

        【IOS與安卓UI適配】

        插件

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

        【IOS與安卓UI適配】

        消息

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

        【IOS與安卓UI適配】

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

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:UI培訓班分享網頁布局類型
        下一篇:UI教程:之安卓UI設計系列知識

        這樣也可以輕松掌握照片墻的效果制作!

        版式設計中的網格系統!有格有調

        UI設計師一定要避免這些雷區

        干貨:怎么把單一色彩玩出花樣!

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>