用戶界面和互動都是從國外進口的“進口商品”。在翻譯成中文時，可能會出現(xiàn)一些令人不滿意的錯誤。

在傳播過程中可以進一步放大這些誤差。我們可以在互聯(lián)網(wǎng)上看到很多與設(shè)計相關(guān)的文章或書籍，在不同的地方，相同的東西可能會有所不同，其中一些可能仍然是矛盾的。這給我們的設(shè)計師帶來了極大的不便，因為他們沒有達到統(tǒng)一的標準。其中，像素和分辨率是最典型的。您可能已經(jīng)看過許多類似的文章，但您仍然不明白什么是像素，分辨率是多少。好吧，我希望我的文章可以幫助你解決這個困惑。

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

我認為許多設(shè)計師不理解分辨率和像素的原因是因為他們不理解英寸是多少。當我們年輕的時候，家里的電視機會說21英寸大彩電，25英寸大彩電，29英寸大彩電等。包括手機在內(nèi)我們也會說4.7英寸，5.0英寸等。但是顯示器畢竟是一張臉，而你使用英寸代表一張臉，所以在很多人的腦海中都會把英寸誤認為是一個區(qū)域單位，也就是說英寸是平方英寸。

將英寸視為面積單位的設(shè)計師將對分辨率有完全不同的理解。實際上，這里的英寸是指屏幕對角線的長度，而英寸實際上是長度的單位。

分辨率可分為兩種類型：ppi和dpi：

Ppi：每英寸像素數(shù)（長度）。

Dpi：每英寸（長度）包含的點數(shù)。

對于dpi，我認為只要你理解它，ppi就更重要了。從上面的定義可以看出，dpi和ppi之間的差異并不大，只是像素（px）是設(shè)計者最小的設(shè)計單位，而point（pt）是iOS的最小開發(fā)單位。我們每天使用的雙重地圖，三重地圖指的是屏幕上一個點中的兩個像素或三個像素。無論設(shè)備使用雙倍還是三倍，只需查看ppi與dpi的比率。 （加上ppi/dpi=2.6，大約等于3）

有些設(shè)計師可能會發(fā)現(xiàn)這些知識毫無用處，或者認為這些知識屬于前端而與自身無關(guān)。但掌握一些基本的開發(fā)知識可以幫助我們更好地完成設(shè)計工作，然后我將給出三個例子來說明。

　分辨率換算

我也在前面說過，設(shè)計師只能理解dpi，真正需要掌握的是ppi。那么ppi給我們帶來了什么樣的幫助呢？因為像素的物理尺寸不是絕對的，所以它會隨著屏幕ppi的不同而相應(yīng)地改變。了解ppi有助于我們避免錯誤。

例如，我們經(jīng)常在iOS提供的設(shè)計規(guī)范中看到44,88個數(shù)字。那么44是怎么進來的？實際上，iOS推薦的最小可點擊元素大小為44 * 44像素。 iPhone1就是一個例子。由于提出了此設(shè)計規(guī)范，Apple尚未適應(yīng)視網(wǎng)膜屏幕。 Apple在iPhone 4上開始使用視網(wǎng)膜屏幕。當時的屏幕ppi是163px。用戶可以在屏幕上點擊的物理尺寸為7mm-9mm。我們計算7毫米，一英寸有163像素，一英寸有25.4毫米。 7毫米應(yīng)該有多少像素？

一個簡單的數(shù)學轉(zhuǎn)換可以發(fā)現(xiàn)是44.92px，這就是我們常說的44px。所以44px只是相對長度，隨著屏幕ppi的變化而變化。如果你不明白這一點，你可能會死掉44px。任何分辨率屏幕都是44像素，這顯然是錯誤的。

適配誤區(qū)

適應(yīng)也是一些設(shè)計師目前頭疼的問題。有許多小細節(jié)需要我們注意。目前，該應(yīng)用程序的界面設(shè)計基本上是750次; 1334（iPhone6/7/8）的大小基于2x圖表，然后3D圖表應(yīng)用于plus和iPhone X.匹配，三重地圖適應(yīng)是我們的重點，因此設(shè)計師經(jīng)常忽略大小iphone 5。

