APP設計規範

時間 2019-11-11

原文原文鏈接

設計師DPI指南

本指南旨在爲初級到中級設計人員提供「入門」或介紹性閱讀，他們但願從一開始就學習或得到有關跨DPI和跨平臺設計的更多知識。

儘量少的數學和沒有不可解析的圖形，只需在簡短的部分中訂購直接的解釋，以便您理解並直接應用於您的設計過程。html

什麼是DPI和PPI

每英寸DPI或點數是最初用於打印的空間點密度的度量。這是打印機能夠放入一英寸的墨滴數量。每英寸點數越多，圖像越清晰。android

該概念應用於名爲PPI for Pixels Per Inch的計算機屏幕。相同原則：它計算屏幕每英寸顯示的像素數。名稱DPI也用於屏幕。ios

對於具體且相關的示例，Windows計算機的初始PPI爲96.Mac使用72.這些值是肯定的，由於他們當時正在構建的屏幕在他們建立的配置中顯示爲72「點」或每英寸像素。這些值能夠追溯到80年代，如今是Windows，Mac，或者任何設備製造商都會建立各類各樣的PPI屏幕。web

分辨率，像素和物理尺寸

詢問某人像素的大小是一個混淆他或她的好方法，由於這是一個技巧問題。像素沒有大小，沒有物理值或其數學表示以外的含義。它是物理屏幕尺寸（以英寸表示），屏幕分辨率（以像素爲單位表示）和像素屏幕尺寸（以像素表示）之間關係的一部分。盡心盡力，它看起來像這樣：編程

下面是一個應用示例：Mac Cinema Display 27「的PPI爲109，這意味着它顯示每英寸屏幕109像素。斜角寬度爲25.7英寸。實際屏幕的寬度約爲23.5英寸，所以若是咱們將這些值應用於上述公式，咱們就能夠理解它們如何協同工做。windows

正如您在個人解釋中可能已經注意到的那樣，「分辨率」表明PPI，在這種狀況下爲「109」而不是「2560x1440」，就像您可能在網絡上隨處可見。android-studio

「2560x1440」是像素數，在第一段中稱爲「像素屏幕尺寸」。
Pixel屏幕尺寸自己並不能提供有關屏幕銳度的任何信息。您可使用1920 * 1080px或5英寸手機制做40英寸電視機。瞭解其分辨率的惟一方法是將像素計數與設備物理尺寸配對，而且該測量值是PPI。瀏覽器

外賣：
像素自己沒有尺寸或物理表現，它只能經過與屏幕物理尺寸的關係來攜帶價值，創造分辨率或PPI。瞭解這一點，屏幕密度對你來講毫無祕密。安全

對您的設計的影響

假設您在咱們剛剛談到的屏幕上設計了一個109 * 109px的藍色方塊，其分辨率爲109PPI，屏幕像素大小爲2560x1440，物理寬度爲23.5「。因爲其大小與監視器顯示的每英寸像素數徹底匹配，所以正方形的寬度爲1「，高度爲1」。網絡

如今使用相同的23.5英寸屏幕，分辨率減少33％，72PPI。在這種狀況下，相同的藍色方塊將大33％，由於顯示在相同的物理尺寸上。

外賣不考慮
顏色和分辨率差別，請記住，每一個人都會看到你的設計略有不一樣。您應該瞄準最佳折衷方案並達到最大比例的用戶。不要認爲用戶的屏幕與您的屏幕類似和/或同樣好。

屏幕像素大小（和「最佳」分辨率）

屏幕分辨率會對用戶如何看待您的設計產生巨大影響。

「屏幕像素大小」，在任何地方一般也稱爲「分辨率」（PPI稱爲像素密度），是在屏幕上水平和垂直顯示的像素數。例如，用於電影院顯示器27的2560 * 1440px構成其「屏幕像素大小」。2560是寬度，1440是高度。正如咱們以前看到的，這不是屏幕尺寸的度量單位。那麼讓咱們看看物理顯示器如何使用這些數字。

今天的液晶顯示器具備預約義的默認或「最佳」分辨率。「最佳」分辨率是像素物理顯示的數量與軟件一對一繪製的像素數匹配的狀態。它與舊的CRT顯示器略有不一樣，但因爲這些能夠被認爲是死的，因此咱們不要進入細節（而不是透露我對舊電視的惟一部分理解）。

讓咱們的27英寸電影顯示器可以以2560 * 1440px的最佳像素屏幕尺寸顯示109 PPI。若是減小它，元素將顯得更大。畢竟你將有23.5英寸水平以填充幾乎更少的像素。

我其實是由於在這種狀況下它會是。屏幕的最佳像素屏幕尺寸爲2560 * 1440px。若是它降低，像素仍然在這裏，顯示在109PPI。你的操做系統將填補「差距」的做用是伸展一切。您的GPU / CPU將採用每一個像素並使用新比率計算它們。

