当前位置:首页 > 新闻中心 > 市场活动

App 产品原型设计用什么软件?

发布时间: 2021-09-18 04:14:39  来源:火狐平台开户 

  首先如果你小团队或者个人开发,当然可以用Xcode,如果大公司跨部门审核调整各种,还是有个快速的原型。

  如你要求,可交互。包括常用的Axrue,我试用过下面提到的所有软件,分别完整产出过不同的原型,还有一些市面上的你一看它介绍图还在用ios6的就知道不必了,说明很久没更新了。

  我在选择软件这个过程中纠结了很久,也是用过在领悟真正的原理。但是这段时间的摸索对我以后也有很大帮助。

  缺点:分享不便。动画有如侧滑、展开、消失,快现的摇一摇。操作只可以单击。没有控件,所有东西都靠你的照片。

  基本和pop一样,就是软件本身的UI更ios7一点,其他都一样,也是导入图片,加热区就好了。缺点也是一样的。

  **总结:**轻巧型的就是适合简单软件且是早期,在手机上稍微复杂一点的就痛不欲生了。但问题是,如果简单到这么轻松了,那真的还需要用软件模拟吗?真的在纸上画更轻松吧。点击这种交互也不需要模拟了吧。

  方法:windows电脑安装UIDesigner,使用现成控件进行可视化搭建,调试后通过网盘等方式发到iOS设备,用UIDPlayer打开即可。

  这是我最近发现非常好的一款软件,好在对交互的支持上,如果调整细腻一点,几乎可以以假乱真。我是用它在UI定稿的情况下,提前当完成品测试交互体验的。当然也自带控件,用于原型设计。

  还有三种模式,场景模式(Scene View )和细节模式(Details View)分别负责交互设计和UI设计两个部分,在设计完成后可以在第三个模式(Overview)查看整个APP的架构。

  方法:在场景模式中,添加Actors(按钮,文本段落,文本热点)和Actions(触发动作),可以设置界面跳转时的TRANSITION效果,声效,延时,Retina 空间等交互体验辅助特效。

  缺点:贵。1298元,感受一下。标注起来还是不太趁手。通过dropbox同步有点慢,又没办法加快,只能生等。可以先试用一下,觉得好再入手吧。

  我最早用的原型软件,现在制作出的原型已经出现在App Store里拉。Sakura Day。

  当时用免费的功能(2个项目,无法导入dropbox图片,无自定义控件)就做出来了。后来接手公司大项目,专门买了完整版128元。

  但是注意,这是用iPad做,iPhone或者iPad看,没有电脑版的。我当时就是为了地铁上可以用,是优点也是缺点。

  方法:基本都一样,就是在iPad上操作。触控不那么精确,但是操作体验很好,完整版的自定义库按钮很多很丰富。

  缺点:最重要的就是只能在iPad上编辑,我做了个大型的项目,打开还是稍慢点,但是稳定,操作多了有点累。分享需要对方装软件,而且生成的项目文件会很大。

  总结:专业软件还有很多,各有千秋,这两个是最快支持iOS7的,说明他们很重视产品保证更新。但是价格确实也是不菲,优缺点很明显,不符合国人习惯。腾讯那个整体是很不错了,除非你和我一样只用mac。

  我是通过下面提到的Icon Stricker发现的这个网站,试用了一下发现,它的特点是快捷的热区和转场操作,但是完全不带控件,也就是网页版的 pop。需要你自己准备好图片,不管是UI还是UE,这里只负责交互。

  最受推崇的网页版原型网站。控件从iOS到Android到WP。也是可以免费一个项目少量屏幕,然后按月收费。

  缺点:我用网页版的还是感觉有点迟缓,不痛快。胜在控件实在很全,这个是很多桌面软件都不支持的。如果针对安卓或者WP,实在没什么更好的选择了。

  **总结:**分享方便,轻量级是最大优点。但是按月付费这个我觉得大公司不会承担这笔费用,小公司有没有必要花费在这方面都值得商榷。速度也确实有点问题。交互也不如专业型那么灵活。

  绕不开的巨人,就像图片界的PS,文字界的Word。它最大的特点就是别人都用它(虽然大多是盗版),我之前也存了显出不同逼格的心试了前面那么多软件,最后绕了一大圈还是回到了它的怀抱。

  缺点:生成的原型在移动端很难用。是有方法的,其实也不错了,但是我还是懒得费心研究。之所以用这个就是为了给开发和写文档,很多标注和逻辑流程,没必要做出交互。所以不考虑用它做交互,你真都做成交互了,难道还要工程师挨个点开才能看到逻辑?

  为了捍卫mac的逼格,我用了几天就放弃了。不可否认,OG在调整控件时的流畅稳健,草图的美观(前提是你用英文)等方面,能让你享受整个制作过程,这是很少见的。但是我一直搞不懂画布层共享层等等的关系,用起来失误频繁,而且,生成的html没有目录啊,文档可读性差。

  总结:是的,这两个软件不光是用来做移动交互原型的,他们的强大体现在非常多的领域,但是针对移动交互原型而言,都不适合。A胜在文档和大家都用,所以在个方面就屈从了吧。

  就是专门用来制作交互动画原型的产品,免费,但是需要苹果开发者账号,学习曲线非常高,但是可以制作非常精美的强交互动画。

  PS play等都可以快速把电脑上的内容投影到手机上。但是唯独liveview可以支持交互。打开交互模式后,电脑端可以接受手机的点击和滑动手势。非常强大。

  随着信息化社会的不断发展,不仅手机迭代更新的速度飞快,就连手机里的App 也层出不穷。作为一名UI/UX设计师或产品经理,如何才能设计一款出色的移动App?光有好的创意是不够的,你还需要一款正确的App原型设计工具来表达你的设计!

  不少设计新手和产品小白在选择原型工具前,早已经被网上五花八门的原型设计案例看得眼花缭乱,无从下手。实际上,大多数案例都是这些工具作为教程或炫技使用的。通常,有经验的设计师或产品经理在挑选App原型设计工具时都会从以下这些方面进行考虑:

  根据以上这些特点,小编精心挑选了几款App原型设计工具对其功能进行了介绍,以供各位参考选择。

  在项目立项之初,可能会涉及多方同事协同,包括设计、产品、运营,以及团队的领导,这个时候通常会采用快速原型工具,方便迅速地给团队提供原型预览。

  这一阶段的原型设计工具,推荐摹客RP:同时具备强大的高保真原型设计能力和团队协作能力。不仅保证了快速产出和精细设计两不误,同时满足产品经理、设计师的需要,在线工具的协作能力更是不容小觑:多人实时编辑,便捷的团队评审,工程师查看页面数据、复制代码等强大功能非常适合团队使用。

  点评:这款原型工具适用于任何阶段的设计师和产品经理,上手快,操作简单,同时能够较好地实现交互效果。

  如果你是一位乐于探索新事物并有一定设计基础的设计师,Axure Rp可能是最适合的App原型设计工具!

  原型设计中复杂的交互设计是它的强项,同时提供高保真与低保真两种设计效果,拥有良好的文档支持,自带实用的流程图功能,插件库可以定制特殊的行为。它的团队版和企业版还提供了团队协作功能,主要包括团队协作和在线评论,设计师还能使用Axure创建和托管团队项目。

  使用Axure制作App原型设计,设计师需先设置工作区的大小,然后从工具栏中拖动App页面的元素进行设计;页面中的具体细节可通过PS进行处理。最后按照软件提示,将生成的文件压缩并上传,然后就可以用手机扫描二维码查看原型了。

  点评:作为一款成熟专业的原型交互工具,无论是它的基础功能,还是团队协作功能,都是值得一试的。但是由于其界面设置过于专业,对于新手来说,操作起来并不易,需要花费一定的时间去熟悉它。

  与其它APP原型设计工具不同的是,InVision是一款能直接导入原型图,然后发布以及邀请成员共同编辑原型交互,动画和转化之类的交互工具。它更偏向于制作交互,但它的团队协作功能也值得一试。例如其多人协作编辑功能,评论添加功能,以及团队项目分享功能等等。

  使用Invision制作App原型,首先创建项目,选择设备类型。然后按照支持的图片格式,一张张上传制作好的原型图。现在就可以开始编辑原型了。如需页面跳转,通过建立操作热点,设置跳转页面即可。最后点击Share即可分享原型,通过生成的URL可以进行在线预览。需注意的是,制作了什么类型的设备,该原型只能在该设备类型下打开预览。

  Justmind是一款专业的移动端APP原型设计工具。使用JustinMind,你可以在较短时间内利用其广泛的组件和交互绘制高保真原型。整个设计过程无需编程,就可以实现你想要的移动端交互效果。生成的交互可以直接导入手机进行仿真的操作,你能够更直观地感受交互稿的魅力。除此之外,它还支持手势交互效果,共享原型测试,发布和收集反馈意见等等功能。

  如何利用Justmind设计App原型呢?首先,建立一个新的项目并选择原型类型。简单熟悉界面后,即可开始设计。在左侧工具栏中选择所需组件放置工作区,在右侧属性面板进行编辑目标属性,在界面下方编辑触发事件。最后点击Simulation即可预览原型了。

  点评:这款工具适合追求原型设计的中后期效果的产品经理。它的原型设计更接近于demo,便于向客户展示你的项目。

  搞定App原型设计,设计师需要的不仅仅是好的创意,还需要一款适合自己的App原型设计工具。因为设计师的工作需求不同,工具的选择点也往往不同。根据自己所需的功能点对不同的工具进行类比,设计师一定能找到最合适的原型工具!

  就易用性和上手难易度来说,可以说是目前市面上最简单易用的原型工具,同时兼顾了线框图和高保真设计图,产品经理和UI/UX设计师都可以快速上手做出可直接在手机上查看的App原型。

  等大型商业工具还存在一定差距,不过我们产品目前正在快速迭代中,预计到年底可以在主要功能上与这些工具持平。

  如果只是线框图,那用什么都行,如果不是对格式有要求,那我就画在草稿纸上。考虑正规点的,如果后续会进一步细化的,会用axure,如果就到此为止了,那用visio。不过看情况,如果需要保真度高一点,那axure的组件库比visio丰富多了。

  如果像要在设备上实际让原型显示出来,并且能测试。那axure和腾讯cdc的uiddesigner,还有在线的fluidUI也可以考虑。其他好像没有了吧。但除了axure,后两者所谓的交互其实都是不同的界面截图之间的切换,说白了就是多节点式结构的ppt,不是真正的交互。axure的思想更接近实际开发,比如通过master实现界面元素的封装复用,条件判断,函数,变量。这些功能除了开发工具,原型工具还有谁能比得上axure吗?

  app原型相比网页,界面结构简单,但交互复杂得多。界面上的div也不是平铺的,为了有效利用空间会用到很多层叠,卡片式之类的展示方式。要做这类高保真可交互原型,我觉得非auxre莫属。比如一个tableview滑动到顶部刷新,底部回弹,不借助开发只有axure能做出来。

  我从07年开始用axure,曾经一度认为做网站原型,axure已经不需要再怎么改进了。自从做app之后,觉得axure有点根不上时代,但试了其他工具,还是觉得auxre最合适。仔细做过几个以后,我觉得axure还是完全适合做app原型的。做好以后分享也方便。放到内网,或者axshare上,或者有一个html runtime的app,可以在设备上直接浏览axure输出的html。

  当然axure作为一个工具,不可能每个环节都是最好的。比如我希望axure能借鉴一下其他工具和开发思想,把UI和素材分离出来,就像换皮肤一样,一个控件可以随便更换图片素材。这样pm或者交互用最简单的线框设计,确定交互以后,可以把设计师的图贴上去,这样就100%保真了。

  axure对app设计不友好或者说最落伍的地方,就是支持的事件类型太少。交互上无法模拟出多点触摸,无法模拟设备运动,无法模拟各类传感器……或许对一个原型工具来说,要求太高了。

  画原型图可谓是产品经理们的必备技能,虽然这个工作很多时候由交互设计师完成,也不能直观地说明什么能力,但如果你想要证明自己不是靠读完《乌合之众》或者《结网》来胜任这项工作的,一个清晰的原型图会比长篇大论的 PRD 文档让人直观感受到你的专业度。

  下面,AppSo(微信号 appsolution)将在这篇文章中给大家介绍四款原型图工具。

  Marvel 可谓是草图党的神器,告别那些复杂的交互吧,这款应用可以让你用纸、笔、手机实现原型设计和演示。

  Marvel 的逻辑非常简单清晰,即按照「起始页面」-「过程交互」-「终点页面」来描述产品的某个功能。而且,Marvel 对于页面的展示是基于第三方导入的,而非支持产品内的绘制。

  也就是说,我们可以在纸上画好简单的草图,比如「主页」和「内容页」,把它们拍成相册中的照片;在 Marvel 上你就可以导入首页照片,在相应的位置画一个热区,将其链接到内容页,再从既定的动画中选出一种交互方式,就可以实现两个页面的交互示意了。

  其实 Marvel 在原型的交互功能实现层面上非常弱势,毕竟是一款纯粹基于手机的原型制作工具。

  但它确实能够让人随时随地记录、展示自己关于的创意。它很轻很酷,更适合在头脑风暴或对外演讲时使用,而不是跟开发人员进行需求评审时使用——否则你就是在挑衅你的技术团队,相信我,为了职业前途和生命安全,请不要这样做。

  Marvel 适用于 iOS 9.0+ 的 iPhone 和 iPad 及 Android 3.0+ 的设备,iOS 版 92.2 MB,Android 版 5.6 MB,完全免费。

  墨刀是这次推荐中唯一一款国产工具,其核心逻辑与 Marvel 一致,也是以「起始页面」-「过程交互」-「终点页面」作为主要分割维度的。相比之下,它比 Marvel 拓展了更多功能。目前墨刀有 Web 端、PC 客户端和移动客户端,其核心功能主要由 PC 客户端实现。

  在目前的版本中,墨刀已经支持了对页面内部元素的精确控制,并引入了母版和动态面板功能,页面元素在不同前置条件下有了不同的 State,使其在一定程度上可以做到高保真原型。

  墨刀的移动端主要功能是演示,并没有对原型的修改功能,其大量的原型操作细节也很难实现在移动端的修改操作,也确实没有这个必要。

  目前来看墨刀的优势主要集中在 app 原型的制作上,其操作方式使其在制作 app 原型时更容易,官方预设的套件也明显是针对 app 原型设计的。

  而它的劣势主要在于在实现复杂交互和特殊交互方面比较困难,这是其产品框架导致的,基于页面的原型工具都很难再实现细节元素的精确控制。

  另外,墨刀作为一个新工具,它的使用者并不多,制作的套件也就相对少,这意味着你在做高保真原型时必须有设计师辅助,你很可能要付出额外的成本来请他吃饭。

  MockingBot 墨刀适用于 iOS 8.0+ 的 iPhone 和 iPad 设备,iOS 版 2.9 MB,完全免费。

  Flinto 整体体验都和墨刀很像,可以说是优化版的墨刀。体验最好的一个优化是 Flinto 将 app 中常见的 Feed 流纳入了基本交互,这个十分常用的交互在很多原型工具上制作起来都十分麻烦,不得不说此项优化简直感人肺腑。

  值得一提的是,Flinto 产品本身的操作性也要更强,其偏转功能使其在做交互时有更清晰地逻辑感,也大大降低了误操作的可能。

  此外,Flinto 的移动端预览也非常方便:可以将原型直接生成网页并以短信的形式发送至手机,甚至不需要下载 Flinto 的 app,也可以很流畅地在手机上预览刚刚做好的原型,这种无缝衔接会让你有一种不需要程序员也可以去创业的错觉。

  Flinto 适用于 iOS 8.1+ 的 iPhone 和 iPad 设备,iOS 版 23 MB,完全免费。

  把 Axure 放在最后,是因为它与上面几个工具有明显不同的地方。它的功能强大程度与其复杂程度一向是成正比的。

  Axure 强大到什么程度呢?它可以不需要写任何代码就能实现一款类似于《雷电》的打飞机小游戏。上文提及墨刀中的模板、动态面板这些功能放在 Axure 里简直就是基础功能。

  Axure 是这四款工具中唯一一款完全基于单个「元素」的,这使得它有了无限拓展的可能,只要你有耐心有闲心,你可以做出目前你能想象到的绝大多数交互。因此,它也是目前大部分人做原型图的首选。

  在 Axure 中,你可以去定义你视野中每个元素的状态,以及其随时间或操作产生的动态变化,母版、动态面板的重复套用,以及 Repeater(汉化译为「中继器」,但并不十分准确)这种十分复杂的工具可以让你的原型图达到一个前所未有的保真度。一个简单的高保真日历功能就能让墨刀这类工具束手无策,然而对于 Axure 来说这只是小意思而已。

  最重要的是,Axure 是一款非常成熟的产品,前人已经做好了无数可用、好用的套件库,你只需要把它们加载到你的 Axure 中即可直接调用,可谓站在巨人的肩膀上。

  当然,Axure 也有其弊端,比如对 app 原型制作不那么友好。Axure 产生的年代是 Web 产品横行的世界,它从一开始设计就没想过为 app 这种东西服务,虽然在之后的几个版本迭代过程中不断针对移动端做出了优化,但墨刀一秒钟就能实现的操作, Axure 可能需要十几分钟。

  另外,其移动端的原型预览机制也很差,所以在手机上你需要下载它的 App AxShare 来帮助你在手机上更流畅地预览和分享原型图。

  AxShare 适用于 iOS 8.0+ 的 iPhone 和 iPad 设备,iOS 版 51.8 MB,完全免费。

  综上所述,虽然这 4 款产品都是用来画原型的,然而使用场景各有不同, AppSo(微信号 appsolution)建议各位产品经理在实际使用时,可以根据自己的实际需求来选择更适合自己的工具。

  P.S.获取更多创业者访谈和大咖精彩分享报道(内容/设计/产品/运营)欢迎关注我专栏哦:MindStore 官方博客 - 知乎专栏

  1 概念阶段lucidchart 画diagram 之前网上很火的Hey Julia的线图版就是类似那种这个阶段不推荐纸笔或者白板是因为越早期越需要多沟通,一个很多人可以合作编辑 添加意见并能完整保存的设计工具是必要的

  2 V1 Mockup网点卡纸 打印出1:1的设备屏幕线框 再加一只黑水笔和几只彩色马克笔就行了这里基本上目的就是把主要的流程和MVP画出来 有多少个屏 每个屏大致有什么内容用1:1的好处就是你可以很容易看出一个flow是不是正常,信息的密度是不是合理,用卡片画好后贴在白板上,大家可以随时讨论,多打印些空白的好随时画新的贴上去,而且顺序什么的可以随时调整

  3 V2 Mockup一般会在sketch里做,这里就可以去设定基本的网格 摆出基本的layout这个阶段需要考虑设计了

  上面四步可以一步一步推进,不是所有的项目都需要走全部四步 之所以不同层级,是不同阶段的设计需要关注不同的问题,自然采用不同的原型方式,而且一个有规可循的产品设计过程会是很好的自我反思方式,也更方便团队合作。新的成员加入或者是和不熟悉项目的人沟通时,用几个层级的原型去演示是最好的诠释,这样会收到更有价值的反馈。

  看了一圈,居然没人提Framer.js. 同样的问题在国外设计师社区,10个人有7个说的是Framer。看来国内国外差距还是比较大。。。

  在最原始的阶段,设计师为了保存自己的想法,同时与其他人沟通,一般都是采用手绘草图的方式。方便快捷。实际上在紧密配合的小团队内,手绘原型完全可以坚持到最后阶段。

  当产品概念已经慢慢清晰后,需要将产品的内容,结构,流程等元素通过可视化的方法固定下来,一般就会使用软件绘制低保真的原型图。这个时候一般会使用Axure,Omnigraffle之类的工具。选择此类工具的理由就是有大量的模板和组件可用(有经验的设计师都会有自己总结积累的模版库),可以提高效率。同时使用软件绘制原型图,传达上会比较清晰一些。

  其实很多时候,低保真的原型+说明+交互行为备注+流程图,已经可以满足需求了。不过因为app一般都有大量的手势行为和过场动画,有时候也需要制作一些更高保真的原型。这时候有几个好的选择:

  1,google收购的Form,类似QZ的操作。学习曲线比较陡峭,不过熟练之后应该能胜任绝大部分需要了吧。

  2,在线原型制作工具,比如前面有同学提到的modao.io,比Form好学易用。缺点就是灵活性就差一点。

  任何原型工具都是为了将设计师的想法尽可能高保真的表达出来的工具。所以创意和技能是相辅相成的,需要齐头并进。

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

  YouTube上一位大牛在他的视频里展示了一套完整网络邮件服务的纸质原型线框图。由两个人合作完成按钮点击和网页跳转的展示,看起来逻辑思路都很清晰完整,但是对于当下的快节奏工作环境,制作和展示这样一套完整的原型还是颇为耗费时间。有网友问展示这套设计排练了多久,也有人担心纸片片的顺序被打乱,或者文件容易缺失的问题。

  相较于这种传统的操作方式,更高级一点的就是借助于各种线框、原型设计工具。也看到网上有很多关于这类工具的介绍或者总结,爆炸式的陈列出大把大把的工具,但是,你真的会用吗?授人以鱼不如授人以渔。所以,这里总结了一些常见原型工具的使用教程,希望对你有用。

  这款工具据说是首创了手绘风格。界面和操作都比较简单,只需拖出控件,调整属性就可以快速的绘制低保真的线框图,手绘风格也很讨巧。网站上很贴心的在首页展示了一个3分钟的短视频,让用户即看即学。更多更详细的使用教程YouTube上也不少,比如这个2013年11月份制作的Balsamiq Tutorial,达到了65K+的观看量。

  Mockplus是一款非常简单易学的交互式原型工具,特有的链接点,让你轻松的在拖拽之间迅速完成组件、页面交互,非常直观。中文教程:10分钟教学视频,即学即用,快速上手。国外的童鞋也能在YouTube上搜到很多Mockplus的教学视频,短短几个月的时间,Mockplus的教程已经累积10K+的浏览。Mockplus在交互方面的优势可以从其中一个“30秒制作原型”的视频中充分体现。

  Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页,图标以及界面设计的最好方式。有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。如果你没有使用过Sketch也不要紧,跟着我列出来的教程视频看下去,你会收获很多的。中文视频,请移步这里:Sketch视频教程专辑。有兴趣看更多视频的同学吗,可以去YouTube看一下LevelUpTuts家的Sketch App Tutorials - Series Introduction视频,干货不少,两年多的时间有300K+的观看,相信有不少看过视频的同学都已经修炼成了大神。

  InVision 并不是一款严格意义上的交互设计工具,但它可以帮助设计师和设计团队更加高效地做原型设计。用户制作一个在线原型只需要四部:创建一个工程、上传视觉设计稿、添加链接以及生成在线原型,便于和同事、用户交流,获取反馈。与此同时,InVision拥有完备的项目管理功能,团队协作完成原型设计。3分钟视频快速了解Invision。同样,可以去YouTube找到更多详细的Invision视频教程。

  这是一款基于桌面的用户体验工具, 可快速实现移动、Web及桌面应用原型设计 。凭借着出色的易用性,用户无需凭借编程知识即可快速上手。Mockplus拥有良好的所见即所得功能, 例如大家熟悉的弹出菜单交互,3步即可实现:拖一个弹出菜单组件和一个按钮到画布,之后拖拽按钮的链接点到弹出菜单,然后运行演示。 总而言之,Mockplus是一款价格便宜且能够快速建立交互原型的出色工具。 此外,该产品还有个姊妹产品,Chainco,可专门导入UI视觉图交互演示,简单好用,UI/UX设计师有福了。

  价格:英文版:基础版——永久免费 高级版——包年支付月均15美元,包月支付每月29美元。 中文版:免费版——永久免费 专业版——包年240人民币,目前优惠价格118,平均每月不到10元。 有兴趣的同学抓紧了解。 看看目前的口碑就知道了。