原型设计工具Quant-UX

这篇具有很好参考价值的文章主要介绍了原型设计工具Quant-UX。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原型设计工具Quant-UX

什么是 Quant-UX ?

Quant UX 是一种研究、可用性和原型设计工具,可快速测试您的设计并获得数据驱动的洞察力。Quant-UX 使验证您的想法变得简单。使用 Quant UX 的可视化编辑器可在几分钟内创建一个交互式原型,感觉就像真正的应用程序一样。

之前老苏介绍过一个原型工具 Penpot

文章传送门:开源设计和原型制作平台Penpot

从官方的演示视频看,两者还是有比较大的区别的

Quant UX

安装

环境变量

docker 相关的环境变量

可变
QUX_HTTP_PORT 后端服务运行的端口
QUX_MAIL_USER 您的 smtp 服务器的用户名
QUX_MAIL_PASSWORD 您的 smtp 服务器用户的密码
QUX_MAIL_HOST 您的 smtp 服务器的主机 url
QUX_JWT_PASSWORD 可通过 https://jwt.io/ 生成

更详细的环境变量说明请看官方的文档:https://github.com/bmcgonag/quant-ux-docker/tree/main#docker-compose-environment-variables

docker compose 安装

将下面的内容保存为 docker-compose.yml 文件

bmcgonag/qux-be:latest 对应的版本是 1.8.0

bmcgonag/qux-fe:latest 对应的版本是 1.8.0

version: '3'

services:
  mongo:
    restart: always
    container_name: quant-ux-mongo
    image: mongo:4.4.0
    volumes:
      - ./data:/data/db
  
  qux-fe:
    restart: always
    container_name: quant-ux-frontend
    image: bmcgonag/qux-fe
    environment:
      - QUX_PROXY_URL=http://quant-ux-backend:8780
    links:
      - mongo
      - qux-be
    ports:
      - 8782:8082        
    depends_on:
      - qux-be
  
  qux-be:
    restart: always
    container_name: quant-ux-backend
    image: bmcgonag/qux-be
    environment:
      - QUX_HTTP_HOST=http://quant-ux-frontend:8782
      - QUX_HTTP_PORT=8780
      - QUX_MONGO_DB_NAME=quantux
      - QUX_MONGO_TABLE_PREFIX=quantux
      - QUX_MONGO_CONNECTION_STRING=mongodb://quant-ux-mongo:27017
      - QUX_MAIL_USER=wbsu2003@88.com
      - QUX_MAIL_PASSWORD=<第三方邮件客户端密码>
      - QUX_MAIL_HOST=smtp.88.com
      - QUX_JWT_PASSWORD=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
      - QUX_IMAGE_FOLDER_USER=/qux-images
      - QUX_IMAGE_FOLDER_APPS=/qux-image-apps
      - QUX_DEBUG=false
      - TZ=Asia/Shanghai
    depends_on:
      - mongo

然后执行下面的命令

# 新建文件夹 quant-ux 和 子目录
mkdir -p /volume2/docker/quant-ux/data

# 进入 quant-ux 目录
cd /volume2/docker/quant-ux

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3030 就能看到主界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CnxMPR9E-1685322286825)(null)]

先注册一个账号

原型设计工具Quant-UX

登录成功之后

原型设计工具Quant-UX

可以切换到中文

原型设计工具Quant-UX

还是中文看着比较舒服

原型设计工具Quant-UX

+ 号新建原型

原型设计工具Quant-UX

Quant-UX 画布在原型上具有三个主要视图

  • Design 视图允许您创建原型的视觉方面。您可以添加屏幕和小部件并更改外观。
  • Prototype 视图定义了屏幕和元素之间的交互。在原型视图中,您可以查看和创建屏幕之间的链接。您还可以自定义输入元素的某些动态属性,例如表单验证和数据绑定。
  • LowCode视图中,您可以定义对于将原型转变为工作应用程序很重要的属性。

原型设计工具Quant-UX

最后上一张官方的图

原型设计工具Quant-UX

参考文档

KlausSchaefers/quant-ux: Quant-UX - Prototype, Test and Learn
地址:https://github.com/KlausSchaefers/quant-ux

bmcgonag/quant-ux-docker: Dockerized Quant-UX Prototyping Tool
地址:https://github.com/bmcgonag/quant-ux-docker/

