手把手教你如何用sketch开始App设计

开始一个项目确实挺难的。 无论你是一个自由职业者,还是在一个热门的产品设计公司,新的开始总是有些麻烦。 我在一个设计公司里,基本上每个月都要有新的客户。我的非官 […]

2017年3月13日

开始一个项目确实挺难的。

无论你是一个自由职业者,还是在一个热门的产品设计公司,新的开始总是有些麻烦。

我在一个设计公司里,基本上每个月都要有新的客户。我的非官方的职位是“产品概念设计师”( Product Concept Designer),大体指的是每次有新客户,我都要帮他们设计规划未来几年的产品路线图。

这些设计都有着严格的截止日期,并且需要准备好回炉重做,所以我所有的工作都是围绕着效率和准确。我的mockup需要解决问题、提供远见,还得平滑的过渡到产品设计中。

正如我说的那样,我变得越来越有效率,所以我想,可能其他的设计师们也许能够从我如何创建一个新项目当中发现一些有益的东西。

注意,我并不想展示怎样完整的做一桌子菜出来,只是演示一下怎样切切菜,怎样开开炉子。👨🏼‍🍳👩🏾‍🍳

内容目录(也许有些内容你可能想略过去)

  1. 建新文件夹
  2. 选择颜色
  3. 选择字体
  4. 规划网格
  5. 建立框架
  6. 转化为高保真

1.建新文件夹

Why:保证我的设计文件组织有序
Tools:Finder + Automation 

千里之行始于足下。我的文件夹结构帮助我条理清楚,分享文件的时候也极有效率。

我在文件夹名字前面加上 _ 让他们处于列表的上面

  • _assets: 这个文件夹通常是和内部或外部的团队人员分享用的。它包含了所有app需要的东西,包括概念图(dummy)、字体(fonts)、图标(icons)、图片(images)和标志(logos)。
  • _exports: 我每次输出一个PNG的时候,都把它放在这里。这个文件夹实时更新并且分享给市场组的小伙伴们,这样当他们做营销材料比如手册、网页和社交网络的时候就能用到。
  • ui-design:  这里是我的源文件。虽然一般情况下只有一个文件,但是还是给了它一个文件夹。

用 Automator 自动创建系列文件夹。(译者:你可以从 这里 下载个试试)

用 Automator 自动创建系列文件夹

2.选择颜色

Why:为项目建立一个基础的色板
Tools:Coolors.co 

如果你是为已有的设计系统,比如现有的品牌或app,可能他们已经有自己的颜色系统,只要根据它规定的使用就可以了。如果不是,那么只需要考虑挑选5种基础色就好了:

  • 主形象色
  • 黑色
  • 强调色(成功)
  • 强调色(警告)
  • 强调色(危险)

使用 Coolors.co  可以非常方便的设定这套颜色系统。按下空格键,它会给你随机制定一个颜色,看中了一个颜色就锁上它,然后继续选择下一个颜色。你也可以自己输入颜色值再进行匹配。

看到了合适的颜色就锁上,再挑选第二个。直到你设定好五个颜色。

一旦我设定好我的颜色系统,我会把它拖到Sketch模板文件里。vee模板有设定好的样式,我只要把颜色改好就可以了。

模板里有个备用颜色,但是并不是总能用得到。

3.制定字体

Why:让app更有个性!
Tools:Google Fonts 和 Font Pair(译者:中文就没有了,况且Google fonts咱们也用不了啊)

字体和颜色一样重要,所以要花时间好好挑一挑。字体的使用有一些小技巧:

  • 可读性 Readability: 长时间阅读适不适合呢?
  • 可扩展性 Scalability: 字体大一点、小一点是不是都能正常阅读呢?
  • 可变性 Variability: 是不是有至少两种字重(font weight)呢?

Google Fonts 去年更新后界面很惊艳。通常我都会用黑、白色背景来检查字体是否工作正常。

右边的设置展示了我是如何挑选字体的。

