AXure之向导型表单设计

   一、登陆注册进度条

 (1)在画布中拖入一个动态面板,双击它,设置动态面板名称为登陆指导,面板状态将state1改为注册进度(如图1),然后双击该面板,点击“注册进度”,进入到该面板的具体操作界面;

图1

(2)从左侧元件库中拖一个椭圆到面板,在右方的样式处设置其高度、宽度都为20,并设置填充色为红色,输入数字1(如图2),并命名为椭圆1(编号方便后续操作),再拖入一个文本标签,双击它重输入为设置登陆名(如图3);

图2


图3

(3)选中椭圆和文本标签,按下ctrl+D,可快速复制,复制出三个,分别是填写账号信息,设置支付方式,注册成功,将后三个文本框文字设为灰色,序号填充色也为灰色(如图4)

图4

(4)添加一条长水平线,四条短水平线。四条短水平线填充为红色,除第一条外,其他的先设为隐藏(如图5)。并分别对四个椭圆ctrl + D,除序号1的复制对象填充为灰色外,其他三个均填充为红色,置于对应序号的同一位置,设其为隐藏状态(如图6),为便于识别可将椭圆按其序号进行重命名,并带上颜色标志,例如椭圆1_grey,椭圆1_red.

图5



图6

二、登陆主面板

(1)在向导表单画布中,再次拖入一个动态面板,置于登陆指导动态画板的正下方,命名为表单内容(如图7)。

图7

(2)、在表单内容动态面板内双击鼠标,弹出一个对话框,添加该动态面板的四个状态,分别为设置登录名,填写账户信息,设置支付方式,注册成功(如图8)。

图8

(3)双击“表单内容”动态面板,点击“设置登录名”,来到“设置登陆名”状态的面板,往里面添加文本标签,下拉列表框,矩形框,按钮button,布局如图9所示。下拉列表框操作很简单,不详说,我重点叙述一下手机号码矩形框如何实现文字提示及输入手机号时提示消失功能,以及进度条滑动功能。

图9

首先选中手机号码输入框矩形,在右边的属性中选择类型为phone number,提示文字输入“手机号码”,隐藏提示触发选择为获取焦点,长度设为11.

图10

     然后上拉菜单,来到“交互”,双击“获取焦点时”,选择“设置选中”,选中刚刚对应的手机号码输入矩形框;再回到交互的“失去焦点时”,选择“取消选中”,选中刚刚对应的手机号码输入矩形框。就可实现往矩形框中输入数字时,提示文字消失,矩形框高亮显示的功能。

图11


图12

(4)进度条滑动

    将用于滑动的进度条矩形框设置为动态面板,宽度为330,高度为30,命名为滑动块,点击state1状态,进入新界面,在新界面中添加一个宽度为300,高度为30的滑动条,填充为蓝色,再拖入一个宽30,高30的矩形框,输入“>>”符号,将其与滑动条组合在一起,设为动态面板,命名为“滑动进度条”,拖到最左边,只露出有“>>”符号的矩形框,如图13所示,

图13

选中滑动进度条,在交互界面,选择“拖动时”,双击,选择移动,水平拖动,添加界限,如下所示

图14

(5)设置“下一步”按钮的触发事件

点击下一步时达到,椭圆1成灰色,设置登陆名为灰色,椭圆2填充为红色,填写账户信息为黑色,椭圆2下面的红色水平线显示,椭圆1下面的红色水平线隐藏,表单为填写账户信息的内容。

图15

最终效果展示:http://6gl1az.axshare.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,368评论 25 707
  • (一) 骄傲第一次认识刺是在一次聚会上,那时骄傲在自然地和坐在对面的A聊天,他在自己抬头瞬间下意识地向刺撇了一眼。...
    星际spike阅读 575评论 1 2
  • 这是我在简书上的第2篇记录。无论是否能通过审核,我都无所谓……随便写写,记录下此时此刻的真实心情。 老爸越来越阴郁...
    老喵86阅读 142评论 0 0
  • 居中布局 垂直布局写出两个盒子并满足以下条件条件:1.里面的高度盒子不固定2.外面盒子的高度不固定 第一种方式ta...
    奶瓶SAMA阅读 182评论 0 0
  • 这两天看《我的前半生》,凑巧有朋友来咨询感情问题,勾起了我不好的回忆,有点话想要说。 我认为的恋爱关系,是基于互相...
    然不是那个苒阅读 188评论 0 0