中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本指南出自設(shè)計(jì)師之友 @盧七田（http://weibo.com/ohyeschelsea） 如果你有像素的問題，歡迎來找我討論，如果你有設(shè)計(jì)方面的其他問題，我表示對(duì)我的言論不太負(fù)責(zé)。

像素, PIXEL，多少設(shè)計(jì)師最熟悉的陌生人。

先科普，PIX+EL，Picture Element，赤果果的告訴了我們像素即是圖像元素，是構(gòu)成位圖的最小單位，可以簡單理解為圖片所包含的“細(xì)節(jié)”數(shù)量。我們必須形成一個(gè)清晰的概念：像素是電子圖片大小的唯一衡量標(biāo)準(zhǔn)。

然而像素并沒有確定的物理尺寸，它僅僅代表著一個(gè)“著色點(diǎn)”。另一個(gè)緊密相關(guān)但又常被誤用的概念，分辨率，則和像素一起決定圖片的物理尺寸，稍后我們會(huì)具體談到。像素這個(gè)在digital design里面最為基礎(chǔ)和核心的元素在各種問答和論壇被各種以訛傳訛，誤導(dǎo)了一代代的設(shè)計(jì)師。

在這次我們搜集iOS APP設(shè)計(jì)規(guī)范的過程中，我突然對(duì)像素這個(gè)自以為很熟的東西產(chǎn)生了強(qiáng)烈的不確定感。于是我無情的問了自己，我真的知道像素是什么嗎？我真的知道分辨率是什么嗎？我知道每次機(jī)械化輸入的這些數(shù)字代表什么嗎？我知道哪些設(shè)定才真的影響一個(gè)文檔的大小嗎？

我似乎知道又似乎什么都不知道。所以我用了三天，搜遍了大美利堅(jiān)的論壇博客，在我的屏幕上量來量去，終于覺得有人提壺灌了我的頂。所以，親愛的設(shè)計(jì)師們，不要再百度那些不負(fù)責(zé)任復(fù)制粘貼的回答了，請(qǐng)跟隨本設(shè)計(jì)師之友一起去認(rèn)識(shí)你們最好的朋友，最大的敵人，像素。這篇指南分為三個(gè)部分，PHOTOSHOP篇，UI設(shè)計(jì)篇，硬件篇。

PHOTOSHOP篇
萬能神器 萬惡之源

從photoshop開始是因?yàn)樗呛芏嘣O(shè)計(jì)的起點(diǎn)和問題的集大成者，和后面的設(shè)計(jì)篇和硬件篇有很多共通，也是疑問最多的領(lǐng)域。如果覺得photoshop里邊的東西太密，可以先放一放，看完了后面的篇幅也許有些概念會(huì)更加明朗。
分辨率的概念是一個(gè)關(guān)鍵，參透分辨率可以幫助我們理解很多相關(guān)概念，杯具的是分辨率這個(gè)詞在不同的情況下有各種模糊不清的含義（和錯(cuò)誤的常識(shí)），我覺得這是造成很多人抓狂的原因。分辨率的基本概念是某一方向或單位距離所包含的像素?cái)?shù)量，所以它的實(shí)質(zhì)是像素密度，最常見的單位是Pixel per Inch，PPI，例如下圖籃框中我們?cè)O(shè)定的圖片打印分辨率。我們通常說的顯示器的分辨率，例如1280×800，描述的是屏幕橫豎兩個(gè)方向各包含的像素總數(shù)，然而這“橫豎兩個(gè)方向”的具體尺寸，在這里卻并沒有被考慮在內(nèi)，例如13英寸的屏幕和15英寸的屏幕，如果都顯示1280×800個(gè)像素，那么在15英寸的屏幕上，每一像素所占的屏幕尺寸一定是比較大的，那么這兩個(gè)屏幕的像素密度其實(shí)是不一樣的。

PHOTOSHOP的大體法則是網(wǎng)頁與電子設(shè)備用圖永遠(yuǎn)只用考慮圖像所包含的總像素?cái)?shù)，pixel dimension（上圖綠框），需要交付印刷的文檔則需要考慮文件輸出尺寸（上圖籃框）。

