如何在原型圖上實現(xiàn)「知乎」問答卡片交互效果呢？來文中看看~

當(dāng)我們在使用別人產(chǎn)品時，遇到一些覺得比較好的設(shè)計或是一些交互體驗上比較舒適的設(shè)計時，我們想要將其借鑒過來，但又苦于低保真原型無法將交互效果完全復(fù)刻?？赡茉诖蠊疽驗榕鋫淞私换ピO(shè)計師，產(chǎn)品同學(xué)們只需將想法以說明文本形式呈現(xiàn)在原型上即可。

但公司缺乏交互設(shè)計師這一角色時，產(chǎn)品同學(xué)可能不得不制作一些高保真的原型圖，一方面是減少與開發(fā)同事之間的溝通成本，一方面是可以讓老板直接知曉某個功能的最終效果，特別是某些很難用文字表述的交互效果。

比如，筆者最近注意到的「知乎」上的問答卡片交互效果（下圖所示），如若我們直接用文字表述予同事或老板：多張卡片疊加在一塊，左右滑動時最上方卡片左右滑出，下一張卡片放大至第一張卡片大小并展示，再次滑動繼續(xù)切換……

顯然，面對如此繁瑣的文字，如果能直接在原型上呈現(xiàn)效果是更加合適的。那這個問答卡片的切換，我們?nèi)绾稳崿F(xiàn)呢？

我們先來分析這個交互事件可大致分為幾個：

• 左右滑動
• 隱藏滑動的卡片
• 放大下一張卡片
• 移動展示出下一張卡片

明確交互事件之后，我們便可以開始制作。

第一步：素材準(zhǔn)備

我們先將整體卡片素材準(zhǔn)備好，仔細觀察我們可知，卡片設(shè)計的素材控件有：文本、矩形、編輯icon、不可見icon、2個button。我們在「左側(cè)功能欄-元件」中找到對應(yīng)的元件拖拽到畫布區(qū)，按照對應(yīng)位置調(diào)整，并調(diào)整相關(guān)字體大小與顏色：

調(diào)整完畢之后，我們會發(fā)現(xiàn)卡片除了顏色與大小有出入以外，還需調(diào)整其他樣式。我們選中矩形，打開「右側(cè)功能欄-樣式」繼續(xù)調(diào)整邊框、圓角與陰影，完畢之后我們將其組合并命名為卡片1（個人建議大家在制作相關(guān)控件與素材時，保持命名這個習(xí)慣，方便在素材較多的頁面搜索相關(guān)素材），最終素材效果如下：

第二步：左右滑動交互效果

熟悉Axure的朋友都知道，如果涉及左右滑動動作交互，我們一般都會用到動態(tài)面板，如果是用面板狀態(tài)切換這一動畫效果進行設(shè)計，顯然是達不到我們想要的效果的，所以我們需要多個面板進行交互。

我們先將素材卡片1轉(zhuǎn)化為動態(tài)面板，取名面板卡片1，之后我們在「右側(cè)功能欄-交互」中點擊「新建交互」，找到「手勢-向左滑動」,并添加相應(yīng)元件工作「顯示/隱藏」，將元件進行隱藏，并加入向左滑動動畫，即可得到向左滑動的效果：

同理，我們對面板卡片1新建交互，復(fù)制粘貼之前的滑動交互，將向左統(tǒng)一改成向右，即可得到一個可以左右滑動的素材面板卡片1：

我們再講面板卡片1復(fù)制粘貼，得到面板卡片2與面板卡片3，效果如下：

第三步：卡片放大效果

我們已經(jīng)簡單實現(xiàn)了左右滑動切換的效果，不過這個效果和我們需要的還是有所差距。我們進一步實現(xiàn)——切換時下一張卡片進行放大并移動展示出來的效果。

首先，我們需要將卡片2，3（注意是卡片23而非面板卡片23）進行等比例縮放。這里要注意，如果我們是手動將兩者縮放，后續(xù)的放大移動上像素與坐標(biāo)調(diào)整會比較麻煩，故我們可以保持三張卡片大小不變，而是在面板卡片2，3新增交互「載入」交互事件并插入動作「設(shè)置尺寸」

如上圖所示，載入時我們可以分別設(shè)置卡片2，3長寬為[[This.width*0.98]]，[[This.height*0.98]]，選中居中錨點，即載入時卡片2，3大小變成對應(yīng)面板卡片2，3的0.98倍。

之后我們在面板卡片1的「向左/右滑動」交互中新增動作「設(shè)置尺寸」，設(shè)置卡片2的長寬分別為[[This.width]]、[[This.height]]，選中居中錨點，并選擇線性動畫，即將加載縮小的卡片2居中放大至與面板卡片1同等大小，設(shè)置與效果如下：

第三步：移動卡片位置進行展示

卡片已經(jīng)完成我們需要的縮放了，接下來需要將其移動到之前卡片1消失的位置，進行展示。這里很簡單，我們只需在面板卡片1的「向左/右滑動」交互中新增動作「移動」，將面板卡片2移動「過」與面板卡片1相差的坐標(biāo)，即設(shè)置Y軸-12（具體根據(jù)我們面板卡片之間坐標(biāo)差而定），并設(shè)置線性動畫，設(shè)置與效果如下：

第四步：完成面板卡片2與面板卡片3交互

我們已經(jīng)完成面板卡片1與面板卡片2之間的交互，接下來我們仿照完成面板卡片2與面板卡片3交互。我們只需將之前的面板卡片1中設(shè)置的交互動作進行復(fù)制，再到面板卡片2中進行粘貼，并將對應(yīng)對象改成卡片3與面板卡片3，最后效果如圖：

第五步：多設(shè)幾組或循環(huán)滑動

基本上，我們已經(jīng)完成了我們想要的效果，不過我們只有三張面板，如需多次滑動查看效果，我們需要多復(fù)制添加幾組，不過這種方式一方面工作量比較大，一方面元件太多。所以這里給大家推薦制作循環(huán)。

循環(huán)思路也比較簡單，既然我們需要面板卡片進行循環(huán)，就要保證每次滑動隱藏的面板卡片回歸至底部展示，并且卡片尺寸縮小至未展示的卡片尺寸。即置底-設(shè)置尺寸縮小-移動-顯示，共4個交互動作。

這里給大家提醒一下，置底的交互動作優(yōu)先級似乎高于其他動作，即使調(diào)整動作順序還是會先執(zhí)行置底，故我們這4個交互動作可以這樣設(shè)置：

在滑動隱藏面板卡片1設(shè)置交互動作后，增加「設(shè)置尺寸」縮小卡片1、「移動」卡片1「過」（0，12）、將上一輪的面板卡片（即面板卡片3）置于底部并顯示。

在滑動隱藏面板卡片2設(shè)置交互動作后，增加「設(shè)置尺寸」縮小卡片2、「移動」卡片2「過」（0，12）、將上一輪的面板卡片（即面板卡片1）置于底部并顯示。

在滑動隱藏面板卡片3設(shè)置交互動作后，增加「設(shè)置尺寸」縮小卡片3、「移動」卡片3「過」（0，12）、將上一輪的面板卡片（即面板卡片2）置于底部并顯示。

最后注意左右滑動交互都要相同設(shè)置相同動作即可完成最后效果：

謝謝大家閱讀，我是把產(chǎn)品當(dāng)做刻章去打磨的偽文青，歡迎指正和訂閱！

本文由 @偽文青 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議