精华内容
下载资源
问答
  • web原型设计图
    2021-06-13 02:24:17

    Web 界面原型设计的一种方法

    进行 Web 界面原型设计常用的工具如下:

    白纸、铅笔、橡皮,有时候还需要剪刀。可惜大部分情况下保真度不高而且难以表述页面流程;

    Word,可以制作 wireframe,还可以批注或者加大段文字说明。可以在一定程度上表述页面流程,但是依赖于文字功底;

    PPT,使用起来比较麻烦,但是可以动态的表达出交互流程,可惜文字表达能力不足;

    Flash,同 PPT,更加难以使用。适合制作小屏幕界面原型;

    HTML,本文就是想讲如何使用 HTML 快速进行 Web 界面原型设计。

    HTML 作为 Web 的基础,也是大部分项目开发过程中,设计师最终要向程序员提交的成果。使用 HTML 进行原型的设计,有相当大的优势在于可以节省一些制作的时间。但是这里面还是遇到几个问题:设计师如何管理 HTML 文件?最后提交给程序员后,如果要修改怎么办?因为大部分情况下,HTML 一旦交付,可能就四分五裂不成样子了。要修改的话可能要先改设计稿,好了之后再次提交给程序员,同时程序员要确认哪里修改了,哪几个文件修改了。如果使用 SVN 来协同开发,情况还好一些,但是设计师就要花上一段时间来理解程序结构。

    我常戏称这种方法为页面驱动型开发,因为在开发前(确切说是编码前)大部分工作是处理界面、交互,并且制作出高保真的 HTML 页面原型。它基于 Web 标准设计,完全分离结构和表现,这样当程序员在原型基础上进行编码的同时,设计师可以进一步完善 UI 设计,而只用到 CSS 文件和 images 文件夹。通常情况下需要 CVS 或 SVN 的支持。

    这种高保真的 HTML 页面原型,包括:页面布局和内容:一致的布局和界面上的文字(与用户的对话),不包括详细的 UI;

    页面流:页面原型上所有链接可点,并且可理解,比如 href="/posts/add" 这样的链接;

    提示信息:利用 JS 模拟用户操作,有成功操作或失败操作的提示;

    小元素:比如弹出小窗口的提示和帮助等。

    这样的原型交付给程序员,相信他也会相当的开心的 :D,不会因为页面去向不明或者缺少提示等而询问产品经理或者设计师,因为实际操作一下就明白了。

    在设计这样的原型时,主要的思想是 MVC。因为一开始程序员在编码前会有一份代码设计的文档,包括一些约定和类的设计。设计师可以借助这份文档一瞥程序结构。以 Blog 管理后台为例,如 Posts 具有 add、edit、list、del 等功能。那么在本地就可以相应的建立 Posts 目录,目录下分别新建 add.html、edit.html、list.html 和 del.html 页面。现在设计师通常也配有 IIS 或者 apache 用来调试。那么在省略扩展名的情况下,我们就可以通过 http://localhost/blogadmin/posts/add 来测试添加 post 的页面。这与后期程序约定是一致的。

    接下来我们要统一页面的布局(layouts)。以 CakePHP 这个 PHP 框架为例,布局模版一般放在 \app\views\layouts 下面。一般是默认的 default.thtml。仿照这个结构,在原型设计根目录下设 Posts、Categories、Comments 和 Layouts 等目录。统一的小代码块放在 Elements 目录下。

    目录理清楚后,接下来就是如何连接起来。这里用到了 SSI(Server Side Include),可以用简单的注释实现文件包含、代码重用。只需使用例如 的代码就可以包含文件。为什么不直接使用 PHP 的 include?显然让设计师学习 PHP 有些困难,而这种注释形式的“程序”更加容易理解。

    为了让所有的页面使用同一个布局,我们用到了系统变量 $QUERY_STRING,即 URL 中的查询字符串,比如 http://example.com/?home,那么 $QUERY_STRING=home。有了查询字符串,布局的问题就解决了,URL 统一的问题也能够解决。

    在原型设计的根目录下新建简单的 index.html 文件,加入 ,也可以直接用 index.html 作为统一布局文件。然后在 /layouts/default.html 文件中加上统一的布局代码,动态变化的区域用 代替。之后你就可以通过

    来测试添加 post 的页面($QUERY_STRING=posts/add)。

    虽然与之前的 URL 不同,但是已经基本一致了。如果你是一个完美主义者,可以配一下 mod_rewrite,可以实现完全的 friendly URLs。

    基本上就是如此,最后不要忘了 JS 的小提示、重用代码的整理。在原型设计的过程中可以不断地和程序员沟通,了解他的需求,这样子可以减少不少后期的沟通成本和返工的情况。

    相关文章

    “页面驱动型开发”是最常见的开发模式了,几乎大部分网站开发都是采用这个模式,我们团队开发网站,就是基于PHP MVC开发,虽然也无逻辑层做的还不好,但是前端设计师和后台程序员,通过Smarty模板引擎,几乎可以达到同时开发。

    在Web标准结构和表现分离的思想下,UI设计和结构的异步,更加提高了效率,根据PSD效果图,先确定布局(layout),也就是基本的结构,css和php就可以同步了。

    如果就单纯做界面原型的话,用visio比较好,用它可以画出整个界面的大体布局和所要呈现的内容和功能,而且甚至可以制定一套专门为项目的图形库,这样就可以更好的表现初始原型了。当基本确定以后就可以用具体图形工具譬如fw,ps,ai这些做详细的效果图也可以叫后期原型吧。

    FW/PS/AI这些是UI设计阶段了;

    在实际项目中,要平衡设计师和程序员的工作分配。本文写的有一些理想化,一般项目中很少有机会完全做到,只要做到能够表达清楚意思就足够了。进一步的细化不属于原型的范畴了。而且大家都推崇快速原型,即以界面为中心的原型设计,有一个很重要的特点,就是快速。

    我现在使用webwave来做前期原形界面,感觉还不错

    不知道为什么有了Axure不用呢。难道一定是用个铅笔和纸才显高雅。

    更多相关内容
  • 很好的原型设计工具,绿色免安装版本,中文版本,有需要的可以下载,
  • 对学习和设计产品,绘制原型系统,产品经理设计产品原型,提供了很多的基础元件库,再也不用为了基础元件而烦恼了,大家一起努力,改变未来中国产品经理的设计环节。
  • 您知道线框 , 模型和原型之间的区别吗? 这三个术语经常互换使用,表示同一件事。 问题是,您不应该这样做。 线框是设计的静态,低保真描述 。 它提供了拟议设计的外观或形状的轮廓,但未提供其功能或感觉。 样机...

    您知道线框模型原型之间的区别吗? 这三个术语经常互换使用,表示同一事物。 问题是,您不应该这样做。

    线框是设计的静态,低保真描述 。 它提供了拟议设计的外观或形状的轮廓,但未提供其功能或感觉。 样机 可提供更多信息 。 样机是拟议设计的中高保真描述 。 样机也是静态的, 它们不证明是交互性的

    另一方面, 原型动态的 。 它们可以代表您选择的几乎任何程度的最终设计 。 原型甚至可以像实际的最终产品一样进行测试,因为它可以提供相同的外观。 在这三者中,最能给人留下深刻印象的就是原型。

    如何建立原型

    现在,原型的目标是准确证明选定的设计特征。 Web或应用程序应用程序的原型通常分为三个阶段开发:

    1. 勾画出页面流(用户可能如何导航)。
    2. 每个页面都构建了多个低保真版本并进行了可用性测试。
    3. 从汲取的教训中,会添加详细信息,以创建建议的设计的高保真模型。

    在本文中,我们将介绍一些原型制作工具,这些工具可以帮助简化流程,使事情变得更容易,并使您更快地生产出原型。 这里有7种原型工具可供试用。

    据《福布斯》(Forbes)称,InVision与Slack,Dropbox和MailChimp等知名企业并列全球私有云公司之首。 该荣誉部分归功于InVision的“ always-on”平台,该平台使协作,反馈和高保真原型的构建变得如此容易

    见识

    使用InVision,可以从一个位置管理项目屏幕和状态,实时协作并维护版本控制,同时构建具有真实Web和移动应用外观的像素完美原型 。 使用InVision,您甚至可以对原型进行免费,无限的测试

    要了解设计界以及InVision超过200万用户对该平台的喜爱,请注册免费试用。 只需单击InVision链接即可开始。

    无论您是需要单击式线框 ,还是需要完全交互的UX原型 ,Pidoco都可以让您快速到达目的地,而不必大惊小怪。 从简单的草图绘制功能开始,您可以构建一组自定义模板 ,创建所需的交互式元素 ,向其他人展示原型 ,并等待他们的反馈-这应该很快就会到来。

    皮多科

    Pidoco为您提供构建低保真原型所需的一切,以征求快速,前期的反馈或具有与所建议的Web或应用程序设计相同外观的高保真模型。 该工具甚至可以生成规范文档这些文档可以用作团队成员的蓝图,也可以呈现给客户以供签字。

    如果您需要质量原型工具来协助您进行移动应用程序设计活动,那么Proto.io将是理想的选择。 Proto.io是一个专用的移动原型平台, 可在大多数浏览器运行无需编写代码 ,并使您能够部署具有真实外观的完全交互式的移动应用原型模拟

    原型

    该工具由三部分组成:仪表板,编辑器和播放器。 仪表板充当您的主控件和项目经理。 该编辑器由一组工具组成,可模拟您的设计并在交互中进行构建。 使用播放器,您可以在Web浏览器上查看原型,与之交互,征求反馈并在真实的移动设备上进行测试。 如果您想设计移动应用程序,那么这就是您的工具。

    对于寻求一体化设计,原型设计和开发工具的任何人 ,搜索都将在这里结束。 首先,借助Webflow,您可以构建和测试所需的高保真原型 ,以协助您的设计工作。 但是差异就在这里-您构建的所有内容都由可用于生产环境HTML / CSS和JavaScript驱动。 结果?

    网络流

    您可以从完全互动的原型无缝过渡到开发的产品 。 原型,设计和开发位于同一软件包中,其中还包括必需的协作功能。 顺便说一句, 一切都是响应式的

    该专业原型工具套件是为PowerPoint用户开发的。 实际上,PowerMockup是一个PowerPoint加载项,可用于为网站,桌面应用程序或移动应用程序创建线框和模型 。 只需从PowerMockup库中选择形状和设计元素,然后将它们放到PowerPoint幻灯片中即可。

    样机

    然后,您可以使用PowerPoint的幻灯片和动画功能与他人预览您的设计 。 您也可以将自己的形状和元素添加到库中,并根据需要与其他PowerPoint用户共享。

    Lucidchart是一个在线应用程序,具有设计元素和设备类型 ,您可以从中快速构建网站或移动应用程序设计的线框或模型。 它具有干净,用户友好的界面 ,并具有拖放技术, 交互式演示功能以及允许您构建高度复杂的仿真的图层技术。

    透明图

    Lucidchart还是用于创建外观专业的项目工作流图和流程图的便捷工具,其协作功能运行流畅且易于使用。

    模拟设计的建议用户体验有时可能会带来挑战。 这就是为什么您需要HotGloo。 借助庞大的元素库UI小部件库导出和共享功能以及与团队成员的协作,您几乎可以立即开始。

    HotGloo

    如果您有任何疑问或需要任何帮助,他们将提供完整的文档以及有用的视频教程实时网络研讨会 。 直接在浏览器中创建原型,共享或在任何移动设备上预览。 您甚至可以将您的工作导出为HTML 。 线框图和原型制作从未如此简单和有趣!

    结语

    从专用工具到多合一的工具,绝对值得一看。 这些都是高质量的工具,因此没有风险,您可以随时查看演示或免费试用。

    这些产品拥有庞大的用户群。 它们由大型公司使用或推荐。 因此,无论您选择哪一个,都会发现自己在好公司中。 无论您是要寻找模型,线框还是原型工具,上面都会找到满足您需求的工具。


    翻译自: https://www.hongkiat.com/blog/prototyping-tools-designers/

    展开全文
  • 让我们以不分先后的顺序看一下当今可用于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 原型设计工具

    展开全文
  • 从本模板中可以学习到比较常用的WEB端交互的实现方法,同时能获取到更多Axure相关知识点的运用技巧:Web原型的布局方法、母版的合理应用、中继器列表的使用、页面事件和窗口函数的使用,动态面板的使用,以及视频...
  • 使用Axure设计的图书管理系统原型界面,由管理员和用户登录。 实现模块: 管理员实现:登录功能 用户查询与增删改 书籍查询与增删改 书籍类型查询与增删改 借阅情况的查询与增删改 普通用户实现: 用户注册与...
  • 20套交互UI设计手机app界面web界面Axure原型图线框图RP源文件模板素材 20套交互UI设计手机app界面web界面Axure原型图线框图RP源文件模板素材 20套交互UI设计手机app界面web界面Axure原型图线框图RP源文件模板...
  • 常用的快速Web原型图设计工具

    千次阅读 2017-08-11 11:15:17
    做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具。在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文件,操作也比较简单方便。但是没什么特点,而且细节不够,远远不够,同样的产品比的就是细节嘛。

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

    展开全文
  • axure通用元件库 Pc、Web原型图组件库高保真UI rp源文件
  • 作品名称:Axure WEB端交互原型通用组件模板库 v3 (Axure RP9作品) 作品类型:组件类/模板类 主要适用:Web端 软件版本:Axure 9.0 作品编号:LIB007 特别说明: 1、本作品是使用Axure RP9制作的全新版本,作品相关...
  • AxureRP7.0制作天猫商城WEB高保真原型.zip
  • 名称:90+套Axure原型图设计源文件 格式:RP格式(Axure软件) 产品经理全套文档模板 Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7版本制作 ——网站 阿里云网站.rp 车辆违章处理.rp 城市介绍网站.rp ...
  • 原型图设计工具

    2018-05-21 11:50:30
    Axure RP是一款专业的快速原型设计工具。...Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的。。。
  • axure通用元件库 Web原型图组件库高保真UI以及源文件,学习借鉴,提供了很多的基础元件库,再也不用为了基础元件而烦恼了,大家一起努力,改变未来中国产品经理的设计环节。
  • 本作品是在去年发布的交互原型Web元件库v1.0的基础上优化而来的,在这一年多的时间里我们收集了大量的用户使用反馈,在旧版基础上经过了整体重构后推出了这个全新版本。新版本正式命名为:WEB前后端交互原型通用元件...
  • Web原型设计流程PDF档 网站开发流程 web-based-product-design-process-spiral-model.pdf
  • 原型图设计 AxureRPPro8

    2022-05-20 09:20:27
    Axure RP Pro 8.0 是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框、流程、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建...
  • 设计网页,web前端,网页原型设计,是很好的一个软件,你可以试试
  • 五十套axure原型源文件类型比较杂,低保真、中保真、高保真多种行业的app、web、后台原型图
  • 6.包含Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种常用图表类型和全国34个省级行政区地图,可以满足大部分的原型设计图表展示需求。Antv静态图表整理自蚂蚁数据可视化团队发布
  • 同时,每个元件类型都有详细的介绍和使用说明,而且关联分享了相关交互规范和用户体验类文章,所以这套作品不仅是一套实用的元件库,更是一份全面的交互原型设计指南。 这套作品中还提供了多套主流的网站布局框架...
  • 很好用web原型工具

    热门讨论 2009-04-22 09:27:42
    很好用web原型工具,可自动生成html,绿色破解版,好不容易才找到的
  • 这是Axure的第一套基于Axure RP9版本设计的作品,同时是特别针对IPAD移动端的原型设计方案。目前市面上很少有完整规范的IPAD端的原型素材,AxureUX一直致力于原型设计方法的创新和原创内容的输出,所以经过数月的...
  • web项目快速原型设计

    2017-10-18 11:10:00
    web项目快速原型设计教程: http://wenku.baidu.com/view/19c60066f5335a8102d220ec.html Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架的带注释页面示意、操作流程、以及交互设计,并可...
  • 名称:70+套Axure原型图设计源文件 格式:RP格式(Axure软件) 赠送:软件使用视频教程 免费的技术咨询 产品经理全套文档模板 拍下后发送百度网盘下载链接~ Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7...
  • 4、蚂蚁金服体验中心WEB端元件库.rplib 5、微信网站或小程序设计.rplib 6、微信WeUI 高保真 完整组件Axure元件库(app元件库) weax分享版_v1 7、FontAwesome图标元件库V5.5.0版.zip 8、Google材质设计Axure控件库收费...
  • 产品经理原型图设计模版,产品经理画原型图参考,简单实用
  • Axure快速原型设计

    2018-10-17 09:50:42
    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框、流程、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,...
  • Axure是个极其极其极其简单的软件。如果你不需要做交互,那么哪怕你不看教程,也只要10分钟就可以大概掌握。因为你所做的就是拖部件,打字,拖部件,打字,最多加个对齐。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,212
精华内容 22,884
关键字:

web原型设计图