设计行业一定要了解的DPI知识（四）

fang139842

Mac、Chrome OS上的PPI

Mac（OSX）和Chrome OS在处置PPI方面长短常相似的。 两个OS都支撑惯例的PPI（100%）和hi-res/retina PPI(200%)。像iPhone和iPad，就只要2x像素比。

纵然大多数的用户都利用Mac和Chrome OS，然则也有效户会在低分辨率的装备上利用，我激烈倡议将你的app面向将来的高端屏幕。面向将来对付ChromeOS意味着为Web-app或许网站 创立hi-res资本，那绝不是挥霍光阴。当前有3种笔记本处置PPI，13寸、15寸Macbook pro和Chromebook Pixel。除此之外，Chromebook Pixel还处置了touch。

引入资本，chrome为例

Chrome的对象栏按钮资本便是相似性最佳的例子。咱们在两个平台上利用完整雷同按钮，纵然代码分歧，视觉上也是异样的。看下面这个chrome菜单按钮的例子。

附加:

• Chrome OS和OSX像素比雷同，都是2.
• Chrome OS高分辨率展现也处置touch。
  

可拉伸资本

不论你的app是在桌面或许手机上。你平日都邑引入可拉伸资本。

可拉伸资本的树立会使代码在没有削减衬着的情况下比实际需要的多。

他们与可反复资本纵然有的时刻展现成果异样，工作方法也是分歧的。

看看下面这个Chrome的例子。iOS上的对象栏在全部屏幕上只用了一个在x轴上平铺的超细资本。

现在这类方法曾经过期了，让咱们来看看分歧平台若何处置可拉伸资本。

iOS上的可拉伸资本

对iOS的计划师来说这个很简略，因为拉伸在代码外面界说比资本片断或许标志方法好。统统需要做的便是供给一个根基图片，如果你自己还没有完成这个，可以或许将你的资本尺度界说为水平或许竖直可扩展，或许二者都可。看看下面这个iOS上Chrome的默许按钮的例子。

Android上的可拉伸资本

Android有和iOS不异样的处置可拉伸资本的方法，它更依附计划师一点。

在这个平台你将采纳九宫格，这些辅助线包含了4条环抱资本自己的线。他们必需被看成资本的一部门来通报片断/图片，用它来准确的出现视觉规格。

他们界说了两个地区：可拉伸地区和添补地区。一旦界说好，代码就只会拉伸可拉伸地区，并把内容放在你界说的添补地区。

看看下面的例子，便是你后面看到的Chrome默许按钮的Android版本。为了演示，我把他缩小了。

如你所见，这个九宫格是一组4条纯赤色的bar。他们在任何DPI下都是宽1px，这是代码表现的。可拉伸地区不包含圆角因为圆角不克不及平放开（不然 看起来很丢脸）。在这个例子中，咱们给按钮增长了规格容许范围内10dp的padding。.9也需要平铺并且截断部门要100%通明。如果不如许，他就 不克不及失常工作，需要改动。

利用九宫格哀求在称号后面加之.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），物理尺寸也愈来愈大了。

本文源自其他网络，本站编辑

您还能继续浏览本站其他文章：

颜色搭配七大定律    黄金比例技巧之斐波那契螺旋线    设计三大构成之线条风