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

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

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

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

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

學習時間：

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

頁面構成：

事件構成：

步驟1：頁面繪制

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

步驟2：文章轉浮窗

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

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

步驟3：浮窗轉文章

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

最終效果：

本文由 @?神奈川00 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議