您當前位置: 南順網絡>> 官方資訊>> 建站知識

為什么設計師只設計一稿尺寸?

01. 相關單位概念

首先說屏幕密度ppi,它是指1英寸長度上顯示的像素數量(英寸是物理長度單位,是實實在在可以用直尺測量的長度),因此ppi是一個密度單位,值越大,單位英寸上的像素點就越多,顏色信息也就越豐富,顯示效果就會更加細膩高清。

它的計算公式是:ppi=屏幕對角線上的像素量px 對角線長度inch = √(屏幕橫向像素^2 屏幕縱向像素^2)/對角線長度。

shipei_04

 

我們再來說說墨點密度dpi,它的概念是指1英寸長度上有多少個墨點數,這里的墨點就是打印機打印到紙上的那個墨點,用更多的墨點來打印一張圖片,當然色彩更豐富,打印效果越好。從這里我們看出,dpi雖然是印刷行業的概念,但是和ppi的原理是一樣的,在安卓系統里,很多人都把dpi和ppi劃等號,也是行得通的,大家知道這個事就可以了,沒必要去糾正這個“錯誤”,畢竟谷歌都是混用的。

屏幕分辨率,分辨率實質上是對清晰度的描述,上面我們說了ppi值越大,顯示越清晰,和ps里設置分辨率72ppi是一樣的。

但是,這里的分辨率就不是原本意義上的分辨率了,它是指一個顯示屏橫向和縱向長度上的最大顯示像素量,比如我們說電腦顯示器的分辨率為1080px*1920px,指顯示器橫向最多顯示1080像素,縱向最多顯示1920像素。那為什么不用分辨率原本的含義來表示呢,因為我們日常工作中,關注更多的是顯示內容的多少,相比之下清晰度是次要的,比如400px*800px的顯示器只能顯示800px*1600px一半的內容,所以用px*px的方式描述屏幕分辨率更有實用性。

屏幕尺寸,一般我們說5.0英寸的手機,這個5.0英寸是指手機對角線的長度。1in=2.54cm,我們可以手動測量再單位換算得出手機的尺寸。這個尺寸也是用來計算屏幕密度的量。

 

shipei_05

 

02. 屏幕密度不同,顯示有差異

我們知道,ppi的定義是1英寸上的像素量,ppi值越大,表示1英寸上的像素點越多。所以,一張4px*4px的圖片,在屏幕密度大的設備上比屏幕密度小的設備上顯示會偏小。造成這個現象的原因是,px的物理尺寸隨ppi的大小而變化,ppi值越大,px物理尺寸越小,ppi值越小,px的物理尺寸越大。在高ppi的屏幕上,因為px的尺寸小, 那px的數量就越多,圖片在屏幕上顯示的物理尺寸就會偏小。知道這個現象很重要哦!

shipei_03

同樣是4px*4px的一張圖 

03. 五花八門的屏幕密度

我們知道,安卓手機屏幕碎片化嚴重,屏幕密度種類太多,造成這個現象的原因是什么呢?

首先,安卓系統是開源的,這就導致任何一個人都可以開發一款手機,因此國內出現很多手機制造商,他們按照自己的風格更改安卓系統,生產出獨一無二的手機屏幕密度。其次,屏幕密度不同,顯示效果就不一樣,為了滿足不同價位的消費群體,生產多種屏幕屏幕的手機也是順應市場需求。上面說了,屏幕密度不同,顯示的圖像物理尺寸會有差異。那么,設計師要為好幾十種屏幕密度各自設計一套圖嗎???!

shipei_06

由圖可知,這種方法不可行。。。。。那怎么來解決顯示差異問題呢?接下來說谷歌的解決方法。 

04. 系統屏幕密度

谷歌的解決辦法一:引入系統屏幕密度。

(注意和設備屏幕密度的區別:系統屏幕密度把設備屏幕密度歸為六類。)

綜合考慮,為了節省小密度的屏幕空間,而且保證大密度的屏幕顯示不至于太小,谷歌的解決辦法是讓大小屏幕密度的顯示效果基本一樣,這不是廢話嘛!我也能想到,但是怎樣才能保證顯示一樣呢?

谷歌把市面上各種屏幕密度劃分到幾個范圍內,也就是:ldpi,mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi 這六種(差異1),它們的名稱和對應的數值如圖:

shipei_01

這樣就把市面上奇奇怪怪的屏幕密度分為六種,是不是瞬間開心很多!別急,你想一想,就算是分為六種,也要設計六套圖啊,這也不行!又不給設計師發六份工資。

