<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • 產品推薦ppt怎么做(免費教你做產品推薦ppt)


    我花了870分鐘,做了一份交互型產品介紹PPT

    本文總計:2477 字

    預計閱讀時間:10 分鐘

    昨天,我給大家推薦了一個酒類產品的官網,不知道大家看過沒。

    要是沒看過的話,也沒有關系,因為我用 PPT 把這個網站仿制了一下。

    保留了主要元素,以及大部分的交互效果。

    當然,PPT 和網頁交互會有些不同,有部分小功能沒有去做出來。

    先給大家看一下 PPT 交互的錄屏吧:

    PPT 中的圖片及 LOGO 等素材,都是直接從官網獲取的。

    整個作品的細節還是比較多的,尤其是第一部分,幾乎把所有的技術難點都涵蓋了。

    因為后面部分的原理差不多,為了控制頁數,后面幾個部分,去掉了比較多交互細節。

    學習拆解的話,著重拆解第一個部分即可。

    接下來,給大家簡單介紹一下技術難點

    需要注意一下,本文是綜合型進階教程,后面的技巧思路,很多都是點到為止,剛接觸 PPT 的話,可能有很多地方看不明白。

    但是大部分內容,以前的文章都提到過,如果今天看不明白的,可以先收藏,以后再回頭琢磨琢磨哦。

    01. 圖片素材是如何獲取的

    使用的谷歌瀏覽器擴展,ImageAssistant,一鍵批量獲取網站圖片。

    我花了870分鐘,做了一份交互型產品介紹PPT

    選擇自己所需的圖片后,可以進行批量下載。

    02. Logo和山峰等素材是如何獲取的

    這些本身是矢量 svg 素材,但是在網頁上是以代碼形式存在的。

    直接通過瀏覽器擴展,無法拉取到這些 svg 文件。

    可以把鼠標移動到素材上方,右鍵點擊【檢查】。

    我花了870分鐘,做了一份交互型產品介紹PPT

    在打開的窗口中,會看到如下圖 svg 開頭的代碼。

    我花了870分鐘,做了一份交互型產品介紹PPT

    注意觀察,鼠標移動到代碼上方時,Logo 上面會有特殊顯示。

    點擊鼠標右鍵,選擇復制這段代碼:

    我花了870分鐘,做了一份交互型產品介紹PPT

    之后在電腦上新建一個 txt 文件,把這段代碼粘貼進去。

    我花了870分鐘,做了一份交互型產品介紹PPT

    保存該 txt 文件,把文件的后綴改成 .svg 即可。

    修改完成后,可以直接拖到 PPT 中使用,也可以到 AI 等矢量軟件中打開。

    03. 背景音樂文件是如何獲取的

    同樣是在瀏覽器中,按 F12 打開開發者工具,點擊選擇【Network】選項卡。

    我花了870分鐘,做了一份交互型產品介紹PPT

    刷新一次頁面,會重新加載頁面中的所有素材。

    我花了870分鐘,做了一份交互型產品介紹PPT

    之后,在搜索框搜索【mp3】,就可以篩選出所有的音頻文件。

    我花了870分鐘,做了一份交互型產品介紹PPT

    選中一個音頻,右鍵在新窗口打開,就可以下載該音頻文件了。

    我花了870分鐘,做了一份交互型產品介紹PPT

    部分網站的視頻,也可以通過這種方法獲取。

    04. PPT 中的背景音樂是如何一直播放的

    高版本的 PowerPoint,可以直接把音頻文件拖進去。

    在 PPT 里選中音頻,點擊音頻播放選項卡,選擇【在后臺播放】。

    我花了870分鐘,做了一份交互型產品介紹PPT

    這時候音頻就會當作背景音樂,一直循環播放。

    05. 用鍵盤操作,或者用鼠標點擊為什么不會換頁

    因為交互類 PPT 作品,一般用于展會的觸摸屏。

    而且往往交互邏輯比較復雜,真實的頁面并不是常見的線性結構,如果用鼠標或鍵盤切換頁面,瀏覽的時候會比較混亂。

    所以,需要把鼠標和鍵盤換頁功能給禁用,避免出錯。

    只需要在【幻燈片放映】選項卡中,設置幻燈片放映:

    我花了870分鐘,做了一份交互型產品介紹PPT

    勾選【在展臺瀏覽】,就可以只通過設置好的交互觸發來切換頁面。

    06. 開始的云朵散開是怎么做的

    首先在頁面最上方,添加兩張云朵的 PNG 免摳圖。

    我花了870分鐘,做了一份交互型產品介紹PPT

    再分別為云朵添加向左和向右的路徑動畫,讓云朵移動到頁面之外即可。

    07. 第一頁的背景在緩慢移動

    本來這是想模仿網站的效果,鼠標移動的同時,背景分層移動,形成細微的視覺差,突顯頁面的層次感。

    但是 PPT 做鼠標跟隨效果,需要用到 VBA 和 API 相關的知識,而且做出來會比較卡。

    這方面的知識我沒怎么研究過,所以這里只用路徑動畫做了個簡略模擬。

    我花了870分鐘,做了一份交互型產品介紹PPT

    而且,換頁的時候,會因為這個動畫產生背景偏移,所以后面幾個部分沒有保留這個效果,只是簡單示例一下這個知識點。

    08. 小鳥撲騰著飛過去是如何實現的

    首先從網站上,抓取到小鳥不同姿態的圖片。

    我花了870分鐘,做了一份交互型產品介紹PPT

    把他們按順序拖進 PPT 里,全選后,打開 OneKey 插件。

    點擊【逐幀相關】-【圖形逐幀】

    我花了870分鐘,做了一份交互型產品介紹PPT

    之后,設置動畫效果,把字母之間的延遲改為 100%

    我花了870分鐘,做了一份交互型產品介紹PPT

    最后,縮小文本框,調整動畫的時間,并為這個逐幀文本框,設置自定義路徑動畫:

    我花了870分鐘,做了一份交互型產品介紹PPT

    只要簡單調整一下動畫時間,并設置一直循環即可。

    這就是逐幀動畫的一種,感興趣的話,也可以去找其他動物的不同運動姿態,用同樣的方法做出逐幀動畫效果。

    09. 點擊出現視頻是如何做的

    只需要把視頻放到其他頁面,并讓視頻自動播放。

    之后選中播放按鈕,【插入】-【動作】,設置鼠標點擊跳轉到視頻頁即可。

    我花了870分鐘,做了一份交互型產品介紹PPT

    同理,視頻右上角的按鈕,也是通過這種方法進行跳轉。

    我花了870分鐘,做了一份交互型產品介紹PPT

    需要注意的是,視頻進入和退出,是向下拉進和向上拉出的效果。

    這是使用了自帶的頁面切換效果,退出時候的切換,則是額外多復制了一個頁面,專門用來做這個。

    我花了870分鐘,做了一份交互型產品介紹PPT

    這里可以具體打開源文件,看下文件就知道了。

    10. 右下角模擬音樂的律動柱形是怎么做的

    整個 PPT 作品,我只在第一個部分,保留了這個律動效果。

    因為需要額外增加交互頁面,后面全部都加的話,頁數太多了。

    在音頻的上方,添加了一個形狀,填充透明度設置為 100%。

    我花了870分鐘,做了一份交互型產品介紹PPT

    這樣設置,看不到形狀,但是方便點擊與交互。

    同樣是選中形狀,插入動作,設置鼠標懸浮跳轉到第 3 頁。

    我花了870分鐘,做了一份交互型產品介紹PPT

    在第 3 頁,為這些圓角矩形,添加一直循環的路徑動畫,記得勾選動畫翻轉。

    我花了870分鐘,做了一份交互型產品介紹PPT

    柱形在上下運動的同時,底部是有個形狀蓋住的,這個形狀使用了背景填充,可以思考一下為什么這么做。

    我花了870分鐘,做了一份交互型產品介紹PPT

    同時,在第 3 頁這些圓角矩形的外圍,添加一個形狀,設置鼠標懸浮跳轉回之前的頁面。

    我花了870分鐘,做了一份交互型產品介紹PPT

    需要注意的是,這個形狀把中間律動的部分,通過布爾運算給去掉了。

    實際上,他是下面這樣的:

    我花了870分鐘,做了一份交互型產品介紹PPT

    通過以上步驟,當鼠標移動上去的時候,會出現律動,當鼠標移開的時候,律動就會消失。

    這其實是整個 PPT 中,最重要的交互觸發邏輯,其他部分的觸發效果差不多都是這個原理。

    11. 其他的疑難雜癥

    整個 PPT 的細節非常多,就不一個個知識點過一遍了。

    可以自己下載源文件,用鼠標移動,或者點擊試試看。

    大的技術原理,上面基本上都涵蓋了,其他部分原理基本相同。

    當然,還有諸如動畫點擊觸發,平滑切換,圖片虛化與明暗設置,編輯ppsx文件等超多小技巧,就等你自己去發現琢磨了。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费