你會畫原型圖嗎？一個簡單的問題就可以讓不少的小白望而卻步。原型圖繪制工具Axure確實有一定的門檻，雖然學(xué)起來不算很難，但是做好也需要很大的功夫，今天作者從一個小白的視角出發(fā)，用最簡單的方式制作一個看起來還行的微信交互。

精簡一下題目關(guān)鍵字，“小白”，“看起來厲害”。制作過程實際上并不是很高深，否則就沒有小白什么事情了。此外，要看起來厲害，一方面展示出來的時候不至于被鄙視，另一方面自己做的時候也有動力，畢竟即時激勵有利于學(xué)習(xí)。

試想：如果學(xué)習(xí)一周就畫個圖和學(xué)習(xí)2小時就能夠做一個不錯的原型交互，哪個更能夠吸引你？

一、成果展示

Gif圖如下：

首先將最終的成果放上來，供大家參考，體驗請戳我。

介紹一下所制作原型能夠進(jìn)行交互的部分，因為是小白內(nèi)容，所以制作比較簡單，復(fù)雜的交互自然是沒有的。

1. 向右滑動鼠標(biāo)進(jìn)行解鎖；
2. 點擊微信并打開；
3. 6個一級入口之間是可以相互切換的，即微信，通訊錄，發(fā)現(xiàn)，我，添加，和搜索；
4. 對話頁面的微信公眾平臺是可以打開的；
5. 微信公眾平臺和搜索中的返回鍵是可以用的。

除了以上提到的之外，其它功能是不能夠使用的，所以才有了題目的看起來厲害但是實際小白。

二、制作步驟

1. 截圖獲取素材

截圖是很重要的一步，畫圖的速度比較慢且需要用到不少技巧，所以只論展示，截圖性價比最高。

通過截圖，就可以獲得制作一個簡單展示原型所需要的全部內(nèi)容。

2.鎖屏效果的制作

鎖屏效果是通過動態(tài)面板來實現(xiàn)的，即以動態(tài)面板向右拖動作為觸發(fā)條件，讓鎖屏頁面逐漸隱藏，讓微信打開頁面顯示。此處為了能夠讓轉(zhuǎn)換稍微自然一些，動畫特效使用了逐漸。

3. 微信的打開

在微信圖標(biāo)上制作一個熱鍵，然后將該熱鍵設(shè)置為單擊觸發(fā)，觸發(fā)的行為如下圖所示：

即打開微信開屏頁面，同時等待1500毫秒后接著切換為微信打開頁面，同時將微信打開頁面的所有熱鍵全部置于頂層。其中1500毫秒是模擬載入的過程，如果沒有這個設(shè)置，切換就是一閃而過。

將所有熱鍵置于頂層是為了讓熱鍵全部能夠使用，因為鎖屏頁面熱鍵不能夠可點擊，所以默認(rèn)都是置于底層的。而這一步之后，需要使用到這些熱鍵，因此提到最頂部。

熱鍵的分布如上圖所示：所有可以按的地方全部分布有熱鍵，同時，在上一步已經(jīng)將熱鍵全部置頂，因此所有鍵位都是可以點擊的。

4. 頁面之間的切換

接下來的操作就是重復(fù)工作了，簡單的說就是在熱鍵上加上相應(yīng)的功能即可，以通訊錄為例：

如上圖寫觸發(fā)的效果即可，其它的同理進(jìn)行書寫。

熱鍵有如上這么多，寫的過程大同小異。通訊錄的設(shè)置做到的內(nèi)容是：將通訊錄置頂從而完成切換，然后將用到的熱鍵全部置頂以預(yù)備后續(xù)的使用。

5. 調(diào)整所有元件的排列層次

這一步的操作也很重要，因為錯誤的層級關(guān)系有可能導(dǎo)致鍵是不可用的，或者鍵在所有的頁面都是可用的。一個簡單的判斷原則就是：想象每一步的頁面是什么，以及在這個頁面下哪些鍵是存在的，哪些鍵是不存在的。

比如：在鎖屏頁面，微信的打開就是不能夠?qū)崿F(xiàn)的功能，因此這一步只有打開鎖屏這一個交互，其它的功能都應(yīng)該至于非頂層以免出現(xiàn)邏輯錯誤。

總結(jié)

所有制作過程如上所示，總的來說并不復(fù)雜，雖然操作步驟不少，但是實際的技術(shù)含量就是小白級別。

用的主要功能有：

• 點擊觸發(fā)條件：通過單擊可以實現(xiàn)后續(xù)步驟；
• 滑動觸發(fā)條件：通過滑動可以實現(xiàn)后續(xù)步驟；
• 動態(tài)面板：可以滑動的面板，里面可以裝各種元件；
• 可以點擊的熱區(qū)：一個不可見，但是可以設(shè)置觸發(fā)條件的元件。

最后再放上源文件的鏈接：https://pan.baidu.com/s/1woTgrtnctDuPF5s0JNR1cg

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計以及用戶體驗，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議