400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > ui設(shè)計(jì) > 【UI設(shè)計(jì)基礎(chǔ)知識(shí)】設(shè)計(jì)時(shí)移動(dòng)端適配原理是什么

【UI設(shè)計(jì)基礎(chǔ)知識(shí)】設(shè)計(jì)時(shí)移動(dòng)端適配原理是什么

  • 發(fā)布: ui培訓(xùn)
  • 來(lái)源:UI干貨資料
  • 2020-04-09 18:17:35
  • 閱讀()
  • 分享
  • 手機(jī)端入口

一說(shuō)到PPI,好像大家都會(huì)想到DPI。DPI是什么意思呢?DPI表示每英寸有多少個(gè)點(diǎn)。PPI表示每英寸有多少個(gè)像素。

那點(diǎn)是什么?點(diǎn)是印刷單位,就是每英寸(2.54厘米)上面有多少個(gè)油墨點(diǎn)。

當(dāng)然,在Android系統(tǒng)中,DPI就是像素/每英寸,跟PPI是一個(gè)概念。Android系統(tǒng)真的是為所欲為呀。但是沒(méi)辦法,Android就是這么用了,咱們只能這么去理解了。

那為什么會(huì)有@1X、@2X、@3X的概念呢?主要是因?yàn)锳ndroid機(jī)型太多了,一個(gè)圖片,要想放在所有的Android手機(jī)上,那得切多少?gòu)埓笮〔灰坏膱D片呀,要累死切圖的設(shè)計(jì),上傳圖片的程序員的頭發(fā)掉的也更快了吧。哈哈哈哈哈哈哈,所以,Android出了一套規(guī)則,好方便他們統(tǒng)一圖片。

Android提出一個(gè)新的概念,DP。DP是Android為了使得開(kāi)發(fā)者設(shè)置的長(zhǎng)度能夠根據(jù)不同屏幕DPI/PPI使用不同的像素(px)的圖像以保證不同機(jī)型圖像在視覺(jué)上統(tǒng)一的單位,你可以理解為DP為物理點(diǎn),PX是像素點(diǎn),一個(gè)物理點(diǎn)上可能有幾個(gè)像素點(diǎn)。

【UI設(shè)計(jì)基礎(chǔ)知識(shí)】移動(dòng)端適配原理(下)

有一個(gè)公式:dp=(dpi/(160像素/英寸))px

Android提出的這個(gè)概念DP在iOS上同樣適用。

那如果DPI的數(shù)值是160,那1DP=1PX;如果DPI的數(shù)值是320,那1DP=2PX;如果DPI的數(shù)值是480,那1DP=3PX;

好,大家理解一下下面的信息:假如一個(gè)物理點(diǎn)上有1個(gè)像素,那一個(gè)30X30PX的圖像正常上傳到屏幕上。假如一個(gè)物理點(diǎn)上有2個(gè)像素,那一個(gè)30X30PX的圖像,為了保證圖片看起來(lái)同樣大小,是不是要上傳一張60X60PX的圖像才能看起來(lái)跟上一個(gè)圖同樣大小。同理假如一個(gè)物理點(diǎn)上有3個(gè)像素,那一個(gè)30X30PX的圖像,為了保證圖片看起來(lái)同樣大小,是不是要上傳一張90X90PX的圖像才能看起來(lái)跟上一個(gè)圖同樣大小。

那這樣在30是30的1倍,60是30的2倍,90是30的3倍,所以規(guī)范上講@1X 表示一倍,@2X表示2倍 ,@3X表示3倍。

OK,大家明白了@1X、@2X、@3X 的事情,320PPI的圖像肯定是@2X圖了,但是iPhone11是326PPI,那是幾倍?

既然引進(jìn)DP這個(gè)概念是為了適配,所以在適配的時(shí)候,如果PPI/DPI的數(shù)值接近于那個(gè)就用哪個(gè)倍數(shù)。326PPI接近320,所以iPhone11是用的@2X圖。

再深一些的知識(shí),PX表示像素,一個(gè)點(diǎn)上像素越多,肯定就清晰。那iPhone手機(jī),用@1X圖的機(jī)型有iPhone3Gs;用@2X圖的機(jī)型有:iPhone4/4S/4/5S/6/6S/7/8等;用的@3X圖的機(jī)型有:iPhone6/6S/7/8Plus、iPhoneX等。大家手上有別的機(jī)型也可以算算自己的手機(jī)的圖片是多少倍的。

文章“【UI設(shè)計(jì)基礎(chǔ)知識(shí)】設(shè)計(jì)時(shí)移動(dòng)端適配原理是什么”已幫助

>>本文地址:http://littlerockbway.com/zhuanye/2020/48603.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測(cè)試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營(yíng)銷互聯(lián)網(wǎng)營(yíng)銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營(yíng)全域電商運(yùn)營(yíng)
  • 軟件測(cè)試軟件測(cè)試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開(kāi)發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開(kāi)發(fā)智能機(jī)器人
 

快速通道fast track

近期開(kāi)班時(shí)間TIME