IOS APP - 书目录

APP

APP是英文Application的简称,由于智能手机的流行,APP指智能手机的第三方应用程序。

APP设计工作流程

开始低保真

我总是从非Retina,1×文档大小开始,注意最小或最常见的目标。

对于iPad应用程序,它是1024×768。对于Android应用程序,这是常见的设备大小,以mdpi或dp(与密度无关的像素)为单位。对于Mac应用程序,它通常是1280×768(水平13英寸MacBook Pro分辨率和垂直11英寸MacBook Air分辨率的frankenstein组合,确保该应用程序适用于当前最小的Mac显示器)。对于iPhone应用程序,它是320×568或以下尺寸之一。

这样开始有很多原因。以相同的方式线框图有助于充实概念,以1×构建有助于充实视图和资产规模。这意味着你的界面中的每一件东西总是会被捕捉到像素网格的1倍大小,这有时是技术要求,但也是一个好主意 – 如果没有其他的话,这意味着你正在使用整个iOS点和macOS点。以1倍工作意味着无需记住将位置和大小以及图层样式设置为整数(0,2,4,6,8等)。速度非常快。Photoshop使用的内存要少得多,而且在1倍时速度更快。

尽管我拥有Retina MacBook Pro(我的大部分设计工作仍在非Retina Cinema Display上完成),但我没有看到我的战略即将改变。即使您认为您的资产的2倍和3倍版本更重要,但存在太多优势。

1×,2×和3×

然而,我并不是建议任何人只能在非Retina大小下工作 – 现在和未来都是高DPI,并且您很有可能会更关心更大的资产。我主张以多种尺寸工作,并根据需要在它们之间跳跃,这很容易通过我的Photoshop动作来实现文档缩放。但是,当我改变布局时,我通常工作在1倍。生活就这么简单。

如果您的文档以正确的方式构建,则您可以精确控制所有尺寸,而不会在切换时降级,并且可以随意切换。跳转到2×以处理某些按钮样式,然后跳回到1×以继续整体布局。再次修改为3×以编辑某些图层样式,然后再返回。一切文件。

有相当多的技术可以让元素在所有尺寸下都呈现清晰和精美的渲染效果。以下是我使用的一些方法。

边缘效应与渐变

如果可以,请使用渐变创建边缘效果。这样做意味着细节会自动添加。像上面提到的形状图层一样,可以在视网膜大小和非视网膜大小的一条像素线上构建具有尖锐和较亮的像素线的渐变。渐变非常强大,尤其是当您记住它们可以应用于形状图层,笔触和图层风格笔划时。

图层样式和轮廓

如果您更好地控制图层样式,轮廓可以提供帮助。外部发光对于在1倍时看起来像单个像素笔画的效果来说可能是理想的,但在2倍时更柔和的两个像素效果,以及3倍时更柔和。

0.5pt和分数笔划

或者,如果您在0.5pt的笔画之后显示为2倍的单像素笔触和1x的较软的单像素笔画,则矢量笔画可以是非整数值(图层样式笔画不能)。

在@ 3x显示器上定位单个像素笔触也可以做到这一点 – 0.33pt笔画可以放大到1px。

子像素轻推

启用Photoshop的像素捕捉可让您创建尖锐的对象。如果您想将某物移动到恰好半个像素,请禁用像素捕捉,缩放至200%并按箭头键轻推半个像素。这可以让您在非Retina尺寸下进行Retina分辨率更改。其他缩放级别可用于微调其他分数。这意味着您可以构建将呈现为2×大小的单像素100%不透明线的对象,但是1×大小的单像素50%不透明线将呈现。

面膜羽化

面膜羽化是软化形状层的好方法。几乎任何可以使用图层样式构建的任何东西都可以使用具有蒙版羽化的独立形状图层构建,但有时更精确,因为形状图层可以被非整数量偏移并包含非整数蒙版羽化。

尽管有一个巨大的警告 – 掩码羽化与文档不成比例,这就是为什么David Jensen创建了一些掩码羽化缩放脚本的原因,这些脚本在GitHub上作为免费Bjango Actions下载的一部分。如果您使用缩放文档操作在1倍和2倍之间跳转,则会自动缩放遮罩羽化(您需要安装David的脚本)。

