jjzjj

提升生产力,7 款好用的原型图工具推荐给你

码匠官方账号 2024-05-17 原文

全文 3205 字

阅读时间约 11 分钟

本文首发于码匠官方博客

目录

用户界面的重要性

原型图工具如何工作?

1. InVision Studio​编辑

2. Sketch​编辑

3. Figma​编辑

4. Adobe XD

5. Marvel

6. Bubble​编辑

7. 码匠

如何选择合适的原型图工具

现如今,千千万万的人依靠电子设备访问互联网以实现各种目的。这其中,用户界面 (UI) 能否为用户提供舒适且直观的交互性体验起到关键性作用,这就是为什么原型图工具对于企业开发应用至关重要的原因。

作为设计师,在设计用户界面时,您必须站在用户的立场上。设计不佳的用户界面会使客户在体验感上大打折扣,这在很大程度上减少了公司获得潜在客户的机会。但好在目前有很多 UI 设计工具可以帮助您设计用户界面,码匠这里分享 7 款好用的原型图工具。

用户界面的重要性

因为设计不佳的 UI 让您在其他地方所做的努力全部付诸东流,这显然不是我们想要的。所以设计可靠的用户界面与其他业务开发一样重要,它可以帮助我们:

  • 获得新客户 —— 良好的用户界面可以提高客户满意度,并达到一传十十传百的效果,帮助您在同行业竞争对手中脱颖而出。
  • 留住老客户 —— 提供舒适体验的用户界面能够促使客户选择再次使用,通过让客户轻松快速地执行操作,将会很大程度上减少由负面用户体验引起的客户跳出率。
  • 提高整体满意度 —— 如果用户对您的 UI 有很好的体验,他们会感到满意并且很乐意继续长期使用。

原型图工具如何工作?

用户界面包括所有允许用户浏览页面和执行操作的设计元素。用户界面设计不仅涉及到网站、应用程序、在线商店、软件工具等设计元素之间的连接,还关系到由此产生的用户体验。一个可靠的用户界面需要结合美观舒适的样式和直观的交互性,简单来说就是一个好的用户界面应该看起来不错并且使用起来感觉很好。

通常 UI 有三种不同的表现形式:

  • 图形界面 (GUI) —— 用户与视觉设计元素进行交互的地方,例如手机、桌面或网站的主屏幕。
  • 语音控制界面 (VUI) —— 用户在其中与声音元素进行交互,就像 Siri 或 Alexa 等虚拟助手一样。
  • 基于手势的界面 —— 这是一种创新的 UI 元素,用户使用手势来导航和执行操作,例如虚拟现实平台和游戏。

任何东西,无论是内部系统、游戏还是电商网站,如果它允许用户与设计元素进行交互以达到目的,那么它就具有用户界面。原型图工具为设计师提供了一个平台,可以设计准确的高保真线框、设计模型和原型,此外,这些工具还创建出了最小可行产品 (MVP)。 原型图工具的流行很大程度上说明了低代码将作为未来的主流开发模式。

接下来,码匠给大家罗列了目前可用的七款好用原型图工具。

1. InVision Studio

InVision Studio 声称是“世界上最强大的屏幕设计工具”,这是一个基于 Web 的原型图工具,能够实现快速原型制作并提供高级动画功能以释放新的屏幕设计潜力。

在 Studio 启动器中,您可以简单开始一个新项目、编辑现有项目或打开静态设计文件将其转换为交互式原型,一系列功能可以让您轻松进行交互式设计。不仅如此,InVision Studio 的协作也很容易,只需在 Studio 中分享您的原型,其他人便可以给出反馈意见。当需要开始构建时,Inspect 允许开发人员可以直接从您制作的原型中查看规范、提取资产甚至编写代码。

最新的 InVision 版本 7 的收费计划为:

  • 免费版 —— 不影响基础操作
  • 专业版 —— 每月 9.95 美元
  • 企业版 —— 变化

若一次性支付您的年度订阅费用还会节省 10%。可以在此处了解有关每个计划的功能的更多信息

2. Sketch

Sketch 将原型设计所需的一切都放在了一个简洁的软件包中,其外观和设计均基于 macOS 操作系统,这是一款基于矢量的设计工具,能够在没有像素化的情况下调整您绘制内容的大小。

Sketch 除了是一个出色的绘图工具,还是一个绘制线框图和原型制作的理想选择。与许多其他 UI 工具一样,使用 Sketch 同样可以轻松进行协作,允许整个设计师和开发人员团队一起快速完成工作。但要注意的是,Sketch 仅适用于 macOS,暂不适合 Windows 用户。

