作為一名PPT設計獅，我經常通過各種尋求靈感。

在看到OPPO官網時，突然産生一個想法：“可以用PPT做一個網站呢？”這個想法令我興奮起來，心動不如行動，撸起袖子加油幹！

一、分析網站布局

首先，我們分析一下官網的排版布局，在banner頂部是logo和導航欄。

下滑會出現機器型号的展示。

點擊導航欄會出現二級菜單，分别是手機的型号、機器展示等内容，并且有相應的動态效果。

點擊主頁的banner也會跳轉到産品詳情頁。

确定了設計邏輯和風格後，我們直接開動~

二、PPT制作網頁步驟

第一步：

将網站上的素材依次下載，以備後續使用。

第二步：

在PPT中臨摹網站的布局，将首頁的元素制作到PPT中。

我們先看一下網站的交互動畫：

鼠标點擊導航欄時，會下浮出一個白色矩形框，展示機器的圖片，并且矩形下部的背景層會相應自動變暗。

第三步：

先插入一個“矩形”，并将矩形的大小調整為等同于頁面大小，顔色填充為“白色”，輪廓設置為“無輪廓”。

我們使用“漸變工具”，來實現上部為白色，下部分為帶有陰影的視覺效果。

第四步：

選中添加好的白色矩形框，在導航欄“格式”中依次點擊 “形狀填充”-“漸變”-“線性向上”。

第五步：

再次點擊“格式”中“形狀填充”-“漸變”-“其他漸變”，将漸變光圈的個數設置為2個，拖動兩側的光圈至畫面的1/3處，調整透明度為40%左右。這樣一個遮罩陰影效果就完成了。

第六步：

将手機模型放置在剛添加的含有陰影的矩形中，調整好位置，并使用“文本框”工具在下方注明機器型号的文字說明。

因為有多個系列的機型，為了方便後期設置動畫效果，我們可以先将每個系列的機型在新的頁面中編輯好（第八步再複制到剛剛建立的首頁中）。

第七步：

為每一頁的機型和漸變遮罩矩形背景添加動畫，其中遮罩的矩形設置為“下浮動畫”，手機圖片設置” 上浮動畫，并對每個機型的效果逐個延遲0.25s。

第八步：

将每一頁的元素複制到首頁，并調整好層級關系。

具體層級結構如下：

第九步：

完成後，需要給其設置一個觸發器，将所有的動畫通過觸發器都鍊接為導航欄中相對應的标題中。

第十步：

再添加一個淡出消失的動畫，并同樣通過觸發器鍊接至對應的标題，這樣就可以實現再次點擊标題欄後機型消失。

将剩下的每一導航欄标題都重複以上操作，直到全部完成。

做到上面這一步，我們在導航欄中的交互動畫就全部完成了。

接下來我們補充一下網頁下翻的内容。

第十一步：

在首屏下方新建一個空白頁面，将網站中用到的素材進行臨摹排版。

第十二步：

将翻頁動畫設置為“推入”。

第十三步：

對banner的鍊接頁面進行設計制作。

新建一個空白頁面，将網頁banner打開後的界面素材制作進來。

因為新建的産品展示把原有的banner遮蓋住，我們可以将素材拖到頁面外邊緣，鼠标右鍵單擊“banner”，選擇“超鍊接”——第三頁（也就是要展示的那頁）。

到這一步，我們整體的設計已經完成，下面體驗一下實際效果：

鼠标點擊不同導航欄，自動展示相關的産品信息，點擊banner圖自動跳轉到産品詳情頁，鼠标上下滑動進行頁面滾動。

如果不告訴你這是PPT制作的，你會不會相信這是用PPT實現的呢？

其實PPT一直非常強大，隻要我們充分利用好每一個功能，再發揮一下我們的設計才能，相信你也能做出非常棒的PPT！