Quant-UX - Prototype, Test and Learn - 4.0.70
地址:https://quant-ux.com文章来源地址https://www.toymoban.com/news/detail-463397.html

到了这里,关于原型设计工具Quant-UX的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 原型设计工具即时设计、Axure、Figma、Sketch,哪个更好用?

    在线网页原型图设计软件的使用与桌面端相比具备优势,因为在线网页原型图设计软件的使用全程不需要安装,而且在线网页原型图设计软件也没有任何地点上的限制,更主要的是在线网页原型图设计软件在操作系统上也没有限制,不论是现在使用的 Linux、Solaris、Mac,还是

    2024年02月09日
    浏览(41)
  • Axure RP 8.1.0.3400(原型设计工具)

    Axure RP 8是一款原型设计工具,它提供了丰富的功能和工具,帮助用户创建高质量的网页、移动应用和桌面软件原型。以下是Axure RP 8的一些特色介绍: 强大的交互设计:Axure RP 8支持创建复杂的动画和过渡效果,让你的原型更加生动和具有真实的用户体验。 多设备适配:Axur

    2024年02月10日
    浏览(32)
  • 原型设计工具:Balsamiq Wireframes 4.7.4 Crack

    原型设计工具:Balsamiq Wireframes是一种快速的低保真UI 线框图工具,可重现在记事本或白板上绘制草图但使用计算机的体验。 它确实迫使您专注于结构和内容,避免在此过程后期对颜色和细节进行冗长的讨论。 线框速度很快:您将产生更多想法,因此您可以扔掉不好的想法并发

    2024年02月04日
    浏览(70)
  • 为你精选5款体验极佳的原型设计工具!

    在绘制原型图的过程中,使用一款的简单易操作的原型设计工具是非常重要的,本文精选了5款好用的原型工具与大家分享,一起来看看吧! 即时设计 是国内很多设计师都在用的原型设计工具,同时它也是国产的原型设计工具,可以在网页中直接运行使用,非常方便。在即时

    2024年02月16日
    浏览(33)
  • 什么是ui/ux

    前言 1.图形元素 2.布局 3. 颜色和视觉效果 4.动画和过渡效果 5. 6.用户体验(User Experience,UX) 7.响应式设计(Responsive Design) 8..可用性(Usability) 9.信息架构(Information Architecture) 10.无障碍设计(Accessible Design) 11.标注和原型(Annotations and Prototyping) 12.设计系统(Design Sys

    2024年02月16日
    浏览(35)
  • UX设计VSUI设计

    UX设计在近年来国内蓬勃发展,许多人对其产生了浓厚的兴趣。那么我们应该如何通过自学来系统地学习UX设计呢?话不多说,上干货! 1、 深入了解 UX 设计行业 在开始学习之前,需要深入了解UX设计师的工作内容和行业发展前景。确定这是自己想要从事的职业后,再下定决心投入

    2024年02月07日
    浏览(32)
  • UX设计基础入门

    UX即User Experience(不要读作U叉,正确的读音是U埃克斯),强调的是「使用者体验的过程」。使用者体验,是根据使用者的习惯,安排整个网站页面的内容规划,像是哪些区块的内容要先在网站上出现,哪些按钮一定要在哪,重大责任就是要确保产品从这一步流动到下一步符合

    2023年04月08日
    浏览(29)
  • 原型设计工具Axure RP结合内网穿透实现本地web页面公网访问协同办公

    💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老 导航 檀越剑指大厂系列:全面总

    2024年01月19日
    浏览(52)
  • 探索创新设计:Manifest Design - 前沿的UI/UX设计方案

    项目地址:https://gitcode.com/SXX19950910/manifest-design 在当今数字化的时代,优秀的用户界面和用户体验(UI/UX)设计是产品成功的关键因素之一。正是这样的背景下,我们发现了SXX19950910开发的 Manifest Design 项目,它是一个开源的UI/UX设计系统,致力于提供一套高效、一致的设计解决

    2024年04月14日
    浏览(38)
  • 深度剖析APP开发中的UI/UX设计

    作为一个 UI/UX设计师,除了要关注 UI/UX设计之外,还要掌握移动开发知识,同时在日常工作中也需要对用户体验有一定的认知,在本次分享中,笔者就针对自己在工作中积累的一些经验来进行一个总结,希望能够帮助到各位设计师朋友。 一、 什么是 UI? UI (User Interface)即

    2024年02月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包