像素,解析度和適配

2021-02-13 UI設計達人

轉自：王M爭（ID：Wang-Michael-Zheng）

不管是UI還是交互都是屬於從國外傳進來的「舶來品」，在翻譯成中文的時候可能會出現一些詞不達意的錯誤。在傳播過程中，這些錯誤可能會被進一步的放大。

我們可以在網上看到很多設計相關的文章或者書籍，其中相同的事物在不同的地方可能會有不同的表述，其中有些可能還是相互矛盾的。這就給我們設計師的工作帶來了極大的不便，因為沒有達成一個統一的標準。其中像素和解析度就是最典型的，可能大家已經看過了很多篇類似的文章，但是還是搞不懂什麼是像素，什麼是解析度。那麼我希望我的這篇文章可以幫你解決這個困惑。

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

而把英寸看成是面積單位的設計師就會對解析度產生完全不一樣的認識。其實這裡的英寸是指屏幕對角線的長度，英寸實際上是長度單位。

解析度可以分為兩種，ppi和dpi。

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

dpi：每英寸(長度)所包含點的數目。

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

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

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

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

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

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

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

其實有這種想法沒錯，iPhone5中大部分組件都是和設計稿尺寸是一樣的。但是有一些設計元素會相應的改變尺寸來適應iPhone5 640×1136的屏幕。這種尺寸的變換一般分為兩種：一是等比縮放，這種適合的是圖片類。二是高度不變，水平間距縮小，這種適合的是設計組件，比如上面的搜索框。

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

之前做開屏廣告設計規範的時候，我就是截了好幾個的產品的開屏圖進行分析做出來的。

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

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

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

溝通的重要性

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

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

 

以上就是我對像素，解析度和適配做的一個總結。希望可以解決你們心中的一些疑惑，其中可能會有不對的地方，歡迎留言糾正。

關注『UI設計達人』

看更多精選UI設計文章

↓↓↓