若是你但願27英寸的像素數爲1280 * 720（寬度的一半，高度的一半），那麼你的GPU必須模擬一個兩倍大的像素來填充屏幕。結果如何是嗎？好吧，模糊。雖然一半的比例由於簡單的分頻器看起來還算不錯，但若是要求1/3或3/4的比例，那麼你最終會獲得十進制數，你就不能劃分一個像素見下面的例子。

考慮下面的另外一個例子。在最佳分辨率屏幕上拍攝1px線。如今應用的像素數量減小了150％。要填充屏幕，CPU必須生成150％的視覺效果，將全部內容乘以1.5。1 * 1.5 = 1.5，但你不能有半像素。會發生的是，它會用一小部分顏色填充周圍的像素，從而產生模糊效果。

這就是爲何若是你有一個Retina Macbook Pro並但願改變你的分辨率，它會顯示下面的窗口，讓你知道（在下面的截圖中）這個分辨率將「看起來像」1280 * 800px。它使用用戶的分辨率體驗來表示大小比例。

這是一種高度主觀的表現形式，由於它使用像素數做爲物理尺寸的單位，但它不是謊話，至少從他們的觀點來看。

正如您所注意到的，「分辨率」一詞一般用於描述我在此稱爲「像素屏幕大小」，PPI有時稱爲「像素密度」。雖然這沒有錯，但這是不可取的。當你看到或聽到它時，必定要了解「分辨率」的真正含義。例如，Apple使用Phrasing：「2048×1536分辨率，每英寸264像素（ppi）」來描述屏幕分辨率。在這種狀況下，他們與PPI一塊兒在上下文中正確使用它。

摘要：
若是您但願始終看到您的設計（或任何設計）像素完美，請不要使用與原生像素不一樣的像素數。是的，您可能會對較小的比例感到更舒服，但在像素方面，您但願儘量準確。

什麼是4k

你最近可能已經聽過4K這個術語（至少在我寫這篇文章時，2014年初），4k是一個很是時髦的主題。要了解它是什麼，讓咱們首先了解「HD」的含義。

當心，這是一種超簡化。我只想談談最多見的決議。有不一樣類別的高清。
術語HD適用於從1280x720px開始的任何像素屏幕尺寸或720p2水平線的720p。有些人也可能將此分辨率稱爲SD用於標準清晰度

。全高清一詞適用於1920x1080px屏幕。大多數電視使用這種分辨率，愈來愈多的高端手機（Galaxy SIV，HTC one，Sony Xperia Z，Nexus5）

4K起價爲3840x2160像素。它也被稱爲Quad HD，能夠稱爲超HD的UHD。簡單地說，就像素數而言，你能夠在4K屏幕上放置4個1080p。

4K的另外一個像素數是4096x2160。它略大，用於投影儀和專業相機。

若是我將4K顯示器插入計算機會發生什麼

當前操做系統不能擴展4K，這意味着若是您將4K顯示器插入Chromebook或Macbook，它將使用最高DPI資產，在這種狀況下爲200％或@ 2x資產，並以正常比率顯示它們，一切看起來都很好但很小。
假設示例：若是您將12英寸4K屏幕插入帶有12英寸高分辨率屏幕（2x）的計算機，則全部內容都會顯示兩倍小。

外賣：
- 4k是全高清的4倍。
- 若是當前操做系統處理4K但不縮放它，則表示還沒有支持4K特定資產。

監聽赫茲

與PPI和像素稍微分開，以便快速記錄。您可能已經看到接近屏幕的分辨率設置有監視器Hz值。這與PPI無關，可是若是您想知道，顯示器赫茲 - 或刷新率 - 是您的顯示器每秒顯示固定圖像或幀的速度單位。一臺60Hz的顯示器每秒能夠顯示60幀。120Hz，120fps等顯示器......

在UI的上下文中，監視器赫茲（Hz）將定義動畫的外觀平滑和細節。大多數屏幕都是60Hz。請注意，每秒顯示的幀數也取決於設備的處理和圖形功率。在Atari 2600上調整120Hz屏幕將毫無用處。

爲了更好地理解，請查看下面的示例。在60Hz和120Hz的屏幕上，T-rex以快速且徹底相等的速度轉到A點到B點。60fps屏幕在動畫期間可以顯示9幀，而120fps在相同的時間內邏輯顯示兩倍的幀。120Hz屏幕上的動畫會顯得更加流暢。

外賣：
有些人可能會說人眼看不到60fps以上。這是錯的。在以最討厭的方式笑的時候，不要聽，走開。

什麼是視網膜顯示屏

蘋果爲iPhone 4發佈了「Retina顯示器」的命名。它被稱爲Retina，由於該設備的PPI過高，人們的視網膜聽說沒法區分屏幕上的像素。

這種說法適用於它所使用的設備屏幕尺寸範圍，但隨着屏幕愈來愈好，咱們的眼睛如今已經足夠訓練以感知像素 - 特別是對於圓形UI元素。

從技術上講，他們所作的是在高度和寬度上以徹底相同的物理尺寸顯示兩倍的像素。

iPhone 3G / S的對角線爲3.5英寸，像素數爲480 * 320像素，可拍攝163PPI。
iPhone 4 / S的對角線爲3.5英寸，像素爲960 * 640px，可拍攝326PPI。

