主流原型设计工具介绍(●´ϖ`●)
原型设计工具在产品设计、交互设计和用户体验设计中扮演着重要角色,本篇博客将介绍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 支持响应式布局,自动调整图片宽度,防止拉伸。
- 资源库:集中管理项目中的资源,包括图标、组件等。
- 原型设计:添加点击事件、设置动画,右侧修改动画属性。
- 导出设计:点击左上角的汉堡按钮,选择导出,根据需求切图。