关于付费方面,Sketch 提供 30 天免费试用,标准订阅每月只需 9 美元。除此之外,Sketch 还提供商务套餐。在这里了解更多信息

3. Figma

Figma 是第一个可以直接在浏览器内进行用户界面设计的原型图工具,具有强大的设计功能,集设计、原型创建和协作为一体。Figma 是一款初学者友好型编辑器,不仅可以选择全新设计从头开始,还能够直接使用模板,此外,网站上还有许多在线教程帮助您更好的工作。由于 Figma 是基于浏览器的,用户简单登录就可以继续处理已有项目,不需要多个许可证也没有设备限制。

Figma 的收费计划为:

  • 免费版 —— 永久免费,但在功能上有限制
  • 专业版 —— 每年支付 144 美元或每月支付 15 美元
  • 机构版 —— 每月 45 美元
  • 企业版 —— 每月 75 美元

您可以在此处查看有关定价和功能的更多详细信息

4. Adobe XD

 Adobe XD 在设计和创意方面一直处于行业领先地位,提供强大功能来支持您进行设计、原型制作和协作共享。从移动应用程序到一个完整的网站,Adobe XD 能够帮助您实现各种目的创建设计。不仅如此,Adobe XD 还与 Envato Elements 进行了集成,可以让您无限制地下载海量高质量的 Adobe XD 图形模板。

Adobe XD 可用于多种设备和操作系统,无论您运行的是 macOS、iOS、Windows 还是 Android系统,都能够访问和编辑您的作品。以下是 Abode XD 的主要功能列表:

  • 设计原型
  • 3D 变换
  • 转换设计
  • 动画
  • 组件
  • 支持第三方插件
  • 响应式调整大小
  • 重复网格

个人账户的收费情况为每月 9.99 美元,支持免费试用。在此处查看有关定价和功能的更多信息

5. Marvel

 就像漫威电影里的超级英雄一样,Marvel 在 UI 设计方面也能成为一个「超级英雄」来拯救设计师们。Marvel 原型图工具操作起来非常方便,用户能够轻松进行用户界面的设计。得益于 Marvel 直观的功能和强大的集成,您可以快速推进线框图设计、原型制作和协作等流程。除此之外,Marvel 的 Handoff 功能还为开发人员提供了构建所需的所有 HTML 代码和 CSS 样式。

Marvel 的收费计划为:

  • 免费版 —— 在功能方面有一定限制
  • 专业版 —— 每月 8 英镑
  • 团队版 —— 每月 24 英镑

您可以在此处了解有关定价和功能的更多信息

6. Bubble

Bubble 是无代码运动的领导者,不仅提供强大的点击式 Web 编辑器和云托管平台,还支持用户构建完全自定义的 Web 应用程序和工作流程(从简单的原型到复杂的市场、SaaS 产品等)。自 2012 年以来,Bubble 为设计 Web 应用程序提供了强大的支持,致力于让非技术创始人和初创公司能够更快、更经济地构建应用程序,截至目前为止,Bubble 已拥有有超过 200 万用户。

Bubble 有四个价格区间:

  • 免费版 —— 仅支持基本功能
  • 个人版 —— 每月 29 美元
  • 专业版 —— 每月 129 美元
  • 产品版 —— 每月 529 美元

您可以在此处找到有关定价和功能的更多详细信息

7. 码匠

与其它单纯只做原型图的工具不同,码匠是一款对开发者友好的低代码平台,它提供了一套拆箱即用的组件,在满足交互设计师 UI 设计、原型创建、界面布局与交互设计同时,还能让研发一键连接 MySQL、MongoDB、REST API 等多种数据源,相比传统的 UI/交互设计 -> 产品 PRD -> 前后端开发 -> QA 测试的研发流程,码匠能帮助您快速构建功能完善的数据看板、数据洞察、Admin 管理后台等多种内部应用,大幅提升研发效率,让您专注于业务发展。不仅如此,码匠还一站式提供了内部系统常用的租户管理、细粒度的权限控制、审计日志等功能,让您快速搭建后台应用的同时,也为您的企业信息安全保驾护航。

使用码匠,快速搭建账户管理后台 账户管理系统 

如何选择合适的原型图工具

