AppSeed:不止是快速制作交互模型

AppSeed:不止是快速制作交互模型

对移动互联网的产品经理和设计师来说,现在有很多软件工具可以直接在电脑上画草图。但在头脑风暴早起设计上,画草图原型纸和笔仍然扮演着很重要的角色。相比数字工具,纸、笔、白板会更自然快速,但在纸上的草图画出来之后,不能直接模拟操作效果。这就催生出了不少将纸上的草图转化成可操作的交互原型的应用,极客公园此前也报道了一款快速交互制作工具的应用——快现, 类似的应用也还有POPProtosketch。它们均能快速的实现交互效果,给出简单的交互方案,但这样还远远不够。

为了更好的将图纸转化成数字原型,一款叫 AppSeed 的应用将计算机视觉算法引入,自动的识别各个元素,定义它们的功能属性。相比快现,AppSeed 还有哪些特色和优势,它能成为设计师的利器么?

引入计算机视觉算法的优势

利用计算机视觉的 AppSeed 在此基础上想更进一步的提升图纸和数字原型的转化效率,除了可以直接在手机上操作你在纸上画的草图之外,和快现、POP的不同,AppSeed 根据计算机视觉算法区分并识别出草图上的不同UI元素,并且给元素应有的功能。用手机将草图拍下来之后,AppSeed会根据元素的形状或者相对位置,来判断元素是什么。如果不能判断出元素所属的种类,它会向用户弹出窗口,显示UI元素列表,供用户选择。包括按钮、地图、街景、文本输入框等等,未来会根据用户的反馈加入更多的UI元素。而快现则是需要用户手动划分每个UI元素有效反馈的位置,以及手动定义UI元素的功能。AppSeed 尽管没有那么智能的识别出每个元素的属性,但相比手动处理,要高效很多。

将元素自动切割成相应的模块

识别出草图上的UI元素之后,AppSeed 可以自动切割元素,分配到指定区域,隔离每个绘制元素。这样你便可以移动它们,改变UI元素的位置,重新设计界面的布局。当前的一些工具基本上不可以切割草图,将各个UI元素分离开来。相比一整块无法交互调整的原型图,AppSeed 的方式能更便于修改方案。比如设计师画了一份草图,将整个草图用手机拍照导入快现之后,如果各个元素的位置需要调整,则需要重新在纸上画一张图。如果能像 AppSeed 将草图上的元素划分,便可直接在手机上操作。

 

充分利用纸上的草图

除了在手机上操作原型图的功能外,AppSeed 还可以将原型图以 HTML5 App 的形式分享给其他人,无需安装 AppSeed 也能测试原型。在原型阶段完成之后,AppSeed 可通过 PS Connection (需要 Photoshop CS5 以上版本的支持)将原型图制作成 Photoshop 分层文件(比如每个元素都有单独的层,便于操作),将设计移交到下一阶段。通常产品设计师在纸上画草图,确定方案之后,需要根据草图的来定义界面。纸上原型只是对照着参考,并不能直接利用原型图。AppSeed 将原型图制作成 Photoshop 分层文件之后,方便设计师用电脑来继续修改和完善方案,省去了重新绘制的步骤等等。

这么好的应用哪里可以下载?!不好意思,目前AppSeed 还在 Kickstarter 上众筹,已经快达了到设定的筹集资金目标,不过还有5天就结束众筹。其团队也已经制作出了可运作的产品原型,此次筹集资金是想将它变成完整的iOS应用,当然Android 版本也在计划中,他们计划在明年1月份发布应用。

工具的出现是为了提高效率,如果用 Suki Kits 等纸上的原型模板工具来画一个稍微精美点的原型图,用 AppSeed 定义交互,便直接导入到 Photoshop 中上色、调整,是否能有效,会是一个更好的方案么?极客公园也欢迎产品设计师投稿分享你是怎样提高效率的。

 

图片来源于 Wired & kickStarter

交互设计产品设计
关注极客公园公众号
反馈