1036822859qq-com

一、什么是原型工具

什么是原型?
首先应当明确的是这里讨论的是在互联网产品设计流程中的原型,但我在维基百科和百度百科上,都没有查到对其的准确定义,但也可以看出,不管在心理学、文学还是电影中,“原型”都是一种原始的、最初的、抽象化的范式,跟我们要讨论的产品原型大不一样。

在《集体潜意识的原型》中,荣格指出原型(archetype)一词最早是在犹太人裴洛[1]谈到人身上的“上帝形象”时使用的。他认为原型是一种原始意象,代代相传,成为人类积累的经验。此等种族性的经验,留存在同族人的潜意识中,成为每一个个体人格的结构的基础,面对类似情景时,大家都会不自觉地以类似的方法去反应。

引自 什么是原型以及它如何实现_心理学魏老师_新浪博客 (sina.com.cn)

​ 因此,我们所讨论的原型的概念可以限制于互联网的虚拟产品内,称之为“产品原型”,基于这样的前提和概念,可以这样概括:产品原型是互联网产品设计流程中,由产品经理或交互设计师制作完成的,将抽象化的产品想法具像化后的产物,其表现形式多为由线框和图形组成的界面框架,再辅以文字说明,以让其他成员对产品的外观和工作模式有较为具象的认知。

二、sketch 软件

sketch是一款仅在macos系统里存在的本地化应用,发布至今已经10年,早已从当年横空出世的惊艳变到如今的创新不足,跟最近风头正劲的figma比起来,它的平台限制和本地化存储,正在越来越被大众诟病,也很少能看到让人眼前一亮的新功能了,但现阶段它仍然是界面设计软件的龙头大哥。

sketch的用户更多的还是UI设计师,他们可以通过它进行精致的界面设计,再交付给开发。但在UI和UE越来越趋向合并的背景下,很多大厂的PM和UE也选用sketch进行原型设计,方便和UI对接,比如sky在他的知识星球里提过,阿里内部几乎都使用sketch画原型。接下来我将在图形绘制、组件库、动效制作、版本管理、团队协作五个层面分析下用sketch做原型设计的利弊。

图形绘制

sketch在图形绘制方面没有太大的问题,但是仍然有一下两点的不足

  1. 产品或交互在设计过程中经常会画流程图,sketch本身对流程图是没有支持的,只能自己创建组件或者转移到process on 等软件画,画完后再贴到sketch里去,略麻烦
  2. 页面流程图,也是得自己画直线,不过sketch的直线可以设置箭头,还是挺方便的
组件库

sketch本身支持组件库library的导入,也有神器symbol,只要前期花功夫搭建一套就可以了。但是之前sketch的组件置入方式一直是在多层列表里一级级选,速度慢不说还很容易忘记组件放在哪个层级下面了,效率真的很低,不过去年一次更新中把组件和页面平级化,现在在左侧面板里可以直接预览和拖入,相对来说使用效率还是有所提升,不过我觉得可以直接平铺展示会更好找一点。

img

动效制作

sketch现在的原型功能支持页面间简单的跳转,只要设置点击热区然后链接到要跳转的界面后,再使用预览就可以了,动效功能整体做的比较克制,可以看出开发者想让用户专注于静态页面设计,并不想接入复杂的动画功能。

img

缺点:

  1. 不支持神奇动画,只能页面整体移动,所以一个点赞动效都做不了

  2. 预览功能就只能在文件里预览,没办法导出可在线操作的原型,也不能录制视频,只能自己录屏。但一般设置跳转动画就是为了给别人看,自己是清清楚楚的,很迷

团队协作

协作方面可以使用sketch cloud来完成文件的上传、共享、人员管理、权限管理、评论等,功能还算完善,但也没有什么出彩之处。figma里令人惊艳的多人实时编辑,sketch可能永远也做不到了。

使用过程中面临的问题是:服务器在国外,速度很慢,而且权限和人员管理功能还比较初级,可能满足不了大公司的需求。对交互或产品设计师来说,涉及到协作场景的就是跟UI和开发对接了,上传到cloud之后分享给他们链接就可以,有不同意见可以评论,还是比较方便的。

三、墨刀

在对原型工具进行分析之前,我们必须明确所有的软件都只是工具,正如摄影所说:“决定摄影质量的不是你手中的相机,而是相机后面的人。”

百度百科对“工具”的定义,“达到、完成或促进某一事物的手段”,所以大家一直在说:工具不重要,创意(想法)才重要。但这也是相对的,对于某些不需要创新,已有行业规范的功能来说,能帮助我们快速达到目的的工具,就是该场景下的好工具。