繁榮！徹底兩次。一個簡單的乘數。所以，屏幕上的元素不是更小，而是視覺清晰度的兩倍，由於它們具備兩倍的像素而且具備徹底相同的物理尺寸。單個1個正常像素= 4個視網膜像素，是像素數的四倍。

考慮如下示例，以便在複雜設計中直接應用。

圖像注意：很難在第三個設備上模擬兩個設備的不一樣圖像質量，即您正在查看的設備。對於上面的視網膜音樂播放器，即便在採用徹底相同的物理空間時，iPhone 4上的圖像質量也會看起來好兩倍。若是你想在本地查看它，我使用了個人免費贈品之一演示，您能夠下載源。

「Retina」顯示器命名由Apple擁有，所以其餘公司將使用「HI-DPI」或「超級功率像素最大sp33d顯示器」（我將爲後者註冊）或根本沒有。在閱讀設備規格時，您能夠自行決定什麼是DPI和屏幕尺寸（多麼有趣。）

內容：
Apple產品是熟悉DPI轉換和理解屏幕像素大小，PPI和物理尺寸比之間差別的絕佳方式，由於您只須要擔憂1倍數。

什麼是乘數

在爲全部不一樣的PPI轉換設計時，乘數是您的數學救星。當您知道乘數時，您沒必要再關心設備的詳細規格了。

咱們來看看咱們的iPhone 3G和4個例子吧。在相同的物理尺寸下，您有4倍的像素（2倍寬度，2倍高度）。所以，您的乘數爲2.這意味着要使您的資產與4G分辨率兼容，您只需將資產大小乘以2便可完成。

假設您建立了一個44 * 44px按鈕，這是iOS推薦的觸摸目標（稍後我會再談）。咱們用一個典型的按鈕名稱「Jim」來稱呼他。
爲了讓Jim在iPhone 4上看起來很好，你將不得不建立一個兩倍大的版本。這就是咱們在下面所作的事情。

很簡單。如今Jim擁有普通PPI（iPhone 3）的Jim.png版本和200％PPI（iPhone 4）的Jim@2x.png版本

如今你可能會問，「可是等等！我很肯定除了兩個以外還有其餘的乘數。「有，這就是它成爲噩夢的地方。好吧，也許不是噩夢，但我很肯定你寧願花一天時間熨燙你的襪子而後處理數以千計的乘數。值得慶幸的是，它沒有您想象的那麼糟糕，咱們稍後會談到這一點。

讓咱們首先談談單元，由於如今你須要一個像素之外的單元來規範你的多DPI設計。這就是DP和PT的用武之地。

摘要：
乘法器是您正在處理的每一個設計須要知道的。乘數是將這個混亂世界與屏幕尺寸和PPI結合在一塊兒的東西，讓人們能夠理解。

什麼是DP，PT和SP

DP或PT是您可用於指定多設備，多DPI應用程序模型的度量單位。
DP或DiP表明設備無關的Pixel和PT表明Point。PT是蘋果的東西; DP是Android的東西，但它們基本相同。

簡而言之，它將定義一個獨立於設備乘數的大小。在討論設計師和工程師等不一樣演員之間的規範時，這有很大幫助。

咱們來看看前面的按鈕示例「吉姆」。
Jim的正常非視網膜屏幕寬度爲44px，視網膜屏幕寬度爲88px。讓咱們得到技術，並在Jim的20px附近添加一個填充，由於他喜歡擁有本身的空間。而後，視網膜的填充將爲40px。可是，當你在非視網膜屏幕上進行設計時，計算視網膜像素真的沒有意義。

因此咱們要作的是將正常的100％非視網膜比率做爲一切的基礎。

在這種狀況下，Jim將具備44 * 44DP或PT的大小以及20DP或PT的填充。您能夠在任何PPI中提供您的規格，Jim仍然是44 * 44dp或pt。

Android和iOS會將此大小調整到屏幕並使用正確的乘數進行轉換。這就是爲何我發現使用屏幕的默認PPI設計更容易的緣由。

SP經過它的使用與DP和PT分離，但工做方式相同。SP表明與比例無關的像素，用於定義字體大小。SP將受其Android設備上的用戶字體設置的影響。做爲設計人員，定義SP就像爲其餘任何東西定義DP同樣。基於1x規模的清晰度（例如16sp，可讀性是一個很好的字體大小）。

內容：
在顯示時始終使用與分辨率/比例無關的值。老是。屏幕尺寸/分辨率越多，它就越重要。

PPI設置

如今，你知道什麼是PPI，視網膜和乘數，重要的是談論一些被問到個人東西而且很是混亂：「若是我改變設計工具中的PPI設置會怎麼樣？」

若是你問本身這個問題，那就意味着你對設計軟件有點熟悉了。如今這裏有一些很是重要的事情要理解我須要一段時間：

不管最初的PPI配置如何，任何非打印都使用像素大小。

軟件中的PPI設置是印刷的遺產。若是您只爲網頁設計，PPI將不會對您的位圖大小產生任何影響。

