百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

JUSTINMIND权威指南:Justinmind特性&Justinmind功能简介

zhezhongyun 2025-02-13 15:10 31 浏览

点击标题下「艾欧交互设计」可快速关注

JUSTINMIND权威指南

这一篇是用来扫盲的,知道基础知识的童鞋可以再了解一下,不知道的同学要仔细了解。

对于老鸟来说可以直接飞过此章节。

JUSTINMIND权威简介(WIKIPEDIA)

全称:Justinmind Prototyper

简介:Justinmind是一个创作网站软件原型线框图和高保真原型的工具

它提供的功能有绘图工具,拖放位置,大小,格式和导出/导入的小部件。此外,它有功能注释等小部件定义交互链接,动画,有条件的连接,计算,模拟选项卡控件,显示/隐藏元素和数据库模拟。支持高保真模拟富Internet应用程序。Justinmind原型可以生成HTML原型和Microsoft Word规范。

官网:
http://www.justinmind.com/

_baidu_page_break_tag_

主要特点

官网有自己的官方特色功能介绍看这个网址
http://www.justinmind.com/features

考虑一些同学的网速和语言问题我们这里翻译出来一些要点给大家了解一下

针对Web、APP等等,一体化的原型工具

  • iOS和Android Justinmind原型允许您更快更好用默认内置的小部件。 这些小部件已专门设计适合您的iOS和Android应用程序,所以您的内容总是看来很好,Justinmind内置的IOS和Android的部件库支持矢量图。

  • 网络 每个小部件库的目的是帮助你快速启动Web线框图。 Justinmind包括一个方便采集的Web按钮、菜单、图表等更多可以使用自动采集或填充到这个Web部件库里。

  • Google Glasses Justinmind帮助你遵循标准的指导方针与完美预先设计Google Glasses卡和模式的应用程序。每个小部件在这个库运,Justinmind可以推动和模拟Google Glasses设备。

  • 创建自己的小部件 创建自己的小部件,用你自己的风格和交互,或者选择数百Justinmind预先设计的小部件,您可以很容易地提炼和重用。

  • Sketch & Shapes 创建一个低保真线框当专注于内容和结构。Justinmind可以选择不同部件库,包括互动sketch-like组件、箭头、菜单、图像和更多。

  • Windows 8 任何类型的应用程序原型为Windows 8这个难以置信的库。你会发现输入、菜单和许多其他控件模型你的下一个Windows 8应用程序。

  • ERP Justinmind可以运行不同的场景来验证和验证企业流程。下载我们的融合或SAP部件库内部流程的高度交互的线框图,通过简单的拖放式元件操作。

  • 嵌入HTML和文档 这个Justinmind部件库允许您轻松插入HTML文档,和视频,包括在线小部件,交互式地图和其他在/离线内容,等等。

  • 更多的 导入正确的部件设计。看看我们在商店为您的所有库和/或与Justinmind社区分享你自己的。

交互 [Interactions ]

  • Web交互 Justinmind伴随着各种各样的事件,如Onclick,翻转,OnkeyPressed,和更多的,您可以选择定义交互。 显示和隐藏内容,改变风格等。

  • Mobile手势 选择一套完整的动作,会让你感觉尽可能真实的原型。 认为刷卡,必要时,滚动,点击,切换等等。 所有的动作都可以模拟手机模拟器和测试在实际设备上,利用Justinmind APP实现。

  • 转换和动效 你可以控制所有不同的事件和动画,以及定义您的项目将如何通过使用转换反应手势。 所有的转换和动效都可以模拟手机模拟器和测试在实际设备,利用Justinmind APP实现。

视觉设计 [Visual Design]

  • 图片热点 可以在你的照片上放一个透明区域可以加点击连接等事件交互,Justinmind很容易让你把你的静态设计成可点击互动线框通过设置热点和链接屏幕等。

  • 颜色、阴影和梯度 Justinmind可以定义所有格式的细节设计。 创建独特的渐变颜色,相结合的定位、改变颜色或双梯度,并使用它们作为背景。

  • 圆形的边界 定制和控制您的小部件边界,一个接一个或全部。 您可以选择使用滑块或旋转来调整你的边界的边缘,使它们从锯齿变成完全圆的。

  • 图像同步法 连接与Photoshop图像可以同时工作时特别有用。 所有图片嵌入到你的线框会自动更新时远程文件从你的编辑修改。

  • Adobe Illustrator集成 复制/粘贴在Illustrator Justinmind为SVG文件。 您可以编辑图像用Illustrator和看到的变化反映在你设计的线框图

  • 从浏览器&文件拖放图片 Justinmind允许您获取图像直接从您的web浏览器,或从文件系统用一个简单的拖放动作。

  • 调整图像 所有图片插入你的线框可以修改以适应您的设计的尺寸和风格。 Justinmind编辑功能允许您作物图像,在轴旋转或翻转图片,调整他们等等。

  • 字体 完全控制你的设计,给它一个声音。 字体类型可以在下拉选择栏里允许您选择从数以百计的字体选择在谷歌的字体目录,谷歌字体可只能使用于英文设计,不支持中文。

  • 智能参考线 使用参考线、标尺和网格来帮助你,使你每个元素拖动到画布上。 配置网格,标尺和画布大小,你的内容在整个设计是一致的。

  • SVG文件 很容易嵌入或链接矢量文件就像任何其他的形象。 与Justinmind可以导入任何视觉SVG文件和规模大小而不损失画质。

