Moqups(在线Mockup线框工具)

　　Moqups是一款设计精美，功能丰富的在线Mockup线框工具，该程序不需要注册，完全免费，可以直接打开在线设计；可以帮助用户塑造您的想法，通过该程序设计出相应的产品来证明您的概念；此简化的Web应用程序，可帮助您在线框，模型，图表和原型上实时创建和协作一体化的在线设计平台，智能，简单，快速；可以帮助用户将您的概念变成可视化画面，可以使用快速线框和详细的模型设想，测试和验证您的想法；也可以随着团队建设势头的探索和迭代，随着项目的发展，从低保真到无线上网无缝移动，提供灵活的设计解决方案，适应您的工作流程，为用户提供一个单一设计环境，通过不断的更新与加强，使其成为完整工具生态系统；强大又实用，需要的用户可以下载体验

软件功能

　　1、为所有流行的使用案例提供清晰易用的模板

　　从全面的小部件库和智能形状库中快速轻松地拖放元素。

　　从一系列移动应用程序和网页设计的集成模板套件中选择，包括iOS，Android和Bootstrap。

　　2、内置数千个流行的图标集

　　从Font Awesome，Material Design和Hawcons中选择，就在您的指尖。

　　智能拖放替换更新图标，保留大小，位置和风格。

　　3、拖放从桌面或应用程序导入图像

　　上传现成的设计，并迅速将其转换为交互式原型。

　　使用非破坏性裁剪制作同一图像的多个版本。

　　4、丰富的字体和样式选项

　　使用集成的Google字体从数百种字体选择中进行选择。

　　对文本进行微调，使其符合高级版式控件的设计。

软件特色

　　1、快速，直观，精确的对象编辑

　　使用智能和动态工具调整对象的大小，旋转，对齐和样式，或者转换多个对象和组。

　　批量编辑，重命名，锁定和分组元素。撤消或重做多个级别。快速识别对象，浏览嵌套组，并切换可见性，全部在“大纲面板”中。

　　使用网格，标尺，自定义指南，对齐网格和快速对齐工具进行精确调整。通过矢量缩放来缩放，而不损失质量。

　　2、功能强大，灵活且可扩展的页面管理

　　使用强大的页面管理工具处理任何规模或复杂的项目。拖放页面以快速重新排序或将其组织到文件夹中。使用我们的页面面板搜索和浏览复杂的文件夹层次结构。隐藏页面或文件夹，只是简单地点击鼠标就可以完成黄金时段的准备工作。

　　通过利用母版页节省时间，并自动将所有更改应用到所有关联的页面。

使用说明

　　1、需要的用户可以点击本网站提供的下载路径下载得到对应的程序安装包

　　2、通过解压功能将压缩包打开，打开程序数据包后就可以看到对应的程序文件

　　3、找到主程序，双击主程序即可将程序打开

　　图像简介

　　图像库与模板和图标库的不同之处在于您自己构建它 - 使用Moqups应用程序外部的资源。您可以从公司品牌或样式指南中上传任何现成的设计元素，如徽标，照片或视觉资产。

　　Moqups允许您使用四种图像格式：JPEG，PNG，GIF和SVG 。

　　该图像库分成两个独立的部分：

　　团队图像：团队可以访问所有项目的图像

　　项目图像：特定于项目的图像

　　团队类别允许您与团队的其他成员以及所有项目上传和共享常用资产（如徽标和品牌资产）。而且，通过项目类别，您的团队可以通过仅汇集与手头项目相关的资产来简化其工作流程。

　　在下一节中，您将学习如何上载和下载图像，以及如何在文件夹中组织图像。我们还将解释如何向项目添加图像，直接从图像选择创建页面，以及在页面上格式化图像。并且，我们将演示如何裁剪图像并删除其背景颜色。

　　您还将学习如何在页面上对图像进行分组，并使用“ 大纲”面板快速有效地组织图像。

　　使用图像类似于与工作网板，图标，和模板。所有这些元素都有以下共同点：

　　他们在左侧边栏中有专门的标签和面板

　　它们共享大多数相同的格式化工具

　　它们被添加到页面后称为对象

　　可以在“大纲”面板中对它们进行分组，重命名和组织

　　要找到图像库，请转到左侧边栏，然后单击图像选项卡。选项卡将变为蓝色 - 并打开图像面板。

　　面板顶部的下拉菜单允许您选择团队图像或项目图像部分。

　　在下拉列表的右侧，您可以在网格视图和树视图之间切换。

