网页原型设计模板（网页原型制作）

本文目录一览：

• 1、提供几款界面原型设计软件
• 2、请问：什么叫原型设计工具?
• 3、【原型设计】善用母版，让你的工作事半功倍
• 4、网站原型设计工具有哪些
• 5、有哪些好用的在线界面原型工具，且支持IE
• 6、如何将一个网页中的元素放到新的原型设计中

提供几款界面原型设计软件

Axure

Axure RP是美国AxureSoftware Solution公司旗舰产品，是一款快速的产品原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的APP原型设计工具，它比一般创建静态的原型设计工具要快速、高效。

Mockplus

Mockplus（摹客）是一款简洁快速的原型设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计，满足众多用户群体的工作需求。有别于Axure的繁复，Mockplus致力于快速构建和迭代原型，为设计者提供简洁高效的设计方式。如果说Axure是一头大象，那么Mockplus就是一只轻快的小鹿。

从学习曲线来看，较为专业的UI/UX设计师或者时间充足的设计师可以考虑使用Axure；如果设计新手确实想要尝试这款工具，建议先下载中文版进行使用。设计新手或专业设计师都可以考虑使用Mockplus，一款简洁高效的App原型设计工具。使用该软件完成原型设计只需“拖”“放”两个操作，学习曲线基本为零。

、

请问：什么叫原型设计工具?

原型设计工具，说白了就是能够帮助设计师制作静态或动态网页/App设计模型的工具。

在界面设计初级或中期，为了能够方便和其他设计师讨论、测试产品相关的设计想法，需要利用各种原型工具将产品模型做出来，一个个界面修改和迭代，必要的时候，还可以制作成动态的模型，直接测试，看看可能会有哪些问题或不足等。

而且，现在市场上其实有很多好用的原型工具。就像我们团队用的就是一款叫摹客Mockplus的原型工具。制作原型的时候，不仅提供大量优质模板，还可以直接拖拽各类组件或图标，按需从头快速绘制原型。 交互和动画也可以拖拽添加。 总的来说，使用起来相当简单。

【原型设计】善用母版，让你的工作事半功倍

母版可以用来创建重复使用的各类原型设计元素，并对其进行全局管理，是整个项目中重复使用的元件容器。母版常用于创建页头、页尾、导航、模板和广告等。你可以在任何页面轻松的使用事先创建好的母版，而不必再次辛苦制作或复制粘贴，这就是母版带给我们的便利，你可以在母版的版面对它们进行统一管理。对母版进行的任何修改结果，修改后的结果都会同步到引用的页面中。一个页面可以同时使用多个母版。当每个页面中有大量相同重复的元件时，使用母版能够节省时间，极大的提高我们的工作效率。

方法一：在母版面板中点击“新增母版”，为新建母版命名，双击母版进入编辑界面。

方法二：在设计区域中首先选中要转换为母版的元件，然后点击右键，选择“转换为母版”，在弹出框的对话框中设置母版名称，命名完成后，还可以设置母版的拖放行为，下文中会介绍拖放行为。

使用母版面板对其进行管理

设计区域添加母版

直接拖拽母版至右侧设计区域可以将母版添加到单个页面中；右键点击母版，选择“新增到页面”，在弹出的“新增母版到页面”对话框中选择想要添加母版的页面，可以实现母版的批量添加；右键点击母版，选择“从页面删除”，可以在页面中批量删除母版。

母版上的遮罩 ：通常，添加的母版上会覆盖一层粉红色遮罩，这是为了让我们能够在设计元素中快速区分哪些是母版。如果你不喜欢这种区分方式，可以通过点击菜单中的“视图遮罩”，取消粉红色的遮罩效果。同样的操作，在这里你也可以取消掉动态面板、中继器、图片热区这些元件容器的遮罩效果，见下图。

按照母版的拖放行为，可以将母版分为以下3类：拖放到指定位置、锁定母版位置、从母版脱离。要改变母版类型，右键点击母版。“选择拖放行为”，在弹出的菜单中进行选择。对模板类型的修改，只会影响到当前要拖放到设计区域的母版。

任何位置：拖拽至设计区域，可以放置在设计区域中的任意位置

锁定母版位置：拖拽至设计区域，固定在设计区域的某一位置，不可以随意移动

从母版脱离：拖拽至设计区域，即表示脱离了母版，在此处进行任何修改，均不会影响原母版内容

触发事件是创建在母版中，只有母版才具有触发事件，允许为母版的每个不同实例添加不同的交互。当你想让母版内元件的操作影响到母版外元件时，也可以使用母版触发事件。触发事件的效果是由母版内元件触发的。

例如，在母版中添加了3个按钮，并分别添加了鼠标单击事件，点击3个按钮时，影响着母版外一个文本的显示内容。这样做的好处是这里的按钮是一个母版，对其操作维护比较方便，可以应用到其它需要有类似效果的页面。虽然达到这种效果的方法有很多，但母版触发事件的强大之处在于可以多次重复使用，达到一劳永逸的目的。关于触发事件的一些重点说明如下：

触发事件只能用于母版内的元件创建

一个母版可以拥有多个触发事件