如果你喜欢用多种字体,比如标题和内文分别用不同的字体——那么你可以试试 Font Pair  。这个网站可以给你演示多个字体在一起的样子,它的字体都来自于Google Fonts,所以你不需要花一毛钱。

要使用字母、数字以及标点符号来测试字体。有时你发现了一个漂亮的字体但是可能有一个诡异的 9 或者 难看的 感叹号。你不会想做了24个屏幕的UI之后再偶然发现这个问题。

一旦你选好了字体就在Sketch里设定好样式,比如标题、内文以及链接等。永远不要在设计中使用没有设定样式的文字。如果你大量使用了这些文字,就没办法后期修改的时候进行同步了。

我的模板里制定了所有标准字体的尺寸。

4. 设定网格

Why: 建立整个app的标准版式
Tools: Sketch 和一个计算器

现在以 8 为基数的网格越来越普遍了。为什么是 8 呢?

详细请查阅:https://spec.fm/specifics/8-pt-grid

在这个情况下,你可以决定你的网格的尺寸了。首先确定你的app是如何显示的:

  • 全宽(full width):全宽app是从左到右。如果是个网页,你的设计会展开到浏览器的两边。

我喜欢将 gutters 至少设定为 24px.这样gutters 就可以被 8  整除。虽然columns 就不行了,不过也没什么大问题。

  • 浮动(Floating):浮动的话有个固定的宽度,通常在窗口的中间。

这种形式下我会让 Gutters 和 columns 都能被 8 整除。这里有个简单的公式:

(12 columns * 宽) + (11 Gutters * 宽) = 整布局宽度

  • 混合式:混合式app既有全宽又有浮动的元素,比如Medium网站就是,标题头部是全宽的,但是内容却限制在740px。

最后一点。Sketch默认的 Shift+→  是跳10px,在我们的设定情况下非常烦人。幸好有 nudg.it 可以帮我们解决这个问题。

5.建立框架

Why: 在app布局和UX交互流程上快速迭代
Tools: 嗯……矩形工具。

在进入框架图模式之前,我先会做一个框架(blockframe)来规划页面的布局。这里是要感受下你设定好的网格,并且快速规划好页面中重要的区域。

下面是我当前一个工作的框架。

颜色本身没有任何的意义。

这个图90秒就画好了,但是却给我后面的设计做好了规划。我喜欢这样简单的框架,因为如果要把所有的元素都放进来的时候不知不觉就画成了高保真图。也有可能我并不是个好设计师吧,因为我发现有一些设计师框架图都画的都很细致。这只是我自己的观点啦。

 

6.转化为高保真图。

虽然我并不想这样:

但是这才是要展现你自己本事的地方,不是么?

在画高保真设计图的阶段,唯一一个重要的事情是要遵循上面我们提到的5个步骤:

  • 把文件存到合适的文件夹里
  • 只用你设定好的颜色
  • 字体上面别跑偏了
  • 永远遵循网格的设定
  • 在高保真图之前先画框架图

总结

以上就是我是如何开始一个新app的设计的。如果你对我的Sketch模板感兴趣,可以从 这里 找到。

 

 

via:https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8#.shms3vfae
written by:Jon Moore
translated by: IXD

 

ixd

山工艺交互设计工作室。本专业培养学生具备敏锐的洞察能力,能够发掘用户及市场的需求;严谨的调查分析能力,能够通过社会调查方法分析数字产品的用户体验及市场表现状况;优秀的设计能力,能够把握当前界面、交互设计的潮流,掌握交互设计的艺术及技术能力;良好的沟通协作能力,能够和市场、开发人员流畅、协同合作;一定的文献检索、资料查询能力,掌握初步的科学研究方法。学生不仅学习具体的交互设计方法,又能在实践练习中将理性思维和艺术设计融合为一体,成为综合性、高素质的交互设计专业人才。 作品、文章投稿以及设计事务咨询请联系 ixd@designdaily.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注