如果您要创建可自由放大和缩小的文档,则位图图层和位图蒙版是不利的。大多数遮罩 – 即使是柔软的边缘 – 都可以使用形状图层,组和羽化遮罩来完成。在Photoshop中使用矢量进行遮挡非常强大。几乎任何你能想象得到的事情都是可能的,即使它构建起来有点麻烦。

纹理

通常有两种类型的纹理与我一起工作。我想要大尺寸的纹理和照片与文档一起缩放。构建这种类似的最好方法是以2×大小工作,然后将图层转换为智能对象。这样做意味着它将在2×尺寸下显示像素完美,并将位图缩小至1×尺寸。

小而细微的东西,比如噪音,我通常都希望两种尺寸都保持100%的比例。使用智能对象不会产生正确的行为,因为智能对象可以随文档一起缩放。对于这些类型的东西,我使用图案图层或图案图层样式。

但有一个问题 – 就像智能对象,图案与文档一起缩放。如果以2倍工作时以100%添加图案,则1倍模式位图会缩放至50%。这会将高质量的噪点纹理变成模糊的混乱。再次输入David Jensen和另一个脚本:将模式缩放到100%。此脚本也包含在Bjango操作下载中,并在使用我的缩放操作时自动应用。

实现想要扩展为智能对象的事物和不想缩放为模式的事物意味着文档缩放可以实现自动化。如果要定期在1×和2×之间切换,自动执行整个过程至关重要。

实时设备预览

如果我正在开发iOS或Android应用程序,那么我将使用我们的应用程序Skala Preview在整个过程中检查设计。它以1×或2×的分辨率工作 – 只需在预览区域双击即可在100%和200%之间变换,让您在任何尺寸的情况下都可以填满屏幕。如果您的模拟ups包含iPhone或iPad chrome(实际设备的图像作为边框),请用两根手指点击并保持居中,让您在设备上自己定位预览而不使用镀铬。请注意,这假定您已经设置了Photoshop文档,以便iPhone和iPad的镀铬物甚至位于顶部和底部,以及左侧和右侧。

我对Skala Preview的无耻插件表示歉意。尽管如此,我真的会迷失方向。另外,它是免费的,所以你不妨试试看。

使用切片工具导出

以下是你可能认为我疯了的部分。我在过去几年中所做的所有项目都以两套Photoshop文档结束 – 一套用于模型制作,另一套用作出口最终资产的切片。

以这种方式工作有几个好处。

在模型文档中,几乎所有内容都是合理的。我确定一切都命名良好,应用程序状态被分组,并且我尝试构建事情,以后我将需要它们,但偶尔的位图图层很好。有时位图图层可以更快地处理,让您更快地尝试不同的布局。

每个尺寸和方向我通常只有一个Photoshop文档。只有肖像的iPhone应用程序将被包含在一个PSD中,该应用程序状态使用组分隔。我不使用或者喜欢图层合成,因为我觉得它们非常脆弱(尽管Photoshop CC 2014 的确解决了我对层合成的许多抱怨)。使用组意味着复制许多项目,但我发现比所有替代方案更可行。如果您真的想跨多个群组保持同步,那么图层标签可能是一个不错的方法。这是一个有趣的想法,但我不经常使用它们。

我的出口单据是平面图,每个资产都设置为一个单独的切片。这让我清楚地看到和编辑导出边界,并使用片名称设置文件名。平面布局意味着在透明度明显的环境中工作,并且可以选择矢量点而不用担心在另一层上选择某些东西。

Finder中的QuickLook可用于在不打开PSD的情况下直观定位资产,即使在未安装Photoshop的计算机上也是如此。这在回到一个旧项目时非常方便。重复影响:只使用Finder,您可以在几秒钟内找到大项目中的任何资产,然后在Photoshop中打开它以显示文件名,编辑和重新导出。

由于切片图纸文档仅包含您在实际应用中需要的单个元素副本,因此它们很小并且很快就可以使用。真的,真的很快。

切片表的设置听起来很麻烦,但一旦你掌握了它,它们确实很快。正如你所期望的,我有一些行动来帮助这个过程(他们被包含在我的Bjango行动中)。