再仔細看看,120,160,240,320,480,640,這幾個值之間是不是有某種神秘的聯系?嗯,它們的倍數關系是 0.75:1:1.5:2:3:4。根據這個結果,我們只需要設計一套圖,然后按倍數關系切不同尺寸的圖片交給開發就可以了。假如我們設計的是xhdpi尺寸的設計稿(2x圖),切圖的時候放大一倍(差異2),就變成xxxhdpi的圖片(4x圖)啦。是不是特別的感動。。。所以,我們只需要針對安卓設計一套圖!

05. 圖片適配-切幾套圖

那設計師交給開發的圖,系統是如何適配的呢?首先,開發存放切圖的文件夾有六個,drawable-ldpi,drawable-mdpi、drawable-hdpi、drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi,它們是按照系統屏幕密度來命名的,有六個文件夾,意味著要切六套圖,當然,切六套圖是標標準準的。我們來說說切六套圖時,系統適配的原理:安卓系統在某手機上運行時,系統識別這個手機的屏幕密度并找到對應圖片文件夾,調用里面的圖片顯示即可,系統不做任何處理。但是,實際工作中我們并沒有切六套圖給開發,首先是因為ldpi已經被淘汰,其次是像xxxhdpi的手機市場占比很小,軟件的圖片那么多,多切一套就耗費更多時間,那我們應該切幾套圖片呢?根據開發哥哥的建議,應該切 xhdpi,xxhdpi,xxxhdpi 三種圖片尺寸,嗯,已經大大減少了工作量。針對沒有放置圖片的文件夾,系統會根據就近原則,調取其它文件夾的圖片,通過縮放倍數來顯示,既然系統能夠自動適配,為什么還需要切多套圖呢?怎么來解釋呢,就比如我們只切一套xxhdpi的圖片,要在hdpi上顯示,系統會先加載xxhdpi的圖片,然后縮小尺寸顯示,這說明低密度的屏幕也需要加載高密度的高清大圖,這就會導致加載非常的慢,內存占用高,其次,位圖縮放圖片會失真,特別是放大圖片。所以,雖然是切一套圖系統也能通過縮放適配,但是考慮到內存占用和圖片質量不建議完全依靠系統適配,也不過多增加設計師的工作量,應該兩者結合操作。上面我們講的是設計師是如何將圖片適配所有機型,那軟件里的文字和間距怎么辦呢?這就是接下來要講的針對開發適配問題。


06. 設備獨立長度dp

谷歌為了解決開發適配問題,引入設備獨立長度dp。

上面我們說圖片的適的代配是切圖 系統縮放。那對于開發來說,設置的文字和間距相關碼可以用這種操作嗎?答案是沒有必要,因為還有簡單的方法。

我們知道,適配的終極目標是為了保持物理尺寸大小一樣,我們可以在開發環境里設置一個固定的物理單位,這樣就能保證開發設置的每個數值在不同的屏幕密度上顯示大小是一樣的,這個固定的物理單位就是dp。

dp的定義是:在ppi=160時, 1px的長度(只需要記住和px的關系就行,160ppi的屏幕下px的物理尺寸是多少不重要)。我們知道,px的物理長度會隨著屏幕密度變化,但是在ppi=160的情況下,px的大小就是固定的,所以dp的值恒定不變,它是現實世界一個固定的可測量的物理量。

有了dp這個固定單位,開發只需把所有組件尺寸設置一個值,修改也很方便。

 

07. dp和px關系

上面給到的圖片中可以看出,dp和px有倍數關系,那這個倍數關系有什么用呢?

因為開發用的單位是dp不是px,所以要把設計稿中我們設置的字號和間距,根據屏幕密度,換算成開發需要的單位dp對應的數值,當然,這個開發哥哥會幫你換算的。

 

08. 字體大小單位sp

sp的引入和dp類似,也是一個固定的物理量,默認情況下,1sp=1dp,但是sp只用來表示文字大小的單位哦,不要混淆了。

 

09. 誤差怎么產生的

我們經常發現,安卓設備上顯示的界面千差萬別,不忍直視,其實這本身就是避免不了的事。

  • 差異1:原本一個手機的屏幕密度是一個準確值,但是為了方便設計,把它用系統屏幕密度代替,中間的數值差異,必定會引起顯示差異。減小這個差異需要開發對主流手機有針對性地調整。

  • 差異2:把一張圖片放大縮小一定會有誤差,特別是把小圖片放大,品質會降低。解決辦法就是多切幾套圖。

 

總結:

總的來說,針對安卓手機界面設計一稿尺寸,但是切3套圖就是規范的。

轉載自:學UI網

編輯:--ns868