中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

我們先來(lái)分析這個(gè)交互事件可大致分為幾個(gè)：

• 左右滑動(dòng)
• 隱藏滑動(dòng)的卡片
• 放大下一張卡片
• 移動(dòng)展示出下一張卡片

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

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

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

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

第二步：左右滑動(dòng)交互效果

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

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

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

我們?cè)僦v面板卡片1復(fù)制粘貼，得到面板卡片2與面板卡片3，效果如下：

第三步：卡片放大效果

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

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

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

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

第三步：移動(dòng)卡片位置進(jìn)行展示

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

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

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

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

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

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

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

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

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

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

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

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

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

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