轉(zhuǎn)自：王M爭
不管是UI還是交互都是屬于從國外傳進(jìn)來的“舶來品”，在翻譯成中文的時(shí)候可能會(huì)出現(xiàn)一些詞不達(dá)意的錯(cuò)誤絮重。在傳播過程中冤寿，這些錯(cuò)誤可能會(huì)被進(jìn)一步的放大。我們可以在網(wǎng)上看到很多設(shè)計(jì)相關(guān)的文章或者書籍青伤，其中相同的事物在不同的地方可能會(huì)有不同的表述督怜，其中有些可能還是相互矛盾的。這就給我們設(shè)計(jì)師的工作帶來了極大的不便狠角，因?yàn)闆]有達(dá)成一個(gè)統(tǒng)一的標(biāo)準(zhǔn)号杠。其中像素和分辨率就是最典型的，可能大家已經(jīng)看過了很多篇類似的文章丰歌，但是還是搞不懂什么是像素姨蟋，什么是分辨率。那么我希望我的這篇文章可以幫你解決這個(gè)困惑立帖。
像素和分辨率的關(guān)系
我覺得很多設(shè)計(jì)師沒有搞懂分辨率和像素的原因是因?yàn)闆]有弄明白什么是英寸眼溶。我們小時(shí)候家里的電視機(jī)會(huì)說21寸大彩電，25寸大彩電晓勇，29寸大彩電等堂飞。包括手機(jī)我們也會(huì)說4.7英寸，5.0英寸等宵蕉。但是顯示屏畢竟是一個(gè)面酝静，而你用英寸來表示一個(gè)面，所以在很多人心中會(huì)把英寸誤以為是一個(gè)面積單位羡玛，也就是說把英寸看成了是平方英寸别智。
而把英寸看成是面積單位的設(shè)計(jì)師就會(huì)對分辨率產(chǎn)生完全不一樣的認(rèn)識(shí)。其實(shí)這里的英寸是指屏幕對角線的長度稼稿，英寸實(shí)際上是長度單位薄榛。
分辨率可以分為兩種讳窟，ppi和dpi。
ppi：每英寸(長度)所包含的像素點(diǎn)數(shù)目敞恋。
dpi：每英寸(長度)所包含點(diǎn)的數(shù)目丽啡。
對于dpi，我覺得只要了解就可以了硬猫，ppi才是比較重要的补箍。從上面的定義可以看出來其實(shí)dpi和ppi的區(qū)別并不大，只不過像素(px)是設(shè)計(jì)師的最小設(shè)計(jì)單位啸蜜，點(diǎn)(pt)是iOS最小的開發(fā)單位坑雅。我們?nèi)粘Ｋf的二倍圖，三倍圖就是指屏幕中一個(gè)點(diǎn)中有兩個(gè)像素或三個(gè)像素衬横。一個(gè)設(shè)備究竟要使用二倍圖還是三倍圖裹粤，只需看ppi和dpi的比值就可以了。(ps:plus中ppi/dpi=2.6蜂林，約等于3)
可能會(huì)有些設(shè)計(jì)師覺得這些知識(shí)沒有用遥诉，或者認(rèn)為這些知識(shí)是屬于前端的，跟自己沒有關(guān)系噪叙。但是掌握一些基礎(chǔ)的開發(fā)知識(shí)可以幫助我們更好的完成設(shè)計(jì)工作矮锈，接下來我就舉三個(gè)例子來說明一下。
分辨率換算
我剛才在前面也說了睁蕾，設(shè)計(jì)師對于dpi只要了解即可愕难，真正需要掌握的是ppi。那么ppi可以給我們帶來什么樣的幫助呢惫霸？因?yàn)橄袼氐奈锢沓叽绮皇墙^對的猫缭，隨著屏幕ppi的不同也會(huì)發(fā)生相應(yīng)的變化，了解ppi這個(gè)會(huì)幫助我們避免犯錯(cuò)壹店。
例如猜丹，在iOS給的設(shè)計(jì)規(guī)范中我們經(jīng)常會(huì)看到44，88這些數(shù)字硅卢。那么44是怎么來的呢射窒？其實(shí)iOS推薦的最小可點(diǎn)擊元素的尺寸是44*44 px。iPhone1為例将塑，因?yàn)檫@個(gè)設(shè)計(jì)規(guī)范提出來的時(shí)候脉顿，蘋果還沒有適應(yīng)retina屏,蘋果是在iPhone4的時(shí)候才開始采用retina屏。當(dāng)時(shí)的屏幕ppi是163px点寥。而用戶在屏幕中可點(diǎn)擊的物理尺寸是7mm-9mm艾疟。我們以7mm來算，一英寸長度里有163像素，一英寸有25.4mm蔽莱，那么7mm里應(yīng)該有多少像素呢弟疆？
簡單的數(shù)學(xué)換算一下就可以得出是44.92px，也就是我們常說的44px盗冷。所以這個(gè)44px只是相對的長度怠苔，隨著屏幕ppi的改變會(huì)改變。如果不懂不這個(gè)可能就會(huì)死抓著這個(gè)44px不變仪糖，在任何分辨率的屏幕中都是使用44px柑司，這明顯是不對的。
適配誤區(qū)
適配也是目前來說一些設(shè)計(jì)師比較頭疼的一個(gè)問題锅劝，有很多小細(xì)節(jié)需要我們?nèi)プ⒁庵难颉Ｄ壳皝碚f，我們給app做界面設(shè)計(jì)基本上都是750×1334(iPhone6/7/8)的尺寸上做鸠天，也就是以2倍圖為基準(zhǔn)，然后切3倍圖對plus和iPhone X進(jìn)行適配,三倍圖適配是我們的重點(diǎn)帐姻，所以經(jīng)常有設(shè)計(jì)師忽視對iPhone5的尺寸做適配稠集。
可能會(huì)有設(shè)計(jì)師很困惑了，我本身就是以2倍圖為基準(zhǔn)做的饥瓷，而iPhone5用的也是2倍圖剥纷，為什么我還要做適配呢？
其實(shí)有這種想法沒錯(cuò)呢铆，iPhone5中大部分組件都是和設(shè)計(jì)稿尺寸是一樣的晦鞋。但是有一些設(shè)計(jì)元素會(huì)相應(yīng)的改變尺寸來適應(yīng)iPhone5 640×1136的屏幕。這種尺寸的變換一般分為兩種：一是等比縮放棺克，這種適合的是圖片類悠垛。二是高度不變，水平間距縮小娜谊，這種適合的是設(shè)計(jì)組件确买，比如上面的搜索框。
當(dāng)然進(jìn)行適配的工作量是非常大纱皆，有很多的小細(xì)節(jié)需要我們?nèi)プ⒁馔逯海黄恼碌钠强隙ㄖv不完的。我給大家的建議就是拿一個(gè)iPhone5和iPhone6下QQ音樂派草，然后截圖去分析比較搀缠。這是一個(gè)很笨但是也很見效的方法，這個(gè)方法也是一個(gè)大神介紹給我的近迁。其實(shí)這個(gè)你也可以看成是"競品分析"艺普，當(dāng)然這里沒有競品，但是核心理念都是一樣的：不會(huì)做的時(shí)候，去看看別人怎么做的衷敌。
之前做開屏廣告設(shè)計(jì)規(guī)范的時(shí)候勿侯，我就是截了好幾個(gè)的產(chǎn)品的開屏圖進(jìn)行分析做出來的。
ps:那么在二倍圖的基礎(chǔ)上做圖缴罗，我們一定要注意組件的尺寸不能是單數(shù)助琐，比如你的按鈕高度是75px，那么到三倍圖里面氓，75px放大1.5倍肯定會(huì)出現(xiàn)虛邊兵钮。這種問題我們要去規(guī)避。
設(shè)計(jì)風(fēng)格的把控
對于適配知識(shí)的了解還可以幫助我們?nèi)グ芽禺a(chǎn)品的設(shè)計(jì)風(fēng)格舌界。例如掘譬，我們之前在產(chǎn)品首頁會(huì)傾向于下面的這種排版。這種排版的好處是信息可以充足的展示呻拌，可點(diǎn)擊區(qū)域夠大葱轩，用戶操作方便。但是在做適配的時(shí)候就會(huì)很困難藐握，特別是iPhone X出來屏幕的進(jìn)一步拉長靴拱，這種單屏適配就會(huì)很困難。
這種首頁的設(shè)計(jì)模式我在以后采用的時(shí)候肯定會(huì)考慮再三猾普，不是說這種設(shè)計(jì)模式不好看或者說是可用性差袜炕，只是將來做設(shè)配的適配會(huì)很困難。
溝通的重要性
其實(shí)這篇文章主要說的是設(shè)計(jì)師如何通過對像素和分辨率的學(xué)習(xí)來更好的完成適配初家，那么我覺得適配是一個(gè)團(tuán)隊(duì)工作偎窘，光靠設(shè)計(jì)師是不夠。例如我在上面的例子說到那種首頁的布局模式很難進(jìn)行適配溜在。但是界面的框架不是由UI設(shè)計(jì)師來決定的陌知，產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師在繪制線框圖的時(shí)候已經(jīng)確定了整個(gè)界面的排版布局。所以說掖肋，讓UI設(shè)計(jì)師來參與到前期線框圖和原型圖的繪制是非常的重要纵诞，因?yàn)橛行﹩栴}是必須站在UI設(shè)計(jì)師的角度來可以看出來的。
除了跟產(chǎn)品經(jīng)理和交互溝通培遵，我們還要和開發(fā)多溝通浙芙。前幾天我在給一個(gè)按鈕做動(dòng)效，切圖的時(shí)候要求背景透明籽腕。但是從ps中導(dǎo)出的透明背景的gif會(huì)出現(xiàn)雜邊嗡呼，根本不能用。后來問了一些朋友皇耗，大家都沒有合適的解決方案南窗，AE中也沒有比較好用的可以直接導(dǎo)出高保真gif的插件。最后我都絕望了，前端同事跟我說其實(shí)這個(gè)效果可以用代碼來實(shí)現(xiàn)万伤。當(dāng)時(shí)我就懵了窒悔，感到自己之前那么多工作都白費(fèi)了(AE中做動(dòng)效，導(dǎo)出視頻敌买，把視頻導(dǎo)入PS简珠，再導(dǎo)出gif)。所以說設(shè)計(jì)師一定要跟開發(fā)多溝通虹钮，這樣可能會(huì)減少很多工作量聋庵，對于適配也是一樣。
總結(jié)
以上就是我對像素芙粱，分辨率和適配做的一個(gè)總結(jié)祭玉。希望可以解決你們心中的一些疑惑，其中可能會(huì)有不對的地方春畔，歡迎留言糾正脱货。
