像开发人员一样做设计

微交互 · 公众号 · 设计 · 2017-04-21 09:50

正文

原文地址： Design like a Developer

原文作者： Chris Basha

译文出自：掘金翻译计划

译者： Airmacho

校对者： skyar2009 ， sqrthree

Westworld, HBO

Xcode、Sketch 和 Android Studio（和一些闪电符号）

没关系，这篇文章就是介绍一种设计方法，它更接近开发人员构建你的设计时的方式（好拗口）。

像开发人员一样设计，最重要的指导原则就是根据视图来思考你的设计。将 View 视为独立的一组元素，它们已定义了边界，并按照层次排好顺序了。

例如，在我们的 Nimber 安卓应用中，将搜索结果页分成两个主要视图：由操作栏和包含了用户位置输入及筛选卡片组成的顶部视图，返回搜索结果的列表视图。

在上面的线框图和结构图中，你可以看到视图的边界是如何在设计中被清晰定义的。 Sketch 文件中有一些不可见的图层（透明度为0%），这在交给开发人员时非常有用。

看下面操作栏是如何被分解成更小的视图的。

视图层级的最顶层

操作栏视图

100% 透明度时的操作视图元素

确保不要随机把图层分类。以清晰的方式定义它们的尺寸和间距（避免奇数），并按层级顺序排序。

同样的原则也适用于图层的样式，当你需要统一的边框、圆角、阴影时，也可以这样做。

这个叫 Zeplin 的应用非常有用。简单说：你可以在应用中引入你的设计，应用会以一个开发人员使用的方式，抽取所有视图的尺寸、文本大小、颜色等。这是一个可以填补设计和开发差异的很棒的工具，我迫不及待地想看到它后续功能。

当你交付设计后，开发人员可以在 Zeplin 中提取某个元素的尺寸、边距、留白等信息，再在 IDE 中创建相应的视图。

开发人员最常用的命名是 Primary, Secondary, Accent, Enabled, Disabled 等。你可以按同样规则命名。 Primary 和 Secondary 可以是你的文本颜色， Accent 可以是你的品牌主色调，你懂的。

在 Sketch 里，你可以用颜色拾取器来保存这些颜色，但就我所知，没有什么可以在 Sketch 文件之外共享它们的好办法。然而你可以用你的调色板的颜色、它们的名字和 hex 码创建一个画板。这样当开发人员用 Zeplin 打开你的设计时，就能快速提取出这些颜色，在应用的代码中使用它们。

Nimber 应用中我们用到的颜色。

Sketch Constraints 这样的插件来处理这个问题。用这个工具，你可以复制画板，重新调整它们的尺寸，然后刷新画板。神奇的事发生了， UI 会根据屏幕尺寸变化而变化。

“正确”的方式是为手机屏幕（7 英寸以下）、7 英寸的平板、10 英寸的平板电脑各设计一套 UI。Master-Detail Flow 是一种将列表和详情面板组合在一起复杂的布局，如下图所示：

Oh, you wanna know what this is? Well you’re in luck!