這就是咱們使用乘數而不是直接PPI值的緣由。您的畫布和圖形將始終由軟件使用相應的乘數轉換爲像素。

這是一個例子。您可使用容許PPI配置的程序（如Photoshop）自行嘗試。我在Photoshop中繪製了一個80 * 80像素的正方形和一個16pt大小的文本，設置爲72PPI。第二個是144PPI配置相同的東西。

正如你所看到的那樣，文本變得更大，兩倍大，而正方形保持不變。緣由是程序（在這種狀況下爲Photoshop）根據PPI值縮放pt值（應該如此），從而使雙倍PPI配置上文本的渲染大小加倍。另外一方面，使用像素（即藍色方形）定義的內容保持徹底相同的大小。像素是一個像素，不管PPI配置如何，它都將保持像素。使它不同凡響的是顯示它的屏幕的PPI。

重要的是要記住，在設計數字時，PPI只會影響您對設計和工做流程的感知以及字體等大小的圖形。若是在工做流源文件中包含各類PPI配置，程序將根據接收文件的PPI比率調整不一樣文件之間的任何傳輸視覺。這對你來講會有問題。

解決方案？使用PPI（最好在72-120範圍內進行1x設計）並堅持使用。我我的使用72PPI，由於它是Photoshop中的默認設置，個人大多數同事都這樣作。

內容：
- 導出網絡時，PPI設置沒有任何影響。
- PPI設置僅對基於PPI獨立測量（如PT）生成的圖形產生影響
- 像素是任何數字化的度量單位。
- 記住乘數和你的設計，而不是PPI。
- 在設計數字時使用逼真的PPI設置，讓您瞭解目標設備上的外觀（例如，1x網絡/桌面爲72-120ppi）。
- 在您的文件中保持相同的PPI設置。

關於這個很是有趣的StackExchange帖子的附加閱讀。

在iOS上處理PPI

是時候深刻了解特定於平臺的設計。

讓咱們來看看iOS在2014年初開始使用的設備。
在屏幕尺寸和DPI方面，iOS有兩種類型的移動設備和兩種類型的筆記本電腦/臺式機屏幕。

在移動設備上，他們固然擁有iPhone和iPad。
在手機類別中，你有舊的3GS（iOS6仍然支持）及以上。只有iPhone 3GS是非視網膜的。iPhone 5及更高版本使用與iPhone 4和4s具備相同DPI的更高屏幕。見下面的備忘單：

在2014年9月Apple Keynote上宣佈，您如今有2個新類別的iPhone：iPhone 6和iPhone 6 Plus。

iPhone 6略大於5（0.7「以上），但帶有相同的PPI。另外一方面，iPhone 6 Plus爲iOS推出全新的倍增器，因爲它的尺寸爲5.5英寸，所以爲3倍。

與全部其餘iPhone相比，iPhone 6 Plus如何處理其顯示器有一些很是特別的東西：
它會對視覺效果進行下采樣。

例如，當您爲iPhone 6設計時，您將在1334 * 750px的畫布上進行設計，手機也將渲染1334 * 750物理像素。在Iphone 6 Plus的狀況下，手機的像素數小於渲染圖像，所以您必須設計像素屏幕尺寸爲2208 * 1242px，手機將其下采樣到其像素大小1920 * 1080px。見下圖：

設備像素數比渲染分辨率小15％，它會產生一些毛刺，例如半像素，使很是精細的細節有點模糊。分辨率如此之高，但它會很是微妙，除非你仔細觀察。所以，在2208 * 1242px畫布上進行設計，並注意設計中很是精細的部分，例如超級分隔符。查看下面發生的事情的模擬：

感謝Paintcode在主題演講以後提出了一個很棒的解釋。看看他們的專用頁面。這個解釋源自他們很是好的原理圖。

而後你有iPod touch類別。在設計方面，將它們視爲iPhone。iPod 4th gen和down使用的是iOS6，非視網膜。iPod 5th gen使用視網膜（@ 2x）屏幕並與iOS7兼容。屏幕方面的iPod 5th gen正在使用iPhone 5尺寸的屏幕。

最後你有iPad。除了iPad 1st（今天已過期），他們都使用iOS7，只有iPad2和iPad mini 1st Gen使用非視網膜屏幕。若是你想從設計的角度來看iPad mini是什麼，它是一個普通的iPad（相同的PPI屏幕），但體積更小。個人意思是他們採用相同的分辨率並將其從9.7英寸下降到7.9英寸。保持相同的比例，從而增長像素密度。您的視覺資產會顯得略小一些。

關於臺式機/筆記本電腦類別，咱們不會涵蓋Apple提供的每種屏幕尺寸。截至今天，Apple提供的大部分屏幕都是1倍乘數（Macbook，Macbook Air，舊Macbook專業版，桌面屏幕。）Retina只有13和15「僅適用於Macbook Pro。倍數是2倍，與iPad和iPhone徹底相同。若是桌面設計與移動設備不一樣，您將以相同的方式生成資產以覆蓋2種不一樣類型的屏幕。

