• <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商城

      界面右側懸浮可伸縮動態按鈕

      1.相關介紹

      本文由來源https://www.axureshop.com/shop/3039,由臥枕江山整理編輯,其版權均為 本人所有,如需轉載,請注明文章來源,做法如下,如有雷同,純屬巧合。

      與此相關的完整版高保真實戰項目(UE/UI)原型設計地址:https://www.axureshop.com/a/234122.html

      1.1頁面布局

      1.1.1頁面設定

      新建一個頁面,命名為【界面右側懸浮可伸縮動態按鈕】,在這個頁面下面新建一個叫做【界面1】的子頁面,再在【界面1】下面新建兩個2子頁面,分別命名為【界面1-1】和【界面1-2】。

      1.1.1.1【界面右側懸浮可伸縮動態按鈕】

      在頁面內新建一個【動態面板】。

      【動態面板】的【State1】內分別從左側元件庫內拉入兩個【矩形】做一級背景(大小尺寸為1704*940)和二級背景(大小尺寸為1704*821,上下邊框為實體線框,較粗樣式,顏色為#06C1FA)。

      并從左側元件庫內拉入一個內聯框架,將其嵌入到二級背景之內,隱藏其邊框,框架滾動條設為從不顯示,大小尺寸為1704*815,不覆蓋二級背景的樣式,且內聯框架目標頁面為【界面1】。

      1.1.1.2【界面1】

      頁面內從左側元件庫拉入一個【矩形】元件,作為背景,大小尺寸為1643*760,邊框為實體線,色值為#f2f2f2。

      從左側元件庫拉入一個【內聯框架】元件,將其嵌入到背景之內,隱藏其邊框,框架滾動條設為從不顯示,大小尺寸為1639*754,不覆蓋背景的樣式,且內聯框架目標頁面為【界面1-1】。

      新建兩個【動態面板】,分別命名為【界面1-1】和【界面1-2】,在兩個動態面板內分別新建兩個相同命名的文件組合,然后分別從左側元件庫內拉入一個【矩形】做背景,一個【文件標簽】,一個【橢圓形】,以及在【橢圓形】內嵌入圖標,設定成按鈕的樣式。

      1.1.1.3【界面1-1】&【界面1-2】

      從左側元件庫拉入一個【一級標題】元件,內容改為界面1-1,

      從左側元件庫拉入一個【一級標題】元件,內容改為界面1-2,

      1.2動態交互

      1.2.1效果設計

      1.2.1.1實現右側懸浮按鈕的懸停、按下、選中的動態效果

      選中【背景】,進行其【交互樣式設置】,將鼠標懸停交互樣式填充顏色設置為#ff0000、透明度為80%,鼠標按下交互樣式填充顏色設置為#ff0000、線段顏色為#ff9900、選中交互樣式填充顏色設置為#ff0000、線段顏色為#ff9900。

      1.2.1.2實現右側懸浮按鈕的伸縮動態效果

      選中界面1-1或者界面1-2【動態面板】內的文件組合,點擊添加交互中的【鼠標移入時】&【鼠標移出時】用例,匹配值相關動作。

      步驟一:設置右側懸浮按鈕交互【鼠標移入時】用例

      在case1【組織動作】中添加【移動】動作,在【配置動作】內夠遠界面1-1【文件組合】,【移動】狀態選擇【到達】,x=0、y=y,【動畫】效果選擇【彈性】時間t=1000毫秒。

      步驟二:設置右側懸浮按鈕交互【鼠標移出時】用例

      在case1【組織動作】中添加【移動】動作,在【配置動作】內勾選界面1-1【文件組合】,【移動】狀態選擇【到達】,x=70、y=y,【動畫】效果選擇【彈性】時間t=1200毫秒。

      1.2.2交互流程

      1.2.2.1實現右側懸浮按鈕與內聯框架的交互操作效果

      選中【文字】元件,點擊【添加用例】中的【鼠標單擊時】用例,配置相關的動作。

      步驟一:設置右側懸浮按鈕觸發之后狀態的改變設置

      在case1【組織動作】中添加【選中】動作,在【配置動作】內勾選界面1-1和界面1-2【文件組合】內的【橢圓形】和【背景】元件,界面1-1內的【橢圓形】和【背景】勾選之后,設置選中狀態的值=true,界面1-2內的【橢圓形】和【背景】勾選之后,設置選中狀態的值=false。

      步驟二:設置右側懸浮按鈕觸發之后內聯框架的交互設置

      在case1【組織動作】中添加【選中】動作,在【配置動作】內勾選【內聯框架】,在【打開位置】勾選【鏈接到當前項目的某個頁面】,并選擇【界面1-1】頁面,配置【內聯框架】鏈接界面1-2與以上同理。

      1.3預覽效果


      ?1.4結語

      結語:請路過的朋友們多多支持哈,臥枕江山在這里先謝謝了,以后會有更多優質的文章和產品在這個平臺上進行發布,請盡請期待呦!

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

      Axure教程(中級):網易云音樂聽歌識曲效果模仿

      2019-3-17 11:32:02

      Axure教程

      Axure教程(中級):側導航收縮及展開

      2019-3-19 20:17:14

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