像素，分辨率和適配

不管是UI還是交互都是屬于從國外傳進(jìn)來(lái)的“舶來(lái)品”，在翻譯成中文的時(shí)候可能會(huì )出現一些詞不達意的錯誤。在傳播過(guò)程中，這些錯誤可能會(huì )被進(jìn)一步的放大。我們可以在網(wǎng)上看到很多設計相關(guān)的文章或者書(shū)籍，其中相同的事物在不同的地方可能會(huì )有不同的表述，其中有些可能還是相互矛盾的。這就給我們設計師的工作帶來(lái)了極大的不便，因為沒(méi)有達成一個(gè)統一的標準。其中像素和分辨率就是典型的，可能大家已經(jīng)看過(guò)了很多篇類(lèi)似的文章，但是還是搞不懂什么是像素，什么是分辨率。那么我希望我的這篇文章可以幫你解決這個(gè)困惑。

　　一、像素和分辨率的關(guān)系

　　我覺(jué)得很多設計師沒(méi)有搞懂分辨率和像素的原因是因為沒(méi)有弄明白什么是英寸。我們小時(shí)候家里的電視機會(huì )說(shuō)21寸大彩電，25寸大彩電，29寸大彩電等。包括手機我們也會(huì )說(shuō)4.7英寸，5.0英寸等。但是顯示屏畢竟是一個(gè)面，而你用英寸來(lái)表示一個(gè)面，所以在很多人心中會(huì )把英寸誤以為是一個(gè)面積單位，也就是說(shuō)把英寸看成了是平方英寸。

　　而把英寸看成是面積單位的設計師就會(huì )對分辨率產(chǎn)生完全不一樣的認識。其實(shí)這里的英寸是指屏幕對角線(xiàn)的長(cháng)度，英寸實(shí)際上是長(cháng)度單位。

　　分辨率可以分為兩種，ppi和dpi。

　　ppi：每英寸(長(cháng)度)所包含的像素點(diǎn)數目。

　　dpi：每英寸(長(cháng)度)所包含點(diǎn)的數目。

　　對于dpi，我覺(jué)得只要了解就可以了，ppi才是比較重要的。從上面的定義可以看出來(lái)其實(shí)dpi和ppi的區別并不大，只不過(guò)像素(px)是設計師的小設計單位，點(diǎn)(pt)是iOS小的開(kāi)發(fā)單位。我們日常所說(shuō)的二倍圖，三倍圖就是指屏幕中一個(gè)點(diǎn)中有兩個(gè)像素或三個(gè)像素。一個(gè)設備究竟要使用二倍圖還是三倍圖，只需看ppi和dpi的比值就可以了。(ps:plus中ppi/dpi=2.6，約等于3)

　　可能會(huì )有些設計師覺(jué)得這些知識沒(méi)有用，或者認為這些知識是屬于前端的，跟自己沒(méi)有關(guān)系。但是掌握一些基礎的開(kāi)發(fā)知識可以幫助我們更好的完成設計工作，接下來(lái)我就舉三個(gè)例子來(lái)說(shuō)明一下。

　　二、分辨率換算

　　我剛才在前面也說(shuō)了，設計師對于dpi只要了解即可，真正需要掌握的是ppi。那么ppi可以給我們帶來(lái)什么樣的幫助呢?因為像素的物理尺寸不是相對的，隨著(zhù)屏幕ppi的不同也會(huì )發(fā)生相應的變化，了解ppi這個(gè)會(huì )幫助我們避免犯錯。

　　例如，在iOS給的設計規范中我們經(jīng)常會(huì )看到44，88這些數字。那么44是怎么來(lái)的呢?其實(shí)iOS推薦的小可點(diǎn)擊元素的尺寸是44*44 px。iPhone1為例，因為這個(gè)設計規范提出來(lái)的時(shí)候，蘋(píng)果還沒(méi)有適應retina屏,蘋(píng)果是在iPhone4的時(shí)候才開(kāi)始采用retina屏。當時(shí)的屏幕ppi是163px。而用戶(hù)在屏幕中可點(diǎn)擊的物理尺寸是7mm-9mm。我們以7mm來(lái)算，一英寸長(cháng)度里有163像素，一英寸有25.4mm，那么7mm里應該有多少像素呢?

　　簡(jiǎn)單的數學(xué)換算一下就可以得出是44.92px，也就是我們常說(shuō)的44px。所以這個(gè)44px只是相對的長(cháng)度，隨著(zhù)屏幕ppi的改變會(huì )改變。如果不懂不這個(gè)可能就會(huì )死抓著(zhù)這個(gè)44px不變，在任何分辨率的屏幕中都是使用44px，這明顯是不對的。

　　三、適配誤區

