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

華為官網交互說明

官網首頁的下方是以大副圖片拼接的方式顯示了網站的內容，默認顯示了圖片和圖片內容的標題，鼠標經過時標題向上移動，然后向上移動顯示圖片的詳細文字說明，圖片則向右側移動同時降低圖片的亮度。鼠標移開時還原成圖片+文字標題的方式，如下圖所示：

動畫交互分解

1.字動畫

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

2.圖片動畫

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

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

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

下面開始實現這樣的交互原型。

界面布局

從華為官網保存一張圖片，并復制對應文字的標題和文字詳情。

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

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

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

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

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

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

交互動畫設計

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

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

1、添加標題的向上移動動作

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

動畫：設置為緩進緩出，動畫時長為300毫秒

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

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

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

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

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

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

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

完成，F5預覽一下效果。

小結

完整的交互和動畫效果已經設置完畢，簡單組合即能達到常見的動畫效果。適當的添加交互和動畫能增強網站或者APP的趣味性，能讓用戶的交互能實時得到反饋，你也試試吧！

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

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

推薦閱讀：華夏網