基础知识！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上的应用，编码使触摸目标呈蓝色。

如你所见，两个平台上工具栏都是被推荐的触摸目标的高度。可视范围在iOS和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