用戶界面和互動(dòng)都是從國外進(jìn)口的，翻譯成中文時(shí)可能會(huì)有一些不盡如人意的錯(cuò)誤。在傳播過程中可以進(jìn)一步放大這些誤差。我們可以在互聯(lián)網(wǎng)上看到很多與設(shè)計(jì)相關(guān)的文章或書籍，在不同的地方，相同的東西可能會(huì)有所不同，其中一些可能仍然是矛盾的。這給我們的設(shè)計(jì)師帶來了極大的不便，因?yàn)樗麄儧]有達(dá)到統(tǒng)一的標(biāo)準(zhǔn)。其中，像素和分辨率是最典型的。您可能已經(jīng)看過許多類似的文章，但您仍然不明白什么是像素，分辨率是多少。然后我希望我的文章可以幫助你解決這個(gè)困惑。

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

我認(rèn)為許多設(shè)計(jì)師不理解分辨率和像素的原因是因?yàn)樗麄儾焕斫庥⒋缡嵌嗌?。?dāng)我們年輕的時(shí)候，家里的電視機(jī)會(huì)說21英寸大彩電，25英寸大彩電，29英寸大彩電等。包括手機(jī)在內(nèi)，我們還會(huì)說4. 7英寸，5.0英寸等等。但是顯示器畢竟是一張臉，而你使用英寸代表一張臉，所以在很多人的腦海中都會(huì)把英寸誤認(rèn)為是一個(gè)區(qū)域單位，也就是說英寸是平方英寸。

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

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

Ppi：每英寸像素?cái)?shù)（長(zhǎng)度）。

Dpi：每英寸（長(zhǎng)度）包含的點(diǎn)數(shù)。

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

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

　分辨率換算

我也在前面說過，設(shè)計(jì)師只能理解dpi，真正需要掌握的是ppi。那么ppi給我們帶來了什么樣的幫助呢？因?yàn)橄袼氐奈锢沓叽绮皇墙^對(duì)的，所以它會(huì)隨著屏幕ppi的不同而相應(yīng)地改變。了解ppi有助于我們避免錯(cuò)誤。

例如，我們經(jīng)常在iOS給出的設(shè)計(jì)規(guī)范中看到44,88這些數(shù)字。那么44是怎么進(jìn)來的？實(shí)際上，iOS推薦的最小可點(diǎn)擊元素大小為44 * 44像素。例如，iPhone1，因?yàn)檫@個(gè)設(shè)計(jì)規(guī)范出現(xiàn)了，Apple還沒有適應(yīng)視網(wǎng)膜屏幕。蘋果在iPhone4上開始使用視網(wǎng)膜屏幕。當(dāng)時(shí)的屏幕ppi是163px。用戶可以在屏幕上點(diǎn)擊的物理尺寸為7mm-9mm。我們計(jì)算7毫米，一英寸有163像素，一英寸有25.4毫米。 7毫米應(yīng)該有多少像素？

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

　　適配誤區(qū)

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

可能有設(shè)計(jì)師感到困惑。我是在2x圖表的基礎(chǔ)上做的，iPhone5也使用2x地圖。為什么我必須適應(yīng)它？

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

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

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

ps:所以在雙圖的基礎(chǔ)上，一定要注意組件的大小不能單一，例如，你的按鍵高度是75px，那么到三重圖，75px放大倍數(shù)1. 5倍肯定會(huì)出現(xiàn)虛邊。我們必須回避這種問題。

　設(shè)計(jì)風(fēng)格的把控

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

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

　溝通的重要性

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

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

　總結(jié)

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

« 嘆！ “白白河暴露在賽道上”第一波熱點(diǎn)有很多角度 | P2P的可投資性是什么？閩云財(cái)富，愛金錢，銅街，你我貸款 »