首頁技術(shù)文章正文

ios和安卓適配需要注意的問題?

更新時間:2022-01-17 來源:黑馬程序員 瀏覽量:

目前移動端系統(tǒng)主要以Android和iOS為主,由干Android平臺的差異化越來越大,在UI設(shè)計中通常以iOS系統(tǒng)為基準,以此去適配其他手機,可以降低設(shè)計成本,提高開發(fā)速度。


設(shè)計基準選擇

設(shè)計基準選擇指的是挑選當前主流的手機屏幕分辨率作為設(shè)計適配標準。摒棄些非主流甚至已經(jīng)淘汰的手機屏幕尺寸,例如i0S@1x倍率的屏幕尺寸。

目前一般以iOS系統(tǒng)主流分辨率750x1334像素進行設(shè)計,像素倍率為@2x,因為它的尺寸向上或向下適配時,界面調(diào)整幅度最小,偏差不會太大,視覺比例也不會出現(xiàn)太大問題。而且與Android版本720x1280像素的尺寸相近,甚至屏幕密度也是相近的,所以只需做最小的設(shè)計調(diào)整。


設(shè)計基準圖

設(shè)計基準圖是指按照選擇的主流分辨率設(shè)計出來的界面,該界面可以適配多個屏幕尺寸。下面將對設(shè)計基準圖的設(shè)計注意事項以及調(diào)整方法做具體講解。


1. 設(shè)計基準圖注意事項

按照iOS系統(tǒng)主流分辨率750x1334像素進行的設(shè)計基準圖,除了圖片外其余部分需要用形狀工具來做,方便后期其余版本的調(diào)整。將圖片轉(zhuǎn)為智能對象,進行放大拉伸只要不超過原有尺寸便不會失真。設(shè)計完成后,在設(shè)計基準圖上進行標注和輸出切圖。


2. 界面調(diào)整


1) 改版Android界面

開發(fā)團隊出于節(jié)省人力、時間等原因考慮,一般以ios系統(tǒng)設(shè)計基準圖為主導(dǎo),將繪制好的設(shè)計基準圖進行適當調(diào)整、應(yīng)用于Android平臺中。

改版Android界面有如下幾個步驟:

(1) 設(shè)計基準選擇Android主流設(shè)計界面尺寸為720x1280像素。

(2) 設(shè)置界面結(jié)構(gòu)中欄的尺寸(如狀態(tài)欄高度為50像素、導(dǎo)航欄高度為96像素、標簽欄高度為96像素)。

(3) 設(shè)置兩邊邊距(邊距尺寸一般為24~30像素)。

(4) 把iOS系統(tǒng)設(shè)計基準圖頁面中的元素拖放到Android界面中,將頁面元素調(diào)整到恰當?shù)奈恢茫⒄{(diào)整元素間的間距為偶數(shù)。

(5) 將字體改為“思源”即可。

ISO適配

2) 適配Plus界面

對于ios系統(tǒng)中像素倍率不同,欄的高度有所不同。如iPhone 7的屏幕分辨率為750x1334像素,狀態(tài)欄商度為的像素、導(dǎo)航欄高度為88像素、標簽欄高度為98像素。而iPhone7 Plus高度為60像素、特就欄高度132像素、標茶欄高度為16像素。

在界面上進行調(diào)整欄內(nèi)部元素,內(nèi)容區(qū)域也要進行重新調(diào)整。而圖片需要單獨適配,iPhone 7 Plus是iPhone 7的1.65倍,需要在原圖的高度上乘1.65才是Plus的正確高度,但是位圖一般放大會發(fā)虛,所以適配的圖片最好以大尺寸去適配小尺寸。


3. 自動適配

自動適配是在設(shè)計基準圖適配時需要注意文字流式和控件的問題。文字流式和控件都是頁面框架結(jié)構(gòu)制定好后,文字根據(jù)屏幕的尺寸自動適應(yīng)排列,屏幕尺寸越大,顯示的內(nèi)容就會越多,充分發(fā)揮了大屏幕的優(yōu)勢。



猜你喜歡:

裝飾公司LOGO設(shè)計案例

化妝品logo設(shè)計案例實戰(zhàn)【UI設(shè)計教程】

民宿LOGO設(shè)計方法和教程

酒店LOGO怎么設(shè)計?教你設(shè)計思路

黑馬程序員UI/UE課程

分享到:
在線咨詢 我要報名
和我們在線交談!