　　将鼠标悬停在网格或树视图中的图像上将生成一个弹出式缩略图，其中包含图像详细信息：图像上传者和所有者的名称，格式，尺寸，文件大小和Moqups身份。

　　上传并添加图像到库

　　图像可以直接上传到图书馆; 或者可以将它们从外部源添加到页面中，然后保存到库中。

　　将图像上传到库

　　Moqups允许您使用四种图像格式：JPEG，PNG，GIF和SVG 。

　　上传图像时，它们会添加到图像库的“ 团队图像” 或“ 项目图像” 部分，具体取决于您之前选择的部分。

　　要打开图像库，请导航到左侧边栏，然后单击图像选项卡。选项卡将变为蓝色，并将打开图像面板。

　　面板顶部的下拉菜单允许您选择团队图像或项目图像库，在下拉列表的右侧，您可以在网格视图和树视图之间切换。

　　在您上传自己的图像之前，图像库将为空。

　　将图像上传到库有两种方法：

　　从下拉列表中选择团队图像或项目图像库

　　单击“上载图像”按钮，然后从计算机中选择一个或多个图像

　　要么

　　将图像从计算机拖放到图像选项卡或图像面板中

　　格式，样式和裁剪图像

　　一旦设计元素 - 图像，模板，图标和模板 - 被添加到页面，它们就被称为对象。

　　所有对象（包括图像）都在“ 格式”面板中进行样式化和自定义- 并共享许多相同的格式控件。

　　在本文中，我们将向您介绍格式面板，并向您展示如何自定义图像以创建您的设计。

　　我们还将介绍两种特定于图像的功能： 裁剪和背景消除。

　　格式面板

　　转到右侧边栏，然后单击“ 格式”选项卡。选项卡将变为蓝色，并将打开格式面板。

　　该格式面板分为第带有特定格式的控制。这些部分是可折叠的，因此单击部分的名称将隐藏或显示该部分。

　　该面板将始终显示所有模具共有的默认部分：大小和位置，填充和笔触，不透明度， 阴影和模糊。

　　选择，大小，位置，旋转和翻转

　　当你选择一个对象，该对象的名称是在面板的顶部显示，略高于它的坐标。这样可以在“ 大纲”面板中轻松找到并标识该对象。当您选择多个对象，该面板将显示对象的数量在该组中，以帮助您确认您的选择将任何样式的改变或转换之前。

　　大小，位置，旋转和翻转控件在坐标下方组合在一起，并且每个操作都可以在面板或页面上执行。

　　尺寸

　　在页面上，使用调整大小手柄来更改对象的大小。

　　在“格式”面板中，如果要逐步更改这些值，请使用“ 宽度”和“高度” 输入进行精确值和微调，并使用键盘上的箭头键。

　　如果希望多个对象的大小完全相同，请复制并粘贴到“宽度”和“高度”字段中。

　　默认情况下，将图像添加到页面时，图像的Aspect Ratios会被锁定。这是为了保持其外观和比例。如果需要自定义图像的比例，请单击“ 解锁纵横比”按钮并在水平或垂直轴上调整图像大小。

　　位置

　　在页面上，选择一个对象并将其拖动到所需位置。

　　在“格式”面板中，通过在输入字段中输入精确坐标来设置对象的位置。您的对象的位置是以左边距和上边距的像素距离来度量的。您可以使用键盘的箭头键逐步更改这些值。

　　在页面上选择对象后，箭头键会逐个像素地移动对象 - 以进行微调。

　　Shift +箭头移动对象10 px

　　旋转

　　在页面上，单击对象顶部的旋转手柄并拖动以旋转。

　　在“格式”面板中，在“ 旋转输入”字段中输入度数值。您可以使用键盘的箭头键更改值。

　　Shift + rotate将以15°的增量旋转对象。

　　翻动

　　您可以水平和垂直翻转对象。

　　在“格式”面板中，垂直和水平“ 翻转按钮”会在保持其大小和宽高比的同时翻转对象。

　　在页面上，首先解锁纵横比。然后，选择一个Resize Handle 并将其拖过该对象的中心线以同时调整大小和翻转。

　　笔触，不透明度，阴影和模糊

　　笔画

　　使用Images时，Fills和Strokes中的“Fill”功能被禁用，但“Strokes”仍处于活动状态。

　　使用图像时，可以使用笔触设置添加和自定义图像边框。

　　若要调整笔触颜色，请转到“ 格式”面板，然后在“ 填充和描边” 部分中，单击“ 笔触颜色” 以打开“ 颜色选择器”弹出框。

