软件开发----------之 原型开发工具篇

           目录

一、我对原型设计的理解

二、原型设计工具的简单介绍

三、具体介绍对墨刀的使用

四、个人感受

五、个人推荐

一、我对原型设计的理解

       对于原型设计的理解,我认为原型设计所设计出来的产品代表软件的一个基本框架,通过对软件页面的设计对软件进行“包装”,再通过一些简单的交互使模拟系统具有一定的可实践性,用可视化的方式,将软件的大体结构和功能以及外观设计等展示给用户以及公司,为进一步研发和修改打下基础。准确一点来说原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。这一部分的设计在原则上是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验来搭建整个产品,最终展现出该产品的可用性。

二、原型设计工具的简单介绍

  • Axure:发展较早的一款原型设计软件,名声较大用的也较为普遍。无限画布,适合做低保真到中保真度的原型。功能很多,但学习起来有点难度,网上有很多axure教程可以自行学习。本地型软件,可以下载html文档预览,手机预览不方便。

    Axure 优点:

    1、擅长原型设计的复杂交互行为;

    2、拥有良好的培训和文档支持;

    3、拥有多种元素样式,可增加独立元素交互性;

    4、内置的插件库可以定制特殊的动作和行为。

    Axure 缺点:

    1、对于初学者来说不算容易;

    2、在导出HTML之前无法对原型进行预览;

    3、原型的web展示并不支持所有的浏览器,比如,对于谷歌浏览器就必须要使用插件才能观看;

    4、对其它设备的支持较差。

  • 墨刀:国产的一款原型设计协作工具,比起axure来非常容易学会,内置组件很多,其控件的拖拉、大小的调整,都会自然的去匹配相应的母版大小。创建页面跳转也比axure简单很多。因为是一款在线工具,可以云端保存工作,这点十分便捷。另外,通过分享链接就可以分享原型给别人看了,如果需要跟其他伙伴工作对接什么的,选择在线的工具更方便。支持sketch文稿导入和自动标注。软件整体来说就是便于操作交流方便性价比高墨刀对于APP的原型设计的体验非常好,无需去担心有多移动一点或多 选择一点。并且墨刀的系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,可以减少不少工作环节。
  • Invision: 可以说目前是国外发展最大的在线原型设计工具,主打“交互原型”和“协作”,支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch,想满足更精细的设计需要。国外一些公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题,而且价格相对比较贵。
  • Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具,支持PS和sketch设计稿导入做交互原型,本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash,这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。
  • POP(Prototyping on Paper):这款比较另类,是给拍照的手画草图直接做交互。操作轻巧简单:先用手机拍下草图原型(存到POP app内);然后开始编辑图片的哪个区域(按钮)链接到什么页面,添加跳转链接热区,就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等,即可满足一般的动态演示需要。功能较为简单,对更深的需求无法满足
  • Proto.io:也是国外的一款手机原型开发平台。支持在大多数的浏览器运行,共享协作操作方便,可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件,支持自定义。另外它有不错的用户测试功能,支持视频录制。并且在移动组件时,能够实时在画布看到组件之间的距离。另外由于服务器的原因,有国内用户反应速度有点慢;收费较高,性价比一般。
  • Fluid UI:Fluid UI也是一个手机应用原型开发工具,支持iOS、Android、WP系统。FluidUI支持Chrome、Safari、Firefox浏览器,可以在Windows、Mac、Linux系统上运行操作,没有平台限制,支持添加手势,让开发者几分钟内便轻轻松松地完成原型创建。

    1、提供了易懂的操作流程和非常直观的用户体验,用户可以随意的拖动任意的组件并控制它们的大小;

    2、使用FluidUI进行原型创作可同步保存到云端,并实时更新,无需任何编程即可直接生成可在智能手机上运行的App原型。

    3、Fluid UI提供了付费和免费两个版本,但免费的版本限制你只能在一个应用中创建10个界面。

  • Flinto for Mac:Flinto for Mac只需要根据层级移动组件位置,就可以创造出对应的交互效果。Flinto for Mac采用了拖拽链接点来作为基本的操作方式。这种操作中的高度可视化,使得设计的过程变得十分简单有效。

通过以上对于部分原型设计工具的横向对比可以选择一个适合你的原型设计工具。