只有一個乘數，爲iOS和OSX建立資產很是簡單。我建議開始設計基本PPI（即100％/ 1x）並在以後乘以2以在@ 2x屏幕上證實您的設計並生成@ 2x資產。一旦您在1x和2x之間來回切換更加溫馨，您將可以直接在@ 2x中進行設計，縮小您的資產以得到更低的分辨率。若是您在視網膜屏幕（Macbook pro）上進行設計，這將特別有用。

所需資產，Chrome示例。

如您所見，咱們每次須要爲每一個資產提供兩個圖像。非視網膜圖像稱爲name.png。對於視網膜圖像，咱們將@ 2x附加到name2x.png。這是一個iOS慣例，應該遵循它。

若是您建立的圖像僅用於iPad，咱們在。@ 2x以後使用~ipad。它只是Chrome大會。對您須要的每一個資產重複此過程。永遠不要只提供一個版本的資產; 涵蓋每個DPI。

外賣，iOS規則集：
- @ 2x資產必須是1倍資產的雙倍，始終。
- 爲視網膜資產添加@ 2x，爲300％添加@ 3x（iPhone 6Plus）
- 始終建立100％和200％的圖像。
- 始終爲1x和2x資產使用相同的名稱。
- 開始設計100％，而後相乘。
- 提供.png圖像。
- 在pt而不是px中建立規格。

在Android上處理PPI

Android平臺擁有比iOS更普遍的設備。緣由是任何OEM均可以構建一個設備，而且在規模方面幾乎沒有限制，並在其上放置本身的Android版本。所以，您最終能夠得到幾乎無限種類的屏幕尺寸和DPI，從平板電腦和平板電腦這樣的手機，幾乎和手機同樣小。所以，您的設計必須始終適應。

對於本節，咱們將採用與iOS不一樣的方法。咱們首先討論DPI的乘數和類別。

與iOS同樣，您有兩類設備：手機和平板電腦。兩個類別能夠按不一樣的DPI類別排列：ldpi，mdpi，tvdpi，hdpi，xhdpi，xxhdpi和xxxhdpi。

幸運的是，有些比其餘更經常使用，有些甚至被棄用。

咱們要作的第一件事是找到至關於iOS的1x的基本單位。在Android上，此基礎是MDPI。

咱們來看看下面的備忘單中的乘數。

是的，這不少，並且還沒結束。剩下一個。

實際上有五種DPI在使用：MDPI，HDPI，XHDPI，XXHDPI和XXXHDPI。
LDPI是舊的DPI，再也不使用，TVDPI是TV UI的特定案例，並簡要用於Nexus 7 2012版。能夠認爲沒有必要使用手機和平板電腦。但須要注意的是，TVDPI的乘數（1.33倍）用於Android Wear的某些設備，例如LG G手錶，但咱們稍後會談到這一點。

讓咱們經過將Android手機和平板電腦與各自的DPI聯繫起來，將全部內容都放在一塊兒。

所需資產，Chrome示例。

您將不得不爲每一個資產提供一組4個圖像，從MDPI到XXHDPI。您能夠將LDPI排除在集合以外。請注意，在下面顯示的Chrome版本的狀況下，TVDPI也被導出，由於在這種特定狀況下，每一個資產的計數爲5個圖像。

就像iOS同樣，我建議您將100％或1倍乘數做爲您設計的基礎。這使得爲每一個其餘乘數更容易準備設計，特別是在Android上使用1.33和1.5等乘數。

請參閱下文，瞭解Android上Chrome的後退按鈕示例。

這裏使用附加的DPI建議的命名不是強制性的，也不是Android官方指南中提供的。這是咱們命名資產的方式，由於當前設計工具的限制使得很難爲每一個資產導出定義特定路徑。
考慮到資產來源有時能夠容納數百個資產，這是一種使出口過程不那麼痛苦並避免設計者方面出現重複名稱錯誤的方法。資源存儲區在源存儲庫中的結構方式以下：
- drawable-mdpi / asset.png
- drawable-hdpi / asset.png
- 等...

如您所見，資產被削減爲32 * 32dp的正方形。Android乘數的問題是它們中的一些使用小數。當你將數字乘以1.33或1.5時，你最終可能會獲得一個十進制數。在這種狀況下，您須要將數字四捨五入到您認爲合理的數字。在示例的狀況下，32 * 1.33 = 42.56，所以咱們將其四捨五入爲43px。

你須要注意像素大小的元素，好比筆畫。您可能須要確保您的筆劃寬1像素或寬2像素，而且不會模糊，如屏幕分辨率部分所述。

外賣，Android規則集：
- Android有7種不一樣的DPI，你須要擔憂4：mdpi，hdpi，xhdpi，xxhdpi加一，若是你想要面向將來的應用程序，XXXHDPI
- MDPI是基礎DPI或你的1倍乘數
- Android使用dp而不是pt做爲規格，但它們是相同的
- 使用您對十進制乘數的最佳判斷。
- 提供.png圖像。
- 確保與負責實施的人員驗證您的命名約定和導出過程。

Mac和Chrome OS PPI

