Axure RP交互实例:Axure RP文本输入框交互怎么设计?

文章来源:人生哲学 发布时间:2022-01-14 浏览量:2

我们在使用电脑或者手机的时候,很多时候都遇到过交互时间,可是90%的人不知道。因此,今天我们就来教一教大家在Axure RP网页文本输入框的交互设计怎么制作,感兴趣的小伙伴就可以跟着步骤操作起来~

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

Axure RP网页文本输入框交互设计:


1.选中左侧文本框元件,鼠标拖拽至右侧画布中,设置宽302,高42,线框颜色为#D5D2D2(颜色数值仅供参考,只要调成灰色即可)

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

2.选中文本框——点击【提示】——点击【提示属性】——点击【文本】选择下拉框中的【邮箱】——【提示文本】输入“手机/邮箱/用户名”,——点击【获取焦点】选择下拉框中的【输入】,点击任意空白处完成设置,我们看到文本框中“手机/邮箱/用户名”为灰色字体,鼠标选中文本框之后,该文本消失。

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

3.点击最下方【常见交互】中的“获取焦点交互样式”——点击【+更多样式选项】——勾选【线段颜色】——点击旁边的灰色色块,输入颜色数值#83B5F0(颜色数值进攻参考,只要调成蓝色即可)——点击【确定】

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

4.选中文本框——按住ctrl键,鼠标往下拖动,复制一个同样的文本框,调整两个文本框之间的距离

Axure RP交互实例:Axure RP文本输入框交互怎么设计?


5.选中复制的文本框——点击【提示】——点击【提示属性】--点击【文本】选择下拉框中的【密码】--【提示文本】将“手机/邮箱/用户名”改为“密码”,点击任意空白处完成设置,我们看到文本框中“密码”为灰色字体,鼠标选中文本框之后,该文本消失。

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

6.最后一步,密码后面的绿色键盘标志的设置

Axure RP交互实例:Axure RP文本输入框交互怎么设计?


7.左侧自带元件库中搜索“键盘”——鼠标选中该元件,拖拽至第二个文本框中,调整位置和大小——将该原件填充为绿色,颜色数值#7FDF44(颜色数值仅供参考,调成绿色即可)

Axure RP交互实例:Axure RP文本输入框交互怎么设计?

8.选中“键盘”元件,点击右上方“眼睛”的标志,设置为隐藏,这样我们就看不见它了!

Axure RP交互实例:Axure RP文本输入框交互怎么设计?


9.选中第二个文本框——点击【新建交互】——选择【获取焦点时】——选择【显示/隐藏】——目标选择【形状】也就是键盘元件——点击【确定】

Axure RP交互实例:Axure RP文本输入框交互怎么设计?


10.再次选中第二个文本框——点击【新建交互】——选择【失去焦点时】——选择【显示/隐藏】——目标选择【形状】也就是键盘元件——点击“隐藏”——点击【确定】。到这里算是已经完成了全部操作,按F5预览效果即可。

Axure RP交互实例:Axure RP文本输入框交互怎么设计?


这就是为大家分享到的Axure RP网页文本输入框交互设计方法步骤了,其实交互设计在Axure RP原型制作里面很重要,大家一定要学会。最后,想要学习更多的Axure RP技巧,就上羽兔网点击链接:https://www.yutu.cn/search/course.html?t=9&k=Axure开启学习~