什么工具可以做pc软件界面原型demo,并可以交互也可以生成exe
发布网友
发布时间:2022-04-23 20:38
我来回答
共6个回答
热心网友
时间:2022-04-20 19:44
摹客的Mockplus就可以做PC软件的界面原型。 我们团队用了几年了,整体使用起来就是简单。软件创建项目的时候可以直接导入一系列高质量的网页或App模板,改一改,就可以快速呈现自己的设计。
如果不想用模板,直接拖拽各种组件和图标到工作区,从头制作也非常快, 加上动效和交互,几分钟就搞定了。
如果想和其他团队的设计师一起制作和迭代的话,直接用它的团队协作功能就可以了。
热心网友
时间:2022-04-20 21:02
首先如果你小团队或者个人开发,当然可以用Xcode,如果大公司跨部门审核调整各种,还是有个快速的原型。
如你要求,可交互。包括常用的Axrue,我试用过下面提到的所有软件,分别完整产出过不同的原型,还有一些市面上的你一看它介绍图还在用ios6的就知道不必了,说明很久没更新了。
下面这些是我按照不同的特点进行了归类,视你的具体情况而定吧。
我在选择软件这个过程中纠结了很久,也是用过在领悟真正的原理。但是这段时间的摸索对我以后也有很大帮助。
热心网友
时间:2022-04-20 22:37
gui design studio 可以做原型
但操作比较不方便,
推荐下自己用的东西:易语言,单纯的界面原型可以做到,交互也OK,也可以生成exe运行文件
热心网友
时间:2022-04-21 00:28
在实际使用过程中,由于项目具体阶段、平台特性以及输出物展示对象的不同,并没有哪个工具受到设计师们一致认可,每个都有其各自的优势和缺陷,按照个人经验对比了一下常见的几款。
下面,详细介绍一下每一类软件的优劣。
Photoshop
作为设计师的看家技能,理论上可以通过它做出任何图形,但对于交互原型来说制作和改动成本略高,图层和组件的处理上比较死板,软件自身性能和模板库也很受挑战,容易过快进入细节讨论而忘记初衷,并非交互稿首选,当然也有设计师一开始就是朝着高保真 Demo 方向做的,用它最直观。
Illustrator
同胞兄弟 Illustrator 在矢量处理上表现的略好,不受画布大小和图层的困扰,也有丰富的模板库支持原型设计,但继承了 Adobe 家族一贯功能大而全导致操作很繁琐的特点,原型图制作效率也不高。
Fireworks
相比之下,干儿子 Fireworks 拥有更简单的界面,同样在图层处理方面的优势,尤其是可编辑 png 文件包含了图层和矢量信息这一点保证了文档的传承性,受到很多的设计团队的青睐而做为交互输出工具的首选,可惜 Adobe 对其支持有限,最新的 Adobe CC 家族中更是失去了它的踪影,未来 Fireworks 优化空间很有限。
Keynote / PPT
作为非专业绘图工具,用 Keynote / PPT 来画交互稿算是曲线救国,丰富的交互动作和简单的使用流程解决了很多交互演示需求,CDC 的同事曾写过一篇《关于快速原型的一点纠结》 做了很好的解释,但问题也正如文章中所述,优缺点非常明显,模板库几乎为零,在没有其它工具辅助情况下自行绘制费时费力,在这里就不详细介绍了。
Axure
号称是互联网产品经理标配,国内有大量资料和讨论,其优势非常明显:操作复杂度介于 Keynote/PPT 和 Adobe 家族之间;拥有全套 web 控件库,直接拖拽即可快速制作网站原型;丰富的动态面板可以用来模拟各种复杂的交互效果;导出 HTML 后可以更加准确的传达信息架构和页面跳转。
但对移动产品原型支持不足,Axure 无法导出可在移动端演示的文件,只适合做信息结构和页面逻辑的展示。在对形状样式的处理上不够丰富,很多细节处理的不够好,做出来的线框图大多不够好看。
OmniGraffle
作为 Mac 平台下最好的原型设计工具,除了用来绘制普通图表、树状结构图、流程图、页面编排等,还可以试试规划电影剧本、 绘制公司组织结构,甚至是作为演示文稿来展示一个项目。
由于利用了很多 OS X 原生绘图属性,Omnigraffle 只支持 Mac / iPad ,它在很多方面表现都有 Visio 的影子,就连名字里的 “Graffle” 都是创造出来对应 “Visio” 的,尽管在 web 交互事件上并不如 Axure 那么丰富,对移动平台的支持也不如一些新星 (如 briefs 和 fluii ) 的表现那么亮眼,但由于其丰富的模板库、轻松的上手体验以及大量贴心的细节,战胜了其它所有竞争对手,成为我日常工作最主要的工具。
以上几个软件已经能涵盖大多数的使用场景,但工具毕竟只是纸和笔的延伸,在熟练掌握其中一个的基础上,不断尝试新工具不仅能发现更多有价值的技巧加快设计节奏,更是对自身能力短板的了解,互相结合使用让想法不受工具牵绊,努力让自己成为全栈设计师才是它们的价值。
另外,市面上较少介绍 OmniGraffle 技巧的文章,很多人感兴趣但不知道怎么用好它,下面分享10个有用的小技巧来加快上手。
1. 自定义你的工作界面
2. 样式刷
在 Omnigraffle 中,可以通过拖拽指示器到另一个组件上的方式将包括边框填充颜色等样式复制过去,也可以复制任意单一属性,大大节省了重复或近似组件的样式修改成本。
3. 网格、智能辅助线及参考线
除图示外,在画布空白处点击右键可以看到三个选项
对齐到网格,参考定义画布环节描述的网格设定,勾选这个选项后,调整形状大小就会使边缘贴近网格,拖拽位置时会根据形状大小让任意一边贴近网格。
智能对齐辅助线,勾选后,拖拽形状位置时,会自动寻找当前水平或垂直方向,边缘或中心能对齐的已有形状或画布中心线,推荐勾选
智能距离辅助线,勾选后,会自动寻找水平或垂直方向上临近的两个形状,在等距的时候给出提示,推荐勾选
4. 流程图
在用 visio 画流程图过程中最受不了的就是连接线不能随意控制形状位置样式,只能画几种特定的图,新建节点的操作步骤也很繁琐,而这一缺陷直接导致各种思维导图软件的崛起。在 Omnigraffle 中这些都变得很容易,只要记住几个快捷键,画起流程图来轻松写意。
5. 点击事件以及导出 pdf & html
在制作交互模型时,加入对点击事件的处理能很方便的演示我们想要的效果,Omnigraffle 支持的脚本不多,没有鼠标滑过,没有动画,只有点击跳转和点击显示或隐藏图层两种,对于一般的原型演示足够用了,尤其是图层显示隐藏,例如可以像图中所示将浮层中的内容放在图层2上,用关闭按钮用来触发隐藏,来实现图示效果。
在演讲模式、导出为 pdf 或 html 后都可以用来演示设定好的交互点击效果。在演示移动原型的时,我通常的做法是制作和屏幕大小一致的文件,设置好点击效果后导出 pdf ,在手机上用任意支持读取 pdf 的应用打开。(这里推荐多看,无页面翻转动画,无多余留白)
6. 画布和图层
和 Fireworks 一样,Omnigraffle 提供类似的画布和图层管理,方便将项目所有内容集中在一个文件中,每个画布可以单独设置页面背景、大小、单位、网格和参考线,并且可以通过共享图层让所有画布使用同一个母版,也就是说既可以当 Indesign 用,也可以当 PPT 用。
画布:Omnigraffle 默认使用 pt 来定义自身单位,在画布面板中用 1pt = 1xx 的方式来设置换算方式,目标单位可以是像素、厘米、英尺、千米等,意味着除了用来画用户界面,还支持用来画地图、家装平面图等任何大小的精准图形。
图层:可以将 Omnigraffle 中的图层理解为一个特殊的、可以批量隐藏或锁定的、可以直接转换为所有页面共享的群组,共享图层的名称会被标记为橙色,界面左下方的内容面板显示了每个图层内部的层叠顺序,如果文件导出时选择 psd,Omnigraffle 还会将图层内容合并成 photoshop 能读取的格式。
如图所示,利用共享图层这一特性,我们可以将画布设定为1024*768,并在共享图层的指定位置插入页码 (Edit→Insert Variable→Canvas Number) 等,模拟 PPT 的方式制作演示用文档。
7. 快捷键
点击 Help→Keyboard Shortcuts,查阅所有的系统快捷键,了解下面这几个就能满足大部分情景了
最常用的检查器面板,cmd+12345切换;
设置好一个常用的形状样式,右键点击加入收藏,以后按住 s 不放就可以直接画出来;
按住 t 不放点击空白处就可以直接新建一个文本块,双击任意形状也可以在里面插入文字;
放大缩小只能通过 cmd+shift+. 和 cmd+shift+, 右手需要离开鼠标不是很方便,我通常是按住 z 鼠标点屏幕来放大,option+z 点击屏幕来缩小(z这个操作在ps和ai里也通用);
快速复制一个形状 cmd+d,新的形状会在当前形状右下方一个网格的位置出现,比cmd+c之后在cmd+v省一步。
8. 无穷的模板库
在 Omnigraffle 中,工作文档 .graffle和模板文档 .stencil 的表现和编辑是完全一样的,可以很方便的将已经编辑好的文档组织整理后,复制粘贴到模板文件中沉淀,作为后期复用规范,如果搭配云同步工具使用,小型设计团队统一设计规范不再是难事。
除软件自身提供的一堆模板外,全球 Omnigraffle 爱好者们搭建了 Graffletopia 用来共享各自的模板 (部分收费),事实上如果你有足够的耐心和精力,所有的模板你都可以照猫画虎自己画出来。
9. 制作自己的图标库
Omnigraffle 自带的图形基本上能满足大部分需求,简单形状也可以用形状组合和钢笔工具来画, Graffletopia 上有很多其他人画好的形状图标,但面对具体项目的时候需要自己画图标时该怎么办呢?以下有几种方式可供大家选择
最快捷:直接粘贴图标图片进来,缺点是无法调整颜色,不可放大。
多色图标:从 AI 中直接拖拽图形进来,仍旧保持矢量可随意拖拽但不可调整颜色。
单色图标:将 AI 中画好的单色图标导出为pdf (File→Scripts→SaveDocsAsPDF) 后用 Omnigraffle 打开,可随意调整大小和颜色,非常适合图标库的建立。
10. 使用hex值定义颜色
Mac 自带的取色器只能在已有的颜色集里选或是靠肉眼在色盘里选,非常不严谨,还好有爱心人士提供了 Hex Color Picker 和 Developer Color Picker 插件来帮助我们精准设定颜色。
热心网友
时间:2022-04-21 02:36
现在这类工具有很多,那我今天就罗列一些UI设计师和产品经理经常用到的工具,以此提高工作效率,又好又快的完成工作。
第一款:Axure
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理
第二款: Adobe XD
Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。
第三款:Mockplus(摹客)
Mockplus,一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上,采取了隐藏、堆叠、组合等方式,把原本复杂的功能,精心安排。上手很容易,但随着你的使用,功能层层递进,你会发现更多适合自己的有用的功能。新手不会迷惑,熟手可以够用。值得一提的是这是一款国产工具,我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际(很多老外也购买摹客英文版)的前列,不论是原型设计、流程协作还是设计规范,都能够在摹客完成,非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件,界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。网页链接
- 可分工协作,多人编辑同一个项目;
- 通过评论和标注原型,完成对项目的审阅;
- 提升开发团队的生产力;
- 大大降低沟通交流成本。
第四款: Justinmind
JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程,就可以在原型上定义简单连接和高级交互。
第五款:Balsamiq Mockups
Balsamiq Mockups是一款共享软件,每个lisence授权是79美刀,对个人用户来说,价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域,特别是web原型图设计领域,还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像,看上去非常美观、清爽(当然,跟使用者的设计水平也有关系)。它支持几乎所有的HTML控件原型图,比如按钮(基本按钮、单选按钮等)、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外,它还支持目前如火如荼的iPhone手机元素原型图,这为开发iPhone应用程序的软件工程师提供了非常好的设计图。
第六款: Proto.io
Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型,并且可以模拟出相似的成品。基于Web的在线环境,它可以让你制作流行的 iPhone,iPad,Android 手机以及任何带有屏幕界面的产品原型。
热心网友
时间:2022-04-21 05:01
摹客原型:这个是我们现在绘制高保真原型的工具,支持矢量绘图和布尔运算等,交互也很丰富,还支持流程图和产品文档,画完直接在摹客平台交付,节省了许多麻烦的步骤。