Mac（OSX）和Chrome OS在PPI處理方面表現徹底相同。
兩種OS均支持常規PPI（100％）和高分辨率/視網膜PPI（200％）。與iPhone和iPad同樣，只有2倍的乘數。

即便您的大多數用戶，Mac和Chrome操做系統都使用低分辨率設備（目前），我強烈建議您爲這些高端屏幕提供適用於您的應用。針對ChromeOS的將來驗證意味着爲您的網絡應用或網站建立高分辨率資產，這毫不會浪費時間。
目前共有3臺處理這款PPI的筆記本電腦，Macbook pro 13「，15」和Chromebook Pixel。除此以外，Chromebook Pixel還能夠處理觸控。

所需資產，Chrome示例。

這種類似性的一個完美示例是Chrome工具欄資源按鈕。咱們在兩個平臺上使用徹底相同的。若是代碼不一樣，則視覺效果是相同的。請參閱下面的Chrome菜單和書籤按鈕示例。

內容：
- Chrome OS和OSX使用相同的乘數，2。
- 惟一的Chrome OS高分辨率顯示器也能夠處理觸摸。

可拉伸資產

您的應用是在桌面仍是移動設備上。你幾乎老是須要可伸縮的資產。

設置了一個可伸縮的資源，所以代碼能夠在不下降渲染性的狀況下使其儘量大。

它們與可重複資產不一樣，即便有時顯示相同的結果，它們的工做方式也不一樣。

請參閱下面的Chrome示例。iOS上的工具欄僅使用一個超薄資產生成，該資產在整個屏幕上的X軸上重複。

如今已經不在了，讓咱們看看不一樣平臺如何處理可伸縮資產。

iOS上的可伸縮資產

iOS使設計人員更容易，由於拉伸是在代碼中定義的，而不是在您製做資產切片或標記的方式中定義的。您所要作的就是提供一個基本圖像，而且 - 若是您沒有本身實現它 - 將此資產指定爲水平，垂直或二者均可伸縮。請參閱下面的示例，它是iOS上的默認Chrome內容按鈕。

Android上的可擴展資產

Android有一種不一樣於iOS的可伸縮資產的方式。它更依賴於設計師。

對於此平臺，您將使用9補丁指南。這些指南由資產自己周圍的4條線組成。它們必須在切片/圖像中傳遞，就像它是視覺自己的一部分同樣，從字面上直觀地顯示其中的規格。

它們定義了兩個東西：可縮放區域和填充區域。一旦定義了這些代碼，代碼將只能擴展您定義的內容並將內容放在您定義的位置。

請參閱下面的示例，它是您以前看到的默認Chrome按鈕的Android版本。爲了演示，我把它作得更大了。

如您所見，9補丁是一組4個純＃000000條。對於任何DPI，它們的寬度應爲1px; 這是一個代碼指示。可伸縮區域不包括圓角，由於它不是能夠重複的東西（或者它看起來很糟糕。）在這種狀況下，咱們爲按鈕添加了10dp填充。這是你沒必要指出的東西。.9指標還須要鋪設和100％透明的資產削減部分。若是沒有，它將沒法工做，須要修改。

使用9-patch要求您在名稱後附加.9，就像爲iOS資產添加@ 2x同樣。從新下面的按鈕資產示例：

請注意，您應該注意資產的大小。若是我爲演示作了很大的工做，那麼經過將其尺寸減少到最小來優化資產重量很是重要，以下所示。我保持角落不變，但將可拉伸和內容區域減小到最小。

請注意，9貼片標記與您的設計不重疊，而且資產的切割是正確的。.9應儘量靠近資產而不重疊，儘可能不要內置填充。以前的示例因爲陰影而具備內置填充。

9補丁不會取代在每一個DPI中導出您的資產。須要爲每一個版本的資產完成。

最後，.9能夠有多個可伸縮區域（頂部和左側）。這不是我常常遇到的事情，若是不是個人工做流程，但值得一提。

摘要：
老是要求實施您設計的人採用什麼是最佳解決方案，尤爲是桌面設備。您擁有的圖像越多，應用程序就越重，您將愈來愈難以跟蹤和更新資產。只有良好的命名和良好的資源組織才能使用9補丁。

矢量資產

隨着使用更大範圍的DPI配置的屏幕範圍增長，切換到矢量資產而不是位圖是絕對值得考慮的選項。

向量可繪製資產的最經常使用和展開形式是.svg格式。它是基於.xml的文件，幾乎能夠在全部設計軟件和Web瀏覽器中讀取和編輯，由於它是爲Web建立的。其餘格式支持.ai（Adobe illustrator），。eps甚至.pdf等矢量。

使用矢量圖像的主要好處是可擴展性。無需爲全部各類PPI桶建立位圖，矢量將根據屏幕倍增器自動縮放。

.svg包含有關如何繪製視覺的XML信息。而後，軟件/ OS /瀏覽器解釋這些命令以呈現所選大小的資產。

使用它們有不少好處：

減小應用安裝大小
大量減小位圖使用
程序化的顏色變化更容易
自動和非破壞性縮放

然而，他們也有缺點：