Web 仿真 & 测试 [Web Simulation & Testing]

  • 网络模拟器 模拟超越了一个简单的皮肤,给你一个本地网络显示的输入字段,选择列表,滚动条等等。 Justinmind web模拟器模拟响应设计的最常见的版本的浏览器。

  • 用户测试工具集成 选择其中一个用户测试工具:KeyNote,Userzoom,Loop11,sitemeter,Usabilla,Usertesting,Crazyegg,Google Analytics,Trymyui或Userlytics。

移动模拟及测试 [Mobile Simulation & Testing]

  • iPhone和iPad应用程序查看器 Justinmind设计与现代的移动设备。 我们的应用程序可以模拟和测试整个用户体验直接从你的iPhone或iPad的设备。

  • Android应用程序查看器 模拟你的线框图和测试它直接从你使用Justinmind Android手机或平板电脑应用程序。

  • 手机模拟器 选择不同的iPhone或者iPad和Android或定制设备,模拟线框图立即从您的浏览器。 仿真设置将允许您预览完整的经验在一个真实的设备,包括压力、滚动和其他本地手势。

  • 用户测试工具集成 运行一个用户测试和你的线框图来评估交互、功能和整体用户体验在现实中。

导出 [Export]

  • 交互的HTML + javascript生成一个HTML原型互动。 我们的简单导出选项允许您包括或者排除评论,和优化代码所以屏幕可以加载速度更快。

  • 文档生成您的项目导出到微软的Word或开放的办公室,得到一个明确的规范文档的解释在一个单一的点击所需的视觉效果。 包括Justinmind允许您配置选项,在您的规格文档,你需要尽可能多的细节。

  • 文档的定制每个文档的内容可以很容易地定制适合您的需求。 最终的文档让你的可配置选项包括与否,评论等信息和需求。

  • 图片你可以很容易地将屏幕,模板,硕士或场景图像文件。

  • 导航地图得到一个快速和清晰的完整的全局视图导航的自动生成站点地图你的线框图。

重用的内容和风格 [Reuse Content & Styles]

  • 模板节省时间用你的模板作为起点。 创建和共享内容(页眉,页脚和更多),您可以使用和重用在任何屏幕或设计。 所有的模板都可以编辑、导出和导入。

  • 风格您可以更改默认风格,位置,大小,背景,和任何小部件的布局分布适应不同屏幕的外观和感觉。 所有风格定制一个条目可以复制和粘贴任何小部件。

  • 大师使用大师的巨大好处是,变化是全球广泛应用于你的原型。 所有的大师都可以进口,出口和与其他用户共享。

反馈:分享和评论 [Feedback: Share & Comments]

  • 发布和评论 让你的线框可用在任何web浏览器视图,或者发布远程用户测试工具。 你的线框仿真可以评论者给你有意义的反馈。 线框图可以替换为更新版本出版。

  • 评论管理 业主已经完全控制的人可以查看和访问一个原型。 评审邀请通过电子邮件发送选定的用户或用户组。 你可以撤销评论者的许可你赋予它一样容易。

  • 公共和私人的原型 把你的原型的URL给任何你想看到它。 如果你需要额外的安全,或机密的项目可以让他们有密码保护。

  • 评论系统 同事和客户,可以访问发表线框图来测试,并发表评论。 所有的反馈可以很容易地组织迷路了所以没有细节。

  • 在线和离线评论同步 随时随地都能评论和检查线框图。 当一个连接可用你的反馈与你的更新会自动同步到你的账户。

  • 类别 所有的反馈可以很容易地组织在自定义类别标签和颜色为坚实的管理。 评论可以看到/制造的特定部分的设计了所以你永远不会失去联系。

业务逻辑、表单和数据表格 [Business Logic, Forms, and Datagrids]

  • 变量 变量允许不同屏幕之间共享数据,作为泛型容器,可用于定义基于用户输入的互动内容和行为。

  • 有条件的导航 条件编辑器,可以很容易地应用条件导航你的原型。 简单的拖放变量,屏幕元素,更多的空白表达式对话框和建立你的条件规则。

  • 表单验证 模拟形式填充,要么验证类型,或者在提交验证,确保正确的信息输入成功完成手术。 模拟错误消息,当条件和业务规则并不满足,或一个必需的字段输入无效。

  • 形式模拟 使用拖放元素来构建内容驱动的形式和模拟现场表单填充和输入提交。 所有属性和值以及条件和验证规则可以很容易地根据需要创建和修改。

  • 数据表格 Justinmind允许您设计智能数据网格和模拟其动态行为。 您可以结合运营商和验证字段、变量,和你自己的数据。

  • 测试数据 数据网格和形式可以立即与实际测试数据来自csv文件,这是特别有用验证数据驱动的企业流程。

  • 业务逻辑 获得正确的细节。 模拟的端到端流程的业务规则和条件来验证原型的具体要求。

