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

  使用,但是在最近几年,越来越多的产品经理使用Sketch代替Axure设计原型。出图快、易操作、易上手是Axure的巨大优势,但是交互一直是Sketch的硬伤。在这篇文章,一起来看看作者如何解决。

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

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

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

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

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

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

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

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

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

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

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

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

  网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

  随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

  每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

  今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果: 让内容在显示区域滚动; 内容面板没有接触到顶部时,让内容面板移动至顶部; 内容面板接触到顶部,没有接...

  你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

  当我们需要设计任务型功能的时候,除了基础的线框图和交互,更需要提前搞清楚整个功能的内部逻辑流程,简称功能逻辑图。 举几个大家熟悉的任务型功能作为例子,方便大家理解概...

  如何设计一个简单的新闻聚合产品?文章介绍了制作极简的新闻聚合产品的7步骤,好奇的你和我一起来看看。 你知道在三四线的县城,用户在哪里看新闻么?不是在今日头条里,而是...

  当你面对两家售卖同样品质、有着同等价格的咖啡店铺,服务设计的意义在于让你走进其中一家而非另外一家。 目前,在国内服务设计一词被很多从业者注意到,并在近几年得到了广泛...

  老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样,老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着,数字科技中一些常规的吸引用户手段对...

  本文教大家如何利用Mockplus的面板组件,快速地做一个手风琴式的菜单,简单实用,学起来吧。 手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器。...

上一篇:方案好坏直接决定网站效益转化率
下一篇:苏州网站建设公司教你八步做一个成功的团购网站

欢迎扫描关注我们的微信公众平台!

欢迎扫描关注我们的微信公众平台!