　　选择“ 样本”选项卡以从Moqups Classic，Material Design，Bootstrap或iOS 8中选择颜色方案。此选项卡还显示您已在项目中使用的颜色。

　　选择Picker选项卡以创建自己的自定义颜色。

　　在两个标签中，您都可以......

　　输入颜色的十六进制值

　　调整笔触颜色不透明度

　　在颜色设置下，您可以选择“ 笔触宽度”，并将“ 笔触样式” 设置为“实心”，“虚线”或“虚线”。

　　不透明度

　　“ 不透明度” 滑块可调整整个图像或图像组的全局不透明度。如果要更精确地自定义不透明度，还可以调整“笔触”不透明度（参见上文）以及全局不透明度，以获得组合的视觉效果。

　　阴影

　　要向对象添加阴影，请导航到“ 格式面板” 并打开“ 投影” 部分。

　　启用阴影以设置阴影的颜色，不透明度，角度，距离和大小。

　　模糊

　　要向对象添加模糊，请导航到“ 格式面板” ，打开“ 模糊”部分，然后启用“ 模糊”滑块。

　　模拟弹出窗口或模态窗口时，模糊功能特别有用。

　　您可以将不透明度，笔触，阴影和模糊批量应用于多个对象。按住Ctrl / Cmd +选择对象，然后同时编辑它们。

　　圆角

　　您可以使用对象的自定义控制柄从“格式面板”，“圆角”部分以及直接在页面上对对象的角进行圆角处理。

　　要从格式面板圆角：

　　使用“ 圆角” 部分并在输入中输入值。默认情况下，会同步四个输入字段。在一个输入中输入值会将该值传播到其他角落。

　　要为每个角输入不同的值，请取消选择位于四个输入之间的同步所有角图标。

　　如果希望在调整对象大小时按比例缩放圆角，请启用“ 缩放半径” 。

　　直接在页面上圆角：

　　要同时对所有角进行倒圆，请将任何浅蓝色自定义手柄拖向对象的中心。

　　要围绕特定角（仅限矩形模板），请按住Option / Alt并将相关手柄向中心拖动。

　　复制和粘贴样式

　　自定义图像后，可以将该自定义应用于其他图像或对象 - 或对象组。

　　要复制和粘贴样式：

　　选择要从中复制样式的对象

　　右键单击并选择“ 复制样式” 或按Alt / Option + C.

　　选择要应用样式的对象

　　右键单击并选择“ 粘贴样式” 或按Alt / Option + V.

　　作物

　　裁剪是非破坏性的，这意味着在裁剪图像后，您可以随时返回并重新裁剪。当您想要重复使用相同的图像时，这很方便，但是要关注该图像中不同的感兴趣区域。

　　您的图片库是基于帐户的，因此您可以在帐户中的多个项目中重复使用图片。在使用徽标和品牌设计元素或具有多个感兴趣点的图像时，这尤其有用。

　　要裁剪图像：

　　选择图像以显示“ 裁剪和背景消除” 的弹出工具栏

　　单击裁剪图像图标

　　图像周围将出现黑色边框

　　使用滑块放大和缩小

　　单击黑色边框内部并使用手形光标调整裁剪窗口的位置

　　使用黑色调整大小手柄裁剪图像

　　要应用裁剪，请单击图像外部或单击“完成”

　　'重置'将图像恢复为原始图像

　　单击图像并按Return / Enter以快速激活裁剪模式。

　　背景去除

　　在创建初步模型时，背景移除特别有用，因为您经常将图像，徽标和其他类型的视觉参考拼凑在一起。即使这些元素只是后续，更加优雅的设计元素的临时替身，但它们仍然必须具有光滑和专业性，足以具有说服力。

　　这不可避免地意味着裁剪，堆叠，调整和分组这些资产以创建可靠的草案。您可能需要从徽标中快速删除背景颜色，消除分散注意力的视觉效果，或查看产品镜头在没有背景的情况下是否更好看。要从图像中删除背景：

　　选择图像以显示“ 裁剪和背景消除” 的弹出工具栏。

　　单击Magic-Wand图标进入Background Removal模式。

　　单击图像区域以删除纯色，或单击并拖动以删除颜色范围。

　　要应用更改，请单击图像外部或单击“完成”。

　　'重置'将图像恢复为原始图像。

　　要保存更改的图像，请右键单击并从“上下文菜单”中选择“添加到库”选项。