作为设计师,您需要设身处地为客户着想,并提出以下问题:

  • 我会对这种体验感到满意吗?
  • 界面是否直观且易于使用?
  • 使用这个工具能帮助我达到预期目标吗?
  • 该设计是否适用于我的所有设备?
  • 遇到问题时,我可以轻松联系到支持人员寻求帮助吗?

如果对此类问题的回答是「否」,那么您也许需要重新设计了。

如何选择一款适合自己的原型图工具取决于您的具体目标。但是,在这么多可供选择且许多功能重叠的工具面前,这可能会是一个艰难的选择。无论您是经验丰富的资深技术人员还是低代码开发方面自学成才的设计师,在选择最佳原型图工具时码匠认为有以下几点需要考虑:

  • 支持 —— 是否有强大的支持和使用教程?
  • 项目需求 —— 是否满足您的项目需求?
  • 更新 —— 是否与时俱进并定期更新功能?
  • 集成 —— 与其他软件的集成程度如何?
  • 协作 —— 协作是否容易?
  • 价格 —— 价格是否实惠?

本文为原创内容,版权归「码匠」所有,欢迎文末点赞、收藏、评论!转载请联系我们。

有关提升生产力,7 款好用的原型图工具推荐给你的更多相关文章

  1. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  2. ruby-on-rails - 在 Rails 中调试生产服务器 - 2

    您如何在Rails中的实时服务器上进行有效调试,无论是在测试版/生产服务器上?我试过直接在服务器上修改文件,然后重启应用,但是修改好像没有生效,或者需要很长时间(缓存?)我也试过在本地做“脚本/服务器生产”,但是那很慢另一种选择是编码和部署,但效率很低。有人对他们如何有效地做到这一点有任何见解吗? 最佳答案 我会回答你的问题,即使我不同意这种热修补服务器代码的方式:)首先,你真的确定你已经重启了服务器吗?您可以通过跟踪日志文件来检查它。您更改的代码显示的View可能会被缓存。缓存页面位于tmp/cache文件夹下。您可以尝试手动删除

  3. ruby-on-rails - Rails 中的推荐引擎 - 2

    我想为我的Rails网络应用程序提供推荐功能。特别是,我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem?如果没有,我应该从哪里开始构建它?谢谢。 最佳答案 有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上,大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时,Neo4j.rb才会很酷。如果不是-使用Neograph

  4. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实,开发人员用的更多。因为测试人员做接口测试会有更多选择,例如Jmeter、soapUI等。不过,对于开发过程中去调试接口,Postman确实足够的简单方便,而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧,安装过程极其简单,无需任何操作3.使用教程这里以百度为例,工具使用简单,填写URL地址即可发送请求,在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get:请求方法一般是用于数据查询,

  7. ruby-on-rails - 一般建议和推荐的文件夹结构 - Sinatra - 2

    您将如何构建一个简单的Sinatra应用程序?我正在制作,我希望该应用具有以下功能:“应用程序”更像是一个包含所有信息的管理仪表板。然后另一个应用程序将通过REST访问信息。我还没有创建仪表板,只是从数据库中获取东西session和身份验证(尚未实现)您可以上传图片,其他应用可以显示这些图片我已经使用RSpec创建了一个测试文件通过Prawn生成报告目前的设置是这样的:app.rbtest_app.rb因为我实际上只有应用程序和测试文件。到目前为止,我已经将Datamapper用于ORM,将SQLite用于数据库。这是我的第一个Ruby/Sinatra项目,所以欢迎任何和所有建议-我应

  8. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改? - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存,也很有可能会自动创建一个保存点。至少,我可以将文档恢复到错误更改之前的状态,并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器,是否有具有等效功能的工具?例如,一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执,但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应,但我在编码时经常使用VIM,它具有自动保存功

  9. ruby-on-rails - 如果条件与 &&,是否有任何性能提升 - 2

    如果用户是所有者,我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&,是否有任何性能提升,我们在StackOverflow上找到一个类似的问题:

  10. ruby - 使用 Ruby 开发工具包将文件上传到 Amazon S3 - 2

    我正在尝试上传文件。一个简单的hello.txt。我正在关注文档,但无法将其上传到我的存储桶。#STARTAWSCLIENTs3=Aws::S3::Resource.newbucket=s3.bucket(BUCKET_NAME)begins3.buckets[BUCKET_NAME].objects[KEY].write(:file=>FILE_NAME)puts"Uploadingfile#{FILE_NAME}tobucket#{BUCKET_NAME}."bucket.objects.eachdo|obj|puts"#{obj.key}=>#{obj.etag}"endresc

随机推荐