主要内容
在微博发布中,输入文本时会有提示可输入文本字数的变化,当文本字数超过140时,提示转成长微博,点击转成长微博按钮原微博的内容会同步到长微博文本框内,本课我们介绍使用axure里面的变量和函数实现这个效果。
交互说明
1.鼠标在输入框(短微博)中为输入状态时,输入框变高,输入框背景显示蓝色阴影;未在输入状态时,输入框(短微博)恢复默认高度,无蓝色阴影
2.输入框(短微博)输入文本时,计算剩余可输入文本数量并信息提示;输入文本数量超过140时,提示文字改变,显示“进入长微博”按钮。
3.点击“进入长微博”按钮,打开新增长微博面板,输入框(长微博)显示文本与输入框(短微博)内容相同。
4.新增长微博面板中,点击面板背景缩略图,更换面板背景图。默认以首张缩略图为背景。
一、原型制作
步骤1:
拖入单行文本标签,制作微博示,编辑文字“来,说说你在做什么,想什么”
拖入多行文本框,制作输入框,设置位置与大小,x:39 y:43 , w:538 h:76,命名:输入文本1
步骤2:
拖入矩形,选择右演说气泡图形,调整旋转,再加入一个矩形把两个图形组合成一个新的图形,设置位置与大小与输入框一样,放在输入框上面,并分别命名为:外框1、外框2。
复制这两个矩形,调整位置与大小分别为:x:36 y:40 w:490 h:106,x:508 y:54 w:106 h:79,分别命名为:外框1-焦点、外框2-焦点,设置它选中时的交互样式,并设为隐藏
步骤3:
拖入文本标签,设置位置与大小,编辑文字:还能输入140字,命名:字数统计,并设为隐藏,再拖入文本标签,编辑文字:转成长微博,命名:转长微博,并设为隐藏
步骤4:
拖入图片部件,分别导入表情标、图片标、@、同步标,拖入文本标签分别对应编辑文字:表情、图片、朋友、同步。根据图标和文字分别对应命名:表情标、表情、图片标、图片、@、朋友、同步、同步标。
<