运行“ 显示最佳大小”操作会创建一个位图图层,显示当前选取框位图选择的最小可能资产大小。这是修剪多余填充的好方法。

运行“从层创建切片”将从当前选定的图层创建一个切片。就我而言,这通常是刚创建的图层显示最佳大小。

虽然我并不总是希望获得最小的文件尺寸 – 我发现手动控制此过程非常重要,因为我经常希望允许一些备用像素在稍后的日期让我改变设计,或者表示更大的水龙头大小(一点空格通常不会对文件大小或使用的内存造成显着差异)。

制作切片选择,也包含在Bjango动作中,是创建切片的另一种快速方法。我不知道为什么,但我发现选取框选择工具比切片工具本身更容易使用。

切片也可以保存在文档中,但是如果不再需要资产,但您不想删除它,则设置为不导出。

在设置切片图纸后,使用Save For Web将所有切片导出为图像。仅仅导出一组图像是不够的 – 我们需要1×,2×和3×的大小,并且我们需要2×和3×文件名具有@ 2x或@ 3x后缀。输入Hazel。

使用Hazel进行移动和重命名

Hazel是自动文件组织的工具。它可以重命名放置在特定文件夹中的文件,然后将它们移动到其他位置。完善。

通过设置切片文档,我运行一个执行以下操作的操作:

  • 将所有切片保存为Web到已知位置,称为“导出”的文件夹。
  • 将文档缩放200%。
  • 使用脚本将所有蒙版羽化缩放200%。
  • 使用脚本将所有模式缩放到100%。
  • 将所有切片保存为Web到已知位置,称为“Auto @ 2x”的文件夹。

这导致1×资产被放置在导出文件夹中,2×资产被放置在Auto @ 2x文件夹中。Hazel观看Auto @ 2x文件夹中的新文件,将@ 2x添加到它们的文件名中,然后将它们移动到导出文件夹。我有一个类似的@ 3x重命名和移动设置。

整个过程的视频。由于屏幕录像机的运行速度较慢。但是,即使全速运行,这两个脚本(缩放模式为100%,缩放遮罩羽化为200%)也需要一段时间才能逐步完成每个图层。

Android,Windows和资产子文件夹

Matt的工作流程非常类似于我的工作流程,这并不奇怪,因为我们经常聊这些事情。他正在开发Android应用程序,并需要调整工作流程 – Android 为不同的资产大小使用子文件夹(drawable-hdpi,drawable-xhdpi等),而不是文件后缀。Save For Web将所有图像导出到一个文件夹,因此我们需要找到一种方法来自动执行Android子文件夹的过程。

我们提出的解决方案是为片名添加哈希值 – 通过用字符命名片来分离文件夹和文件名,可以让Hazel在导出后组织所有内容。

同样的解决方案适用于Windows 8,Windows 8也使用子文件夹为不同的像素密度分隔资产。

Hazel规则可作为Bjango行动的一部分。

快速迭代

自动导出应该可以节省您的整体时间,即使最初需要一些适当的设置。然而,它的真正实力来自可重复和可预测的。由于以这种方式工作,我们通常在构建应用程序时重新导出全套图像资产30次或更多次。我们以对待图片导出的方式处理点击Xcode中的构建 – 进行一些更改,构建资源,并在操作中查看它们。

我简直无法低估这对我们有多大帮助,特别是与GitHub结合使用时。它使我们的设计过程与大多数开发人员的编码过程非常相似。这也意味着如果我们能够确定大小,我们就可以使用粗略的图像资源,它们可以添加到应用程序中,然后我可以随着时间的推移改进和重新导出,这意味着代码和设计可以并行进行。

这确实给设计带来了一些额外的压力 – 所有图像名称都必须完全如何显示在应用程序中,所以我们有一个相当严格的命名约定,如果图像需要重命名,必须在切片。抵制在Finder中重命名文件的冲动,因为您稍后会付钱。

不同步

精明的读者会注意到我的模型和导出文件不同步的可能性。没关系。一旦模型完成,真正的应用程序正在构建,它们不会代表最新的变化。模型只是最终产品的垫脚石。这是出口文件需要原始的,最新的和组织良好的,因为它们是将来改变的地方。

IOS APP色彩管理

介绍IOS APP色彩搭配的建议