精华内容
下载资源
问答
  • 常用的快速Web原型图设计工具

    万次阅读 2015-01-20 15:17:26
    做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具。在PM朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下。  主要...

    做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具。在PM朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下。

      主要有:Office、Axure Rp、Balsamiq mockup、Pencil、rational rose、Serena Prototype Composer、iRise Studio、GUIDesignStudio、UIDeginer。   

    Office 

      Office我想几乎人人都要用,但真正用的强悍的人还是少见。我订阅的youtube有一个视频作者就是专门教人使用office,很多方法很新颖。Office有一系列的软件可以在原型设计中使用:Word、Visio、PPT,其中我用过Word做过线框图和流程图,原型设计我主要是依靠表格,Visio可以做很强大的流程图,也有人用他来做网页(我从来不用),PPT演示效果非常不错,所以也有人用来做原型,但是操作相对比较繁琐。

      

    Axure Rp

      Axure Rp就太强大了,非常适合做Web网站原型,交互效果都非常好,Axure发音是“Ack-Sure”,RP则是”RapidPrototyping”快速原型的缩写,是美国Axure Software Solution公司的精心杰作,可以说Axure是web产品前期设计的首选,能帮助网站需求设计者,快速完成原型文档、交互界面、功能流程,可以直接生成浏览器demo版本或是word文档,建议所有做产品的朋友都可以尝试一下。

      如果你很多复杂的交互功能控制不好,网上也有很多的控件模块供你下载,前段时间也有人作出Pro5.1的汉化补丁,所以还是很容易上手。

    Balsamiq Mockup

      Balsamiq mockup主要是做界面原型设计,是一款免费的带有手绘涂鸦风格的原型设计软件,这也是他独特的地方—可以手绘,当然也有丰富的各种控件元素,可以帮助你设计桌面应用软件,Web 2.0 站点,RIA富网络应用程序, Web站点和Web应用软件。相对来说这款更容易上手,不过本人手绘能力不好所以很汗颜,不过在不断进步ing!

      在线试用地址:http://www.balsamiq.com/demos/mockups/Mockups.html

    Pencil

      Pencil应该是08年初在一位PM的博客书签里面找了,最初只是firefox的小插件,后来也出了独立软件。据了解得过Firefox3插件Grand Prize大奖第一名。主要用作做原型图,我使用的是插件版,只能生成png格式的原型图。Pencil非常好用,你迅速就可以学会,各种web元素都比较全,信手粘来进行组合就能做成一个可预览的原型图。我现在常用。安装下载地址:https://addons.mozilla.org/zh-CN/firefox/addon/8487

    Prototype Composer

      Prototype Composer是一款能够让非技术型的用户进行原型设计的免费软件,还包括商业过程、活动、需求和数据,就是说不但可以制作界面原型,还可以用来做项目管理,包括需求管理,数据管理,可发布成demo原型和Word文档,但是都是英文版本。国内PM大多都是偏重产品设计,为了提高团队协调能力,可以用这个软件来锻炼。交互功能比Axure弱小点以外(也可能是我没学好),总体来说这个软件很强大啊!

    iRise Studio

      IRise Studio是iRise公司开发的,iRise公司就是专门为IT、互联网企业提供服务的公司,他们有一整套的应用模拟器iRise Application Simulator,能整个的模拟出产品的形状、运作、管理。而iRise Studio只是其中的一小块,主要用于产品界面设计。感觉很强大,仿真度也颇高,但本人目前也只是浅尝了一下,刚刚接触。

    GUIDesignStudio

      GUI Design Studio是一款图形用户界面设计工具,可以任意的使用各种web元素拼凑出产品界面,可以用过原型演示,生成word文档。但是感觉和其他工具差异性不是很大,没什么可发掘的特点,而且觉得人性化不够。

    UIDeginer

      UIDeginer是腾讯CDC团队捣鼓出来的玩意,大体上看起来还可以,拖拽各种元素控件组合产品生成EXE格式的demo文件,操作也比较简单方便。但是没什么特点,而且细节不够,远远不够,同样的产品比的就是细节嘛。

      重点推荐前几款有图的,适合自己的就是最好的!

    展开全文
  • 毕业设计选了一个开发类的题,老师要我先做原型设计。 四处搜罗工具,无奈专业工具用起来繁琐,简单的工具又功能不行。不想在界面设计上花费太多时间,最后发现Power Point很不错。由于平时用得也比较熟悉,做起来...

        毕业设计选了一个开发类的题,老师要我先做原型设计。

        四处搜罗工具,无奈专业工具用起来繁琐,简单的工具又功能不行。不想在界面设计上花费太多时间,最后发现Power Point很不错。由于平时用得也比较熟悉,做起来很是得心应手。

    一、确定大体结构

        前期已经明确,这是一个后台管理系统,老师也很中意vue-element-admin的界面风格,于是就决定套用其中的导航菜单也页面布局。

        首先:按照自己的需求修改vue-element-admin中的router部分的代码,完成基本的导航栏部分。

        然后:运行,截图,将截图放置在PPT新建的页面上。如下图所示:

        很多原型设计软件,零基础去画,光这个导航菜单就要花费大半天的时间。如此,利用代码生成导航栏,免除了重新画的烦恼、对程序员的审美要求也不高。

        同理,后面很多图表也可以采用这种编码再截图的方式。毕竟,比起画图和设计,写代码还是更熟悉一些。

     

    二、逐个完成页面

        有了菜单导航栏,剩下的部分就是往页面里面加东西了。

        比如,在这个“概览页面”,按照老师的需求,我需要将它分成四个部分,每个部分包含一个图表,类似于控制台,总揽全局,系统中众多数据以统计图的形式呈现在这里。

        观察很多现有的网站设计发现,一个网页看起来是否精美舒适(虽然这不是程序员关心的东西),主要体现在一些小细节方面,比如加一点边框,加不同深浅的背景色,体现一些层次感,加一些小图表。下面就说说控制台首页的绘制步骤:

    (1)画出四个分区。

        用灰色画一个大矩形作为背景,用四个白色矩形分割出四个部分,同时设置边框为1px,浅灰色。至于用什么样的灰色,也有讲究。个人觉得,用拾色器去现有的网站上去找最好看也最方便。我不是专业的UI设计,临时做设计还是得多借鉴的。

        完成后如下图所示:

    (2)小标题

        在标题上,有一些小细节。首先,网页的文字不是纯黑色的,大概是不美观的缘故吧,总之都是带一点灰色的。其次,在标题前面加一个蓝色小矩形会给人感觉精致许多。

        用PPT画一个小矩形,矩形设置蓝色(同样从别的网站上用拾色器搬来的,不过,整个设计尽量从同一个网站上取,保证配色的和谐统一);后面紧跟文本框,如前所属,文本颜色带一点点灰;再者,整个页面的字体一定要小,不能够大,大了就会给人一种很假的感觉。

        如下图所示:

    (3)分割线

        在标题下加一条灰色分割线,高1px,两端可以留10px左右空隙。用PPT直线画出即可。

    (4)统计图

        仪表盘页面主要组成就是一些图表,用来展现一些统计数据。若是要用原型设计工具画工具,很是麻烦。

        这里依然采用,编码+截图的方式完成。

        首先,Echart是VUE中很好的一个图表组件,对于这种快速完成的界面设计图,直接找现有的组件最方便。在Echart社区物色一个合适的条形统计图,简单改一下参数、数据,截图,搬过来。

        这样做出来效果不错:

        为方便后面调整位置,这样一个模块可以选中-点击“组合”,整体移动。

    (5)数据展示

        对于需要一些文字描述的场景,同样借鉴参照了很多其他网站,也结合自己的浏览经验。设置文字颜色、字体,适当加一些分割线。

        另外一个分区做出来如下图所示:

    (6)Tab标签页

        tab标签页直接使用PPT中的线条和文字组成:蓝色线条、灰色线条、小号字。如下图所示:

       

    (7)按钮

        根据不同的按钮样式,这里采用文本框加边框,改颜色,来画一个按钮。如下图所示:

    三、完成效果图

        按照上面的几个部件绘制方法,最终完成的设计图如下图所示:

        对于像我这种临时的UI设计,简单,快速的同时,还能保证美观,那自然是再好不过了。

    四、其他页面

        其他的页面多为表格,在我之前使用过的原型设计软件中,绘制表格十分麻烦。这里便继续采用编码+截图的方式,既完成了简单的编码,又快速绘制界面原型图。

        使用element UI组件敲了一个表格,顺便也做了几个按钮和输入框。截图搬过来,效果如下:

    五、小结

        这种方法只适用于对于设计零基础、并且不想在此花费过多时间的情况。对于满足师生交流讨论,这种简易原型图还是足够了。

        在平时的学习交流中,总是需要这样的原型图方便交流讨论。在尝试众多原型设计软件后,才发现PPT最好用。将方法分享给同样为原型设计头脑的人,希望有帮助。

    展开全文
  • 让我们以不分先后的顺序看一下当今可用于Web设计人员的一些原型制作工具: 成帧器 Adobe XD Adobe After Effects Adobe Animate CC Craft.io原型 原理 原子 原型 贾斯汀·明德 折纸 富林托 ...

    web 原型设计工具

    让我们以不分先后的顺序看一下当今可用于Web设计人员的一些原型制作工具:

    1. 成帧器
    2. Adobe XD
    3. Adobe After Effects
    4. Adobe Animate CC
    5. Craft.io原型
    6. 原理
    7. 原子
    8. 原型
    9. 贾斯汀·明德
    10. 折纸
    11. 富林托
    12. 网络流
    13. 奇迹应用
    14. 额外: Placeit

    首先,向利益相关者和客户提出想法似乎很轻松,但是当事情变得困难时,我们需要工具来帮助加快反馈过程。 对于前端设计师而言,Web变得越来越复杂,具有越来越多的交互式请求。 滑动和拖动之类的动作只是冰山一角,弄清楚整个谜题如何组合在一起才是原型制作真正的艺术所在。

    原型适合的地方

    根据定义,“原型”是用来测试特定概念的早期示例。 原型用于评估和增强系统,以更好地了解整个项目。 我们每个人每天都在做项目,有些比其他项目复杂得多,但是什么时候该召唤一种工具来帮助反馈食物链呢?

    有人会说代码的编写速度要快得多,但是有些时候,最好花时间使用原型,而不是花时间设计可能会很快落到路边的东西。 原型设计邀请您提供有关交互和放置的反馈。 这是一个交互式线框,可让客户更好地了解该项目如何适合其用户。

    其他时候,在编码之前进行原型制作可以通过识别可能遗漏的任何边缘情况来帮助使项目受益。

    原型设计和Web设计环境

    当我们问自己今天适合什么情况时,我们绝对可以归因于对运动工作的需求不断增长。 接口正在成为具有交互内容的生物。 简单的交互可以随意地进行口头解释,但是在其他情况下,它有助于了解如何触发交互-越来越多的客户要求在签字之前先查看概念证明。 现在就比以往任何时候都重要,要有一个想法,在需要原型时应该转向哪里。

    1.成帧器

    • 加许可:$ 15 / mo(仅限Mac)
    • 企业许可证:联系方式

    Framer使可视化编辑具有代码灵活性,从而提供了无缝的工作流,并辅以设备预览,版本控制和简化的共享。 一个有助于开拓新的交互模式以创建突破性应用的应用。 从您最喜欢的API中提取数据,捕获实际用户输入以进行测试,并与实际用户和反馈进行合作。 直接从Sketch,Photoshop或Figma导入图形。

    虽然Framer看起来好像严格用于移动应用程序,但也可以用于非应用程序项目,也可以用作独立库。 单独使用Framer JS库时,可以完全避免使用IDE 本质上,它是用于快速原型开发的开源JavaScript框架。 定义动画和交互,并包含滤镜,弹簧物理特性,3D效果等。 尽管不需要CoffeeScript,但是文档使用CoffeeScript和IDE。

    应当知道,Framer并非用于创建可用于生产的动画。

    因为Framer有其自己的层次概念,并且在代码方面非常繁琐,所以不能像在GreenSock中那样在普通的(现有)DOM中使用它。 实际上,它在DOM中放置了自己的画布,所有动画都在该画布中运行。

    2. Adobe XD

    • 价格:需要Adobe的Creative Cloud帐户

    绘制,重用和重新混合矢量和光栅图稿,以从同一应用程序创建线框,屏幕布局,交互式原型和可投入生产的资产。 使用功能强大的工具(例如专门为XD构建的Repeat Grid)以及用于UX设计的图层,符号和钢笔工具。 使用各种动画来添加交互,以在艺术面板之间创建过渡,以模拟您的应用程序/网站的流程。

    当您直接共享时,客户可以直接在原型上发表评论,并在实际设备上实时查看设计。 可以跨平台调整设计并自动更新设计。 通过一个强大的工具,可以轻松地从线框图,视觉设计,交互设计,原型制作,预览和共享中进行切换。

    3. Adobe AfterEfects

    • 价格:需要Adobe的Creative Cloud帐户

    还可以在Tuts +上查看这个由十部分组成的系列,称为Welcome to After Effects

    4. Adobe Animate CC

    • 价格:需要Adobe的Creative Cloud帐户

    5.Craft.io原型

    • 价格:免费。 需要素描$ 99.00

    使用您的真实设计文件构建高保真原型。 Craft是Invision系列的一部分; 如今,一家公司从外部实体那里购买了许多工具(例如MacawEasee )。

    Craft Prototype是一组功能强大的工具,可让您使用真实数据进行设计,只需单击即可创建样式指南。 有了原型,您可以直接从Sketch完成这项工作; 全部集中在一个空间中。 通过实时镜像到手机,您可以立即测试设计原型。 准备好共享时,可以将您的工作直接发布到Invision,以获得来自客户和利益相关者的即时反馈。 它甚至使您可以通过运动以更高的保真度制作原型,从而为您提供了使用关键帧进行视觉调整的时间线。 为您的开发人员生成HTML和CSS,本机Swift代码和文档。 观看这段简短的视频,介绍Craft 2.0 Preview- Vimeo 上Sketch中的原型

    6.原则

    • 价格:129.00美元(仅限Mac)

    Principle使设计动画和交互式用户界面变得容易。 无论您是设计多屏应用程序的流程,还是设计新的交互和动画,Principle都能使您创建外观和感觉都很棒的设计。 该应用程序看起来非常类似于Sketch for UI,包括对齐,画板创建和屏幕连接以及实时预览等其他熟悉的方面。 单击动画层可以更深入地研究关键帧并调整自定义缓动曲线,就像在其他动画工具中一样。 Principle可以让您自由进行实验,而不必局限于预定义的过渡,而且您还可以从Sketch导入画板。

    适用于iOS的Principle Mirror应用程序使其他人可以在其设备上查看您的设计。 在设计时,您可以通过将设备插入计算机或导出独立的Mac应用程序供其他人查看来立即进行交互。

    7.原子

    • 入门级:$ 15 / mo
    • 专业版:$ 25 /月
    • 无限:$ 25 /月

    Atomic是与Sketch集成的基于Web的应用程序,可让您从那里或您选择的任何位置导入设计。 将设计引入Atomic很简单; 使用功能强大的Sketch插件或从您喜欢的设计工具中添加元素。

    Atomic具有内置的绘图和布局工具,可用于从头开始设计或在导入的设计基础上进行设计。 使用一系列适用于移动设备或台式机的手势和过渡来快速链接您的设计。 使用自定义CSS可以应用其他样式,还可以导出CSS与其他开发人员共享。 在其网站上了解有关Atomic功能的更多信息。

    8.原始

    • Freelancer $ 24 / mo
    • 启动$ 40 /月
    • 代理商$ 80 /月
    • Corporate $ 160 / mo

    使用Proto易于使用的时间轴为任何交互设计模式构建复杂的动画。 该应用程序带有一整套UI库,例如iOS9,Material Design,Windows 10等。 可以使用Sketch或Photoshop插件导入设计。 导入它们并与Dropbox同步。 直接导出UI资产。 使用适用于IOS或Android的原型应用程序在浏览器或设备中预览原型。 与客户或团队成员共享以进行协作并生成反馈。 Proto与领先的用户测试工具集成在一起,以获得强大的反馈和见解。

    在Proto网站上了解有关其功能的更多信息。

    9.贾斯汀·明德

    JustinMind是一款基于应用程序的产品,用于将简单的模型转换为适用于iOS和Android的交互式原型,并创建Web和移动线框。 利用预构建的UI库,将HTML和文档嵌入您内心想要的任何东西。 付费帐户允许多个用户同时与同一个原型交互,从而轻松获得反馈。 它甚至具有广泛的预先存在的小部件库,这些库针对为您的项目选择的设备模板量身定制。 您可以使用交互式按钮,复选框,列表甚至视差布局之类的元素。

    如果您是此工具的新手,它附带了出色的教程和指导视频,适用于从初学者到专家的每个人。 尽管它提供了免费的浏览器共享功能计划,但您必须升级到付费帐户才能在团队成员之间进行协作。 使用JustinMind Prototyper,您可以从任何设计工具导入图像,也可以直接从Web浏览器导入图像,然后使用“图像热点”工具将其转换为令人兴奋且引人入胜的Web原型。 将原型导出到功能齐全HTML文档中,并使其易于在任何Web浏览器中查看。

    10.折纸

    • 价格:仅免费Mac。

    折纸由Facebook的设计师构建和使用,并已用于创建Instagram,Messenger和Paper等应用。 从Sketch复制任何内容并将本机图层粘贴到Origami Studio中。 快速调整,添加行为并为任何图层属性设置动画,而无需返回。 该工具为设计人员提供了UI模式常用的一系列手势和过渡动画。

    Origami提供了用于交互式原型制作的有用功能,以及Sketch和Photoshop的插件以及论坛提供的文档库。

    有一个“导出为代码”功能,可让您将视觉设计转换为iOS,Android或Web的书面代码示例。 尽管可以使用适用于Android和iOS的Origami Live预览原型,但不能与在自己设备以外的设备上操作的个人直接共享原型。 Origami网站上查看教程以获取更多信息

    11.弗林托

    • 14天免费试用
    • Flinto Lite; 基于网络的订阅$ 20 /月
    • Mac App:99美元

    Flinto for Mac是基于应用程序的工具,可让您创建从简单的点击式原型到具有交互功能的综合性原型的任何内容。 没有编程或时间表。 它是面向设计师的原型设计工具。 将对象和组件放置在所需的位置。 过渡可以是简单的,也可以是复杂的,并且过渡是可重用的。 您可以精确控制每个层,包括弹簧或三次贝塞尔曲线的松动。

    使用“行为设计者”创建一个屏幕中存在的微交互。 这非常适合诸如按钮效果,切换开关,循环动画和基于滚动的动画之类的事情。

    在屏幕上添加滚动区域也很容易。 选择图层,然后单击“滚动组”按钮。 您可以调整各种选项,创建分页滚动组,嵌套滚动组,甚至创建基于滚动的动画。

    您在Flinto for Mac中所做的所有更改都可以在预览窗口中立即进行测试,或者使用免费的iOS查看器应用程序在连接WiFi的iPhone或iPad上进行测试。

    Flinto的iOS查看器应用程序在App Store中免费提供,任何人都可以下载,因此您可以将Flinto文件发送给您想要共享的任何人。

    12. Webflow

    • 入门级:免费
    • 精简版:$ 16 /月
    • 专业版:$ 35 /月

    Webflow是另一个基于Web的应用程序,可直接在最新版本的Chrome和Safari中运行。 这意味着当前在上述浏览器中已对其进行了优化,但是生成的代码具有跨浏览器的支持。

    “无需编写代码即可构建动态,响应Swift的网站。 一键启动,享受网络上最快,最可靠的托管。 导出干净的语义代码以移交给开发人员。”

    Webflow专注于Web动画,交互和响应式Web设计。 Interactions 2.0即将面世,它将为跨断点的动画和交互提供更多控制(通常是设计人员所表达的痛点),当然还可以轻松实现可视化构建以及代码代理。

    为了让您体会Webflow的可能性,请签出此实时演示 ,也可以在Webflow中查看该演示 ,或签出此CodePen演示中生成的代码。 在此视频中体验UI也很有帮助。

    如果您在外部导出和使用它,或者将其交给开发人员,则产生的代码质量是语义的,易读的并且易于使用。 以下是一些演示产生的代码的演示。

    当前可以使用Interactions V1 ,并且Interactions 2.0将包括更多的自定义视差类型动画和可视化内置的交互性。 基于光标/实时滚动位置的动画。 Webflow希望尽快推出Beta版,因此Interactions 2.0将成为界面的很大一部分,也是许多设计人员和开发人员使用Webflow的重要原因。

    感谢Webflow的Waldo Broodryk,他花了时间回答我的许多问题,并分享了他的演示和知识。

    13. Marvel App

    • 免费(1个用户,2个项目)
    • 专业版$ 12 /月
    • 公司$ 48 / mo

    基于Marvel的基于浏览器的编辑器使您可以将所有设计链接在一起,添加手势和过渡效果,以使原型看起来像真实的应用程序或网站。 为iPhone,iPad,台式机,Apple TV,Apple Watch和Android创建原型。

    Marvel具有协作,评论等功能,并在浏览器中使用“画布”进行设计,此外,您还可以使用Photoshop,Sketch或笔和纸添加图像。 用户可以单击并拖动以在设计上创建交互式热点,这些热点在单击或触摸时会做出React。 Marvel附带了其他一些很酷的功能,例如Sketch插件 ,甚至是iOS工具 iOS应用程序现在包含Canvas(前面提到),Marvel的快速设计工具,使您可以从头开始创建应用程序模型。 该应用程序还包括IconfinderUnsplash ,它们为您提供了史诗般的数据库,其中包含超过一百万张照片和图标,可将其整合到您的设计中。

    14.额外:Placeit

    • 订阅(休闲):$ 29 /月
    • 订阅(专业版):$ 99 /月
    • 订阅(视频):$ 199 / mo
    • 还提供图像下载包和单次购买

    Placeit是一个模型生成器; 一个在线工具,可让您将自己的设计(包括UI设计,徽标,其他品牌资产)嵌入到演示环境中。 例如,您可能有一个应用程序设计,希望将其放置在iPhone的咖啡桌上,或将徽标叠加在模特的衬衫上。

    也许您甚至希望将设计嵌入到这样的视频中:

    拥有近3,000个模板并在不断增加,Placeit一定能满足您的需求。

    结论

    无论您决定使用哪种工具,都请选择最适合您的工具和最舒适的工具。 如果您有提到的任何工具的经验,可以帮助他人尝试决定使用哪种工具,请在下面发表评论。 我希望本文能帮助您获得更多的见识,并在需要时做出明智的决定。

    特别感谢这些人在我的研究过程中提供的投入,知识共享和观点:

    翻译自: https://webdesign.tutsplus.com/articles/13-prototyping-tools-for-web-designers--cms-28254

    web 原型设计工具

    展开全文
  • 做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具。在PM朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下。  主要有...

      做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具。在PM朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下。

      主要有:Office、Axure Rp、Balsamiq mockup、Pencil、rational rose、Serena Prototype Composer、iRise Studio、GUIDesignStudio、UIDeginer。   

    Office 

      Office我想几乎人人都要用,但真正用的强悍的人还是少见。我订阅的youtube有一个视频作者就是专门教人使用office,很多方法很新颖。Office有一系列的软件可以在原型设计中使用:Word、Visio、PPT,其中我用过Word做过线框图和流程图,原型设计我主要是依靠表格,Visio可以做很强大的流程图,也有人用他来做网页(我从来不用),PPT演示效果非常不错,所以也有人用来做原型,但是操作相对比较繁琐。

      

    Axure Rp

      Axure Rp就太强大了,非常适合做Web网站原型,交互效果都非常好,Axure发音是“Ack-Sure”,RP则是”RapidPrototyping”快速原型的缩写,是美国Axure Software Solution公司的精心杰作,可以说Axure是web产品前期设计的首选,能帮助网站需求设计者,快速完成原型文档、交互界面、功能流程,可以直接生成浏览器demo版本或是word文档,建议所有做产品的朋友都可以尝试一下。

      如果你很多复杂的交互功能控制不好,网上也有很多的控件模块供你下载,前段时间也有人作出Pro5.1的汉化补丁,所以还是很容易上手。

    Balsamiq Mockup

      Balsamiq mockup主要是做界面原型设计,是一款免费的带有手绘涂鸦风格的原型设计软件,这也是他独特的地方—可以手绘,当然也有丰富的各种控件元素,可以帮助你设计桌面应用软件,Web 2.0 站点,RIA富网络应用程序, Web站点和Web应用软件。相对来说这款更容易上手,不过本人手绘能力不好所以很汗颜,不过在不断进步ing!

      在线试用地址:http://www.balsamiq.com/demos/mockups/Mockups.html

    Pencil

      Pencil应该是08年初在一位PM的博客书签里面找了,最初只是firefox的小插件,后来也出了独立软件。据了解得过Firefox3插件Grand Prize大奖第一名。主要用作做原型图,我使用的是插件版,只能生成png格式的原型图。Pencil非常好用,你迅速就可以学会,各种web元素都比较全,信手粘来进行组合就能做成一个可预览的原型图。我现在常用。安装下载地址:https://addons.mozilla.org/zh-CN/firefox/addon/8487

    Prototype Composer

      Prototype Composer是一款能够让非技术型的用户进行原型设计的免费软件,还包括商业过程、活动、需求和数据,就是说不但可以制作界面原型,还可以用来做项目管理,包括需求管理,数据管理,可发布成demo原型和Word文档,但是都是英文版本。国内PM大多都是偏重产品设计,为了提高团队协调能力,可以用这个软件来锻炼。交互功能比Axure弱小点以外(也可能是我没学好),总体来说这个软件很强大啊!

    iRise Studio

      IRise Studio是iRise公司开发的,iRise公司就是专门为IT、互联网企业提供服务的公司,他们有一整套的应用模拟器iRise Application Simulator,能整个的模拟出产品的形状、运作、管理。而iRise Studio只是其中的一小块,主要用于产品界面设计。感觉很强大,仿真度也颇高,但本人目前也只是浅尝了一下,刚刚接触。

    GUIDesignStudio

      GUI Design Studio是一款图形用户界面设计工具,可以任意的使用各种web元素拼凑出产品界面,可以用过原型演示,生成word文档。但是感觉和其他工具差异性不是很大,没什么可发掘的特点,而且觉得人性化不够。

    UIDeginer

      UIDeginer是腾讯CDC团队捣鼓出来的玩意,大体上看起来还可以,拖拽各种元素控件组合产品生成EXE格式的demo文件,操作也比较简单方便。但是没什么特点,而且细节不够,远远不够,同样的产品比的就是细节嘛。

      重点推荐前几款有图的,适合自己的就是最好的!

    展开全文
  • 系统原型设计图工具--墨刀 使用

    千次阅读 2018-10-31 15:31:26
    因项目需求,需要设计一个项目的系统原型设计图,根据网上推荐,选择了一个原型设计工具–墨刀,这个工具使用简单,易上手,可以让一个初学者快速的设计出原型界面。 墨刀使用:要先注册登录才能合理的使用这个工具...
  • web项目快速原型设计

    千次阅读 2012-04-17 10:03:44
    web项目快速原型设计教程:http://wenku.baidu.com/view/19c60066f5335a8102d220ec.html Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架的带注释页面示意、操作流程、以及交互设计,并可自动...
  • Behance 是著名设计社区,创意设计人士可以展示自己的作品,发现别人分享的创意作品。 网站有二级导航,主要用到的交互组件有弹出面板,通过弹出面板来隐藏展现搜索框。并且用到的组件有播放器、菜单栏、下拉菜单、...
  • web页面原型设计原则:

    2012-07-27 17:17:10
    web页面做了不少,总结一下心得: 1 色调: - 主色调不超过三个。 - 基本颜色为蓝色(主体背景色)、灰色(边框)、白色(背景)、黑色(字体)、深红色(错误)、绿色(表示通过)、橙色(高亮、警告) -  2 操作...
  • 软件界面原型设计工具 Web Axure RP

    千次阅读 2018-11-10 08:42:23
    软件界面原型设计工具 Web Axure RP
  • 软件界面原型设计工具(Web):Axure RP

    万次阅读 2012-01-29 11:29:57
    Axure RP如果你觉得Balsamiq Mockups卖79美元还贵的话,那Axure就更显得色差奢侈了,很多Axure的培训费...Axure RP Pro是美国Axure Software Solution公司的精心杰作,可以说Axure是Windows上最出色的原型设计软件,亦
  • 原型图设计软件

    千次阅读 2018-09-08 16:06:27
    1.Mockplus 免费方式:所有基础功能免费 功能特色: 快速交互设计(海量组件,只需拖曳即可完成交互) 快速复用功能(格式刷,组件样式,我的组件库...适用情景:中低保真原型,快速原型WEB/移动端/平板原型,...
  • App原型图设计工具使用对比

    千次阅读 2014-04-02 10:14:22
    此前,我们在《App原型设计工具使用心得(上)》中介绍了BluePrint、AppCooker、FluidUI、Photoshop以及Handmade Sketches,这篇文章中我们将再从自身经验说说另外三款原型设计工具:Briefs、OmniGraffle以及...
  • HTML实例原型设计

    2020-07-11 18:12:07
    原型设计 一、原型设计整体
  • 本书是一本介绍使用Axure RP 7.0软件的图书,通过对基础知识、实际案例和实战项目的讲解,帮助读者学会如何进行互联网产品原型的开发。  本书共分为9章。第1~2章主要讲解软件安装的方法及基础功能的使用。第3~8章...
  • Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐。网站采用图文结合的排版方式,...以上设计的所有页面可以在这里下载分享。 所有页面的图片集(5张), 在这里下载。 En...
  • 产品经理(PM)常用原型图设计工具

    千次阅读 2015-01-20 15:03:36
    与一般针对产品功能的介绍不同,本文以亲身的设计需求为出发点,通过对产品整理和提供相关的链接,帮助解决从业人群对做产品页面原型的直接...原型设计工具我暂时把它分为两类,Web应用原型设计工具及软件应用原型设
  • 这是一家化妆品限时特卖商城。...本原型由Mockplus制作完成。     这个原型的主要页面有:首页、极速免税店、关键词搜索(保湿)、美妆商城、注册等页面。 点击这里,可以立即在线预览:https://run....
  • 原型模板所用到的组件有按钮栏、菜单栏、搜索框、水平分割线。交互动作有鼠标悬停文字按钮颜色改变效果,鼠标按下文字按钮颜色改变效果,按钮跳转页面,利用按钮栏实现table切换效果。 本原型由国产原型工具...
  • CHANEL是知名的女性奢侈品品牌,网站原型以大排版为主,配色方面也是采用经典的黑白灰,网站页面分别为首页、详情页、登录页等。在交互原型方面实现的效果有搜索框交互操作、浮动导航栏、导航弹出面板等。点击这里...
  • 电商类web原型制作分享——美丽说

    千次阅读 2018-08-27 11:18:28
    原型模板所用到的组件有搜索框、下拉菜单、输入框、选项卡等。交互动作有切换选项卡实现内容的切换。 这个原型的主要页面有:首页、上衣、裤子、裙子、登录页面。 点击这里,可以立即在线预览:...
  • 原型(或线框)设计工具是创建网站和应用程序的利器,它让设计师和设计团队专注于原型...一直以来,原型设计领域的竞争激烈而且经历着飞速的变化,因此我们主要例举了三款具有代表性的软件, 包括:Axure, Mock
  • 花了三周时间,给公司写了一个基于Flex的web流程设计原型系统。既然是原型系统,肯定有很多细微之处不完善的,但作为未来产品组件一部分,其预研和构架部分,还是拿得出手的。 Flex本身在图形化方面提供了很...
  • 出自加利福尼亚州的Balsamiq工作室,创始人Peldi在2008年6月推出了这款手绘风格的产品原型设计工具,并广受好评。2年多来,Balsamiq工作作为一个微型独立软件开发商,专注于Mockups的开发设计,仅3周便实现了盈利,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,353
精华内容 19,741
关键字:

web原型设计图