基礎(chǔ)知識！DPI指南(3)

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

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

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

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

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

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

Touch和觸摸目標(biāo)

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

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

臺式機, 非觸屏

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

請看下面圖解。

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

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

手指大小

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

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

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

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

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

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

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

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

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

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

Chrome為例

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

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

Windows 8以及Chrome OS

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

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

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

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

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

附加:

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

設(shè)計軟件

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

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

Photoshop

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

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

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

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

Illustrator

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

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

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

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

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

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

Sketch 3.0

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

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

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

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

靜電的Sketch教程合集：

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

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

文檔和資源

這篇指南只是一個介紹，真正開始做的時候能學(xué)到更多。如果你想要了解更多或者獲取我們討論的主題相關(guān)的更詳細(xì)的內(nè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)驗，實用性高！
《超贊！設(shè)計師完全自學(xué)指南》

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

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

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