我們先看幾個(gè)photoshop中常被問到關(guān)于像素的具體問題

#1 photoshop中按“實(shí)際像素”和“打印尺寸”顯示，最終在屏幕上得到的物理尺寸分別受到哪些因素的影響？

上面列表中“PS默認(rèn)屏幕像素密度”就是下面截圖中的Screen Resolution（ps>preference>units&rulers），是photoshop“認(rèn)為的”你屏幕每英寸所含的像素，這個(gè)數(shù)字的默認(rèn)值是72ppi，然而現(xiàn)實(shí)中的屏幕實(shí)際像素密度參差不齊，大多介于90~120 ppi之間。photoshop默認(rèn)72ppi的原因有很多，從實(shí)際操作角度來說，屏幕的實(shí)際ppi沒有一個(gè)標(biāo)準(zhǔn)，每個(gè)品牌或者不同成像技術(shù)屏幕的ppi都不盡相同；另一方面，我們之前提到用于web圖片的ppi并沒有實(shí)質(zhì)影響，在web設(shè)計(jì)中一直遵循72ppi的行業(yè)標(biāo)準(zhǔn)實(shí)際是基于字體的考慮，稍后我們會(huì)更詳細(xì)的講到。

#2 為什么PHOTOSHOP中按“打印尺寸顯示”在屏幕上得到的大小并不是實(shí)際大??？

這是一個(gè)困擾了很多人的問題，主要影響的是需要交付印刷的文檔設(shè)計(jì)，很多人都發(fā)現(xiàn)屏幕上顯示的“打印尺寸”通常都比實(shí)際打印出來的小一些。如果你能很好的理解上邊我們第一個(gè)問題的討論，可能你已經(jīng)知道這是為什么了。下邊我們來一步步的看一下。當(dāng)你告訴photoshop按照打印尺寸顯示時(shí)，photoshop會(huì)盡量準(zhǔn)確的把打印出來的一英寸“還原”成你屏幕上的一英寸；然而電腦或者任何電子設(shè)備在顯示圖片時(shí)只有一個(gè)依據(jù)的標(biāo)準(zhǔn)：像素?cái)?shù)。所以photoshop在這個(gè)還原的過程中實(shí)際上先做了什么呢？它必須把你文檔的物理尺寸“翻譯”成一個(gè)像素量，而在上邊截圖中我們看到了，photoshop對(duì)所有屏幕的默認(rèn)像素密度都是72ppi，所以photoshop會(huì)把一個(gè)1in x 1in的文檔翻譯成72px x 72px。接下來我們的顯示屏?xí)鶕?jù)它自己的實(shí)際像素密度（例如我的MBP 13‘’經(jīng)我實(shí)際測(cè)算是113ppi，計(jì)算過程稍后講解）來顯示這個(gè)72px x 72px的文檔，所以實(shí)際上它在我的屏幕上顯示出來會(huì)是多大呢？它的長寬會(huì)是72/113in?，F(xiàn)在主流屏幕的實(shí)際像素密度都大于72ppi，通常介于90~120之間，這就是為什么我們?cè)谄聊簧系玫降拇蛴〕叽缤ǔＰ∮趯?shí)際打印大小。
如果我們想要盡量準(zhǔn)確的顯示圖片的真實(shí)打印尺寸，我們只需要把photoshop里默認(rèn)的72ppi的屏幕密度改為我們屏幕的實(shí)際像素密度就行了。這里用我自己的屏幕說明怎么計(jì)算屏幕的實(shí)際像素密度，我屏幕的橫向總像素為1280px，這個(gè)數(shù)字在顯示屏設(shè)置里可以看到，也有很多網(wǎng)站可以查到，用這個(gè)除以我屏幕的橫向?qū)挾?1.33in，這個(gè)你自己量了再換算成英寸，所以我屏幕的實(shí)際像素密度是1280px/11.33in≈113ppi。接下來你只要在ps>preference >units& rulers里，把上面截圖中橙色框中的數(shù)值設(shè)置成你的實(shí)際像素密度就可以了。

