热门版块
话题:285关注:0
话题:180关注:0
话题:166关注:0
话题:132关注:0
话题:124关注:0
话题:120关注:0
原创|使用教程|编辑:我只采一朵|2013-12-04 10:05:55.000|阅读 785 次
概述:本文讲解了如何使用原型设计工具Indigo Studio的验证功能,并附相关示例下载。
有不少开发人员提到,有时候想在原型中加入验证机制,但苦于一直都没有找到合适的工具。因为大多数原型工具只有原型设计的功能,并没有验证的功能。现在很多开发工具都支持验证功能了,比如Microsoft .NET提供了Required Field validator, Range validator等控件。不过不用担心,这里小编就为大家推荐一款支持验证功能的原型设计工具——Indigo Studio。
Indigo Studio是著名界面控件提供商 infragistics 的产品,它是一款快速UI原型和交互设计工具,能帮助创建功能性的、生动的UI原型,而且每一步都保证以用户体验为中心。用户可以创建超过100种不同场景的、内置交互控件的框架和专用于桌面、网站和移动应用的原型,所有这一切都无需代码支持。
使用State功能展示比较小的验证或屏幕从一个状态切换另一种状态。使用State可以很方便的保存各种状态,同时也增加了重用性。>>详细的教程可以参考这里
简便起见,这里选择了一个比较简单的流程,你只需要输入你的名字然后按下Login按钮就可以了。如果名字字段为空,文本框上方就会出现红色的提示文字。如果你输入了文本,标签又会消失。你可以用Backspace模拟这个过程。>>点击查看在线Demo
演示中有两个屏幕: (a) Login Page 和(b) Main Page,在原型中也只使用"States"来表示两个屏幕:
下面是Indigo Studio中呈现的关于State转换的流程:
问题:state 1.1.1 / 1.2中的按钮为何会重定向到下一个页面,而其他state的按钮却不会?
答:因为在这两个State下面,有一个同样尺寸的登陆按钮被放置在原始登陆按钮相同的位置,这个新按钮是指向下一个页面的。也就是说原来的登陆按钮隐藏在新按钮的下方。
同样,当文本字段被清空时,新按钮就会被移除,而在下面的原始按钮又会到上面。
注意:原始按钮不指向任何页面,它是在被点击后显示红色提示文字的。
接下来是很重要的一步,就是通过消除冗余来优化State。如果一个state与另一个state是类似的,那最好是进行引用而不是进行复制。
由于state是按照顺序进行的,所以应该引用转换开始时的那个state。
比如有两个state由绿色的方框进行强调,但只有底部的绿色方框可以指向顶部的绿色方框。底部的绿色state不是最开始的item,顶部那个才是,所以应该引用顶部的state。而灰色方框的state则刚好相反,顶部那个应该引用底部那个state。
棕色方框的State细化:
绿色方框的State细化:
下面就是由初始状态图再用Indigo Studio做出来的屏幕草图:
如果你对Indigo Studio验证感兴趣,那就点击下载示例作进一步研究吧!
好文不易,鼓励一下吧!
本教程转自屈景辉的Teechart应用技术详解——快速图表制作工具一书。本文将会介绍第五章——TeeChart的实时监控与地图显示,其中的TeeChart实时监控原理和使用TeeChart的轴管理工具。
PyCharm支持使用Conda为Python创建虚拟环境。以下过程适用于所有受支持的操作系统。使用此页面顶部的平台切换器可查看特定于您的操作系统的快捷方式。
Intel® Parallel Studio XE是一个软件开发工具套件。本文将会介绍如何访问 Intel® Parallel Studio XE 2019 Cluster Edition for Windows套件中的库和工具。
微信扫码登录
福利更多、资源更多
官方微信
官方微博
慧都科技有限公司 版权所有 Copyright 2003-2019 渝ICP备12000582号 渝公网安备 50010702500608号