对于原型工具软件来说,这也只是一个工具,我们千万不能陷入只是寻找工具当中,应当静下心来提高自己的基础能力,修炼好内功,以不变应万变,最终决定产于的原型的质量的,并不是原型工具,而是使用原型工具的我们人。

文件管理

得益于web端的优势,墨刀采用项目和文件夹的形式来存储和管理文件,经常使用的项目还可以做标记,所有的数据都在云端,目前也不支持导出本地文件。

优点:

  • 省去了本地文件对内存的挤压,也不需要再想尽办法备份,只要墨刀没倒闭,你的文件就不会丢
  • 随时随地都可以管理项目,墨刀有移动端,也做了wap适配
  • 同事间交接文件再也不需要各种传输工具,只需要共享给他,前提得付费企业版
  • 实时保存,不怕软件崩溃

缺点:唯一的缺点就是对服务稳定性和文件安全性的担忧,服务器出一个小波动,可能你所有的设计资产都没了,这对企业和个人来说都是很难接受的损失

图形绘制

基本图形和基础组件一应俱全,该有的都有,没什么好说的。目前没有矢量工具,想要特殊的图形只能自己去拼,但这不是画原型的必备工具,有没有都不重要。

组件库

接下来就是墨刀的重点功能了,如果说文件管理和图形绘制都是很基础的功能,那墨刀丰富的组件素材绝对算大杀器。作为一款在线软件,对组件的存储、转移和迭代天然就有优势,不需要像symbol那样用library去共享,墨刀只需要将制作好的组件添加为我的组件或制作母版,就可以在任何项目中复用。

墨刀的组件功能,相当于一个封装好的图形组,只不过可以统一存储起来,并不具有继承性,同一个组件可以在不同页面有完全不同的样式,一般我会把常用的图形保存起来,需要用的时候从面板里拖出来就行,也不考虑一致性的问题。

而母版功能相当于sketch中的symbol,具有继承性,母版改了其他的也会相应改动。母版支持交互动画,所以什么switch、点赞、弹窗、toast、下拉列表都可以做成母版,并且在预览时演示。但它和symbol的功能不太一样,不能对单个母版进行样式修改,所以只要你用了这个母版,它在所有地方的样式都是统一的。

除了自己制作以外,还有很多内置的官方组件库如Ant Design、WeUI、Element等都可以调用,基本通用的组件都可以找到。个人素材库也支持上传图片,常用的头像啊封面啊什么的,都可以保存在里面,在制作高保真原型的时候可以用到。

版本管理

以前墨刀是没有版本管理功能的,想要记录历史版本只能每次修改就复制一个项目,一点都不像线上的应用。目前已经更新了版本管理功能,但只限企业用户使用,目前只能创建10个版本。

团队协作
  • 支持成员管理,可以通过邮箱邀请成员加入,支持增删改查
  • 精细化权限设置,文件夹和项目都可以单独设置权限,也就是说可以只给成员看他该看的项目,对于大公司来说比较实用。
  • 支持多人实时编辑,有编辑权限的话可以多人同时编辑一个项目,适用于开会或者多部门协作。
  • 分享原型给他人十分简单,一个链接就可以搞定,也可以设置分享权限。还有各种场景化的模式可以选,真机模式适合展示,PRD模式适合开发或者UI看备注,在预览页可以随意切换,功能比较全面
简单总结

墨刀优点:

  • 操作效率高,易于上手;
  • 动效丰富;
  • 分享二维码到微信等十分方便;
  • 可自动生成页面流程图;

墨刀缺点:

  • 必须在线操作(离线无法保存);
  • 免费版对于项目数量、页面数量有限制;
  • 页面流程图不能自由操作;
Axure
严格的层级管理

与 sketch 不同,Axure 有着严格的层级管理机制,数量少的时候有点麻烦,但是多起来也方便寻找

img

插件功能

Axure:控件功能强大,但灵活性一般

  • 可以做成动态组件,例如有焦点状态的输入框、悬停按下状态的按钮等。

img

  • 使用组件时能够切换状态,但是被封装成控件(模板)后,里面的文字图片等内容就不能轻易修改。一定要改的话,也能用事件和参数做到,但是很麻烦而且不能预览。

img

  • 控件的尺寸随着内容自动变化,但使用时不可以拉伸

img

备注说明

可以写在每一页的说明参数里。甚至还可以另开一个说明页面,绘制流程图,并用缩略图引用其它页面(页面快照)。

img

img

矢量绘图

一般,只能勉强画出基本能图形

img

团队协作

Axure 有着较为完整的团队管理功能

可以在一个团队文件之中,以页面和组件为颗粒度件划分每个人的负责区域,不过每次都要上传下载才能互通。

img

分类:

技术点:

相关文章: