我們都知道，當前很多的互聯網産品經理（Product Manager），都必須做“設計産品原型”的工作。這一工作要使用到的工具很多，像Axure、AdobeXD、Proto.io、Invision、Sketch等等都是非常常用的。
但是如果一個初出茅廬的PM還不太會用這些産品原型設計工具，或者時間緊迫怎麼辦？
此時就完全可以用PPT來做。最起碼，5分鐘做好自己思路想法的一個示意，是沒有任何問題的。
那麼今天，我就用一個實際例子，把具體的做法分享給大家。我們來複刻下面這個網站的導航效果：
即點擊右上角的“三橫線”導航圖标後，出來一個導航菜單，列出網站所有欄目。導航菜單此時會變為一個“X”号，意為點擊此“X”号可以關閉導航菜單。我們來複刻這個網站産品原型的效果和操作邏輯。
首先，我們制作這樣三個基礎頁面，分别是：“The Team”、“Portfolio”和“Products”。
在第一個頁面即“The Team”這一頁面的右上角，制作一個圖标，由三個短橫線構成。打組後，Alt F10進入選擇器，命名為“Menu Icon”：
手動畫一個全屏矩形或用OK插件的“全屏矩形”功能，使之無邊框，填充為黑色，透明度設為“40%”，命名為“Dark Overlay”:
再插入一個覆蓋右側一半屏幕的矩形，無邊框，填充設為白色，命名為“White Sidebar”：
在選擇器中，把剛才的“White Sidebar”、“Dark Overlay”都設為隐藏（即在右側的眼睛上點一下，使之出現一條斜線，見下圖），然後選中“Menu Icon”，複制一份，取消組合，删除其中一條線，做成“X”号，命名為“Close Icon”，移動使之與原“Menu Icon”重合：
“Close Icon”添加後，按系統默認是在最上層的。所以如果此時恢複“White Sidebar”、“Dark Overlay”層的顯示，它會在所有元素的最上層：
在白色矩形上添加三個文本框，分别輸入下圖所示的文字，并命名為“The Team”、“Portfolio”和“Products”：
OK，到此為止，所有需要用到的元素都添加完畢。
現在我們為所有元素添加動畫和相關操作邏輯。
先說說動畫效果和操作邏輯應該是什麼樣子：
好，明确了動畫效果和操作邏輯，我們動手：
選中“Dark Overlay”、“White Sidebar”、“Close Icon”、“The Team”、“Portfolio”、“Products”這六個元素（或者說“層”），統一添加“飛入”動畫，方向為“自右側”，持續時間設為“0.3秒”：
按剛才講的操作邏輯，這六層的動畫應該是點擊“Menu Icon”後出現的，也就是說，“點擊Menu Icon”這個行為是這個“飛入”動畫的“觸發器”。
所以，在六層元素都保持選中的情況下，在“動畫”标簽頁下的“觸發器”按鈕那裡，選擇“通過單擊”命令—>“Menu Icon”。這就意味着，單擊“Menu Icon”後，執行“飛入”動畫：
之後，仍然選中剛才的六個元素，單擊“添加動畫”按鈕，選擇“退出”類動畫中的“飛出”，方向選擇“到右側”，觸發器選擇“Close Icon”。
這些操作完成後，菜單彈出和縮回的效果就制作好了。此時的動畫窗格應該是下面這個樣子：
下面我們制作點擊文本跳轉頁面的效果。
這一效果要插入“動作”。選中第二個文本框“Portfolio”，點擊“插入”标簽頁下的“動作”按鈕，然後按下圖操作：
第三個文本框“Products”也做同樣的設置即可。
好啦，所有的元素添加和動畫的設置就是這樣啦。我們總結一下裡面的邏輯：
我們看一下最終的效果：
OK，今天的内容就是這些啦，大家學“廢”了嗎？操作熟練之後，本文開頭所說的“5分鐘”，一點都不誇張。
有任何疑問，請大家随時留言喲！
————壹分鐘了解@斜杠前線————
Far more than PPT， 始于PPT，不止于Power Point，我是斜杠前線。
如果喜歡我的文章，記得關注我喲，一個有知識、有情趣、不會讓你失望的頭條幹貨主講人~
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
