如何讓你的圖標在不同分辨率的設備上看起來一樣大
如何讓你的圖標在不同分辨率的設備上看起來一樣大-移動閱讀二維碼

首先,作者寫這篇文章的意圖在于,如何讓你的圖標在不同分辨率的設備上看起來一樣大。

下面來記一下筆記:

現在常說的分辨率有兩種,一種是屏幕內像素的數量,一種是像素/英寸,我可是琢磨了兩天吶,最后還是問人才知道的。

DPI和PPI概念差不多,就是把顯示器上的像素類比成打印設備的點。

?原生固定分辨率(點對點分辨率):也就是屏幕的實際物理分辨率。為什么不用原生固定分辨率,圖像會模糊呢?連點成線,連線成面,所有圖像都是有屏幕上的最小像素點構成的,如果設定的分辨率和實際物理分辨率不一致, 則必然要插值,也就是說,某一點的像素值變成了未知,要通過周圍像素點的灰度和信息較好的像素來增加、彌補空白像素的空間,但是圖像信息,也就是灰度值的種類就是原來的那么多種,所以圖像就會變得模糊,像慘了水的酒一樣。所以在設計時,為了保證盡可能的精確,一定要使用原生固定分辨率。

? ? ? ?怎樣調成原生固定分辨率:

? ? ? ?關于高清、超高清、全高清:

? ? ? ?分辨率后面有時會跟著另一個參數,如60Hz,表示每秒顯示60幀,也就是屏幕每秒被刷新60次,這個跟圖像大小和清晰度沒關系,而是與所做動畫的流暢度、平滑度有關,刷新快慢有圖像處理的設備決定,在電腦上,這個設備就是主機(CPU還是GPU?)。(超過60Hz,人眼是可以察覺出來的)

? ? ? ?視網膜(“retina”-蘋果專有名詞)屏幕:PPI高到人的肉眼完全無法看到像素點,效果直逼視網膜,故得此名。實際上是看得出來的(我的yoga不夠看吶)。從技術上講就是他們在物理尺寸與上一代相同的屏幕上塞了2倍的像素(注:原來1個像素的空間放4個像素,不是2個。),密度變大了,畫面更細致(?)。非蘋果的屏幕只能叫”HI-DPI”或者直接標注屏幕的尺寸和DPI。