团队合作和版本控制 [ Teamwork and Version Control ]

  • 团队的原型 整个团队可以同时编辑和修改相同的线框图。

  • 版本控制 历史版本可在任何时间对每一个线框图设计。 所有项目的细节,并为每个版本变更注册。

  • 团队共享部件 共享和集中管理您的小部件库,所以整个团队会自动同步到最新版本。

  • 线上和线下团队合作 与Justinmind您可以打开共享原型离线工作。 原型副本存储在本地工作可以在任何时候被打开。 连接可用时你将能够提交修改和同步你的原型可用更新。

功能性场景[ Scenarios]

  • 流程图 设计你的线框图之前或之后轻松快速地创建流成图,具有可视化创建流程图经验。 图中所有屏幕拉伸和收缩根据其内容,所以没有细节丢失。

  • 流程验证 完成你的图和验证屏幕流自动当你拖拽到画布上。 利用和完成它,以早期发现设计问题。

需求管理[Requirements Management]

  • 版本控制 要求每个原型设计都有自己的需求,为了跟踪注册版本历史,从开始到结束的所有的需求修改。

  • 第三方工具的集成 Justinmind允许集成的需求或需求管理工具你已经在使用的其他第三方工具。

  • 需求分类 所有的需求都可以很容易地组织与标签和颜色定制类固体和高效管理。

  • CMMI标准 Justinmind有关领域的需求管理工具符合CMMI需求和版本控制。

API and SDK

  • API Justinmind API你可以集成与第三方工具原型或生成自己的UI代码。

  • SDK 下载Justinmind SDK代码轻松地集成和创建自己的插件。

  • 教程和例子 使用Justinmind的教程一步一步来快速学习如何编写代码集成。 看看我们的插件的例子,包括生成jQuery移动HTML5,出口评论JIRA等等。

在线共享预览:

在线用户中心的项目管理页面

界面截图:

Justinmind 制作WEB网页原型

动态图展示:

Justinmind 制作APP软件原型

其他的一些知识要点

Justinmind 是一个矢量绘图工具

Justinmind 支持预设模板根据不同尺寸的设备进行快速开始原型设计

Justinmind 可以快速发布到云端跨平台进行预览演示:IOS/MAC/WIN/Android/WEB/HTML方式。

下面一章节我们开始准备一些必要到软件安装工作以正常开展接下来到设计工作。

想了解更多的相关知识可以加我们的qq群:交互设计IxD学堂 156360020,加群密钥:iamue

相关推荐

JavaScript中常用数据类型,你知道几个?

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...

踩坑:前端的z-index 之bug一二(zh1es前端)

IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个:1.父标签position属性为relative;2.问题标签无posi...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:HTM...

前端代码需要这样优化才是一个标准的网站

  网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。  就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模...

网页设计如何自学(初学网页设计)

1在Dreamweaver中搭建不同的页面,需要掌握HTML的语句了,通过调整各项数值就可以制作出排版漂亮的页面,跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学,希望可以帮助到各位。Dre...

1、数值类型(数值类型有)

1.1数据类型概览MySQL的数据类型可划分为三大类别:数值类型:旨在存储数字(涵盖整型、浮点型、DECIMAL等)。字符串类型:主要用于存储文本(诸如CHAR、VARCHAR之类)。日期/...

网页设计的布局属性(网页设计的布局属性是什么)

布局属性是网站设计中必不可少的一个重要的环节,主要用来设置网页的元素的布局,主要有以下属性。1、float:该属性设置元素的浮动方式,可以取none,left和right等3个值,分别表示不浮动,浮在...

Grid网格布局一种更灵活、更强大的二维布局模型!

当涉及到网页布局时,display:flex;和display:grid;是两个常用的CSS属性,它们都允许创建不同类型的布局,但有着不同的用法和适用场景。使用flex布局的痛点当我们使...

React 项目实践——创建一个聊天机器人

作者:FredrikStrandOseberg转发链接:https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...

有趣的 CSS 数学函数(css公式)

前言之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然...

web开发之-前端css(5)(css前端设计)

显示控制一个元素的显示方式,我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...

2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)

获课:keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一,它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局,前端布局技术经历了...

教你轻松制作自动换行的CSS布局,轻松应对不同设备!

在网页设计中,自动换行的CSS布局是非常常见的需求,特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸,保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...

晨光微语!一道 CSS 面试题,伴你静享知识治愈时光

当第一缕阳光温柔地爬上窗台,窗外的鸟鸣声清脆悦耳,空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光,泡一杯热气腾腾的咖啡,找一个舒适的角落坐下。前端的小伙伴们,先把工作的疲惫和面试的焦虑放在一边,...

2023 年的响应式设计指南(什么是响应式设计优缺点)

大家好,我是Echa。如今,当大家考虑构建流畅的布局时,没有再写固定宽度和高度数值了。相反,小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议,小编仍然看到网站遵循自适应设计模式,其中它有...