分类

编程工具

Indigo Studio

Indigo Studio 5.02 免费版

大小:50.0 MB

语言:简体中文系统:WinXP, Win7, Win8, Win10, WinAll

类别:编程工具时间:2020-04-14

  Indigo Studio是一款功能强大的UI原型和交互设计工具,由久负盛名的网页设计公司infragistics 开发的,具有较高的兼容性和易用性,不仅如此,Indigo Studio采用了人性化设计,每一步都保持以用户体验为中心,还内置超过100个不同的场景、线框,可以帮助用户快速而简单地创建活生生的UI原型,小编今天为大家带来的这款Indigo Studio是最新版本,还支持运行HTML5的设备,需要的赶快下载体验一番吧。

Indigo Studio

软件特色

  Indigo Studio的最新功能使移动设备原型设计变得前所未有的简单,它还全面支持运行HTML5的设备,包括iOS,用户可充分利用支持的触摸手势、PDF文件制作,设计真实内容的故事版、快速的原型交互式应用程序、以及功能齐全的、生动的UI原型。

功能特点

  1.100多个真实场景

  Indigo Studio可以帮助你从一开始就专注于你的用户。通过从100多种包含人物、地点和各种设备的综合故事版中进行选择,你可以轻松地将设计直接转化到现实生活场景中。

  2.线框交互式用户界面

  大量内置的交互式控件、文本、图像、形状和图表组成了高效,简洁的线框界面。Clutter-Free界面让你更专注于自己的设计,因而你可以随时找到你所需要的。

  3.移动触摸体验设计

  使用Viewport可以轻松地选择不同目标设备的设计方案,并且通过触摸手势支持和内置的屏幕转换功能,实现在任何支持HTML的设备上运行以及与自己的原型交互。你甚至可以使用IOS平台包为iPad和iPhone用户设计专属本地体验。

  4.随时随地快速添加,流畅交互

  Indigo Studio的优势在于它的交互功能。无论是设计网络、桌面还是移动应用,你都能给屏幕快速添加自定义的交互功能,在少复制和粘贴的情况下实现仿真应用程序体验。

  5.逼真的视图转换

  交互作用可以很容易地转化为平滑的、逼真的视图转换—可以在简化的时间表上对它们进行查看和调整,根据自己的需要把它们变得简单或者复杂。

  6.随时随地分享

  无论你是想进行团队快速审查,与用户一起评估原型,还是与项目小组分享,Indigo Studio都让这一切变得轻而易举。只需要点击几下,你就可以分享一个连续的、交互式的,可运行在任何支持HTML5设备上的原型。你也可以将选中的屏幕导出为用于文档的PDF或PNG文件,然后退出。

验证机制

  State

  使用State功能展示比较小的验证或屏幕从一个状态切换另一种状态。使用State可以很方便的保存各种状态,同时也增加了重用性。

  Demo

  简便起见,这里选择了一个比较简单的流程,你只需要输入你的名字然后按下Login按钮就可以了。如果名字字段为空,文本框上方就会出现红色的提示文字。如果你输入了文本,标签又会消失。你可以用Backspace模拟这个过程。

  演示中有两个屏幕: (a) Login Page 和(b) Main Page,在原型中也只使用"States"来表示两个屏幕:

Indigo Studio

  下面是Indigo Studio中呈现的关于State转换的流程:

Indigo Studio

  问题:state 1.1.1 / 1.2中的按钮为何会重定向到下一个页面,而其他state的按钮却不会?

  答:因为在这两个State下面,有一个同样尺寸的登陆按钮被放置在原始登陆按钮相同的位置,这个新按钮是指向下一个页面的。也就是说原来的登陆按钮隐藏在新按钮的下方。

  同样,当文本字段被清空时,新按钮就会被移除,而在下面的原始按钮又会到上面。

  注意:原始按钮不指向任何页面,它是在被点击后显示红色提示文字的。

  总结

  接下来是很重要的一步,就是通过消除冗余来优化State。如果一个state与另一个state是类似的,那最好是进行引用而不是进行复制。

  由于state是按照顺序进行的,所以应该引用转换开始时的那个state。

  比如有两个state由绿色的方框进行强调,但只有底部的绿色方框可以指向顶部的绿色方框。底部的绿色state不是最开始的item,顶部那个才是,所以应该引用顶部的state。而灰色方框的state则刚好相反,顶部那个应该引用底部那个state。

Indigo Studio

  棕色方框的State细化:

Indigo Studio

  绿色方框的State细化:

Indigo Studio

  下面就是由初始状态图再用Indigo Studio做出来的屏幕草图:

Indigo Studio

  内部含有环境包,先安装环境包,再安装程序!!!

∨ 展开

网友评论

我要跟帖
取消
所有评论 共 0