码迷,mamicode.com
首页 > Web开发 > 详细

Sketch实用新技巧详解

时间:2017-08-22 22:07:44      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:

作为目前产品原型设计中的利器,Sketch特别适合移动APP和响应式网页的设计开发。下面我们就来看看Sketch的一些入门指南以及如何利用Mockplus的插件实现交互效果。

Sketch是一款基于Mac的矢量绘图应用。面对着功能复杂繁琐的photoshopSketch相比较而言身轻如燕。最近也掀起了用Sketch设计产品原型的热潮,因为用它来画设计稿简直轻而易举,相比于Axure它有更丰富的组件库和更全面的尺寸控制,让我们的原型图更逼真,更有利于交流和前期的展示。

作为目前产品原型设计中的利器,Sketch特别适合移动APP和响应式网页的设计开发。下面我们就来看看Sketch的一些入门指南以及如何利用Mockplus的插件实现交互效果。

一、 Artboard

在安装好Sketch点击金灿灿的钻石icon前,我们首先得明确一个概念:Sketch是基于矢量的绘图软件,没有传统的画布的概念,整个空白区域都可进行创作, 但实际上我们也需要一个画框设计限定我们的设计,在skech中这个东西叫做artboard。我们可以将一个app界面看做一个artboard,然后在同一界面中对比和查看或者串联所有交互过程。然后我们可以将这些artboard分别导出为pdf或者分为一个个的图片文件,方便产品经理或开发者查看。

具体的操作的话,在界面左上角点击insert,弹出菜单中选择Artboard,鼠标变为十字,即可自由拖动,右侧的属性面板还可以精准设置大小;此外在选择Artboard后,右侧栏也会提供一些常见设备的默认尺寸,单击选择合适的即可。

二、组件

Sketch自带了丰富的素材库,包括安卓或者iOS系统中的原生控件,我们可以直接将需要的部分拖到artboard即可,这样一来节约出大量的时间,使我们可以将腾出来的时间用于更加核心的产品设计思考上。

点击菜单栏中的file-New from Template,会出现五种最常见的平台或设计风格的模板,打开后即可选择想要的组件。有个小技巧:artboard默认选择iPhone67的尺寸,这样在iOS应用图标中的尺寸就无须调整,直接拖拽即可。

如果想要快速地复用组件的话,也可以将组件或模块转变为Symbol,性质跟Mockplus中的母版类似,从而方便我们在多个页面中复用某组内容。选中需要的组件点击create symbol即可。

字体和图层也跟组件一样存在着不断复用的需求,在一份设计稿中,单独对每个元素调整会比较繁琐,Sketch中的文本样式就能解决这个问题,类似于Mockplus中格式刷的功能。可以根据需要,整理一套自己常用的样式规范,将成共享的样式文本,在需要的地方直接复用即可,不仅能提高效率,还能保证整体的美观性。

三、可扩展性

可拓展性也是Sketch最大的特色之一。Sketch开放了第三方插件接口,设计师可以在几百种的插件中轻松找到适合自己工作方式的插件,一切为了设计师更方便和有效率的进行工作。

不过,需要明确的一点是,Sketch产出的是静态的视觉稿,没有动态交互效果,也无法进行团队协作和标注;而交互正是一个原型的灵魂,是展示原型逻辑和思维最直观的方式。结合Mockplus就可以轻松将Sketch中完成的设计稿转变为可交互的原型,只需要在Sketch中安装Mockplus的插件。在Mockplus 3.2版本中支持将Sktech的设计文档导出为Mockplusmp项目文件,这样你就可以发布为云项目,轻松地利用8种预览方式演示自己的原型项目;也可以升级为团队项目,从而和小伙伴们一起进行协作和批注。


此外,Mockplus 3.2版本还支持即时生成流程图和脑图设计模式,配合Sketch使用会让你的原型设计事半功倍!点击这里了解3.2版本的更多功能:Mockplus 3.2前瞻,五大特色功能让你惊喜!

 

 

来源:网络

Sketch实用新技巧详解

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
jiangjie190
加入时间:2016-02-19
  关注此人  发短消息
文章分类
jiangjie190”关注的人------(0
jiangjie190”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!