AxureRP8实战手册-案例1(文本框:带图标文字提示)

AxureRP8.0教程 小楼一夜听春语 31222℃ 0评论

实战案例篇

本篇包含110种实战案例,案例内容均来自互联网知名网站或应用。案例中所包含的基础操作不做详细介绍,如有疑问请参考基础操作篇。

本篇内容由浅至深。前四章围绕基础知识点结合案例进行讲解;最后两章,挑选了Web端与APP端相对典型的案例,对知识点进行综合的应用,并着重加强实现思路的分析。

本篇内容建议初学者按顺序学习,理解实现的过程、思路与技巧,并以能够独立完成案例为学习目标。

 

第1章      元件案例

本章主要讲解主要元件的使用方法及应用场景。

在本章的案例中,大家能够看到,常见的一些网页都能够通过各种基本形状的组合模拟出来。

案例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 RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例1(文本框:带图标文字提示)

喜欢 (58)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(20)个小伙伴在吐槽
  1. Get! 😳
    小情兽丶2016-07-13 13:47 回复
  2. Get!
    小萝卜酱2016-07-18 15:24 回复
  3. Get!
    ReeJX2016-07-22 10:54 回复
  4. 老师 出视频教程吧,这个看着头疼
    shift2016-07-22 16:16 回复
  5. 为什么我双击图标并没有出现文字呀。。。
    怪怪丁2016-08-01 13:59 回复
    • 直接复制就好了
      鹿鹿2016-09-03 15:24 回复
      • 双击图标出现很多点 curve sharpen 和 delete
        Molly2016-09-07 11:08 回复
  6. 为什么提示样式里面找不到安装的 FontAwesome 字体呢
    Amy2016-09-06 17:50 回复
    • 你安装了FontAwesome 字体没?
      穆泪2016-09-06 23:36 回复
  7. 研究了一个小时,真的没懂3 4 5这三个步骤的意思,元件库已经添加完了,没找到“图标”啊。求老师赐教。
    xx2016-09-09 11:48 回复
    • 本人也是
      文心雕龙2016-09-13 10:44 回复
      • 怎么下载demo
        凡尘2016-09-26 11:08 回复
        • 小楼一夜听春语
          在线阅读-右上角
          小楼一夜听春语2016-09-26 11:32 回复
  8. 老师,你用的是矩形还是文本框啊,还有个小图标是照相机么
    牙牙2016-12-01 16:00 回复
  9. 买了这本书,这个第一个案例就弄了半天看不懂
    lin2016-12-01 17:10 回复
    • 小楼一夜听春语
      在线阅读-标题后面 视频
      小楼一夜听春语2016-12-01 18:34 回复
  10. 小楼老师,这本书的配套资料中没有FontAwesome4.4.0图标字体元件库啊!!!
    西街城外2016-12-11 15:41 回复
    • 小楼一夜听春语
      1.导航-原创元件库;2.图书280页扫描右侧二维码,加群,群文件下载。
      小楼一夜听春语2016-12-11 23:43 回复
  11. 为什么文本框输入文字之后提示语还没有消失呢?
    bwcq2017-01-12 20:38 回复
  12. GET到
    抠脚韩信2017-05-27 10:26 回复