相關焦點

  • Android解析度適配寶典
    根據上一期調查結果顯示，大多數朋友希望分享關於移動端相關的教材，那麼今天就和大家說說移動端Android的解析度適配問題。        有多少射雞師在設計APP時遇到適配問題被逼瘋了，下面就給你一個再也不瘋的理由。
  • Creator | 解析度適配
    場景中的 Canvas 同時只能有一個，建議所有 UI 和可渲染元素都設置為 Canvas 的子節點。：適配高度（設計解析度的高度自動撐滿屏幕高度）Fit Width：適配寬度（設計解析度的寬度自動撐滿屏幕寬度）Canvas 在做屏幕適配時，只會對整個遊戲的畫面進行縮放，並不會修改所在節點的尺寸，節點尺寸將默認跟設計解析度保持一致理想狀態下，遊戲設計解析度的寬高比和屏幕解析度的寬高比相同
  • 像素&解析度
    像素：  像素是組成圖象的最基本單元要素：點。解析度是指在長和寬的兩個方向上各擁有的像素個數。一個像素有多大呢？
  • 移動端適配(一)設備獨立像素1px問題,前端需要知道
    如果點很小，那畫面就清晰，我們稱它為「解析度高」，反之，就是「解析度低」。所以，像素的大小是會「變」的。em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。rem是CSS3新增的一個相對單位。這個單位與em有什麼區別呢？
  • 像素與解析度,位圖與矢量圖
    01像素與解析度1. 像素定義：圖像中的最小顏色單位，是一個非常小的方形顏色塊。像素（Pixel）一般用px表示，每個像素只能有一個顏色。屏幕解析度的單位叫像素每英寸ppi（Pixels Per Inch）。屏幕解析度一般用「屏幕每行的像素點數×每列的像素點數」表示。比如：屏幕解析度是1366×768，就是說該屏幕的水平方向上有1366個像素點，垂直方向上有768個像素點。
  • 解析度與像素之間的那些事
    解析度和像素之間的關係，很多人還是弄不清楚的，今天我們就來看看他們是怎麼換算的。
  • 列印A4紙圖片需要多少像素和解析度?
    我們如果要設計雜誌用的圖片，A4大小的需要多少像素大小和解析度呢？一般來說，給銅版紙使用的300dpi就夠用了，太小列印出來不一定清晰，太大的話耗費內存和CPU處理起來十分慢，所以300dpi是一個很好的分界線。
  • 像素和解析度到底是什麼?它們之間的關係是什麼?| 手機相機的像素越高越好嗎?
    實際上馬賽克就是利用看起來與像素相似的視覺效果來把精細圖像給像素化模糊處理的一種手段。百度百科對於「解析度」的定義：解析度，又稱解析度、解析度，可以細分為顯示解析度、圖像解析度、列印解析度和掃描解析度等。對於手機來說我們接觸更多的是前兩種解析度。
  • 解析度與像素你應該知道的!印刷品解析度PS應該怎麼設置?
    那麼，解析度和像素，到底咋回事？今天咱們來掰一掰：1、像素像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。而不是原詞條中說圖像由一個個點組成，這個點叫做像素。2、解析度又稱解析度、解析度，可以細分為顯示解析度、圖像解析度、列印解析度和掃描解析度等。
  • 手機的解析度和像素密度,你該懂的知識
    像素，中文全稱為圖像元素。本文引用地址：http://www.eepw.com.cn/article/202002/409904.htm像素是構成數碼影像的基本單元，通常以像素每英寸PPI（pixels per inch）為單位來表示影像解析度的大小。每英寸（2.54cm）的像素數稱為像素密度。像素密度越大，顯示畫面細節就越豐富。
  • Photoshop:什麼是像素、解析度,點陣及矢量圖象?
    但在保存時，需要記錄每一個像素的位置和顏色值，因此，位圖佔用的存儲空間往往比較大。如下第一張圖就是一個典型的點陣圖。把這幅圖片調入Photoshop，使用【圖像大小】就可以看到如下第二張圖的信息。注意窗口上部像素大小的寬度和高度，分別是557像素和419像素。
  • 關於移動端適配,你必須要知道的
    在解決這些問題的過程中，我們往往會遇到非常多的概念：像素、解析度、 PPI、 DPI、 DP、 DIP、 DPR、視口等等，你真的能分清這些概念的意義嗎？本文將從移動端適配的基礎概念出發，探究移動端適配各種問題的解決方案和實現原理。一、英寸一般用英寸描述屏幕的物理大小，如電腦顯示器的 17、 22，手機顯示器的 4.8、 5.7等使用的單位都是英寸。
  • 像素無用?關於CMOS解析度上限的探討
    但對方表達的更深一層意思是：CMOS解析度的上限到底有多高？有沒有可能我們隨手一拍，放大放大再放大就看得清細菌（0.5~5微米）級的物體？理想成像系統是用1個像素對應1個細菌，假設細菌是1微米=0.001毫米，全畫幅36mm X 24mm，也就是8.64億像素。
  • Android屏幕適配之dp(最直觀的解讀)
    Android屏幕適配由來已久，關鍵在於屏幕尺寸與屏幕解析度的變化巨大。在成千上百種機型面前，px單位已難以適應。1.同樣尺寸，不同解析度：1080px的寬度上顯示100px 比例是100/1080720px的寬度上顯示100px 比例是100/7202.同解析度，不同尺寸：1080px在4.7寸上顯示100px 1080px在6.1寸上顯示100px如果使用多套px文件方案來適配，市面上少說上百種寸，需要的文件太多了。
  • 【移動適配】移動Web怎麼做屏幕適配(一)
    我們討論的是網頁適配多種尺寸屏幕，讓網頁效果看起來和設計師的設計稿一樣。
  • 網際網路小白也能看懂的APP適配及基礎概念
    由於內容過長，將分為兩篇文章，此篇主要介紹為APP適配及基礎概念。上篇見👇網際網路小白也能看懂的APP構成及基礎規範，與dpi無關，1dp表示在屏幕像素密度為160ppi時1px的長度；（補充了解：sp：scale-independent pixel，安卓開發字體大小單位）3.硬體系統相關概念ppi：pixel per inch，像素密度，圖像採樣率（在圖像中，每英寸所包含的像素數），一般網頁的像素密度就是72px，ppi的數值越高，畫面會越細膩；dpi：dots
  • 詳解px,dp,pt,sp,ppi,dpi及屏幕適配
    本文結構如下：px：像素，構成圖片的最小單位，也是設計的最小單位；像素沒有固定的物理長度，例如iPhone3和iphone4的物理尺寸完全一樣，但是iPhone3的解析度為480*320px，而iphone4的解析度為
  • 相機像素尺寸和成像系統解析度之間,有什麼關係?
    即在傳統寬場螢光下，光學系統的極限解析度 d = 0.6λ/NA，波長越短，NA值越大，解析度越高（可以理解為對空間高頻信號的保留越充分）。 說完了光學系統的解析度之後我們來看看相機的圖像解析度。圖像解析度比較好理解，就是單位距離內的像用多少個像素來顯示。
  • 那些值得你去細細研究的Drawable適配(上)
    王月半子的博客地址：http://blog.csdn.net/wrg_20100512Android適配的問題太多，有屏幕尺寸的適配、屏幕解析度的適配以及不同系統版本的適配。反映在代碼上，就是需要在資源文件上下功夫，主要是layout和drawable目錄下的文件，這裡主要研究一下drawable的適配。首先我們先熟悉一下基本的概念。
  • SCI 投稿中像素、DPI、圖片解析度的一些知識
    像素、解析度、dpi、ppi 這些都是什麼鬼？下面，我們來聊一下這些容易混淆的概念，順便講點圖像大小和印刷輸出的一些基本知識。1. 關於像素像素是圖像顯示的基本單位，它可以表示圖形尺寸的大小。像素主要是相對位圖而言的，無論其格式是哪種，只要是位圖如果不停放大，最終你都會看到圖片實際上都是以一個個的彩色方塊相互堆疊而成，這樣的一個彩色方塊就是一個像素，英文名為 Pixel，簡寫為 PX。2. 關於解析度和 DPI提起解析度，我們需要了解兩個概念，圖像解析度和輸出解析度。圖像解析度的基本計量單位是每英寸的像素數，簡寫為 ppi。