UI設計師深度分析像素，分辨率和適配

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

像素和分辨率的關系

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

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

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

• ppi：每英寸(長度)所包含的像素點數(shù)目。
• dpi：每英寸(長度)所包含點的數(shù)目。

對于dpi，我覺得只要了解就可以了，ppi才是比較重要的。從上面的定義可以看出來其實dpi和ppi的區(qū)別并不大，只不過像素(px)是設計師的最小設計單位，點(pt)是iOS最小的開發(fā)單位。我們?nèi)粘Ｋf的二倍圖，三倍圖就是指屏幕中一個點中有兩個像素或三個像素。一個設備究竟要使用二倍圖還是三倍圖，只需看ppi和dpi的比值就可以了。(ps:plus中ppi/dpi=2.6，約等于3)

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

分辨率換算

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

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

簡單的數(shù)學換算一下就可以得出是44.92px，也就是我們常說的44px。所以這個44px只是相對的長度，隨著屏幕ppi的改變會改變。如果不懂不這個可能就會死抓著這個44px不變，在任何分辨率的屏幕中都是使用44px，這明顯是不對的。

 適配誤區(qū)

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

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

其實有這種想法沒錯，iPhone5中大部分組件都是和設計稿尺寸是一樣的。但是有一些設計元素會相應的改變尺寸來適應iPhone5 640×1136的屏幕。

這種尺寸的變換一般分為兩種：一是等比縮放，這種適合的是圖片類。二是高度不變，水平間距縮小，這種適合的是設計組件，比如上面的搜索框。

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

之前做開屏廣告設計規(guī)范的時候，我就是截了好幾個的產(chǎn)品的開屏圖進行分析做出來的。

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

設計風格的把控

對于適配知識的了解還可以幫助我們?nèi)グ芽禺a(chǎn)品的設計風格。例如，我們之前在產(chǎn)品首頁會傾向于下面的這種排版。這種排版的好處是信息可以充足的展示，可點擊區(qū)域夠大，用戶操作方便。但是在做適配的時候就會很困難，特別是iPhone X出來屏幕的進一步拉長，這種單屏適配就會很困難。

這種首頁的設計模式我在以后采用的時候肯定會考慮再三，不是說這種設計模式不好看或者說是可用性差，只是將來做設配的適配會很困難。

溝通的重要性

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

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

原文地址：UI中國
相關文章--《5年經(jīng)驗產(chǎn)品經(jīng)理分享工具箱》