視覺自由度較低，不適合複雜的圖形，特別複雜的陰影，漸變或其餘類型的效果
因爲所需的處理能力，可能會對應用/網站性能產生不良影響
因爲自動縮放，沒法控制像素完美

隨着UI設計向「更平坦」風格的演變，使用更少的陰影，蝕刻和漸變，.vector路徑變得愈來愈有用和使用。話雖這麼說，你須要當心如何使用它和在哪裏。

正如在缺點中所提到的，.svg可能會極大地影響性能，雖然它們在網絡上運行良好，但iOS和Android將更喜歡本身的矢量繪圖解決方案。iOS使用.pdf，Android使用的是VectorDrawables。
Android甚至在Android工做室中建立了一個工具，將.svg轉換爲Android-ready Vector Drawable代碼。

摘要：
根據您的項目，您須要向實施團隊或人員提供的內容因目標平臺而異。確保您選擇的解決方案通過考慮。較早版本的Android（Pre-L）不支持VectorDrawables做爲示例。
請務必與您的工程團隊聯繫，瞭解什麼是項目的最佳解決方案，以及有意義的性能和設計。矢量drawables多是你最好的盟友，但它們可能不適合每一個用例，因此要當心。

觸摸和觸摸目標

這裏要理解的第一件事就是讓觸摸準備就緒與DPI無關。可是，在建立UI或生成資產時，瞭解觸摸和DPI之間的關係很是重要。

在觸摸或非觸摸之間作出選擇將在很大程度上取決於應用程序的範圍，部署位置以及您但願用戶體驗的方式。
咱們將它分爲簡單類別，桌面非觸摸和移動。

桌面，非觸摸

咱們不要在這裏給出一個歷史課，但除非你出生於2005年，不然你知道計算技術不是以觸摸而建立的。
咱們使用鼠標和鍵盤，這是用於導航UI的極其精確的工具。鼠標光標的精度爲1pt。理論上你能夠建立一個1x1pt按鈕，能夠被任何超級人類點擊。

請參見下圖。

這是Chrome OS遊標的20倍版本。
紅色將其分區爲觸發UI上的操做的實際區域。很是精確。
你知道我正在前進。什麼不是很精確？咱們的手指。

那麼你如何設計觸控？那你把一切都作大了。

手指大小

這是用於UI交互的兩個最經常使用手指的平均大小，指針和拇指。它表明觸摸區和手指遮擋的區域。實際的觸摸區域（即手指與屏幕接觸的部分）固然會更小，更精確，除非你真的用手指敲擊屏幕。

在設計觸摸時，高估觸摸目標所需的尺寸比低估它們更安全。

如何將其應用於個人設計流程

正如咱們已經看到的，英寸或釐米不是在像素世界中計數的最佳方式。事實上，即便像素也不是一個很是好的計數方法。那麼如何確保您的設計準備就緒？

我將說明顯而易見但你應該老是在目標設備/平臺上嘗試你的設計。
可是爲了不損失太多時間，有一些基於像素的基本尺寸被認爲是安全的，而且建議在每一個操做系統的基礎上使用。

每一個平臺推薦的觸摸目標

再次，當心，這些尺寸是爲了方便，並非任何實際尺寸測量的單位。他們的工做緣由是OEM和製造商遵循指導方針，使屏幕在尺寸/ dpi比方面保持一致。

正如您所看到的，每一個操做系統都有本身的一系列建議，但它們都在48pt左右。Windows在其規格中包含填充，這就是我在這裏添加它的緣由。

這些尺寸的差別來自不一樣的因素。
Apple控制其硬件，以便他們瞭解觸摸屏的質量並控制精確的比例。他們能夠依靠較小的觸摸目標。另外，他們的硬件每每體積更小。

另外一方面，Android和Windows擁有不一樣的OEM，每一個都在創建本身的硬件，擁有更大的觸摸目標使它們「更安全」。他們的UI也更加分散（特別是窗戶），他們的設備每每體積更大。

例

如下是Safari在iOs上應用觸摸目標以及Chrome如何在Android上應用觸摸目標的示例。

如您所見，兩個工具欄都是每一個平臺的推薦觸摸目標高度。對於iOS和Android，視覺周圍的區域分別爲44x44pt和48x48pt。請注意，自Material設計發佈以來，工具欄的高度已經提高到56dp，工具欄中的圖標有效觸摸目標增長到56 * 56dp。UI從新設置的最小觸摸目標仍爲48dp。這不只使得UI在調整大小方面與操做系統的其他部分保持一致，並且對於您但願用戶與之交互的全部內容，這是一種很好的方式。

Windows 8和Chrome OS

Windows 8和Chrome OS支持觸摸和非觸摸界面。若是您設計的是Windows 8應用程序，我強烈建議您遵循他們的觸摸目標指南。

Chrome操做系統指南還沒有發佈，但Pixel的用量並不大。可是，因爲全部Chrome操做系統應用都是基於網絡的，所以不管如何我都建議設計觸控。個人建議是應用Android觸摸目標指南。

網絡，混合設備和將來。

