主流原型设计工具介绍(●´ϖ`●)
原型设计工具在产品设计、交互设计和用户体验设计中扮演着重要角色，本篇博客将介绍Axure RP、墨刀、Pixso、Adobe XD这4种主流原型设计工具。
Axure RP
特点
- 强大的交互能力：强大的交互设计功能，支持复杂的交互流程和状态转换。
- 丰富的组件库：Axure RP 内置了大量的组件，包括按钮、表单元素、图标等，方便快速构建原型。
- 灵活的导出选项：支持导出为 HTML、PDF、Word 等多种格式，方便与团队和客户分享。
- 多人协作和版本控制：支持团队协作和版本控制。
局限性：
- 学习曲线陡峭：Axure RP 功能丰富，对新手要求较高，需要花费时间学习和熟悉软件。
- 价格较高：Axure RP 专业版的价格较高，可能对个人或小型团队来说是一笔不小的支出。
- 缺少简单的绘图工具：相比其他原型工具，Axure RP 在绘制基本图形方面的功能相对有限。
- 容易发生卡顿：在处理复杂原型时，Axure RP 可能会出现性能问题。
使用方法：
需求分析：
- 收集关于产品、目标用户、品牌风格等的信息。
- 确定首页需要展示的内容，如商品分类、推荐商品、广告位等。
绘制草图：
- 使用 Axure RP 绘制一个简单的页面草图，包括顶部导航、商品分类、轮播图等。
添加交互元素：
- 在草图中添加导航链接、商品分类按钮等。
- 创建一个轮播图，让用户可以点击切换广告图片。
创建交互动效：
- 为导航链接添加点击效果，模拟用户点击后的页面跳转。
- 为轮播图添加自动切换效果，让用户可以浏览不同的广告。
测试原型：
- 在 Axure RP 中测试导航链接、轮播图的交互效果。
- 确保用户能够顺利浏览网站内容。
导出原型：
- 导出为 HTML 文件，分享给团队成员和客户。
MODAO（墨刀）
特点：
- 丰富的交互和动画功能：墨刀提供了丰富的交互和动画功能，可以帮助设计师创建高度交互性的原型图。
- 多人协作和实时预览：墨刀支持多人协作，团队成员可以实时编辑和预览设计文件，方便团队合作。
- 适用于移动端产品设计：墨刀的设计组件针对移动端产品，使得绘制移动端原型图更加便捷，展示效果更好。
- 易于上手：墨刀具有直观的界面和简单的操作，适合初学者快速上手。
局限性：
- 免费版功能有限：墨刀的免费版功能可能有一些限制，一些高级功能和团队协作功能可能需要付费。
- 安全性和保密性问题：墨刀是一款在线产品设计工具，设计的产品保存在云端，安全性和保密性可能不如离线工具。
- 界面和操作适应时间：墨刀的界面和操作可能需要一些时间来适应，特别是对于初次使用的用户。
使用方法：
安装和创建项目：
- 首先，您需要选择适合您操作系统的墨刀版本并下载安装12。
- 打开安装好的墨刀，点击“新建项目”，为项目取个名称，并选择“网页/电视”作为默认大小（通常为1440✖1024）。
- 点击“创建”即可开始您的设计。
界面熟悉：
- 创建项目后，您会看到一个空白界面。让我们简单了解一下墨刀的操作界面：
- 左侧工具栏：包含基础的文字、形状等工具。
- 右侧属性栏：选中画布上的对象，可以修改大小、颜色等属性。
- 顶部素材库：提供免费的素材供您使用。
页面编辑：
- 在画布上添加元素，如文本、形状、图片等。
- 设置页面链接跳转，创建长页面的滚动演示，固定底部与顶部的内容等。
组件的使用：
- 墨刀提供了一些高频组件，如轮播图、链接区域、表格、批注等。您可以在左侧工具栏中找到它们并拖拽到画布上使用。
分享和交付：
- 下载项目数据，设置项目分享链接。
- 预览、标注和评论项目。
Pixso：
特点：
- 中文界面：Pixso 提供中文界面，方便中文用户操作，不会出现缺字漏字的问题。
- 稳定性高：Pixso 目前暂未出现大范围宕机崩溃的情况，使用体验较为稳定。
- 页面打开速度快：Pixso 不需要特殊上网即可快速打开页面，方便用户随时随地访问。
- 个人用户免费：个人用户完全免费，可以创建无限文件，并支持保存过往的所有编辑记录。
- 多色矢量网格：Pixso 提供了矢量网格和多色矢量网格功能，方便绘制复杂的图形和图标。
- 免费可商用中文字体库：Pixso 内置了多个免费可商用的中文字体，完美兼容中文内容。
局限：
- 性能相对较差：与一些上线时间更早的工具相比，Pixso 在性能方面还有一定的差距，但正在努力追赶中。
- 功能相对有限：虽然Pixso内置了丰富的功能，但与一些其他原型设计工具相比，可能还有一些功能上的差距。
使用方法：
下载和安装：
- 首先，您需要前往 Pixso 官网，点击“免费使用 Pixso”或进入工作台，注册一个 Pixso 账号。
- Pixso 支持 Windows 和 Mac 版本，您可以根据自己的操作系统下载并安装。
- 安装完成后，登录 Pixso 账号即可开始使用。
创建项目和文件：
- 登录后，Pixso 会引导您创建团队和项目。您也可以直接新建文件夹开始设计。
- 在工作台的左上方，点击“新建”按钮，创建文档。
- 如果您有现有的设计文件，可以点击“导入”并选择本地文件，Pixso 可以轻松支持多种不同格式的设计文件。
主界面和画板：
- Pixso 的文件不是存储在本地计算机上，而是在云端。您可以随时随地通过浏览器访问所有工作。
- 建立新画板：按 A 或 F 在右侧的属性面板中查看所有画板选项，选择要使用的尺寸或先随意建立一个。
- 嵌套画板：与传统的画板不同，您可以将画板彼此嵌套，方便以后创建更复杂的交互设计。
栅格和布局：
- 移动端：可使用标准的 8 点栅格。
- Web 端：建立布局栅格很重要，先建立 5 栏引导栅格。
- 在右侧的栅格属性菜单中调整列与行，并根据需要设置边距。
图层和组：
- 图层：添加的每个新元素都会自动创建一个图层。您可以通过拖放来重新排列图层或对图层进行分组。
- 组件：在 Pixso 中，可以添加组件，有利于原型设计。
- 页面：设置设计的不同部分或区域，会添加不同的页面，不同的页面之间可以添加交互。
矢量形状设计：
- Pixso 使用一种称为矢量网格的方法，用来创建复杂的形状。
- 使用矢量图形工具直接在画布绘制常见矢量图形，如矩形、直线、椭圆、多边形、星形。
- 按住 Shift 键以保持形状比例不变，使用钢笔工具创作更复杂的形状。
图片样式设置：
- 在任意形状中，点击右侧属性窗口的“填充”，选择“图片”填充，即可填充任意图片。
- 调整图片的透明度，注意图片版权问题，推荐使用高质量的图片网站。
安装本地字体：
- Pixso 内置大量字体样式，但如果您更喜欢使用本地字体，可以通过 Pixso 提供的本地字体助手实现。
Adobe XD：
特点：
- 跨平台支持：Adobe XD 可以在 Mac 和 Windows 系统上运行，适用于不同操作系统的设计师。
- 免费计划：对于 Creative Cloud 用户，Adobe XD 提供免费计划，虽然有一些存储空间和项目数量的限制，但对个人用户非常友好。
- 专注于设计：Adobe XD 专为设计而设计，具有坚实的基础架构。您可以使用可重复使用的元素进行设计、快速调整组件大小，并创建通用的元素、样式或网格。
- 矢量编辑：XD 具备精确的矢量编辑功能，方便设计师进行图形设计。
- 交互式原型：您可以使用流程、动画、语音原型、游戏支持和移动预览创建交互式原型。
- 协作和云存储：Adobe XD 支持文件协作和以查看模式共享，您可以通过链接保存在云中。
局限性：
- 付费计划：如果您不是 Creative Cloud 用户，需要单独付费（每月9.99美元）才能使用全部功能。
- 基本形状限制：虽然可以绘制基本形状，但无法选择自定义形状。
- 导出 CSS 限制：如果没有插件，无法直接从 XD 中获得 CSS 代码。
- 频繁更新：虽然不断更新是好事，但有时可能会导致一些不稳定性或错误。
使用方法：
- 创建新项目：打开 Adobe XD 后，您可以选择新建项目的大小，或打开最近的项目。
- 界面熟悉：了解左侧的附加设备，可以下载插件和组件库。
- 重复网格：使用重复网格创建常见的列表效果，直接拖入文本或图片文件。
- 响应式调整大小：XD 支持响应式布局，自动调整图片宽度，防止拉伸。
- 资源库：集中管理项目中的资源，包括图标、组件等。
- 原型设计：添加点击事件、设置动画，右侧修改动画属性。
- 导出设计：点击左上角的汉堡按钮，选择导出，根据需求切图。
