主流原型设计工具介绍(●ϖ`●)

news/2024/11/17 7:47:58/文章来源:https://www.cnblogs.com/midzyovo/p/18200491

原型设计工具在产品设计、交互设计和用户体验设计中扮演着重要角色,本篇博客将介绍Axure RP、墨刀、Pixso、Adobe XD这4种主流原型设计工具。

Axure RP

特点

  1. 强大的交互能力:强大的交互设计功能,支持复杂的交互流程和状态转换。
  2. 丰富的组件库:Axure RP 内置了大量的组件,包括按钮、表单元素、图标等,方便快速构建原型。
  3. 灵活的导出选项:支持导出为 HTML、PDF、Word 等多种格式,方便与团队和客户分享。
  4. 多人协作和版本控制:支持团队协作和版本控制。

局限性:

  1. 学习曲线陡峭:Axure RP 功能丰富,对新手要求较高,需要花费时间学习和熟悉软件。
  2. 价格较高:Axure RP 专业版的价格较高,可能对个人或小型团队来说是一笔不小的支出。
  3. 缺少简单的绘图工具:相比其他原型工具,Axure RP 在绘制基本图形方面的功能相对有限。
  4. 容易发生卡顿:在处理复杂原型时,Axure RP 可能会出现性能问题。

使用方法:

需求分析:
  1. 收集关于产品、目标用户、品牌风格等的信息。
  2. 确定首页需要展示的内容,如商品分类、推荐商品、广告位等。
绘制草图:
  1. 使用 Axure RP 绘制一个简单的页面草图,包括顶部导航、商品分类、轮播图等。
添加交互元素:
  1. 在草图中添加导航链接、商品分类按钮等。
  2. 创建一个轮播图,让用户可以点击切换广告图片。
创建交互动效:
  1. 为导航链接添加点击效果,模拟用户点击后的页面跳转。
  2. 为轮播图添加自动切换效果,让用户可以浏览不同的广告。
测试原型:
  1. 在 Axure RP 中测试导航链接、轮播图的交互效果。
  2. 确保用户能够顺利浏览网站内容。
导出原型:
  1. 导出为 HTML 文件,分享给团队成员和客户。

image

MODAO(墨刀)

特点:

  1. 丰富的交互和动画功能:墨刀提供了丰富的交互和动画功能,可以帮助设计师创建高度交互性的原型图。
  2. 多人协作和实时预览:墨刀支持多人协作,团队成员可以实时编辑和预览设计文件,方便团队合作。
  3. 适用于移动端产品设计:墨刀的设计组件针对移动端产品,使得绘制移动端原型图更加便捷,展示效果更好。
  4. 易于上手:墨刀具有直观的界面和简单的操作,适合初学者快速上手。

局限性:

  1. 免费版功能有限:墨刀的免费版功能可能有一些限制,一些高级功能和团队协作功能可能需要付费。
  2. 安全性和保密性问题:墨刀是一款在线产品设计工具,设计的产品保存在云端,安全性和保密性可能不如离线工具。
  3. 界面和操作适应时间:墨刀的界面和操作可能需要一些时间来适应,特别是对于初次使用的用户。

使用方法:

安装和创建项目:
  1. 首先,您需要选择适合您操作系统的墨刀版本并下载安装12。
  2. 打开安装好的墨刀,点击“新建项目”,为项目取个名称,并选择“网页/电视”作为默认大小(通常为1440✖1024)。
  3. 点击“创建”即可开始您的设计。
界面熟悉:
  1. 创建项目后,您会看到一个空白界面。让我们简单了解一下墨刀的操作界面:
  2. 左侧工具栏:包含基础的文字、形状等工具。
  3. 右侧属性栏:选中画布上的对象,可以修改大小、颜色等属性。
  4. 顶部素材库:提供免费的素材供您使用。
页面编辑:
  1. 在画布上添加元素,如文本、形状、图片等。
  2. 设置页面链接跳转,创建长页面的滚动演示,固定底部与顶部的内容等。
组件的使用:
  1. 墨刀提供了一些高频组件,如轮播图、链接区域、表格、批注等。您可以在左侧工具栏中找到它们并拖拽到画布上使用。
分享和交付:
  1. 下载项目数据,设置项目分享链接。
  2. 预览、标注和评论项目。

image

Pixso:

特点:

  1. 中文界面:Pixso 提供中文界面,方便中文用户操作,不会出现缺字漏字的问题。
  2. 稳定性高:Pixso 目前暂未出现大范围宕机崩溃的情况,使用体验较为稳定。
  3. 页面打开速度快:Pixso 不需要特殊上网即可快速打开页面,方便用户随时随地访问。
  4. 个人用户免费:个人用户完全免费,可以创建无限文件,并支持保存过往的所有编辑记录。
  5. 多色矢量网格:Pixso 提供了矢量网格和多色矢量网格功能,方便绘制复杂的图形和图标。
  6. 免费可商用中文字体库:Pixso 内置了多个免费可商用的中文字体,完美兼容中文内容。

局限:

  1. 性能相对较差:与一些上线时间更早的工具相比,Pixso 在性能方面还有一定的差距,但正在努力追赶中。
  2. 功能相对有限:虽然Pixso内置了丰富的功能,但与一些其他原型设计工具相比,可能还有一些功能上的差距。

使用方法:

下载和安装:
  1. 首先,您需要前往 Pixso 官网,点击“免费使用 Pixso”或进入工作台,注册一个 Pixso 账号。
  2. Pixso 支持 Windows 和 Mac 版本,您可以根据自己的操作系统下载并安装。
  3. 安装完成后,登录 Pixso 账号即可开始使用。
创建项目和文件:
  1. 登录后,Pixso 会引导您创建团队和项目。您也可以直接新建文件夹开始设计。
  2. 在工作台的左上方,点击“新建”按钮,创建文档。
  3. 如果您有现有的设计文件,可以点击“导入”并选择本地文件,Pixso 可以轻松支持多种不同格式的设计文件。
    image
主界面和画板:
  1. Pixso 的文件不是存储在本地计算机上,而是在云端。您可以随时随地通过浏览器访问所有工作。
  2. 建立新画板:按 A 或 F 在右侧的属性面板中查看所有画板选项,选择要使用的尺寸或先随意建立一个。
  3. 嵌套画板:与传统的画板不同,您可以将画板彼此嵌套,方便以后创建更复杂的交互设计。
栅格和布局:
  1. 移动端:可使用标准的 8 点栅格。
  2. Web 端:建立布局栅格很重要,先建立 5 栏引导栅格。
  3. 在右侧的栅格属性菜单中调整列与行,并根据需要设置边距。
图层和组:
  1. 图层:添加的每个新元素都会自动创建一个图层。您可以通过拖放来重新排列图层或对图层进行分组。
  2. 组件:在 Pixso 中,可以添加组件,有利于原型设计。
  3. 页面:设置设计的不同部分或区域,会添加不同的页面,不同的页面之间可以添加交互。
矢量形状设计:
  1. Pixso 使用一种称为矢量网格的方法,用来创建复杂的形状。
  2. 使用矢量图形工具直接在画布绘制常见矢量图形,如矩形、直线、椭圆、多边形、星形。
  3. 按住 Shift 键以保持形状比例不变,使用钢笔工具创作更复杂的形状。
图片样式设置:
  1. 在任意形状中,点击右侧属性窗口的“填充”,选择“图片”填充,即可填充任意图片。
  2. 调整图片的透明度,注意图片版权问题,推荐使用高质量的图片网站。
安装本地字体:
  1. Pixso 内置大量字体样式,但如果您更喜欢使用本地字体,可以通过 Pixso 提供的本地字体助手实现。

Adobe XD:

特点:

  1. 跨平台支持:Adobe XD 可以在 Mac 和 Windows 系统上运行,适用于不同操作系统的设计师。
  2. 免费计划:对于 Creative Cloud 用户,Adobe XD 提供免费计划,虽然有一些存储空间和项目数量的限制,但对个人用户非常友好。
  3. 专注于设计:Adobe XD 专为设计而设计,具有坚实的基础架构。您可以使用可重复使用的元素进行设计、快速调整组件大小,并创建通用的元素、样式或网格。
  4. 矢量编辑:XD 具备精确的矢量编辑功能,方便设计师进行图形设计。
  5. 交互式原型:您可以使用流程、动画、语音原型、游戏支持和移动预览创建交互式原型。
  6. 协作和云存储:Adobe XD 支持文件协作和以查看模式共享,您可以通过链接保存在云中。

局限性:

  1. 付费计划:如果您不是 Creative Cloud 用户,需要单独付费(每月9.99美元)才能使用全部功能。
  2. 基本形状限制:虽然可以绘制基本形状,但无法选择自定义形状。
  3. 导出 CSS 限制:如果没有插件,无法直接从 XD 中获得 CSS 代码。
  4. 频繁更新:虽然不断更新是好事,但有时可能会导致一些不稳定性或错误。

使用方法:

  1. 创建新项目:打开 Adobe XD 后,您可以选择新建项目的大小,或打开最近的项目。
  2. 界面熟悉:了解左侧的附加设备,可以下载插件和组件库。
  3. 重复网格:使用重复网格创建常见的列表效果,直接拖入文本或图片文件。
  4. 响应式调整大小:XD 支持响应式布局,自动调整图片宽度,防止拉伸。
  5. 资源库:集中管理项目中的资源,包括图标、组件等。
  6. 原型设计:添加点击事件、设置动画,右侧修改动画属性。
  7. 导出设计:点击左上角的汉堡按钮,选择导出,根据需求切图。

image

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/708840.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windev28 试用版 测试

下载地址 https://package.windev.com/pack/versiondemo/28/us/WDE28PACKDVDUS095g.zip建议迅雷下载 非常快 需要申请一个试用码 界面没啥变化 依旧只能生成32位程序,不过客户端在中国早就没落了 也没啥价值了 还不如去学electron

【Mybatis/Mybaits-Plus】【插件】插件执行时机

1 前言 我之前看过插件的执行过程:【Mybatis】【插件】Mybatis源码解析-插件机制,主要是通过一个 Executor 的创建以及执行过程串了一下插件,我们这里简单回忆下: (1)Mybatis 把所有的插件都放进了 InterceptorChain 类里的 interceptors 集合里 (2)插件的两个时机:入…

软件设计原则—开闭原则

对扩展开放,对修改关闭,使用接口或抽象类实现在程序需要进行拓展的时候,不能去修改原有的代码,而是实现一个热插拔的效果。简言之,是为了使程序的扩展性好,易于维护和升级。 想要达到这样的效果,我们需要使用接口和抽象类。 因为抽象灵活性好,适应性广,只要抽象的合理…

【开源】2024最新python豆瓣电影数据爬虫+可视化分析项目

项目介绍 【开源】项目基于python+pandas+flask+mysql等技术实现豆瓣电影数据获取及可视化分析展示,觉得有用的朋友可以来个一键三连,感谢!!! 项目演示 [video(video-C9B87WwE-1716106102936)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=120451806…

何恺明介绍

何恺明(Kaiming He),1984年出生于广东广州,人工智能科学家,麻省理工学院电气工程与计算机科学系副教授。 何恺明2003年高中毕业于广州市执信中学,为当年广东省高考满分状元。2003-2007年就读于清华大学物理系基础科学班,连续3年获得清华奖学金,本科毕业后进入香港中文…

【每周例题】力扣 C++ 一年中的第几天

一年中的第几天 题目 一年中的第几天 思路分析 1.substr函数分割字符串,stoi函数将字符串转为十进制 stoi函数介绍 substr函数介绍 2.判断是否为闰年,如果是闰年,则二月的天数+1 代码#include<bits/stdc++.h> using namespace std;int main() {int months[13] = { 0,3…

题目:SHMIP The subglacial hydrology model intercomparison Project

SHMIP(冰下水文模型比较计划)是一个致力于解决冰下水文多种理论方法问题的项目。该计划通过构建一系列综合模拟实验,并对运行这些模拟的各参与模型的结果进行比较,以达到其目标。这将有助于潜在的模型用户更加明智地为特定应用选择合适的模型。同时,对于模型开发人员来说,…

Xpath使用教程

一、安装Xpath解析库-scrapy中的selector win+r打开cmd,输入pip install wheel,先安装wheel库了才能安装.whl文件。安装lxml库 到https://pypi.org/project/lxml/#files下载对应python版本的lxml库 切到lxml下载位置,安装lxml安装Twisted库 到https://pypi.org/project/Twi…

JEEVMS仓库管理系统任意文件读取漏洞

漏洞描述 该漏洞由于系统未能正确实施或执行对文件的访问控制权限控制,允许未经授权的用户访问或读取文件,并且应用程序未能对用户输入进行适当验证,攻击者可以构造特殊的输入,如路径遍历攻击读取系统文件内容,导致信息泄露 Fofa: body="plug-in/lhgDialog/lhgdialog…

vulnhub--JIS靶场

环境搭建 kali(攻击机,NAT):192.168.96.4 靶机(linux,NAT):ip未知 信息收集 主机探测 netdiscover -i 监听网卡发现96网段存活主机,猜测是96.5为靶机地址 端口扫描 nmap -sS -v 192.168.96.5(高校快速的扫描,TCP半链接扫描) nmap -A 192.168.96.5(全面扫描,更全面)…

rthread学习记录汇总-不断更新

1、rthread 同Linux类似,包含了所有主流的芯片、cpu架构,可从官方获取最新的rt-thread源码后进行裁剪2、可从rthread官网下载env工具,env工具可用来对rtthread源码生成mdk/iar工程 命令式scons --target=mdk5 scons --targe=iar scons自带的编译固件功能,命令为scnons,…

【0day漏洞复现】北京慧飒科技有限责任公司WEB VIDEO PLATFORM存在未授权访问漏洞

阅读须知花果山的技术文章仅供参考,此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失,均由使用者本人…