本文是為“初學(xué)者”或者作為從一開始就想要學(xué)習(xí)更多跨DPI和跨平臺(tái)設(shè)計(jì)知識(shí)的中級(jí)設(shè)計(jì)師準(zhǔn)備的序言讀物。 沒有復(fù)雜的計(jì)算和不可分析的圖表，只是按照劃分直截了當(dāng)?shù)貙?nèi)容呈獻(xiàn)給讀者，便于讀者理解以及直接運(yùn)用到設(shè)計(jì)過程中，非常實(shí)用且專業(yè)的知識(shí)，記得收藏??>

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

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

需要注意的是九宮格的標(biāo)記不會(huì)和設(shè)計(jì)重疊，并且資源切割是合理的。.9需要盡可能靠近資源并不與之重疊，試著不內(nèi)置padding。前面的例子因?yàn)殛幱岸鴥?nèi)置了padding。

九宮格不會(huì)代替你導(dǎo)出每種DPI的資源。它需要在每個(gè)資源版本都實(shí)行。

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

附加: 總是采取最好的解決方案來實(shí)現(xiàn)設(shè)計(jì)，特別是桌面設(shè)計(jì)。圖片越多，app就會(huì)變得越沉重。追蹤和更新資源也變得困難。九宮格應(yīng)該使用在命名有規(guī)范、組織結(jié)構(gòu)良好的資源中。

Touch和觸摸目標(biāo)

首先需要知道的是做觸屏相關(guān)的準(zhǔn)備和DPI一點(diǎn)關(guān)系也沒有。但是當(dāng)涉及到設(shè)計(jì)UI或者創(chuàng)建資源，弄清楚觸屏和DPI的關(guān)系就很重要。

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

臺(tái)式機(jī), 非觸屏

直到2005年，觸屏才開始出現(xiàn)在計(jì)算機(jī)技術(shù)中。 我們使用鼠標(biāo)和鍵盤，它們能夠非常準(zhǔn)確的操作UI。鼠標(biāo)光標(biāo)的精度是1pt，也就是說理論上你可以創(chuàng)建一個(gè)能讓任何人點(diǎn)擊的1*1pt的按鈕。

請(qǐng)看下面圖解。

這是個(gè)Chrome OS光標(biāo)的20x版本。 紅色區(qū)域是能在UI上觸發(fā)一個(gè)事件的實(shí)際區(qū)域，十分準(zhǔn)確。 你知道我的標(biāo)題。什么是不準(zhǔn)確的呢？手指。

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

手指大小

這里有交互中最常用到的兩根手指（食指和大拇指）的平均大小，這代表了觸摸區(qū)域和被手指遮擋了的區(qū)域。實(shí)際的觸摸區(qū)域（例如，你手指接觸屏幕的那部分）當(dāng)然會(huì)小一點(diǎn)并且更準(zhǔn)確，除非你把你的手指壓在屏幕上。

在設(shè)計(jì)觸屏的時(shí)候，放大觸摸目標(biāo)的尺寸比低估更安全。

如何將此應(yīng)用到我的設(shè)計(jì)流程

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

我雖然講了很多理論知識(shí)，但是更重要的是自己試著在目標(biāo)設(shè)備/臺(tái)式機(jī)上設(shè)計(jì)。 但是為了避免浪費(fèi)更多時(shí)間，有一些基礎(chǔ)的像素的大小使用起來是比較安全的，并且被推薦使用在每個(gè)OS上。

各平臺(tái)推薦的觸屏目標(biāo)

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

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

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

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

Chrome為例

這是在Chrome上的應(yīng)用，編碼使觸摸目標(biāo)呈藍(lán)色。

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

Windows 8以及Chrome OS

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

Chrome OS準(zhǔn)則目前尚未發(fā)布，但是Pixel使用問題不大。因?yàn)樗蠧hrome OS的app都是基于web開發(fā)，我的建議是按照觸屏設(shè)計(jì)并且遵照Android touch targets guidelines來進(jìn)行開發(fā)。

web，混合設(shè)備和未來

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

混合設(shè)備是一種既支持觸屏又支持非觸屏的設(shè)備。Chromebook Pixel，Surface Pro和Lenovo Yoga就是很好的例子。 在這樣的情況下，我們?cè)撟鍪裁茨?？沒有簡單的答案，但是我會(huì)首先給一個(gè)答案，觸屏方向，因?yàn)槟鞘俏磥淼陌l(fā)展趨勢(shì)。 如果你為web或者其他相關(guān)的設(shè)計(jì)，首先考慮觸屏。

附加:

移動(dòng)和觸屏設(shè)計(jì)幾乎是未來發(fā)展趨勢(shì)。參考每個(gè)OS上建議的觸摸目標(biāo)。這能幫助你更好地設(shè)計(jì)并讓你的產(chǎn)品在OS中保持一致。觸摸目標(biāo)有參考價(jià)值，但是不代表你需要不折不扣地遵守，同時(shí)你也需要根據(jù)經(jīng)驗(yàn)判斷。

設(shè)計(jì)軟件

軟件不能制造設(shè)計(jì)師，但是在完成任務(wù)時(shí)選擇使用正確的軟件可以提高效率，更快完成工作。軟件“訣竅”不應(yīng)該是你唯一的技能，但是學(xué)習(xí)和操作正確的工具可以幫助你產(chǎn)生靈感。

當(dāng)涉及到在設(shè)計(jì)界面處理DPI變化，不同的軟件采用不同方式。在特定任務(wù)中有些軟件比其他的更好。下面是最常見的：

Photoshop

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

正如其名，軟件最開始的目的并不是界面設(shè)計(jì)而是圖像或者位圖處理。隨時(shí)間推移以及界面設(shè)計(jì)的產(chǎn)生，設(shè)計(jì)師們?cè)俅问褂闷饋?。部分人是因?yàn)樗麄円郧熬陀貌⑶沂悄菚r(shí)僅有的能夠把事情做得足夠好的軟件。

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

因?yàn)樽畛跏腔谖粓D的，所以Photoshop十分依賴DPI，下面描述的是與之相反的Illustrator和Sketch。

Illustrator

Illustrator的矢量是基于同級(jí)的。顧名思義，它重點(diǎn)在插畫，但是也可以作為界面設(shè)計(jì)工具。

Illustrator也很適合平面設(shè)計(jì)，因此它的界面，顏色管理，縮放，標(biāo)尺和單位首先就吸引你，只需要一些補(bǔ)丁就會(huì)更便于使用。和Photoshop一樣，他也是一款很強(qiáng)大的工具，同時(shí)也需要付出努力去學(xué)習(xí)。

和Photoshop不同的是，它是獨(dú)立于DPI的，因?yàn)樗蕾囀噶繄D。與點(diǎn)陣圖或者光柵圖相反，圖像生成采用矢量圖，依靠數(shù)學(xué)公式計(jì)算，以編程方式重新調(diào)節(jié)大小并且不會(huì)損失圖片質(zhì)量。

了解柵格化和矢量化圖片的不同是建立可擴(kuò)展視覺設(shè)計(jì)和資源的關(guān)鍵。

如果你想學(xué)習(xí)使用Illustrator來進(jìn)行web/界面設(shè)計(jì)，推薦同學(xué)們學(xué)習(xí)：

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

Sketch 3.0

與Photoshop和Illustrator比起來，Sketch還很年輕。雖然只產(chǎn)生了四年，但它在UI設(shè)計(jì)行業(yè)里面引起了巨大的反響。因?yàn)閺囊婚_始，Sketch的目標(biāo)就是供界面和UX設(shè)計(jì)師使用，沒有Photoshop和Illustrator的歷史積累，Sketch把自己定位成針對(duì)小眾用戶——界面設(shè)計(jì)師的一款完美的調(diào)整工具。

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

但是也有不足的地方，Sketch是小團(tuán)隊(duì)開發(fā)的，而且出來得比較晚。盡管它的團(tuán)隊(duì)能夠積極響應(yīng)需求的變化，但是也沒有Adobe（Photoshop和Illustrator）公司這樣的規(guī)模。在位圖編輯時(shí)，Sketch只能滿足（設(shè)計(jì)時(shí)）最低的需求，但是Photoshop的功能就更加全面。同時(shí)，因?yàn)樗哪贻p，在源文件、教程和社區(qū)方面在數(shù)量上也遠(yuǎn)少于Photoshop，不過，社區(qū)用戶都很積極上進(jìn)。

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

靜電的Sketch教程合集：

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

附加：并沒有完美的工具但是有最適合你的。如果你有足夠的時(shí)間和錢，我建議你都試試，然后再?zèng)Q定。

文檔和資源

這篇指南只是一個(gè)介紹，真正開始做的時(shí)候能學(xué)到更多。如果你想要了解更多或者獲取我們討論的主題相關(guān)的更詳細(xì)的內(nèi)容，可以點(diǎn)擊下面的鏈接：

平臺(tái)文檔

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：作者自學(xué)成功的親身經(jīng)驗(yàn)，實(shí)用性高！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

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

Top 3：集合多位交互大牛的經(jīng)驗(yàn)合集！
《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》

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