3p(噗?。杭碊P、PT和SP。

? ? ? 這三個都是圖片或字的大小單位,既然這樣,我們不如湊個4p(壞笑),再加個px。來看一下這四個單位有什么區別。

? ? ? ?px:不同設備顯示效果相同。

? ? ? ?pt(point):是一個標準的長度單位,1pt=1/72英寸,用于印刷業,非常簡單易用;

? ? ? ?sp(scaled pixels):主要用于字體顯示,best for textsize。google 的建議,TextView 的字號最好使用 sp 做單位,而且查看TextView的源碼可知 Android 默認使用 sp 作為字號單位。

? ? ? ?dp/dip((Device independent Pixel):dip與分辨率無關,和屏幕密度有關,而屏幕密度又與具體的硬件有關,所以不同設備有不同的顯示效果。但不同分辨率并不會影響它的效果。

? ? ? 這4p都是抽象尺寸單位(除pt外),至于什么情況下用哪個單位,各系統的官方文件有說明,這就是為什么IOS GUIDElLINE 和Android designe 非常重要的原因。他們是母本,忽視母本的后果就是精心做出來的東西,在別的設備上各有各的變形。。。。。。

? ? ? ?說到這個,讓我想起另一個概念,1x、2x、3x和@1x、@2x、@3x都是放大一倍、2倍、3倍的意思。(這個筆記越來越像概念大梳理了)

? ? ? 轉換系數:原文件是44x44px的圖標,現在要讓這個圖標在3gs和iPhone4里看起來一樣大,而3gs和iphone4的屏幕尺寸一樣,iphone4的ppi是3gs的2倍,所以我要在再畫一個88x88px的圖標給iphone4,原件容納了之前4倍的像素,轉換系數是2。

? ? ? 為什么用轉換系數,不直接用PPI?因為軟件會把你的設計通過轉換系數轉換為合適的像素,所以要用設備默認的PPI做設計。

? ? ? ?用原作者一個生動形象的例子:

 

? ? ? ? 如圖,不同的ppi,相同的px和pt,圖像大小一樣,字的大小就是2倍關系,Photoshop中PT的顯示會根據PPI的值來決定,px只受屏幕點對點像素PPI的影響。

? ? ? ? 在設計時,始終使用一種PPI,一般用72.

? ? ? ? 作者的建議:我覺得很有用,記下來:

????- PPI配置對做web設計基本沒有影響。

? ? – PPI配置只會影響那些需要測量獨立PPI的單位,例如PT。

? ? ? ? ? – 像素是任何數碼的度量單位。

- 記住轉換系數和你的設計目的,而不是PPI。

- 做設計時使用通用的PPI配置,這樣能讓你更容易感知這個設計在目標設備上的效果。

- 設計時使用相同的PPI配置。

不同設備的PPI

apple:

移動設備:iPhone 5及iPhone 5s與4和4s的PPI都是326,

3gs的PPI是163,也只有它是非retina屏;

iPod touch按照iPhone去設計,≤4代用非retina標準,≥5代使用retina

標準,屏幕尺寸與iPhone 5相同。

iPad,除了iPad一代外,都支持iOS7系統(guideline),只有iPad2和

mini一代是非視網膜屏幕。對iPad mini設計,就把它當成iPad 2就行。

        1. ? ? ? ? ? ?桌面設備:大多數蘋果桌面產品是1x,只有13寸和15寸的Macbook Pro才有視網膜屏幕,用2x。

??

 

iOS規則總結:

- @2x一定用在雙倍比例的情況下。

- 視網膜屏幕設計圖的文件名都加上@2x。

- 每次都創建100%大小和200%大小兩種尺寸。

- 同一個切圖使用相同的命名,用@2x和~ipad做區分。

- 用100%做設計,然后在放大。

- 存為png格式。

- 以PT為單位作為創建的標準。

android的一些規則:

- android有7種DPI,你需要認真研究4種:mdpi,hdpi,xhdpi,xxhdpi。以及馬上要支持的XXXHDPI。

- 以MDPI作為1x的設計基礎。

- 在android上單位使用dp,其實與pt是一個意思。

- 1x設計中選擇合理的像素數。

- 存為png格式。

- 與負責人確認命名規范與存放目錄。

OSX和Chrome OS的一些規則:

- Chrome OS和OSX都有兩個轉換系數,1倍和2倍。

- 只有Chrome OS高分辨率屏幕才支持觸屏。

可伸縮設計

可伸縮時設計通過代碼保證你需要的元素可以有伸縮到它適合的大小而不改變其質量。

iOS平臺做可伸縮元素可以在代碼中實現,只要準備好實現可伸縮元素的最小基本圖像就可以了,然后控制它的伸展方向,橫向縱向或者又橫又縱隨您意。

在android平臺上你就要用.9圖了,也就是9-patch。

各個設備上的建議觸控識別區域

    ? ??IOS——44x44pt;

 

    ? ? Android——48x48dp;

 

    ? ? Windows——包含一個內邊距:Actual target 9x9mm=48x48pt

 

    padding=2mm

 

    Total ?minimum recommended=60x60pt

 

?Windows 8——參考guidelines for touch targets。

Chrome OS——參考Android touch targets guidelines。

建議:

- 以后做設計時一定要考慮移動端,考慮支持觸控。

- 使用每個平臺的建議觸控識別區域大小,這能幫助你做更好的設計,保證在不同平臺上有好的體驗。但這只是個建議,不代表你必須只能按照這個要求去做,最終還是要根據你的經驗去做設計。

本文鏈接:http://www.casaleticia.com/icon-in-different-resolution.html
本文標簽: , , ,