• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      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版本,使用方法相同。

      給TA買糖
      共{{data.count}}人
      人已贊賞
      案例教程

      創意實例:不偷看密碼的登錄頁面

      2016-4-8 1:38:30

      案例教程

      Axure實戰案例2:文本輸入框交互 百度登錄界面

      2016-7-30 15:24:46

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">