歡迎來到培訓(xùn)無憂網(wǎng)!

全國切換

咨詢熱線 400-001-5729

位置:培訓(xùn)無憂網(wǎng) > 新聞資訊 > 電腦/IT > UI設(shè)計 >  android ui適配和ios ui適配分別是怎樣得

android ui適配和ios ui適配分別是怎樣得

來源:培訓(xùn)無憂網(wǎng) 發(fā)布人:裴裴

2022-05-30 14:34:13|已瀏覽:4604次

ios ui適配

android ui適配

      Android設(shè)備的屏幕尺寸,從幾寸的智能手機(jī),到10寸的平板電腦,再到幾十寸的數(shù)字電視,我們應(yīng)該適配哪些設(shè)備呢?
      什么是ui適配_ui適配原則,其實這個問題不應(yīng)該這么考慮,因為對于具有相同像素密度的設(shè)備來說,像素越高,尺寸就越大,所以我們可以換個思路,將問題從單純的尺寸大小轉(zhuǎn)換到像素大小和像素密度的角度來。

      占比5%以上的6個主流分辨率,占比高的是480*800,320*480的設(shè)備竟然也占據(jù)了很大比例,但是和半年前的數(shù)據(jù)相比較,中低分辨率(320*480、480*800)的比例在減少,而中高分辨率的比例則在不斷地增加。雖然每個分辨率所占的比例在變化,但是總的趨勢沒變,還是這六種,只是分辨率在不斷地提高。所以說,我們只要盡量適配這幾種分辨率,就可以在大部分的手機(jī)上正常運行了。當(dāng)然了,這只是手機(jī)的適配,對于平板設(shè)備(電視也可以看做是平板),我們還需要一些其他的處理。

ios ui適配

      從iPhone3GS/iPhone4(s)過渡到iPhone5(s)時,在邏輯上寬度不變高度稍高,之前舊的素材和布局通過AutoresizingFlexible簡單適配即可運行得很好,但由于高寬比增大,上下兩端出現(xiàn)黑粗邊(典型如LaunchImage)。
      從分辨率的角度來看,除了需要提供LaunchImage這種滿屏圖,其他基本沿用二倍圖(@2x);從屏幕尺寸角度來看,需要對縱向排版略加調(diào)整。從iPhone5(s)發(fā)展到iPhone6(+),由于高寬比保持不變,iOS對圖標(biāo)、圖片、字體進(jìn)行等比放大自適應(yīng),清晰度會有所降低。同時,坐標(biāo)布局會導(dǎo)致在大屏下出現(xiàn)偏左偏上的問題。從分辨率的角度來看,iPhone6沿用二倍圖(@2x),但需為iPhone6+提供更高的三倍圖(@3x);從屏幕尺寸角度來看,需要重新對UI元素尺寸和布局進(jìn)行適配,以期視覺協(xié)調(diào)。

      (1)按寬度適配

      iPhone4~6(+)的屏幕高寬比:

      iPhone4(s):分辨率960*640,高寬比1.5

      iPhone5(s):分辨率1136*640,高寬比1.775

      iPhone6:分辨率1334*750,高寬比1.779

      iPhone6+:分辨率1920*1080,高寬比1.778

      可粗略認(rèn)為iPhone5(s)、6(+)的高寬比是一致的(16:9),即可以等比例縮放。這樣,共有iPhone3/4/5、6、6+三組寬度,在iPhone6、6+下將按比例橫向放大。

      (2)按高度適配

      在同樣的寬度下,iPhone4(s)的屏高比iPhone5(s)低,若縱向排版緊張,可以iPhone5(s)為基準(zhǔn),共有iPhone3/4、5、6、6+四組高度,在iPhone3/4下將按比例縱向縮小,在iPhone6、6+下將按比例縱向放大。

      (3)按字體適配

      另外,iPhone的【設(shè)置】【通用】【輔助功能】中可以設(shè)置調(diào)節(jié)【更大字體】,APP也可以按字號適配。

ui設(shè)計一稿適配

      一份設(shè)計稿就不能適用于 iOS 各手機(jī)屏幕尺寸。如何支持多個尺寸屏幕,這個要分情況討論。對于常規(guī)界面我們可以偷個懶,只做 iPhone 5 屏幕尺寸的設(shè)計稿,請開發(fā)在其它屏幕上自適應(yīng),終檢查實機(jī)效果沒問題就行。對于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配, iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大,要單獨切圖,所以不是說簡單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時矢量切圖在開發(fā)中優(yōu)勢很明顯,只要把大屏幕中切圖的尺寸告訴開發(fā)即可,無需針對非 3x 元素額外輸出切圖。

      注:尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-36635.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們,了解更多相關(guān)資訊請關(guān)注UI設(shè)計頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多:150 3333 6050

留下你的信息,課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程!
  • 姓名:

  • 手機(jī):

  • 地區(qū):

  • 想學(xué)什么:

  • 培訓(xùn)無憂網(wǎng)
免 費 申 請 試 聽
提交申請,《培訓(xùn)無憂網(wǎng)》課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程!