在PPT中加入手機(jī)操作模擬讓演示更生動(dòng)

小欄篇04篇

動(dòng)態(tài)交互是一個(gè)非常好的展現(xiàn)形式，以我們熟悉的東西作為載體，如：PC、手機(jī)、平板等，動(dòng)態(tài)的展現(xiàn)出來，此時(shí)演示文稿不僅僅只是靜態(tài)觀點(diǎn)、章節(jié)切換，而是以動(dòng)態(tài)關(guān)聯(lián)的方式將內(nèi)容連接起來。那么這篇文章可能會(huì)給你帶來點(diǎn)啟發(fā)，將其適當(dāng)運(yùn)用于幻燈片之中，加強(qiáng)觀點(diǎn)的表達(dá)傳遞。

1 幾種模型選取

可能其他朋友的文章中經(jīng)常會(huì)使用實(shí)物照片作為這種呈現(xiàn)方式的載體，會(huì)提供各種模型實(shí)物圖。這個(gè)，可能是各有看法吧，我還是喜歡簡(jiǎn)單幾何而成的。并且這種幾何拼接：進(jìn)可做的精致似實(shí)物，退可快速成型并且可以任意陰影、填充、三維參數(shù)設(shè)置處理。

1.1 手機(jī)模型

選取了幾款手機(jī)做簡(jiǎn)單圖形按照尺寸、比例的組合拼接?？梢酝ㄟ^布爾運(yùn)算進(jìn)行聯(lián)合、剪除操作，使得出來的手機(jī)幾何圖形是單一的圖層，這樣可以更好的進(jìn)行圖片、視頻等文件的嵌套其中。

屏幕區(qū)域的長(zhǎng)寬比例均是16:9，通過手機(jī)拍攝圖像、視頻可以直接放在屏幕空白處，不需要另行剪裁等處理。

1.2 PC模型

選取了兩個(gè)PC做簡(jiǎn)單圖形按照尺寸、比例的組合拼接。同樣可以通過布爾運(yùn)算進(jìn)行聯(lián)合、剪除操作，使得出來的PC幾何圖形是單一的圖層。

1.3 平板模型

選取pad作為原型進(jìn)行平板幾何圖形的拼接組合

1.4 kindle模型

選取kindle作為原型進(jìn)行平板幾何圖形的拼接組合

這部分的內(nèi)容主要是介紹了幾種模型，均是基礎(chǔ)形狀的組合處理。如果覺得比較好玩，以后會(huì)寫點(diǎn)這方面的技巧，看留言，支持不支持都不寫。。

2 動(dòng)態(tài)交互

使用上述平板、手機(jī)、電腦這些模型管它是實(shí)物或者幾何圖形，如果只是停留在用它們來靜態(tài)嵌套圖像、視頻、文字，那么就太浪費(fèi)這么好的表現(xiàn)形式了。

現(xiàn)在開始這篇文章的重要部分，來聊聊使用這些模型進(jìn)行動(dòng)態(tài)交互，希望有點(diǎn)幫助和啟發(fā)。

2.1 單一場(chǎng)景的切換

一個(gè)一個(gè)場(chǎng)景進(jìn)行的情況很多，比如下方的App登錄頁介紹、移動(dòng)應(yīng)用一個(gè)重要功能點(diǎn)說明、亦或一張重要圖片的使用背景說明，這時(shí)候設(shè)置一個(gè)先圖片且配色簡(jiǎn)短文字，之后需要的就是圖片單向偏移，再配上一大段文字補(bǔ)充說明。

2.2 長(zhǎng)頁面的滑動(dòng)切換

有的時(shí)候使用手機(jī)都會(huì)有界面上下滑動(dòng)，然后選擇一個(gè)聯(lián)系對(duì)話框/文字列表點(diǎn)進(jìn)去，之后進(jìn)行聊天/閱讀。這時(shí)候需要一個(gè)路徑動(dòng)畫，滑動(dòng)到指定位置，然后進(jìn)入下一菜單。