UI設(shè)計(jì)篇
著小處 觀大局

UI本身是一個(gè)過于龐大的話題，在這里我們只討論這其中和像素有關(guān)的問題。因?yàn)镻HOTOSHOP是UI設(shè)計(jì)過程中的必備工具，我們之前講到的很多東西都是通用的，在這里我們只是更集中的梳理一下界面設(shè)計(jì)中有關(guān)像素的一些概念。

#1 固定像素 VS. 自適應(yīng)寬度
從事UI設(shè)計(jì)方面的童鞋，看完上面關(guān)于像素一些基本概念有沒有更能理解，不同分辨率的顯示器所能“容納”的像素不一樣這句話？只是相同的像素?cái)?shù)在不同顯示器上占據(jù)的物理尺寸可能不盡相同，這個(gè)要根據(jù)具體屏幕的像素密度決定。目前主流的設(shè)計(jì)方法仍然是固定像素，就算我們根據(jù)屏幕寬度做判斷來顯示不同版本的網(wǎng)頁，我們也只是設(shè)計(jì)了幾個(gè)不同版本的固定像素。自適應(yīng)寬度（responsive web design）的最大原則則是網(wǎng)頁上所有元素都沒有固定的像素尺寸，而是把屏幕總寬度設(shè)為100%，其他元素的尺寸則以百分比設(shè)置。

#2 關(guān)于72ppi這個(gè)默認(rèn)值的傳說
你可能在很多地方看過這句話：web用圖片只用設(shè)置像素，分辨率不用改變，留成默認(rèn)的72ppi就可以，設(shè)置高了也沒有用，因?yàn)闉g覽器只能讀取72ppi的圖片。這句話的前半部分是對(duì)的，但是后半部分給出的理由是錯(cuò)誤的。Web用圖確實(shí)只用設(shè)置死像素值就可以了，因?yàn)闉g覽器只會(huì)讀取這個(gè)數(shù)值。既然是只會(huì)讀取像素值，那又是哪里來的瀏覽器只能讀取72ppi圖片的概念？這里的72ppi其實(shí)是基于字體的考慮。Photoshop對(duì)字體的單位默認(rèn)是磅，pt，不同于像素，磅是有物理尺寸的，1pt=1/72in。當(dāng)我們?cè)O(shè)置ppi為72時(shí)，1px剛好也等于1/72in，所以這時(shí)候的1pt=1px。由于在網(wǎng)頁的實(shí)現(xiàn)中，我們最終需要把字體的單位換算成px，這個(gè)默認(rèn)的72ppi設(shè)置就免去了我們?cè)谶@里再換算的麻煩。最后提一個(gè)更加通用的方法，當(dāng)我們把文檔的分辨率設(shè)為默認(rèn)的72ppi時(shí)，1pt是跟1px對(duì)應(yīng)的，但如果我們因?yàn)槿魏卧蛐枰盐臋nppi設(shè)為72以外的數(shù)值，為了省去換算的麻煩，我們可以在ps>preference>units&rulers中把type的單位改為pixels，如下面截圖中所示。

