本文是為“初學者”或者作為從一開始就想要學習更多跨DPI和跨平臺設計知識的中級設計師準備的序言讀物。 沒有復雜的計算和不可分析的圖表，只是按照劃分直截了當地將內容呈獻給讀者，便于讀者理解以及直接運用到設計過程中，非常實用且專業的知識，記得收藏??>

使用九宮格要求在名稱后面加上.9，和在iOS資源上添加@2x的方式一樣。重命名按鈕的例子如下：

現在你需要非常注意你的資源大小。如果我在演示中放大了它，你就需要通過減小它的尺寸到一個最小限度來優化資源，如后面所示。保持了圓角的原樣，但是將可拉伸和內容區域減小到最小限度。

需要注意的是九宮格的標記不會和設計重疊，并且資源切割是合理的。.9需要盡可能靠近資源并不與之重疊，試著不內置padding。前面的例子因為陰影而內置了padding。

九宮格不會代替你導出每種DPI的資源。它需要在每個資源版本都實行。

最后一點，.9可以有許多可拉伸區域（上面和左邊），雖然我沒有經常遇到這樣的情況，但它也是很值得嘗試的。

附加: 總是采取最好的解決方案來實現設計，特別是桌面設計。圖片越多，app就會變得越沉重。追蹤和更新資源也變得困難。九宮格應該使用在命名有規范、組織結構良好的資源中。

Touch和觸摸目標

首先需要知道的是做觸屏相關的準備和DPI一點關系也沒有。但是當涉及到設計UI或者創建資源，弄清楚觸屏和DPI的關系就很重要。

選擇觸屏或者非觸屏很大程度上取決于app的適用范圍，它被部署在哪里以及希望得到怎樣的用戶體驗。 我們可以簡單地將他們分為：非觸屏的桌面應用和手機app。

臺式機, 非觸屏

直到2005年，觸屏才開始出現在計算機技術中。 我們使用鼠標和鍵盤，它們能夠非常準確的操作UI。鼠標光標的精度是1pt，也就是說理論上你可以創建一個能讓任何人點擊的1*1pt的按鈕。

請看下面圖解。

這是個Chrome OS光標的20x版本。 紅色區域是能在UI上觸發一個事件的實際區域，十分準確。 你知道我的標題。什么是不準確的呢？手指。

那么如何為觸屏設計呢？最好的辦法就是讓所有東西變得更大。

手指大小

這里有交互中最常用到的兩根手指（食指和大拇指）的平均大小，這代表了觸摸區域和被手指遮擋了的區域。實際的觸摸區域（例如，你手指接觸屏幕的那部分）當然會小一點并且更準確，除非你把你的手指壓在屏幕上。

在設計觸屏的時候，放大觸摸目標的尺寸比低估更安全。

如何將此應用到我的設計流程

如我們已經看到的，在像素世界英寸或者厘米并不是一個好的計量方法，即使是像素也不是真正好的計量方法。所以你怎么確保你的設計是可被觸摸的呢？

我雖然講了很多理論知識，但是更重要的是自己試著在目標設備/臺式機上設計。 但是為了避免浪費更多時間，有一些基礎的像素的大小使用起來是比較安全的，并且被推薦使用在每個OS上。

各平臺推薦的觸屏目標

需要注意的是，這些大小都是為了方便，都不是現實生活中的測量單位，他們依賴于OEM和各廠商遵守這個指南來生產屏幕，使之保持大小、dpi比例一致。

如你看到的，每個OS都有一系列自己的推薦規范，但是都在48pt左右。Windows的規格是包含了padding的，所以我把它加到這里。

尺寸的不同是源于不同的因素。 Apple可以控制它的硬件，因此知道觸屏的質量并且能夠控制這個確切的比例，它可以觸摸更小的目標，另外，本身的物理尺寸也更小。

另一方面，Android和Windows有不同的OEM，都各自生產自己的硬件，有更大的觸摸目標會更“安全”。他們的UI更加無規范（特別是Windows），物理尺寸也越來越大了。

Chrome為例

這是在Chrome上的應用，編碼使觸摸目標呈藍色。

如你所見，兩個平臺上工具欄都是被推薦的觸摸目標的高度?？梢暦秶趇OS和Android上分別是4444pt和4848pt的正方形，這不僅使得UI在大小方面和其他OS保持一致，而且也能讓與用戶交互的部分都保持最小的規格。

Windows 8以及Chrome OS

Windows 8和Chrome OS都支持觸屏和非觸屏的接口。如果你在為Windows 8 設計app，我強烈建議按照它們guidelines for touch targets來做。

Chrome OS準則目前尚未發布，但是Pixel使用問題不大。因為所有Chrome OS的app都是基于web開發，我的建議是按照觸屏設計并且遵照Android touch targets guidelines來進行開發。

web，混合設備和未來

如果你在為手機設計，觸屏是不二選擇。如果你在設計桌面應用，參照非觸屏。這聽起來很簡單但是在混合設備興起的時候很容易被忽略，。

混合設備是一種既支持觸屏又支持非觸屏的設備。Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子。 在這樣的情況下，我們該做什么呢？沒有簡單的答案，但是我會首先給一個答案，觸屏方向，因為那是未來的發展趨勢。 如果你為web或者其他相關的設計，首先考慮觸屏。

附加:

移動和觸屏設計幾乎是未來發展趨勢。參考每個OS上建議的觸摸目標。這能幫助你更好地設計并讓你的產品在OS中保持一致。觸摸目標有參考價值，但是不代表你需要不折不扣地遵守，同時你也需要根據經驗判斷。

設計軟件