有朋友會(huì)說，為什么不干脆錄制一個(gè)GIF動(dòng)畫放置到手機(jī)模型的屏幕上。因?yàn)镚IF動(dòng)畫的不可控性，不能夠停留指定位置，因而這種由一個(gè)頁面滑動(dòng)到指定位置、并切換到下一場(chǎng)景的效果，GIF或者視頻都不好實(shí)現(xiàn)。

下面的示例就是整個(gè)界面滑動(dòng)，滑動(dòng)到最低處，然后點(diǎn)擊此處的文字標(biāo)題，進(jìn)入具體的文章內(nèi)容界面。

2.3 并列項(xiàng)的滑動(dòng)切換

其實(shí)這種稱作多場(chǎng)景的滑動(dòng)切換，我們有時(shí)候需要對(duì)一個(gè)App的眾多功能點(diǎn)進(jìn)行介紹，通過界面入手，然后加入各種界面中間的滑動(dòng)、切換，給聽眾說明界面之間的關(guān)系和轉(zhuǎn)換邏輯，并且對(duì)重點(diǎn)功能進(jìn)行說明。

2.3.1 示例一說明

這里是四個(gè)并列功能的說明，使用文字深淺作為區(qū)分當(dāng)前項(xiàng)和其余項(xiàng)，并且使用三角符號(hào)作為輔助指示當(dāng)前說明項(xiàng)。

對(duì)于一些簡(jiǎn)單的頁面說明，有時(shí)候只需要在其右側(cè)進(jìn)行顯示說明即可；對(duì)于文本內(nèi)容比較多的部分，將模型載體向左移動(dòng)，留下右側(cè)大片區(qū)域用于文本說明，或者將當(dāng)前頁再次頁面切換展開細(xì)化功能點(diǎn)說明，使用這種方式也較好。

使用動(dòng)畫說明：路徑動(dòng)畫、淡出動(dòng)畫、浮入動(dòng)畫

下面的方式就是：從網(wǎng)絡(luò)監(jiān)控功能模塊，到運(yùn)營(yíng)報(bào)告功能模塊的切換

下面這頁面是從運(yùn)營(yíng)報(bào)告細(xì)化說明的頁面，這是在運(yùn)營(yíng)報(bào)告(上面一張圖)進(jìn)行左移，然后進(jìn)行頁面切換，具體操作同 2.2 長(zhǎng)頁面的滑動(dòng)切換類似

2.3.2 示例二說明

這里是兩個(gè)不容模型載體的場(chǎng)景說明，每個(gè)模型場(chǎng)景對(duì)應(yīng)詳細(xì)的介紹，我們先將其并列顯示，然后動(dòng)態(tài)切換到不同的場(chǎng)景進(jìn)行說明。

使用動(dòng)畫說明：路徑動(dòng)畫、淡出動(dòng)畫、浮入動(dòng)畫

2.3.3 示例三說明

這里是同級(jí)的兩個(gè)功能的場(chǎng)景說明，每個(gè)功能下面都有詳細(xì)的功能介紹。我們要做的是將功能界面的來源、同級(jí)功能展示、分別展示說明，按照這個(gè)轉(zhuǎn)場(chǎng)切換順序一一呈現(xiàn)。

使用動(dòng)畫說明：路徑動(dòng)畫、淡出動(dòng)畫、浮入動(dòng)畫

3 元素載體說明

這部分就是通過模型載體進(jìn)行圖像文件、視頻文件的嵌套展示，當(dāng)然也可以是純文本展示，這是就不展開說明了，其他很人多的文章中講得也比較細(xì)?？傊?，使用這些模型，不論手機(jī)、pc，它們只是一種展現(xiàn)形式，重要的還是內(nèi)容的傳達(dá)。

最后，這篇文字希望能給一些想要制作這種動(dòng)態(tài)效果朋友的幫助

效果預(yù)覽效果 模型動(dòng)態(tài)交互.mp4

上述示例文件下載：鏈接: https://pan.baidu.com/s/1i4RRMM5 密碼: rgwp

原文標(biāo)題：載體動(dòng)態(tài)交互，一些想法