#3 關(guān)于iOS APP尺寸設(shè)置的基礎(chǔ)
這里順便提一下iOS APP的界面設(shè)置和一些UI設(shè)計(jì)師向程序員交付文檔時(shí)所需要知道的常識(shí)，以保證交接的和諧平順以及不返工，你懂的。iPhone在出retina屏（也就是4S）之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5我們這里暫時(shí)不討論，因?yàn)?的ppi沒有變化，兼容要做的只是類似增加首屏畫面和程序上的判斷。對(duì)iOS開發(fā)稍微熟悉的朋友都知道iPhone界面上元素的定位都是通過一個(gè)固定的單位point，而非px，屏幕上固定有320x480pt，retina屏兩倍的分辨率改變的只是pt和px之間的比例而已，這樣就能實(shí)現(xiàn)不改變程序，只上傳兩套圖片就兼容兩個(gè)分辨率。iOS APP設(shè)計(jì)圖的設(shè)置為640x960px，72ppi，RGB，在UI設(shè)計(jì)師把設(shè)計(jì)圖交給程序員時(shí)，最好在設(shè)計(jì)圖上進(jìn)行以下內(nèi)容的標(biāo)注：字體大?。ㄒ韵袼貫閱挝唬?，文字圖標(biāo)等元素的像素位置，選中和展開的狀態(tài)和位置。切圖方面我推薦一個(gè)美國設(shè)計(jì)師做的action插件（百度superslicr），這個(gè)插件可以讓你一次性導(dǎo)出供兩個(gè)分辨率使用的圖片。在圖片命名方面，建議使用“簡短描述、用途+像素”，在高清后加@2x后綴，例如“首屏按鈕240_100@2x.png”。還有一個(gè)細(xì)節(jié)問題是如何在屏幕上精確的得到iPhone的實(shí)際大??？如果你思路足夠清晰的話可以這樣做：按照前邊的設(shè)置，把ps中屏幕的ppi設(shè)為你屏幕的實(shí)際ppi，把字體的單位換成px，在image size中把設(shè)計(jì)圖的分辨率改為和iPhone一樣，326ppi，這時(shí)候如果我們按打印尺寸查看就能得到同iPhone屏幕一樣的尺寸了。當(dāng)然由于我們屏幕的分辨率一定沒有iPhone高，這時(shí)候圖片是被縮小了，最好的方法還是把圖片傳到手機(jī)上查看。

硬件篇
肉眼之界 科技之致

前邊我們已經(jīng)零散的帶到了很多關(guān)于屏幕分辨率的概念，這里我只想單獨(dú)把一個(gè)問題提出來強(qiáng)調(diào)一下：一塊屏幕的物理尺寸是固定的，它的成像技術(shù)也在物理上決定了屏幕所能顯示的像素值，但我們通常所說的例如1280x800px的屏幕分辨率，其實(shí)是這個(gè)屏幕所能顯示像素的極致。這里我以新的MacBook Pro 15’’ retina的屏幕為例，它在一塊對(duì)角線15英寸的屏幕內(nèi)，可以最多顯示2880x1800px，屏幕密度達(dá)到了220ppi，以電腦屏幕和我們眼睛的距離來說，這樣的精度已經(jīng)超過了我們?nèi)庋劭梢员孀R(shí)的最小顆粒。但是由于缺少第三方應(yīng)用（和廣大網(wǎng)頁）的支持，如果我們真的以它的極限來顯示（目前蘋果并不直接支持以最大像素顯示，但是可以依靠其他應(yīng)用實(shí)現(xiàn)），那我們看到的內(nèi)容都會(huì)變得非常小，不利于閱讀，所以目前retina屏幕的MBP 15‘’系統(tǒng)把默認(rèn)分辨率設(shè)為了它極限的一半，1440x900px，我們可以”嘲笑“用retina的人，因?yàn)樗麄儾]有真正享受到retina的震撼（除去幾個(gè)蘋果原生應(yīng)用），但不可否認(rèn)的是蘋果的硬件又一次走在了一切之前，等待我們?nèi)プ汾s。

總結(jié)篇：一個(gè)公式
玄之又玄 眾妙之門

物理尺寸 * 分辨率 = 像素?cái)?shù)
Physical size * Resolution = Pixel Dimensions

這個(gè)看起來弱智的公式其實(shí)道明了一切，只要我們正確把握不同情況下每個(gè)名詞的意義。這個(gè)公式說明了物理尺寸，分辨率，和總像素三個(gè)變量之間的關(guān)系，這個(gè)關(guān)系適用于圖片以及各種設(shè)備上的虛擬或?qū)嶋H像素，只是在不同情況下，我們需要控制的變量不同，我們要做的只是真正控制好那個(gè)需要控制的變量。

最后，感謝作者投稿！