• <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教程之巧用動態面板制作Tab切換

      每天進步一點,離大神的目標又近了一些。

      小教程小經驗,只是為了提高你的技能水平,把學到的經驗靈活的運用到你的交互設計上,才是邁入大神圈子的第一步。

      動態面板是一個非常有用組件,不但具有多頁面屬性,還具有絕對定位,溢出滾動等多種超強屬性,所以動態面板的運用是必須要掌握的Axure技能。

       

      巧用動態面板制作Tab切換

      此案例里的一些重點如下:

      1、 原件多種交互樣式的運用

      2、 原件選項組的運用

      3、 動態面板多狀態的運用

       

      先看下演示

      Ok,開始創作吧

       

      一、畫Tab標簽

      1、 拖入一個矩形

      去掉3個邊,只留下下單邊,如果你用的我的《快速原型組件庫》,可以直接拖入“下單邊矩形”,設置一下尺寸為100×40(尺寸這種東西,可以按自己需求來,下同),起個名字Tab1(給原件起名字這個習慣一定要養成,方便自己,也方便別人)

       

      2、 交互樣式設置

      設置了鼠標懸停樣式及選定樣式,此處可根據你的需求自行調整樣式

       

      3、設置選項組名稱

      選項組的功能,一般用在表單的單選框上,相同的選項組,可以聯動單選,此處,我們可以將普通元件編組,同樣讓其具有單選框的效果

       

      4、添加基本交互動作

      【動作】

      “鼠標點擊時”

      設置“選中狀態”,當前元件(This),設置選中狀態為“值”、true

       

      5、復制多個Tab標簽

      復制多個Tab標簽,一字排開,分別改下名稱,便于識別,Tab1、Tab2、Tab3;把Tab1的選中勾上 ,Tab2和Tab3的選中都去掉。

      做完這一步,就可以看到初步的效果了

       

      二、畫Tab頁面

      1、 拖入一個矩形

      設置一下尺寸300×191(根據你的需求來可以),簡單調下演示,輸入文字,便于效果區別

       

      2、 將矩形轉換為動態面板

      給動態面板起個名字,便于識別Tab-box

       

      3、 復制動態面板狀態

      通過復制狀態,一共三個狀態State1 – State3

      4、 編輯狀態內容

      簡單編輯下各狀態內容,演示的時候,效果更好

      ?

      三、設置動作

      1、 添加點擊切換聯動

      分別給剛剛畫的三個tab切換按鈕,添加動態面板聯動動作。

      【動作1】

      設置面板狀態“Tab-box”選擇狀態“State1”(Tab1對應State1,、Tab2對應State2、Tab3對應State3),進入和退出動畫Tab1為“向右滑動”時間“500”毫秒,Tab2和Tab3為“向左滑動”時間“500”毫秒

       

      右單擊動作“復制”,或選中“Ctrl+c”復制動作

       

      右單擊用例組粘貼,或選中直接“Ctrl+v”粘貼動作

       

      不同的tab對應不同的動態面板狀態,另外注意進入和退出動畫的方向

       

      【動作2】

      效果是有了,但從Tab3切換到Tab2的運動邏輯似乎不大合理,接下來我們添加判斷條件讓動畫看起來更符合邏輯

      復制Tab2按鈕的動作用例組,并給上面一組添加條件

      復制用例組

       

      粘貼用例組

       

      設置用例組條件,當面板當前狀態為State3時

       

      動畫向右

       

       

      都添加完以后,最終的效果完美了!

      原型演示地址:https://xb067e.axshare.com/

      原型下載地址:?https://www.axureshop.com/wp-content/uploads/2018/12/20144332.rp

       

      文中提到的我的《快速原型組件庫》,力求打造一套官方原型庫的最佳替代方案,感興趣的可以去看一下

      https://www.axureshop.com/a/590.html

      或者加入我的群,咨詢交流

      UIUE干貨分享群:117184

       

       

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

      Axure教程之制作一個滑動驗證組件

      2018-12-18 15:19:06

      Axure教程

      Axure RP 9 教程—中繼器實現模塊排序

      2018-12-22 0:42:55

      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">