可能有設(shè)計師感到困惑。我使用2x圖表作為基準，iPhone5也是2x。為什么我要適應(yīng)？

事實上，這是事實。 iPhone 5中的大多數(shù)組件與設(shè)計草案的大小相同。但是有一些設(shè)計元素會改變尺寸以適應(yīng)iPhone5 640及時代; 1136屏幕。這種尺寸轉(zhuǎn)換一般分為兩種：一種是比例縮放，這適用于圖片類。其次，高度恒定，水平間距減小。這適用于設(shè)計組件，例如上面的搜索框。

當然，要調(diào)整的工作量非常大，我們需要注意很多小細節(jié)，文章的長度肯定沒有完成。我對大家的建議是在iPhone5和iPhone6下播放QQ音樂，然后截取屏幕截圖進行分析和比較。這是一種非常愚蠢但也非常有效的方法，這種方法也是由一位偉大的上帝介紹給我的。事實上，您也可以將其視為“競爭產(chǎn)品分析”。當然，這里沒有競爭產(chǎn)品，但核心理念是相同的：當你不這樣做時，讓我們看看別人做了什么。

當我以前做屏幕廣告的設(shè)計時，我能夠分析幾個產(chǎn)品的開幕畫面。

然后，基于雙圖，我們必須注意組件的大小不能是單數(shù)，例如，你的按鈕高度是75px，那么到三重圖，75px放大1.5倍肯定會有一個虛擬邊。我們必須回避這種問題。

　設(shè)計風格的把控

對適應(yīng)性知識的理解也可以幫助我們控制產(chǎn)品的設(shè)計風格。例如，我們過去更喜歡產(chǎn)品主頁上的以下排版。這種排版的優(yōu)點是可以充分顯示信息，可點擊區(qū)域足夠大，并且用戶操作方便。然而，進行改編將非常困難，特別是如果iPhone X的屏幕進一步擴展，這種單屏改編將非常困難。

這種主頁設(shè)計模式將來一定會再次考慮。并非這種設(shè)計模式不好或可用性差。將來很難適應(yīng)設(shè)計。

溝通的重要性

實際上，本文主要討論設(shè)計師如何更好地適應(yīng)像素和分辨率的學習。然后我認為適應(yīng)是一項團隊工作。依靠設(shè)計師是不夠的。例如，我在上面的例子中提到主頁的布局模式很難適應(yīng)。但是界面的框架不是由UI設(shè)計者決定的。在繪制線框時，產(chǎn)品經(jīng)理或交互設(shè)計師已經(jīng)確定了整個界面的布局。因此，UI設(shè)計人員參與之前的線框和原型繪圖非常重要，因為必須從UI設(shè)計者的角度來看待一些問題。

除了與產(chǎn)品經(jīng)理溝通并與我們互動外，我們還需要與開發(fā)人員進行更多溝通。幾天前我正在按一個按鈕，當我剪切它時背景是透明的。但是，從ps導出的透明背景的gif將顯示為雜項，并且根本無法使用。后來，我問過一些朋友，大家都沒有合適的解決方案，而且AE沒有插件可以直接導出高保真gif。最后，我很絕望。這位前端同事告訴我，這個效果可以通過代碼來實現(xiàn)。那時，我很尷尬，覺得我過去花了這么多工作。 “效果將在AE中完成，導出視頻，將視頻導入PS，然后導出gif?！币虼嗽O(shè)計師必須與開發(fā)人員進行溝通，這可能會減少很多工作，同樣適合于調(diào)整。

總結(jié)

以上是我的像素，分辨率和適應(yīng)性的摘要。我希望我能在你的腦海中解決一些疑惑，并且可能會有一些錯誤的東西。歡迎更正消息。

歡迎來到作者的微信公眾號：“王M大賽”

« 瘋狂誘惑邊上的非法魅族X8被劉海平最好看的手機 | 未來的會議有多聰明？華為全面連接將在會議平板電腦 »