设计教程 ·

用sketch进行app界面设计的步骤教程

所谓万事开头难,启动设计项目也是件难事。无论你是自由职业设计师、外包公司或者是大公司设计团队,设计项目的启动都是让人心生畏惧的事情。

作者Jon Moore在一个每个月都有大量签约客户的外包团队,头衔是产品概念设计师(Product Concept Designer),职责就是让那些令人兴奋的创意点可视化的展现在客户的屏幕上,从而激发他们思考出明年、后年或者大后年的产品迭代路径。

这就意味着每个项目的时间都非常有限,同时要就能够快速复盘,所以整个世界都是围绕着高效和准确。所以,我们准备从高效的Jon Moore身上学习如何启动新项目,希望大家能从中获得启发。

1.创建文件夹

为什么:保证你的设计文档规整

所用工具:Finder

如果第一步没做对的话,整个项目都会问题重重。我组织文件的结构能够保证项目的便于跟团队其他部门对接工作。

我在命名文件时加了_保证这些文件夹始终在列表的上面

_assets: 这个文件夹是与内外部的开发团队共享的。其中包含了开发App所用到的一切资源(比如展位图片和内容,字体,icon,图片和logo等)

_exports:任何时候我导出的PNG都放在这个文件夹里。这是跟市场部共享的,从而保证他们总能拿到各种销售物料,方便工作的进展。

ui-design:这里都是我的源文件。通常这个只有一份,但是如果有新的版本,我也会把之前的保存在这个文件夹里。

我创建了个自动动作帮助我创建所有文件夹。

你可以从这里得到这个动作。(链接:https://pan.baidu.com/s/12oET-vVSQf7-9nWFoSNgpA 密码:h3hl)

2. 选取颜色

为什么:为我的设计项目设计一个基础样式

所用工具:Coolors.co

吸取颜色是最简单的开始方式。如果你正在从事已经开始的设计系统,颜色肯定早已被设定了,这这种情况下问下市场方面的同事或者是视觉负责人。

通常我的项目设定5个主色:

品牌主色

黑色

成功色

警示色

危险色

我是用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整除。

根据这些信息,你可以确定网格的尺寸。首先定下你的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工作流的框架,确保每个交互都能基于用户正向的反馈。

6.制作高保真

我不想跟你展示的过程是下面酱紫~

但,遵循下面的原则你就能创造奇迹~做高保真的诀窍就是把下面的1-5件事儿做好:

1.把正确的内容保存到正确的文件里;

2.只是用你调色板里的颜色;

3.不要背离文本样式;

4. 贴合网格;

5.在做高保真前重新布局框架。

 

 

原文链接:https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8

参与评论