三、具体介绍对墨刀的使用

Step1:快速创建应用
*推荐大家使用墨刀桌面客户端进行操作,能带来更好的使用体验。
*如使用网页版,请用chrome浏览器(最新版)登录,使用IE、360浏览器等可能产生兼容性问题。

注册/登录墨刀后,首先到达的是「项目管理页」,创建的项目都会展示在这个页面。
点击右侧的按钮「创建项目」,可以选择空白项目,也可以直接套用模板。

选择空白项目:有iPhone、ipad、Android、Web四种平台,选择后进入项目属性设置页,可设置不同的设备型号。点击创建,就进入到了工作区。
如想自定义原型尺寸,可选择Android的Customize进行自定义。
如有需要,还可上传个性化图标启动界面图
直接套用模板:墨刀推出了丰富的模板项目,可先预览模板效果,挑选成功后点击「创建项目」即可。
通过编辑模板你可以更快地掌握页面设计、交互设计的方法,也可在此基础上完善个人产品原型。

Step2 : 创建页面结构
墨刀创建页面结构的界面位于页面编辑器的右侧,可以快速添加新页面,并且添加多级子页面。
直接创建页面最高可达4级。想创建五级及以上页面,需要了解五级页面/多级页面的建立方法。
选中特定页面后,可以看到「增加子页面」、「复制」、「项目间页面转移」、「删除」按钮,进行更多操作。在页面列表下方,有「页面回收站」,误删除的页面可以在回收站进行找回。

 PS:良好的页面结构如同一个清晰的脑图,能够帮助制作者在复杂的产品原型中理清思路。

 Step3 : 创建页面内容
墨刀创建页面内容非常的简单:从右边组件区拖拽组件到页面设计区,然后点击弹出的属性设置面板及工具栏编辑其细节就可以了。
主工具栏,可对组件进行对齐、置顶/置底、组合、横竖屏、网格线等操作。
副工具栏及属性面板,点击对应属性,可设置其位置、颜色、圆角、透明度、等属性
 

 

Step4:添加页面交互
页面交互
将内置组件库组件拖入页面,可以直接将连接手柄拖拽到想要跳转的页面,也可以通过设置交互事件实现页面跳转。
在添加链接时,还可根据需求,设置不同的触发手势、定时器及动效。
组件动画
选中组件后,可以在状态设置面板上设置弹入、缩放、旋转等几十种动效。
更为深入的还有使用母版状态来制作交互效果。

Step5:应用预览、分享及下载
原型制作过程中,不但可以随时检查原型在pc或移动设备上的真实运行效果,还可以将原型分享给你的同事或朋友,让大家第一时间看到设计成果。
项目预览
点击工作区右上角的运行按钮,即可预览项目。

分享
在运行页面右侧列表有分享按钮,扫描二维码或者链接,就可以查看项目了。
在这里,还可以设置项目的访问密码、设置边框类型以及其他播放细节。
打点评论、开发者模式
点击预览列表下方的评论开关,可以对页面进行打点评论,实时共享大家的反馈信息。
点击开发者模式的开关,你将可以查看页面中元素的相关参数 (位置、尺寸、文字等信息)
下载/导出
当你需要使用离线文件时,就需要用到下载/导出功能了 (该功能是付费功能)。

墨刀支持导出以下几种格式的离线文件:
  • HTML压缩包
  • 页面PNG:全部页面内PNG图、当前页PNG图
  • 安卓APK文件
  • 苹果IPA安装文件(IPA导出需单独付费申请)
离线文件可供演示、查看,但是不能用于编辑, 墨刀的文件必须在线编辑
 
 
 
 
四、个人感受
 
   对于我这种新手小白来说,墨刀原型设计工具的可视化的界面还有一应俱全的组件库,我认为对于产品的初步设计来说是一个很好的选择。虽然我个人没有进行很深入的学习和研究,但是这次的初体验使我对原型设计产生了一定的兴趣,后期还会继续学习和研究。
 
 
 
五、个人推荐
 
                                  墨刀新手引导  https://download.csdn.net/download/shiliang97/12376885?

猜你喜欢

转载自www.cnblogs.com/zou-klxq/p/12927648.html