貓仔試玩

Axure:模擬微信文章浮窗效果

本文主要是模擬微信文章的浮窗效果,并分為三個步驟來制作,一起來看看~背景介紹:微信最近出了一個新的功能:文章浮窗。打開閱讀的文章,選擇了浮窗效果,就會懸浮在頁面上,單擊懸浮按鈕,會再次打開文章,免去了文章和聊天頁面之間來回切換的痛苦。


本文主要是模擬微信文章的浮窗效果,并分為三個步驟來制作,一起來看看~

Axure:模擬微信文章浮窗效果

背景介紹:微信最近出了一個新的功能:文章浮窗。打開閱讀的文章,選擇了浮窗效果,就會懸浮在頁面上,單擊懸浮按鈕,會再次打開文章,免去了文章和聊天頁面之間來回切換的痛苦。

本次目標:模擬微信文章的浮窗效果。

  • 實現 1:點擊x符號,文章縮為懸浮按鈕;
  • 實現 2:點擊懸浮按鈕,文章重新打開;
  • 實現 3:整體效果流暢,相似度90%以上。

適合人群:具有一定Axure基礎的產品/交互人員。

學習時間:

  • 新手:10~15min
  • 一般:8~10min
  • 高手:5~8min
  • 骨灰:3~5min

頁面構成:

Axure:模擬微信文章浮窗效果

事件構成:

Axure:模擬微信文章浮窗效果

步驟1:頁面繪制

首先繪制靜態的聊天頁面和文章頁面,具體展示效果如下圖所示:

Axure:模擬微信文章浮窗效果
步驟2:文章轉浮窗

  • 將靜態的文章頁面轉換為動態面板命名為:01_浮窗
  • 給動態面板01_浮窗設置兩個狀態:文章、浮窗
  • 文章狀態里面存放文章靜態頁面
  • 浮窗狀態里面存放懸浮按鈕
  • 為x符號設置點擊事件(參照上圖事件設置),具體設置如下:

Axure:模擬微信文章浮窗效果

  • 注意縮小時,文章縮小的速度要比外框的快,這樣看起來,整個文章縮小的動作才是一個圓角矩形。

步驟3:浮窗轉文章

  • 首先,單擊懸浮窗按鈕,切換動態面板狀態為文章
  • 然后,設置文章的尺寸恢復到原來的尺寸大小375×667
  • 恢復外框的尺寸為396×694且在文章完全恢復大小之前,隱藏外框
  • 注意外框變大的速度要比文章的速度快,具體設置如下圖所示:

Axure:模擬微信文章浮窗效果

最終效果:

Axure:模擬微信文章浮窗效果

 

本文由 @?神奈川00 原創發布。未經許可,禁止轉載

題圖來自 Pexels,基于 CC0 協議

原創文章,作者:金香檳運營,如若轉載,請注明出處:http://www.khiuon.tw/4274.html

重庆幸运农场网上购买