軟件不能制造設計師，但是在完成任務時選擇使用正確的軟件可以提高效率，更快完成工作。軟件“訣竅”不應該是你唯一的技能，但是學習和操作正確的工具可以幫助你產生靈感。

當涉及到在設計界面處理DPI變化，不同的軟件采用不同方式。在特定任務中有些軟件比其他的更好。下面是最常見的：

Photoshop

界面設計工具之母。也許也是如今使用最廣泛的工具。關于它的資源、教程、文章數不勝數，Photoshop幾乎幾乎貫穿界面設計的每一個階段。

正如其名，軟件最開始的目的并不是界面設計而是圖像或者位圖處理。隨時間推移以及界面設計的產生，設計師們再次使用起來。部分人是因為他們以前就用并且是那時僅有的能夠把事情做得足夠好的軟件。

在今天，Photoshop是主要的位圖編輯工具，也是UI設計中使用最廣泛的軟件。數十年的積累使得它成為學習和使用比較困難的軟件。作為軟件中的瑞士軍刀，你可以用來做任何事，但是并不總是最有效的。

因為最初是基于位圖的，所以Photoshop十分依賴DPI，下面描述的是與之相反的Illustrator和Sketch。

Illustrator

Illustrator的矢量是基于同級的。顧名思義，它重點在插畫，但是也可以作為界面設計工具。

Illustrator也很適合平面設計，因此它的界面，顏色管理，縮放，標尺和單位首先就吸引你，只需要一些補丁就會更便于使用。和Photoshop一樣，他也是一款很強大的工具，同時也需要付出努力去學習。

和Photoshop不同的是，它是獨立于DPI的，因為它依賴矢量圖。與點陣圖或者光柵圖相反，圖像生成采用矢量圖，依靠數學公式計算，以編程方式重新調節大小并且不會損失圖片質量。

了解柵格化和矢量化圖片的不同是建立可擴展視覺設計和資源的關鍵。

如果你想學習使用Illustrator來進行web/界面設計，推薦同學們學習：

《使用 Adobe Illustrator 做 UI 設計——多重填充與多重描邊》《小課堂第二彈！使用ILLUSTRATOR做UI設計系列教程》《小課堂第三彈！使用ILLUSTRATOR做UI設計系列教程》《小課堂第四彈：使用ILLUSTRATOR做UI設計系列教程》《使用ILLUSTRATOR做UI設計系列教程：創建內陰影效果（5）》《使用AI做UI設計系列教程：效果、外觀面板和質感表現（上）》《使用AI做UI設計系列教程：效果、外觀面板和質感表現（中）》

Sketch 3.0

與Photoshop和Illustrator比起來，Sketch還很年輕。雖然只產生了四年，但它在UI設計行業里面引起了巨大的反響。因為從一開始，Sketch的目標就是供界面和UX設計師使用，沒有Photoshop和Illustrator的歷史積累，Sketch把自己定位成針對小眾用戶——界面設計師的一款完美的調整工具。

Sketch適合快速設計框架以及復雜的視覺設計。它像Illustrator一樣是完全基于矢量的，簡單輕量化同時還擁有美觀的UI。它結合了銅版紙使用方便和靈活的資源生成系統，讓它成為跨DPI、跨平臺設計最快的工具。最近發布的3.0版本也是可以用來替代Photoshop的產品。

但是也有不足的地方，Sketch是小團隊開發的，而且出來得比較晚。盡管它的團隊能夠積極響應需求的變化，但是也沒有Adobe（Photoshop和Illustrator）公司這樣的規模。在位圖編輯時，Sketch只能滿足（設計時）最低的需求，但是Photoshop的功能就更加全面。同時，因為它的年輕，在源文件、教程和社區方面在數量上也遠少于Photoshop，不過，社區用戶都很積極上進。

另外私人方面，從8年前我就是是Photoshop的用戶，但是最近我把我設計中的最重要部分切換到了Sketch3.0。這不是對質量的判斷，Photoshop仍然是一個好軟件，只是Sketch3.0更加適合我。

靜電的Sketch教程合集：

《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》《SKETCH設計教室！帶你了解超好用的SKETCH插件》《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

附加：并沒有完美的工具但是有最適合你的。如果你有足夠的時間和錢，我建議你都試試，然后再決定。

文檔和資源

這篇指南只是一個介紹，真正開始做的時候能學到更多。如果你想要了解更多或者獲取我們討論的主題相關的更詳細的內容，可以點擊下面的鏈接：

平臺文檔

Android UI guidelines

Google Material guidelines

iOS7 UI guidelines

Windows UI guidelines

Google dev Principles of site design

速查表和模板

iPhone 6 Screens Demystified

Ultimate guide to iphone resolutions by PaintCodeApp

Screen sizes, ratio and PPI

iOS7 designer cheat sheet

iOS7 design resource (requires Apple account)

App icons template, Android and iOS

Bjango blog (A design article gold mine)

iPhone GUI and iPad GUI(.psd) by @teehanlax

工具

Density converter by @brdrck

Android asset generation by @brdrck

Android design tips by @destroywerk and @BPScott

9patch creation in Android by @romannurik

Android asset studio by @romannurik

【ps教程論壇指南類好文人氣榜！】

Top 1：作者自學成功的親身經驗，實用性高！
《超贊！設計師完全自學指南》

Top 2：從新手技巧到高手教程都在這兒了！
《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》

Top 3：集合多位交互大牛的經驗合集！
《交互設計師修煉指南！教你從零開始成為優秀交互設計師》

原文地址：sebastien-gabriel
譯文地址：w3ctech