如何在原型圖上實現「知乎」問答卡片交互效果呢？來文中看看~
當我們在使用別人產品時，遇到一些覺得比較好的設計或是一些交互體驗上比較舒適的設計時，我們想要將其借鑑過來，但又苦於低保真原型無法將交互效果完全復刻。可能在大公司因為配備了交互設計師，產品同學們只需將想法以說明文本形式呈現在原型上即可。
但公司缺乏交互設計師這一角色時，產品同學可能不得不製作一些高保真的原型圖，一方面是減少與開發同事之間的溝通成本，一方面是可以讓老闆直接知曉某個功能的最終效果，特別是某些很難用文字表述的交互效果。
比如，筆者最近注意到的「知乎」上的問答卡片交互效果（下圖所示），如若我們直接用文字表述予同事或老闆：多張卡片疊加在一塊，左右滑動時最上方卡片左右滑出，下一張卡片放大至第一張卡片大小並展示，再次滑動繼續切換……
顯然，面對如此繁瑣的文字，如果能直接在原型上呈現效果是更加合適的。那這個問答卡片的切換，我們如何去實現呢？
我們先來分析這個交互事件可大致分為幾個：
- 左右滑動
- 隱藏滑動的卡片
- 放大下一張卡片
- 移動展示出下一張卡片
明確交互事件之後，我們便可以開始製作。
第一步：素材準備
我們先將整體卡片素材準備好，仔細觀察我們可知，卡片設計的素材控件有：文本、矩形、編輯icon、不可見icon、2個button。我們在「左側功能欄-元件」中找到對應的元件拖拽到畫布區，按照對應位置調整，並調整相關字體大小與顏色：
調整完畢之後，我們會發現卡片除了顏色與大小有出入以外，還需調整其他樣式。我們選中矩形，打開「右側功能欄-樣式」繼續調整邊框、圓角與陰影，完畢之後我們將其組合並命名為卡片1（個人建議大家在製作相關控件與素材時，保持命名這個習慣，方便在素材較多的頁面搜索相關素材），最終素材效果如下：
第二步：左右滑動交互效果
熟悉Axure的朋友都知道，如果涉及左右滑動動作交互，我們一般都會用到動態面板，如果是用面板狀態切換這一動畫效果進行設計，顯然是達不到我們想要的效果的，所以我們需要多個面板進行交互。
我們先將素材卡片1轉化為動態面板，取名面板卡片1，之後我們在「右側功能欄-交互」中點擊「新建交互」，找到「手勢-向左滑動」,並添加相應元件工作「顯示/隱藏」，將元件進行隱藏，並加入向左滑動動畫，即可得到向左滑動的效果：
同理，我們對面板卡片1新建交互，複製粘貼之前的滑動交互，將向左統一改成向右，即可得到一個可以左右滑動的素材面板卡片1：
我們再講面板卡片1複製粘貼，得到面板卡片2與面板卡片3，效果如下：
第三步：卡片放大效果
我們已經簡單實現了左右滑動切換的效果，不過這個效果和我們需要的還是有所差距。我們進一步實現——切換時下一張卡片進行放大並移動展示出來的效果。
首先，我們需要將卡片2，3（注意是卡片23而非面板卡片23）進行等比例縮放。這裡要注意，如果我們是手動將兩者縮放，後續的放大移動上像素與座標調整會比較麻煩，故我們可以保持三張卡片大小不變，而是在面板卡片2，3新增交互「載入」交互事件並插入動作「設置尺寸」
如上圖所示，載入時我們可以分別設置卡片2，3長寬為[[This.width*0.98]]，[[This.height*0.98]]，選中居中錨點，即載入時卡片2，3大小變成對應面板卡片2，3的0.98倍。
之後我們在面板卡片1的「向左/右滑動」交互中新增動作「設置尺寸」，設置卡片2的長寬分別為[[This.width]]、[[This.height]]，選中居中錨點，並選擇線性動畫，即將加載縮小的卡片2居中放大至與面板卡片1同等大小，設置與效果如下：
第三步：移動卡片位置進行展示
卡片已經完成我們需要的縮放了，接下來需要將其移動到之前卡片1消失的位置，進行展示。這裡很簡單，我們只需在面板卡片1的「向左/右滑動」交互中新增動作「移動」，將面板卡片2移動「過」與面板卡片1相差的座標，即設置Y軸-12（具體根據我們面板卡片之間座標差而定），並設置線性動畫，設置與效果如下：
第四步：完成面板卡片2與面板卡片3交互
我們已經完成面板卡片1與面板卡片2之間的交互，接下來我們仿照完成面板卡片2與面板卡片3交互。我們只需將之前的面板卡片1中設置的交互動作進行復制，再到面板卡片2中進行粘貼，並將對應對象改成卡片3與面板卡片3，最後效果如圖：
第五步：多設幾組或循環滑動
基本上，我們已經完成了我們想要的效果，不過我們只有三張面板，如需多次滑動查看效果，我們需要多複製添加幾組，不過這種方式一方面工作量比較大，一方面元件太多。所以這裡給大家推薦製作循環。
循環思路也比較簡單，既然我們需要面板卡片進行循環，就要保證每次滑動隱藏的面板卡片迴歸至底部展示，並且卡片尺寸縮小至未展示的卡片尺寸。即置底-設置尺寸縮小-移動-顯示，共4個交互動作。
這裡給大家提醒一下，置底的交互動作優先級似乎高於其他動作，即使調整動作順序還是會先執行置底，故我們這4個交互動作可以這樣設置：
在滑動隱藏面板卡片1設置交互動作後，增加「設置尺寸」縮小卡片1、「移動」卡片1「過」（0，12）、將上一輪的面板卡片（即面板卡片3）置於底部並顯示。
在滑動隱藏面板卡片2設置交互動作後，增加「設置尺寸」縮小卡片2、「移動」卡片2「過」（0，12）、將上一輪的面板卡片（即面板卡片1）置於底部並顯示。
在滑動隱藏面板卡片3設置交互動作後，增加「設置尺寸」縮小卡片3、「移動」卡片3「過」（0，12）、將上一輪的面板卡片（即面板卡片2）置於底部並顯示。
最後注意左右滑動交互都要相同設置相同動作即可完成最後效果：
謝謝大家閱讀，我是把產品當做刻章去打磨的偽文青，歡迎指正和訂閱！
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