　　適配也是目前來(lái)說(shuō)一些設計師比較頭疼的一個(gè)問(wèn)題，有很多小細節需要我們去注意。目前來(lái)說(shuō)，我們給app做界面設計基本上都是750×1334(iPhone6/7/8)的尺寸上做，也就是以2倍圖為基準，然后切3倍圖對plus和iPhone X進(jìn)行適配,三倍圖適配是我們的重點(diǎn)，所以經(jīng)常有設計師忽視對iPhone5的尺寸做適配。

　　可能會(huì )有設計師很困惑了，我本身就是以2倍圖為基準做的，而iPhone5用的也是2倍圖，為什么我還要做適配呢?

　　其實(shí)有這種想法沒(méi)錯，iPhone5中大部分組件都是和設計稿尺寸是一樣的。但是有一些設計元素會(huì )相應的改變尺寸來(lái)適應iPhone5 640×1136的屏幕。這種尺寸的變換一般分為兩種：一是等比縮放，這種適合的是圖片類(lèi)。二是高度不變，水平間距縮小，這種適合的是設計組件，比如上面的搜索框。

　　當然進(jìn)行適配的工作量是非常大，有很多的小細節需要我們去注意，一篇文章的篇幅是肯定講不完的。我給大家的建議就是拿一個(gè)iPhone5和iPhone6下QQ音樂(lè )，然后截圖去分析比較。這是一個(gè)很笨但是也很見(jiàn)效的方法，這個(gè)方法也是一個(gè)大神介紹給我的。其實(shí)這個(gè)你也可以看成是"競品分析"，當然這里沒(méi)有競品，但是核心理念都是一樣的：不會(huì )做的時(shí)候，去看看別人怎么做的。

　　之前做開(kāi)屏廣告設計規范的時(shí)候，我就是截了好幾個(gè)的產(chǎn)品的開(kāi)屏圖進(jìn)行分析做出來(lái)的。

　　ps:那么在二倍圖的基礎上做圖，我們一定要注意組件的尺寸不能是單數，比如你的按鈕高度是75px，那么到三倍圖里，75px放大1.5倍肯定會(huì )出現虛邊。這種問(wèn)題我們要去規避。

　　四、設計風(fēng)格的把控

　　對于適配知識的了解還可以幫助我們去把控產(chǎn)品的設計風(fēng)格。例如，我們之前在產(chǎn)品首頁(yè)會(huì )傾向于下面的這種排版。這種排版的好處是信息可以充足的展示，可點(diǎn)擊區域夠大，用戶(hù)操作方便。但是在做適配的時(shí)候就會(huì )很困難，特別是iPhone X出來(lái)屏幕的進(jìn)一步拉長(cháng)，這種單屏適配就會(huì )很困難。

　　這種首頁(yè)的設計模式我在以后采用的時(shí)候肯定會(huì )考慮再三，不是說(shuō)這種設計模式不好看或者說(shuō)是可用性差，只是將來(lái)做設配的適配會(huì )很困難。

　　五、溝通的重要性

　　其實(shí)這篇文章主要說(shuō)的是設計師如何通過(guò)對像素和分辨率的學(xué)習來(lái)更好的完成適配，那么我覺(jué)得適配是一個(gè)團隊工作，光靠設計師是不夠。例如我在上面的例子說(shuō)到那種首頁(yè)的布局模式很難進(jìn)行適配。但是界面的框架不是由UI設計師來(lái)決定的，產(chǎn)品經(jīng)理或者交互設計師在繪制線(xiàn)框圖的時(shí)候已經(jīng)確定了整個(gè)界面的排版布局。所以說(shuō)，讓UI設計師來(lái)參與到前期線(xiàn)框圖和原型圖的繪制是非常的重要，因為有些問(wèn)題是必須站在UI設計師的角度來(lái)可以看出來(lái)的。

　　除了跟產(chǎn)品經(jīng)理和交互溝通，我們還要和開(kāi)發(fā)多溝通。前幾天我在給一個(gè)按鈕做動(dòng)效，切圖的時(shí)候要求背景透明。但是從ps中導出的透明背景的gif會(huì )出現雜邊，根本不能用。后來(lái)問(wèn)了一些朋友，大家都沒(méi)有合適的解決方案，AE中也沒(méi)有比較好用的可以直接導出高保真gif的插件。后我都絕望了，前端同事跟我說(shuō)其實(shí)這個(gè)效果可以用代碼來(lái)實(shí)現。當時(shí)我就懵了，感到自己之前那么多工作都白費了(AE中做動(dòng)效，導出視頻，把視頻導入PS，再導出gif)。所以說(shuō)設計師一定要跟開(kāi)發(fā)多溝通，這樣可能會(huì )減少很多工作量，對于適配也是一樣。

　　總結

　　以上就是我對像素，分辨率和適配做的一個(gè)總結。希望可以解決你們心中的一些疑惑，其中可能會(huì )有不對的地方，歡迎留言糾正。