APP设计规范

下面是一个应用示例：Mac Cinema Display 27“的PPI为109，这意味着它显示每英寸屏幕109像素。斜角宽度为25.7英寸。实际屏幕的宽度约为23.5英寸，因此如果我们将这些值应用于上述公式，我们就可以理解它们如何协同工作。

正如您在我的解释中可能已经注意到的那样，“分辨率”代表PPI，在这种情况下为“109”而不是“2560×1440”，就像您可能在 络上随处可见。

“2560×1440”是像素数，在第一段中称为“像素屏幕尺寸”。
Pixel屏幕尺寸本身并不能提供有关屏幕锐度的任何信息。您可以使用1920 * 1080px或5英寸手机制作40英寸电视机。了解其分辨率的唯一方法是将像素计数与设备物理尺寸配对，并且该测量值是PPI。

外卖：
像素本身没有尺寸或物理表现，它只能通过与屏幕物理尺寸的关系来携带价值，创造分辨率或PPI。了解这一点，屏幕密度对你来说毫无秘密。

对您的设计的影响

假设您在我们刚刚谈到的屏幕上设计了一个109 * 109px的蓝色方块，其分辨率为109PPI，屏幕像素大小为2560×1440，物理宽度为23.5“。由于其大小与监视器显示的每英寸像素数完全匹配，因此正方形的宽度为1“，高度为1”。

现在使用相同的23.5英寸屏幕，分辨率减小33％，72PPI。在这种情况下，相同的蓝色方块将大33％，因为显示在相同的物理尺寸上。

我实际上是因为在这种情况下它会是。屏幕的最佳像素屏幕尺寸为2560 * 1440px。如果它下降，像素仍然在这里，显示在109PPI。你的操作系统将填补“差距”的作用是伸展一切。您的GPU / CPU将采用每个像素并使用新比率计算它们。

如果你希望27英寸的像素数为1280 * 720（宽度的一半，高度的一半），那么你的GPU必须模拟一个两倍大的像素来填充屏幕。结果如何是吗，模糊。虽然一半的比例因为简单的分频器看起来还算不错，但如果要求1/3或3/4的比例，那么你最终会得到十进制数，你就不能划分一个像素见下面的例子。

这就是为什么如果你有一个Retina Macbook Pro并希望改变你的分辨率，它会显示下面的窗口，让你知道（在下面的截图中）这个分辨率将“看起来像”1280 * 800px。它使用用户的分辨率体验来表示大小比例。

如果我将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屏幕上的动画会显得更加流畅。

繁荣！完全两次。一个简单的乘数。因此，屏幕上的元素不是更小，而是视觉清晰度的两倍，因为它们具有两倍的像素并且具有完全相同的物理尺寸。单个1个正常像素= 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％非视 膜比率作为一切的基础。

在2014年9月Apple Keynote上宣布，您现在有2个新类别的iPhone：iPhone 6和iPhone 6 Plus。

iPhone 6略大于5（0.7“以上），但带有相同的PPI。另一方面，iPhone 6 Plus为iOS推出全新的倍增器，由于它的尺寸为5.5英寸，因此为3倍。

设备像素数比渲染分辨率小15％，它会产生一些毛刺，例如半像素，使非常精细的细节有点模糊。分辨率如此之高，但它会非常微妙，除非你仔细观察。因此，在2208 * 1242px画布上进行设计，并注意设计中非常精细的部分，例如超级分隔符。查看下面发生的事情的模拟：

如您所见，我们每次需要为每个资产提供两个图像。非视 膜图像称为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联系起来，将所有内容都放在一起。

如您所见，资产被削减为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 OS和OSX使用相同的乘数，2。
– 唯一的Chrome OS高分辨率显示器也可以处理触摸。

可拉伸资产

您的应用是在桌面还是移动设备上。你几乎总是需要可伸缩的资产。

设置了一个可伸缩的资源，因此代码可以在不降低渲染性的情况下使其尽可能大。

它们与可重复资产不同，即使有时显示相同的结果，它们的工作方式也不同。

请参阅下面的Chrome示例。iOS上的工具栏仅使用一个超薄资产生成，该资产在整个屏幕上的X轴上重复。

Android上的可扩展资产

