Jon Moore

innovatemap资深设计合伙人 UX Power Tools联合创始人

-

我是个坚定的信仰者，所以在我们开始之前，我告诉你这个：这篇文章有一部分引用了我自己构建的设计框架，这份指南很有用。

开始设计项目是困难的。

无论你是在为热门产品工作的自由设计师，还是在一个大厂的设计团队干活儿的螺丝钉（开始新项目都是头疼的）。/吓哭了/

我在一家设计公司工作，每个月都签新客户。我的非官方头衔就像是【产品概念设计师】这基本就意味着每次我们要开始一个新客户，我都得到了令人兴奋的创造未来概念图的工作，可能在下一年（或者两年、三年）帮助启发他们的产品路线。

这些概念时间卡得都很紧，并且需要快速运转，所以我整个身心都围绕着效率和准确率; 我的展示图必须解决问题，提供全新的视角，并能优雅的平稳过渡到产品设计阶段。

至少我可以说，我已经变得非常高效，我想其他的设计师看到我如何开始一个新项目也许能发现些益处。

注意：我不会教你做/整道菜/…只是告诉你怎么切碎食材和如何点着炉子

目录 / 删减版

1.创建文件夹（嗯，真的？）

2.选择颜色

3.选择字体

4.配置网格

5.构建“块面框架”

6.做成高保真

1.创建文件夹

为什么：确保我的设计文件和导出资源有条理！

用到的工具： Finder + Automation

如果你开场没有走对，你就会在整条路上跑偏。我的文件夹结构帮我保持条理，并给了我与多方（市场，开发等等）共享设计资源的方法。

我添加了一个 _ 下划线，来确保这些文件夹都在列表的顶部。

· _assets：这个文件夹通常与内部/外部的开发团队共享。它包含了他们做APP会用到的所有东西.（占位图像/内容，字体，icons，图片和Logo）

·_exports：任何时候，我把界面导出的PNG都放在这个文件夹里。这个文件夹是与市场营销团队共享的，所以他们总是能获得最新的界面截图，放入各种营销材料（物料，网页，社交媒体）

·_ui-design：这些是我的源文件。通常只有一个文件，但是如果我创建的个新的，它们也会存在这里。

2.选择颜色

为什么：为我们的设计项目创建一个基本的设计色板。

用到的工具： coolors.co

选择颜色是我们最简单的开始方式。如果你是在一个现有的设计系统中工作，它们可能已经有了。如果是这种情况，去问市场营销或者做视觉设计师吧。

我的设计系统一般都建立5个主色:

· 主品牌色

· 黑色

· 色调1（成功）

· 色调2 （警告）

· 色调3 （危险）

为什么是这些颜色呢？（可以下面评论留言噢。）

我用了一个Fabrizio Bianchi 出的叫 COOLORS（扫描下图二维码）的APP来帮我建立色板。敲一下空格键，它就会帮你随机选些颜色。当你发现你喜欢的颜色，就把它锁住，然后继续创建颜色，直到你发现你的其他颜色。如果你已经确定了主品牌色，你可以把颜色的HEX色值输进去，把那个颜色锁住，然后敲空格来获得其他的颜色。

看见那个好看的”成功”色了吗？继续，知道你找全了5个主色。（看色板）

https://coolors.co/320d6d-ffbfb7-ffd447-700353-4c1c00

一旦我确定了我的主要颜色，我就把它们插入我的sketch设计模板文件中，这个模板文件的图层样式我已经做好了，所以我只需要更新一下我刚刚生成的颜色：

我的模板也有一套“辅助色”，但是我不经常需要它。

有关如何创建完整样式表的详细信息，戳这个：

https://medium.com/ux-power-tools/making-stylesheets-in-sketch-47ac1f274cdc#.gedd03w7u

用sketch建一套样式表可以方便快速管理，经常会遇到客户会说把他都做成蓝色的，但是 *三周后* 却说“不，不是那种蓝！！”

3.选择字体

为什么：让我的APP有些性格！

用到的工具： Google Fonts 和 Font Pair

对于设计字体与颜色一样重要，因此请花一些时间挑选一个正确的。因为你正在设计一个供人们使用的应用程序，所以选择一个好的字体是非常重要的。

嘿囧（john），在app设计中，一个好的字体是什么标准？

嘿，你能问我很高兴。我在选字体的时候经常自己问自己这些问题。

•识别性：这是可读性强吗？这会引起阅读疲劳么？

•可扩展性：当它过大或过小的时候还是可识别吗？

•多样性：是否至少有两个字重变化？

去年Google Fonts更新他们的界面，Google有四种颜色组合可以选择，交互操作更加舒服，因为我总喜欢白黑环境进行切换测试我选择的字体的易用性与可用性。

右侧面板中的设置是我喜欢的UI

如果你喜欢多字体样式，一个给标题，一个给内容——那你就得去挖一挖 Font Pair。他们为你做了辛苦的工作，并且展示给你看。在一行内，哪两个字体看起来就像彼此相邻一样（哪两个字体看起来就像青梅竹马一样）。它让选一对看起来很好的字体变得很简单。并且，它的所以字体都源于谷歌字体库，所以你不用担心需要支付任何东西。