前兩天設(shè)計(jì)一款主頁(yè)，想給它加上一些操作演示，于是便自己琢磨如何實(shí)現(xiàn)。先上效果圖：

 

首先，是界面設(shè)計(jì)的部分：

需求是針對(duì)現(xiàn)有的網(wǎng)站做移動(dòng)端的展示。針對(duì)門戶網(wǎng)站的性質(zhì)，以及對(duì)象的行業(yè)特性，將首頁(yè)直接體現(xiàn)的提煉為“解決方案”、“服務(wù)”、“客戶&案例”三個(gè)模塊。這樣排版更加能從自身業(yè)務(wù)出發(fā)，使網(wǎng)站瀏覽者能夠快速尋找到自身想要的答案。

另外，在首頁(yè)將“需求發(fā)布”的模塊保留，變?yōu)榭旖萑肟?，通過右滑進(jìn)行操作（類似瀏覽器返回操作），快速進(jìn)入。留給了客戶一個(gè)可以直接交流的窗口。

現(xiàn)存問題：作為一個(gè)宣傳型網(wǎng)站，制作時(shí)沒有體現(xiàn)聯(lián)系方式等重要信息…

 

 

配色選用紫色，活潑而又豐富，更加吸睛。Banner摒棄了切換效果，而是做成了動(dòng)態(tài)圖的處理，目的是在同質(zhì)化嚴(yán)重的類型網(wǎng)站中做出自己的特點(diǎn)。案例用客戶的logo作為列表，項(xiàng)目做彈窗展示。還有一些其他的導(dǎo)航彈窗需求提交的滑動(dòng)頁(yè)之類的首頁(yè)其他模塊也一并弄好

 

接下來(lái)就是動(dòng)態(tài)效果的實(shí)現(xiàn)。

要做動(dòng)效演示，一定先要在心里有一個(gè)想法，想要實(shí)現(xiàn)一個(gè)什么樣的效果在自己的心里要有一個(gè)大概的雛形。如果覺得還不是很清晰可以多看一些案例的演示，分析它們的運(yùn)動(dòng)規(guī)律，我也是之前看到了很多類似的案例才有了做這樣演示的想法。

 

有了初步的想法之后，就要去找實(shí)現(xiàn)的辦法。網(wǎng)上搜羅了很多方法和工具，成本較小的兩種還是靠PS和AE來(lái)實(shí)現(xiàn)動(dòng)圖的制作。

對(duì)于我來(lái)說(shuō)的話，ae接觸并不是很多，但是感覺簡(jiǎn)單入門的話并不是很難，制作一些簡(jiǎn)易的動(dòng)圖應(yīng)該倒也不成問題。但是生成gif圖的時(shí)候AE導(dǎo)出的文件一般都很大（很可能是我的設(shè)置有問題），還得用ps去重新壓縮一下，這是我在使用時(shí)遇到的問題。

而用ps做gif圖的制作需要用到時(shí)間軸工具，需要注意的兩點(diǎn)：1.要選擇新建視頻時(shí)間軸而不是幀動(dòng)畫；2.不同的圖層對(duì)象類型對(duì)應(yīng)的關(guān)鍵幀變換也不相同，制作時(shí)要想好這一圖層要進(jìn)行怎樣的變化，再去做對(duì)應(yīng)圖層類型的圖層。

 

 

分開做了一些局部的動(dòng)畫

 

  

然后整個(gè)頁(yè)面的操作，沒有太獨(dú)特的地方。于是就想有沒有合適的原型工具可以直接滿足我的需求，于是我找到了一款簡(jiǎn)單的在線原型制作軟件。只要可以實(shí)現(xiàn)基本的頁(yè)面操作動(dòng)畫在我看來(lái)就可以了。

 

 

工具使用中有兩個(gè)問題：1.只能操作演示或手機(jī)分享，無(wú)法導(dǎo)出動(dòng)圖。2.插入gif不可動(dòng)畫化，不然圖片會(huì)變形…

 

emmm~然后……我找了一個(gè)GIF屏幕錄制軟件，將交互操作時(shí)的窗口錄制成gif

 

 

把每個(gè)gif處理一下（大小，多余部分裁剪），然后就是多個(gè)gif的拼接。直接拼用ps操作起來(lái)不是很方便。還是用錄屏軟件，將單個(gè)gif順序排好，一張張錄制，完成后將多余貞刪除，感覺這樣比直接拼接gif更加簡(jiǎn)單，然后導(dǎo)出就是最后成品啦！

 

【最終效果】

路子比較野，都是自己摸索的來(lái)，做的不好還請(qǐng)見諒。

歡迎大神蒞臨指導(dǎo)，各位多多指教，拜謝。