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

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

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

動畫交互分解

1.字動畫

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

2.圖片動畫

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

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

。（注意：因涉及鼠標(biāo)移入移出效果，在手機端不好體現(xiàn)，特增加了兩個按鈕單擊來模擬）

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

界面布局

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

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

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

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

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

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

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

交互動畫設(shè)計

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

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

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

移動：以相對位置移動，向上移動30個位置。

動畫：設(shè)置為緩進緩出，動畫時長為300毫秒

2、添加圖片介紹文字顯示和移動動畫

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

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

先向前面一樣，以相對位置水平向左移動圖片img到15個像素，動畫為緩進緩出。

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

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

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

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

小結(jié)

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

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

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

推薦閱讀：華夏網(wǎng)