Android有一种不同于iOS的可伸缩资产的方式。它更依赖于设计师。

对于此平台，您将使用9补丁指南。这些指南由资产本身周围的4条线组成。它们必须在切片/图像中传递，就像它是视觉本身的一部分一样，从字面上直观地显示其中的规格。 

它们定义了两个东西：可缩放区域和填充区域。一旦定义了这些代码，代码将只能扩展您定义的内容并将内容放在您定义的位置。

请参阅下面的示例，它是您之前看到的默认Chrome按钮的Android版本。为了演示，我把它做得更大了。

使用9-patch要求您在名称后附加.9，就像为iOS资产添加@ 2x一样。重新下面的按钮资产示例：

请注意，9贴片标记与您的设计不重叠，并且资产的切割是正确的。.9应尽可能靠近资产而不重叠，尽量不要内置填充。之前的示例由于阴影而具有内置填充。

9补丁不会取代在每个DPI中导出您的资产。需要为每个版本的资产完成。

最后，.9可以有多个可伸缩区域（顶部和左侧）。这不是我经常遇到的事情，如果不是我的工作流程，但值得一提。

摘要：
总是要求实施您设计的人采用什么是最佳解决方案，尤其是桌面设备。您拥有的图像越多，应用程序就越重，您将越来越难以跟踪和更新资产。只有良好的命名和良好的资源组织才能使用9补丁。

矢量资产

随着使用更大范围的DPI配置的屏幕范围增加，切换到矢量资产而不是位图是绝对值得考虑的选项。

使用矢量图像的主要好处是可扩展性。无需为所有各种PPI桶创建位图，矢量将根据屏幕倍增器自动缩放。

这是Chrome OS游标的20倍版本。
红色将其分区为触发UI上的操作的实际区域。非常精确。
你知道我正在前进。什么不是很精确的手指。

那么你如何设计触控把一切都做大了。

手指大小

这是用于UI交互的两个最常用手指的平均大小，指针和拇指。它代表触摸区和手指遮挡的区域。实际的触摸区域（即手指与屏幕接触的部分）当然会更小，更精确，除非你真的用手指敲击屏幕。 

在设计触摸时，高估触摸目标所需的尺寸比低估它们更安全。

正如您所看到的，每个操作系统都有自己的一系列建议，但它们都在48pt左右。Windows在其规格中包含填充，这就是我在这里添加它的原因。

这些尺寸的差异来自不同的因素。
Apple控制其硬件，以便他们了解触摸屏的质量并控制精确的比例。他们可以依靠较小的触摸目标。另外，他们的硬件往往体积更小。

另一方面，Android和Windows拥有不同的OEM，每个都在建立自己的硬件，拥有更大的触摸目标使它们“更安全”。他们的UI也更加分散（特别是窗户），他们的设备往往体积更大。

例

以下是Safari在iOs上应用触摸目标以及Chrome如何在Android上应用触摸目标的示例。

Photoshop中

界面设计工具的母亲。可能是今天最常用的工具。有无数的资源，教程和文章。自从界面设计开始以来，Photoshop就已存在。

顾名思义，该程序的首要目的不是界面设计，而是照片或位图修饰。它在过去一年中不断发展，随着界面设计的诞生，设计师们将其占用并重新定位。部分原因是因为他们习惯了它，因为它是唯一能够做到所需的事情的程序。

因为它基于位图，它只提供像素预览，这意味着预览将与您的显示器像素匹配，而与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/

FIGMA

作为2015年年底的新人，Figma是一款基于浏览器（Chrome最具体）和基于矢量的设计工具。可以将其视为云中的Sketch，具有团队协作功能和Slack集成。令人印象深刻的工程技术，为设计工具的未来铺平了道路。

Figma的官方 站：https：//www.figma.com/

外卖：
没有完美的工具可供您使用，但您可以轻松使用。如果你有足够的时间来赚钱，我建议你尝试一下来制定自己的意见。

文件和资源

本指南只是一个介绍，时间开始做和了解更多。以下是一些链接，如果您想了解更多或只是获取有关我们在此讨论的主题的更多详细信息：

 

相关资源：Wikka高速可伸缩性软件v1.3.1-其它代码类资源-CSDN文库