创建触发事件的步骤：1.在母版的元件上创建触发事件。2.将母版拖拽到页面的设计区域中，选中该母版，在元件交互面板中使用触发事件创建交互来影响当前页面的元素。

双击母版进入编辑状态，选中母版要触发的触发元件，然后在元件交互面板中添加想要触发的触发事件的事件，在弹出的用例编辑器中第二步，添加“触发事件”动作，然后在第四步配置动作中设定“触发事件”的名称，最后勾选事件名称前的复选框，点击确定，完成触发事件的创建。

此外，还可以双击母版，进入编辑状态。然后在菜单栏中的布局管理母版触发事件，对触发事件进行管理。

创建完触发事件后，将母版拖放到任意设计区域中，选中该母版，在元件交互面板中就可以看到刚刚添加的触发事件。触发事件的操作方法和平时操作其他事件是一样的。

为了帮助大家进一步理解什么是母版的触发事件及其重要性。在这个案例中将演示如何通过母版的触发事件影响着文本显示的内容。

step1：拖动3个按钮至设计区域，并在3个按钮内分别输入文字“发现”、“关注”和“消息”，拖动一个文本标签至设计区域，文本内容默认输入“这里显示按钮的文字”。

step2：选中3个按钮，右键设置为任意位置母版。双击母版，进入编辑状态，为按钮创建单击事件，在事件编辑框中添加最下方的“触发事件”，在配置动作中命名，这里我就偷懒，直接在系统默认名称后加上数字编号“NewEvent1”，选中事件名称前面的复选框，点击确定；同样的操作，为另外两个按钮添加触发事件，事件名称分别为“NewEvent2”和“NewEvent3”。

step3：返回到页面当中，选中母版为刚才添加的触发事件““NewEvent1”添加用例，在用例编辑面板中，添加设置文本动作，在配置动作中选择名为text的文本，设置文本的值为按钮1的文字，点击fx进入编辑文本弹框界面，在设置这个值之前需要将按钮1的文字定义为局部变量LVAR1，所以在配置动作中文本的值为局部变量LVAR1；按照同样的操作，为另外两个触发事件添加用例，需要提醒的是，设置文本时，文本的值分别设置为其按钮上的元件文字。

step4：至此，所有的设置已经完成，按下F5，预览测试下效果。

Axure8.0版本中称之为“触发事件”，也有一些中文版本翻译为“引发事件”，Axure7.0版本称之为“自定义事件”，虽然叫法不一样，但表达的意思是一致的。

网站原型设计工具有哪些

有很多呀， Axure, Basamiq 等等。像我们团队用户的就是摹客Mockplus. 提供很多模板和丰富的组件资源，交互原型拖一拖就完成了。 还可以团队协作、分享和迭代。

有哪些好用的在线界面原型工具，且支持IE

常用的线框图工具

1.Axure

Axure是一款老牌原型设计工具，我们可以直接使用Axure丰富的组件来创建APP或网站的线框图。作为专业的原型设计工具，它也支持将静态的线框图转换为可交互的原型。同时支持多人协作和版本管理。

2.摹客原型

在国内的同类型工具中，只有摹客拥有强大的矢量绘图功能，在进行头脑风暴时，我们可以利用摹客的矢量绘图工具和无边界画布，让灵感创意快速具象化。同时，摹客作为一款强大的高保真设计利器，产品经理和设计师也可以使用摹客快速绘制高保真，轻量设计还可以直接使用摹客交付给开发。

3.Mockplus

Mockplus是一款简洁高效的产品原型工具。它提供了丰富的组件和图标资源，通过拖曳即可快速绘制线框图。同时Mockplus也支持一键导入项目页面和模板，快速搭建基础页面。简单高效，无需学习就能快速上手。

如何将一个网页中的元素放到新的原型设计中

基础的其实很容易学会，就是拖动控件完成布局。你可以从静态页面的设计开始学，熟悉每一个控件，然后了解这个控件可以做什么（添加什么事件），可以接受什么控制（事件能够对它做什么，比如启用/禁用？接收参数？改变状态？）。在这个过程中注意体会axure软件本身的设计思路，这样学起来会事半功倍。然后开始学习做交互，找一些网站而不是实例教程来练习，先把静态的画出来，再看网站的交互是什么样的，尝试用axure做出来，这个时候会碰到具体的问题，想想按你理解的软件思路，可以怎样去解决，先摸索一下，实在不会了再去找解决方案。反复几次后，常见的交互效果基本就会了，在这过程中也加深了你对axure本身的理解。再然后，随着会做的效果越来越多，会走向效果控路线，总想做最高保真的，甚至到了改生成文件的css层面，其实有的效果一句话可以描述清楚的但实现起来很麻烦，没必要。最后慢慢走简约路线，能简则简，简单实用就好。这个时候会更关注效率，怎么把一个模块做成多个页面复用的模板，怎么把组件打包分享给其它同事，怎么通过axure进行多人协作共同完成一个原型设计.

网页原型设计模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网页原型制作、网页原型设计模板的信息别忘了在云尚网络www.ysfad.net进行查找喔。