若是您正在爲移動設備進行設計，那將會明確作出什麼決定。若是您正在設計桌面，請不要觸摸。聽起來很容易，但它忽略了一種新的趨勢，即混合設備。

混合設備是一種能夠同時進行觸摸和非觸摸的設備。Chromebook Pixel，Surface Pro和聯想瑜伽就是一個很好的例子。
在這種狀況下該怎麼辦？好吧，沒有簡單的答案，但我會繼續給你一個，去接觸。這就是技術發展的地方。
若是您爲網絡設計或任何相關事項，請考慮提早觸摸。

外賣：
- 想一想移動，想一想觸摸你未來要作的幾乎全部事情。
- 爲每一個操做系統使用推薦的觸摸目標。這將有助於使您的設計更好，並幫助您在操做系統內實現一致性。 - 觸摸目標是參考值，但這並不意味着您應該遵循它們的字母。最終，您能夠控制體驗。

設計軟件

該軟件不是設計師，但爲手頭的任務選擇合適的軟件能夠提升您的工做效率和工做的簡便性。軟件「訣竅」不該該是您惟一的技能，但學習和掌握正確的工具將是一個很好的資產，可讓您的想法發生。

在處理界面設計中的DPI變化時，不一樣的軟件以不一樣的方式工做。有些人在特定任務上比其餘任務更好。這是最多見的：

Photoshop中

界面設計工具的母親。多是今天最經常使用的工具。有無數的資源，教程和文章。自從界面設計開始以來，Photoshop就已存在。

顧名思義，該程序的首要目的不是界面設計，而是照片或位圖修飾。它在過去一年中不斷髮展，隨着界面設計的誕生，設計師們將其佔用並從新定位。部分緣由是由於他們習慣了它，由於它是惟一可以作到所需的事情的程序。

直到今天，Photoshop仍然是Bitmap編輯的大師，而且仍然是用於UI設計的最經常使用的程序。它長達數十年的遺產使得它成爲一個難以接近和學習的計劃。做爲一個巨大的軟件瑞士軍刀，你將可以作任何事情，但並不老是以最有效的方式。

由於它基於位圖，它只提供像素預覽，這意味着預覽將與您的顯示器像素匹配，而與Illustrator相反，它不會根據您的縮放級別從新渲染矢量圖。然而，它將完美地處理縮放。

Adobe的官方網站：https：//www.adobe.com/

插畫

Photoshop的基於矢量的兄弟。正如其名稱所示，它針對的是Illustrator，但它也可用做界面設計工具。

Illustrator也適用於打印設計，所以它的界面，色彩管理，比例尺，標尺和單位可能會讓您失望，只須要進行一些調整就能夠輕鬆地用於界面設計。像Photoshop同樣，它是一個很是強大的工具，具備陡峭的學習曲線。

與Photoshop不一樣的是，因爲它依賴於矢量形狀，所以它與DPI無關。與位圖或光柵圖像相反，使用矢量形狀製做的圖形依賴於數學公式，將以編程方式從新調整，而不會有任何質量損失。

瞭解柵格化和矢量化圖像之間的差別是構建可擴展視覺設計和資產的關鍵。

若是你想開始使用Illustrator中的Web /界面設計，建議閱讀「個人矢量工做流程」由@janoskoos。

Adobe的官方網站：https：//www.adobe.com/

草圖3.0

與Photoshop和Illustrator相比，Sketch是新的。只有4歲，這個程序在UI設計師行業中產生了不少炒做（以一種好的方式）。緣由是Sketch從一開始就瞄準界面和UX設計師使用。沒有Photoshop或Illustrator的遺產，Sketch將自身定位爲界面設計師的利基觀衆的完美適應工具。

Sketch適用於快速線框圖以及更復雜的視覺設計。它徹底基於矢量，就像Illustrator同樣，具備極小且通過深思熟慮的UI。畫板與易用性和資產生成系統的靈活性相結合，使其成爲多DPI和多平臺設計的最快工具。最近發佈的3.0版本使其成爲Photoshop的一個很是可靠的替代品。

在缺點方面，Sketch由一個較小的團隊支持，而且仍然是最新的。它的團隊很是反應，但沒有Adobe（Photoshop和Illustrator）的規模。Sketch（按設計）提供了位圖版本的最低限度。Photoshop將更適合這種工做。最後，因爲其至關年輕的生活，源文件，教程和總體社區的資源比Photoshop小几個數量級。話雖如此，社區很是積極和積極。

從更我的的角度來講，自從我8年前開始設計以來，我一直是Photoshop用戶，但我最近在設計過程的大部分時間都轉向了Sketch 3.0。這不是對質量的判斷，Photoshop仍然是一個很好的程序，它更適合個人需求。

若是您想了解更多關於個人特定經歷的信息，我建議您閱讀個人「使用Sketch 3.0的一個月」文章或個人「Sketch tutorial_01」。

想要更深刻地瞭解矢量在草圖中的工做原理嗎？前往@ pnowelldesign的文章「在草圖中利用矢量真棒」

Sketch的官方網站：https：//www.sketchapp.com/