華為手機(jī)越來(lái)越愛(ài)到眾多消費(fèi)者的喜愛(ài)，體驗(yàn)方面無(wú)論從手機(jī)終端，還是官網(wǎng)設(shè)計(jì)，都體現(xiàn)出一個(gè)知名企業(yè)所擁有的品質(zhì)。以華為官網(wǎng)首頁(yè)的交互為例，交互雖然簡(jiǎn)單卻體現(xiàn)了對(duì)細(xì)節(jié)的追求。我們就以這個(gè)簡(jiǎn)單的交互來(lái)說(shuō)一說(shuō)Axure的動(dòng)畫交互應(yīng)用。

華為官網(wǎng)交互說(shuō)明

官網(wǎng)首頁(yè)的下方是以大副圖片拼接的方式顯示了網(wǎng)站的內(nèi)容，默認(rèn)顯示了圖片和圖片內(nèi)容的標(biāo)題，鼠標(biāo)經(jīng)過(guò)時(shí)標(biāo)題向上移動(dòng)，然后向上移動(dòng)顯示圖片的詳細(xì)文字說(shuō)明，圖片則向右側(cè)移動(dòng)同時(shí)降低圖片的亮度。鼠標(biāo)移開時(shí)還原成圖片+文字標(biāo)題的方式，如下圖所示：

動(dòng)畫交互分解

1.字動(dòng)畫

1. 標(biāo)題向上移動(dòng)動(dòng)畫
2. 文字詳情淡入淡出顯示動(dòng)畫
3. 文字詳情移動(dòng)動(dòng)畫

2.圖片動(dòng)畫

1. 圖片向右移動(dòng)
2. 圖片降低亮度，但要注意的是這里不是設(shè)置圖片的透明度，而是在圖片上添加個(gè)黑色矩形，初始透明度為0，鼠標(biāo)移入時(shí)提高透明度為40.

可以看出上面的動(dòng)畫很簡(jiǎn)單，但將它們組合起來(lái)，并設(shè)置合適的動(dòng)畫，就能達(dá)到很好的交互效果。

點(diǎn)擊查看原型效果。（注意：因涉及鼠標(biāo)移入移出效果，在手機(jī)端不好體現(xiàn)，特增加了兩個(gè)按鈕單擊來(lái)模擬）

下面開始實(shí)現(xiàn)這樣的交互原型。

界面布局

從華為官網(wǎng)保存一張圖片，并復(fù)制對(duì)應(yīng)文字的標(biāo)題和文字詳情。

1、將圖片添加到設(shè)計(jì)區(qū)域，保持原大小700*342，命名為img。

2、添加一個(gè)文字標(biāo)簽，大小為28，白色，文字內(nèi)容為“做多聯(lián)接、撐大管道、使能行業(yè)數(shù)字化”，命名為txtTitle，放在圖片img內(nèi)的下方。

3、再添加一個(gè)文字標(biāo)簽，大小默認(rèn)，白色，文字內(nèi)容為“華為輪值CEO徐直軍談華為戰(zhàn)略：堅(jiān)持做多聯(lián)接、撐大管道、使能行業(yè)數(shù)字化的戰(zhàn)略，聚焦ICT基礎(chǔ)設(shè)施和智能終端，做智能社會(huì)的使能者和推動(dòng)者。”，命名為txtDesc，放在txtTitle下方。

4、設(shè)置文字詳情txtDesc為隱藏狀態(tài)。

5、添加個(gè)無(wú)邊框矩形，命名為mask，位置、大小和圖片一致，黑色背景，透明度為0，這里也要注意一下，是設(shè)置矩形框的透明度，不是背景顏色的透明度。

6、選中圖片、標(biāo)題、詳情和圖片蒙板，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，將動(dòng)態(tài)面板寬帶稍微調(diào)整小一點(diǎn)到685，注意這里寬度調(diào)整的目的，是為了在向左移動(dòng)圖片時(shí)，顯示右側(cè)部分隱藏的圖片內(nèi)容。

交互動(dòng)畫設(shè)計(jì)

在鼠標(biāo)移入到動(dòng)態(tài)面板上時(shí)，同時(shí)設(shè)置文字標(biāo)題、文字詳情和圖片的動(dòng)畫，在鼠標(biāo)移出時(shí)恢復(fù)原來(lái)的布局。

選擇動(dòng)態(tài)面板，從”更多事件>>“列表中選擇鼠標(biāo)移入事件。

1、添加標(biāo)題的向上移動(dòng)動(dòng)作

移動(dòng)：以相對(duì)位置移動(dòng)，向上移動(dòng)30個(gè)位置。

動(dòng)畫：設(shè)置為緩進(jìn)緩出，動(dòng)畫時(shí)長(zhǎng)為300毫秒

2、添加圖片介紹文字顯示和移動(dòng)動(dòng)畫

先淡入淡出顯示txtDesc，再移動(dòng)txtDesc，以相對(duì)位置向上移動(dòng)50個(gè)像素，動(dòng)畫效果設(shè)置為緩進(jìn)緩出，時(shí)間為500毫秒。

3、添加圖片移動(dòng)和設(shè)置蒙板mask透明度

先向前面一樣，以相對(duì)位置水平向左移動(dòng)圖片img到15個(gè)像素，動(dòng)畫為緩進(jìn)緩出。

接著設(shè)置mask透明度，將黑色透明度從0%提高到50%，添加線性動(dòng)畫。

以上是鼠標(biāo)移入時(shí)的動(dòng)畫和交互，鼠標(biāo)移出時(shí)的動(dòng)畫和交互與上面相反：

鼠標(biāo)移出時(shí)，向下移動(dòng)標(biāo)題txtTitle，隱藏詳情txtDesc并向下移動(dòng)，再向右移動(dòng)圖片，最后設(shè)置蒙板mask透明度。

完成，F(xiàn)5預(yù)覽一下效果。

小結(jié)

完整的交互和動(dòng)畫效果已經(jīng)設(shè)置完畢，簡(jiǎn)單組合即能達(dá)到常見(jiàn)的動(dòng)畫效果。適當(dāng)?shù)奶砑咏换ズ蛣?dòng)畫能增強(qiáng)網(wǎng)站或者APP的趣味性，能讓用戶的交互能實(shí)時(shí)得到反饋，你也試試吧！

鏈接: https://pan.baidu.com/s/1c2GLKw4 密碼: 4y6a

本文由 @ Axure原型設(shè)計(jì)工場(chǎng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。