使用 sketch 做 App 设计的步骤详解
启动设计项目是件难事
无论你是自由职业设计师、外包公司或者是大公司设计团队，设计项目的启动都是让人心生畏惧的事情。
我在一个每个月都有大量签约客户的外包团队。我的非官方头衔是产品概念设计师（Product Concept Designer），我的职责就是让那些令人兴奋的创意点可视化的展现在客户的屏幕上，从而激发他们思考出明年、后年或者大后年的产品迭代路径。
这就意味着每个项目的时间都非常有限，同时要就能够快速复盘，所以我的整个世界都是围绕着高效和准确；mockups能够帮助解决一部分问题、提供视觉冲击力，同时也可以被打磨成产品设计。
据我所知，我已经相当高效啦，所以，我认为其他的设计师或许能有从我是如何启动新项目中获得启发。
几个步骤表单／缩略版
1.创建文件夹
2.吸取颜色
3.选择字体
4.设定网格
5.建立框架
6.制作高保真
1.创建文件夹
为什么： 保证你的设计文档规整
所用工具：Finder
如果第一步没做对的话，整个项目都会问题重重。我组织文件的结构能够保证项目的便于跟团队其他部门对接工作
我在命名文件时加了_保证这些文件夹始终在列表的上面
_assets: 这个文件夹是与内外部的开发团队共享的。其中包含了开发App所用到的一切资源（比如展位图片和内容，字体，icon，图片和logo等）
_exports： 任何时候我导出的PNG都放在这个文件夹里。这是跟市场部共享的，从而保证他们总能拿到各种销售物料，方便工作的进展。
ui-design： 这里都是我的源文件。通常这个只有一份，但是如果有新的版本，我也会把之前的保存在这个文件夹里。
我创建了个自动动作帮助我创建所有文件夹
你可以从这里得到这个动作……（歪果仁会玩）
https://gumroad.com/uxpowertools
2. 选取颜色
为什么： 为我的设计项目设计一个基础样式
所用工具：Coolors.co
吸取颜色是最简单的开始方式。如果你正在从事已经开始的设计系统，颜色肯定早已被设定了，这这种情况下问下marketing的同时或者是视觉负责人。
通常我的项目设定5个主色：
品牌主色
黑色
成功色
警示色
危险色
[为什么是这几个颜色？](https://medium.com/ux-power-tools/5-things-to-do-before-you-start-your-next-design-file-in-sketch-or-preparing-your-design-mise-en-ff7ea9fe3722# .wy4j5viqp)
我是用Fabrizio Bianchi设计的Coolors帮助我制作调色板。你只需点击空格键，他就能为你随机选色。当你找到自己喜欢的颜色，锁定她，然后继续寻找其他你想要的颜色。如果你们的品牌色早已经被设定了，你可以输入十六进制的数值，锁定这个颜色，然后按空格键选择其他颜色。
一旦，我确定每一个主色，我会把他们导入sketch的模版文件里。这些模版文件的样式已经被自定义啦。所以我只需要把他们更新为我刚选的颜色就可以啦。
3.选择字体
为什么：定义app里字体
所用工具： Google Fonts 和 Font Pair
对设计而言，字体跟颜色一样重要，一定要花点时间仔细选择一种或集中。因为你设计的app是给人用的，所以选择一款好的字体是非常重要的事情。
那么什么才是app设计中好的字体呢？
以下是我选择字体的几个原则：
可读性 ：是否是长时间阅读？
可伸缩性 ：放大和缩小后是否还可读？
多样性 ：是否具有至少两种字重？
Google Fonts 去年升级了他的字体库，现在它好用极了。我常会通过黑白背景测试，确保任何时候文字都具有良好的可读性。
如果你喜欢多样的字体，一种用在标题，一种用在内容，你可以试试Font Pair 。他们真的为了帮你选择合适的字体下了很大的功夫。所挑选的文字看起来搭配的很和谐。另外，这些字体都来自Google Fonts，所以全部都是免费的。
但是一定要测试文字的字母、数字以及标点符号。有时你会发现，一款漂亮文字的“9”看起来很诡异，或者感叹号的点很奇怪。当你已经设计了24平的时候，你不想碰到这样的怪异情况的。
你一旦选定了字体，在sketch里创建文本样式，比如说标题、内容和连接的文字样式。你永远都不需要在设计某个文本框，除非它跟某个文字样式关联，当你更新某些文本样式时，其余使用相同样式的文本也可以同步更新。
我的sketch模版文件已经标准化所有默认文本的尺寸，所以我能全选他们然后所有的样式都会发生相应的改变。
4.设定网格
为什么 ：保证整个app的全局对齐
所用工具 ：sketch和计算器
相对常见的建立8像素网格。
为啥是8？
众所周知，大多数主流屏幕是可以被8整除的。所以在底层，这些测试数值其实在宽度和高度上都可以被8整除。
https://spec.fm/specifics/8-pt-grid
根据这些信息，你可以确定网格的尺寸。首先定下你的app的展示效果：
固定屏幕： 全屏宽度是指app的一个边缘到另外一个边缘。如果是web应用，你的设计应该能够被拉伸到浏览器的宽度。
自适应 ：这类app会在屏幕中心有个固定的网格宽度。
对于自适应app，我希望宽度和间隙都能被8整除。所以这里有个简单公式：
(12 columns Width) + (11 Gutters Width) = Total Layout Width
混合app： 这种app又有全屏款的元素又有自适应的元素。Medium网站就是个混合应用。因为在标题文字上是全屏宽度，但是内容文字是固定740px的宽度的。
在sketch里shift+→是移动10像素，当你设定的是8像素基准时，工作时你会特别困扰。这里的Nudg.it会帮你解决这个问题。
5.构建框架
为什么 ：快速生成app布局和UX交互流程
所用工具 ：矩形
在设计线框图之前，我习惯创建框架，建立多样的页面布局。这个建立在你定义了网格的基础上，快速圈除页面中最重要的部分。
这就是我曾经给即时通讯设计的框架：
这个操作只花费了90秒，但是这是我开始设计界面的知道。我更喜欢全局线框，因为当我尝试将屏幕上的元素全部线框化的时候，我更倾向于做高保真。或许，我不是个好设计师？我也看过很多将细节做的很逼真的线框图，但是这个我的意见而已。
在UX阶段作出app工作流的框架，确保每个交互都能基于用户正向的反馈。
- 制作 高保真
我不想跟你展示的过程是下面酱紫～
但，遵循下面的原则你就能创造奇迹～
做高保真的诀窍就是把上面的1-5件事儿做好：
1.把正确的内容保存到正确的文件里；
2.只是用你调色板里的颜色；
3.不要背离文本样式；
4. 贴合网格；
5.在做高保真前重新布局框架。
总结：
这些就是我开始一个新项目的步骤。如果你对我在所有的Sketch模版感到好奇，可以从下面的链接中下载。More details available here.
作者 Doria2016
关键字：产品经理, 产品设计
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
