文档章节

如何用Sketch制作精致的交互原型?

mo311
 mo311
发布于 2017/08/18 16:33
字数 1359
阅读 6
收藏 0

对很多做设计或产品的小伙伴们来说,Sketch应该不会陌生。它是一款由Bohemian Coding团队一手打造的矢量绘图应用软件,最初发布于2010年,后在2012年荣获Apple公司ADA设计奖项。从产品开发及功能侧重点来讲,很多人会认为Sketch是专为UI设计师打造、擅长也只能用于UI设计,比如:图形拼接、文字渲染、样式链接等等。

毫无疑问,像Sketch、Photoshop、Illustrator这类矢量绘图工具,是进行网页、图标以及界面设计的最好方式。不同的是,Sketch也可以用于制作精致的交互原型,虽然相对于其它原型设计工具来讲会有不足,但也不乏亮点之处。下面将具体介绍Sketch原型制作,其中包括小编重点推荐的一些功能,帮助你更好、更快地完成原型设计。

一、如何使用Sketch做原型?

Sketch是在最近几年火起来的,且逐渐成为设计师、产品经理等互联网从业人员的新宠。究其原因还是在于,它提供强大且全面的功能支持,让产品设计有“颜”有“料”。

1. 设计模板

Sketch自带有超过2000套模板,其中包括网页、iOS、线框图、原型等项目的现成模板,可以免费下载和使用,省去了从网上各种非正规渠道找资源的麻烦。每个模板中包含了各类常用的控件,如ios中的状态栏、导航栏、键盘等,省事而且精致。如果对这些控件的制作过程进行拆解,也能给我们提供更多的设计灵感和思路。

除Sketch外,其它工具还提供有关于“社交”、“购物”、“新闻阅读”等不同应用分类的完整项目模板,其中Mockplus还支持将模板页面直接拖用软件,进行设计。

2. 组件复用

在Sketch自带的模板(即组件形式)基础上,可以选择创建一个新文件为模板,然后根据具体情况,将需要的控件进行复制使用。此外,还可以选择自己创建模板,同时灵活地进行维护,使用在不同的项目中。这点其实类似于Mockplus母版功能,能帮助在多个页面和画板中重复运用组件、模板内容。即拖即用,方便快捷。

3. 原型文件维护

需要注意的是,无论是Sketch的“组件”还是“文本样式”,它们都被保存在某一文件中,而不能在不同文件中共享。因此,需要以1个页面呈现1个版本的原型内容,或者以1个画板呈现1个功能点模块点原型内容,这两种方式来维护Sketch原型文件。

二、如何使用Sketch做交互和团队协作?

Sketch支持以画板为单位进行导出,但导出的设计多为图片、PDF等格式,需要借助三方插件进行后期的交互设置。而Mockplus最新推出的3.2版本,便能无缝对接从Sketch导出的文件,在交互、团队协作及逻辑展示等方面加油助力。

1. Sketch直接导出MP文件

Mockplus支持将Sketch的设计文档,导出为Mockplus的MP项目文件。导出后,可直接在Mockplus中打开、编辑。多种交互设置方式(组件交互、页链接、交互状态),高度可视化的交互设计,高度封装的智能交互组件,交互命令一键自动还原等功能,绝对独家所有、简洁高效。

2. 支持发布为Mockplus团队项目

同时,Mockplus支持将Sketch的文档发布为Mockplus的云项目,支持多人协作、实时审阅,提升开发团队的生产力,大大降低沟通交流成本。其中,可以在原型页面上发表评论,同时使用箭头、文字、矩形、画笔等多种工具在页面的任意位置进行标注、说明,交流很明白。

3. 可插入新Sketch页面

在Mockplus团队项目中,可插入Sketch页面。每个画板可以作为单独的页面,进行导入。

4.更多诚意满满功能

除此以外,Mockplus 还支持脑图、页面流程图两种设计模式,自由切换、即时生成。可以快速完成项目的所有页面架构,同时能直观地看到每个页面多内容展示和功能流程,让你的设计有逻辑、更流畅。同时,类似于Axure的中继器的Repeater功能,能帮助快速制作重复的布局,新增的定时器组件,能实现页面自动切换,每个页面能自动编号,且根据需要进行单独页面的隐藏,都绝对是产品经理及设计师的一大福利。

三、写在后面的话

毫无疑问,Sketch非常适用于制作视觉效果图,但如果是带有交互、支持团队协作且能展示逻辑流程的原型项目,那你可以试试Mockplus即将推出的Sketch三方插件工具,一键导出Sketch画板、上传到云项目,精致的交互原型即刻在手!

© 著作权归作者所有

mo311
粉丝 2
博文 101
码字总数 165872
作品 0
阳江
私信 提问
这些工具你会用吗?常见设计工具视频教程集锦

在产品开发过程中,最常用的展现构思的方式一般来说是纸笔原型,最简单也最迅速,寥寥一画,一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美,你还是有很多工作要做哒~YouT...

jongde
2016/12/02
15
0
没用过这些原型工具,敢说自己是产品?

身为一位产品经理或设计师,原型设计工具是必不可少的工作伙伴 今天小编整理了以下几种原型工具,快看看你用过哪些? 超过一半你都没用过,不说了,自己多多了解去吧! 1、Axure 这个入门级工...

一名产品汪
2018/11/13
0
0
超实用的App原型设计工具入门指南,初学者必看!!!

线框图工具和App原型设计工具不断的改变着UX设计师的工作方式。作为一名设计师,很幸运市面上有丰富的原型设计工具供我们使用。特别是像Axure,Mockplus,sketch这样的app原型工具,可以提供...

Mockplus摹客
2018/08/24
0
0
设计师对可扩展设计工具的探索

原文出处:medium 译文出处:阿里巴巴1688事业部 - 舒舟 【译者注】人们普遍认为,流程和工具不重要,重要的是想法和思路。话虽如此,不过我认为流程和工具也能反映一个设计师的设计态度以及...

medium
2015/08/07
0
0
【Infragistics教程】从设计到代码:Indigo.Design

【下载Infragistics Ultimate最新版本】 “设计到代码”,即可视化设计师、用户体验架构师、产品经理和应用程序开发人员如何参与协作软件设计和开发过程,允许每个利益相关者使用他们最喜欢的...

电池盒
01/08
9
0

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
8
0
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部