Axure官方正版
快速原型设计工具

Axure实战案例1:带提示文字的输入框 淘宝搜索框

即日起本站开始转载小楼老师的axure 8.0实战案例系列教程。出自小楼老师新书《AxureRP8实战手册》。本系列内容建议初学者按顺序学习,理解实现的过程、思路与技巧,并以能够独立完成案例为学习目标。

带提示文本的输入框是非常常见的一种交互效果,输入文字后,提示文字消失。本教程还加上了图标字体。建议大家一起跟着做一下练习,以便熟练掌握。

案例1.   文本框:带图标文字提示

案例来源:淘宝首页-搜索框

案例效果:点击查看在线案例效果>>

  • 输入文字前:(图1-1)

1_1

  • 输入文字后:(图1-2)

1_2

元件准备:

  • 页面中(图1-3)

1_3

案例描述:

在搜索框里面,文本框中的文字提示包含图标。

思路分析:

文本框可以添加文字提示,而图标字体中的图标也是文字。那么案例中的搜索图标,我们就可以使用图标字体来实现。

操作步骤:

1、双击安装FontAwesome字体文件,载入FontAwesome4.4.0图标字体元件库;

2、切换到FontAwesome4.4.0图标字体元件库;

3、从元件库中找到图标,拖放到画布;

4、双击图标,复制里面的图标文字;

5、将复制的内容粘贴到文本框属性的{提示文字}中,并输入其它文字;(图1-4)

1_4

6、点击【提示样式】,在样式设置界面中设置提示文字字体为“FontAwesome”,字体颜色为灰色。(图1-5)

1_5

7、参考“基础56”,在web字体设置中添加FontAwesome字体的设置方案。

补充说明:

  • 本案例需要结合特殊字体元件:FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。
  • 使用FontAwesome4.4.0图标字体元件库,除了要参考“基础30”载入元件库,还要安装相应的字体文件。安装字体文件时,请先关闭Axure,安装完字体文件后,打开Axure方可正常使用。

备注:本站中FontAwesome图标字体元件库已升级为4.5.0版本,使用方法相同。

转载请注明出处:Axure中文网 » Axure实战案例1:带提示文字的输入框 淘宝搜索框

评论 8

评论前必须登录!

 

  1. #6

    你好,请问当文本框与矩形重合的时候,文本框的边框会把矩形的边框遮盖住,但是文本框的上下边框不一样粗,所以怎样调整才能使预览的时候整个输入边框是一样粗的呢?

    YST3周前 (04-06)
  2. #5

    你好,请问当文本框与巨星重合的时候,文本框的边框会把矩形的边框遮盖住,但是文本框的上下边框不一样粗,所以怎样调整才能使预览的时候整个输入边框是一样粗的呢?

    YST3周前 (04-06)
  3. #4

    可以了

    jie20004个月前 (12-22)
  4. #3

    打错了·,不应该是文字出现么,

    jie20004个月前 (12-22)
  5. #2

    输入的时候把提示文字显示出来了,不应该是光标在图标后面,提示文字小时?

    jie20004个月前 (12-22)
  6. #1

    书在哪里可以买到?

    suqing_02139个月前 (08-02)

购买Axure RP正版授权 终身可用

购买专业版购买团队版