Axure 教程 | 微博分享

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍主要内容

在微博发布中，输入文本时会有提示可输入文本字数的变化，当文本字数超过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：

拖入图片部件，分别导入表情标、图片标、@、同步标，拖入文本标签分别对应编辑文字：表情、图片、朋友、同步。根据图标和文字分别对应命名：表情标、表情、图片标、图片、@、朋友、同步、同步标。

<