你會畫原型圖嗎？一個簡單的問題就可以讓不少的小白望而卻步。原型圖繪製工具Axure確實有一定的門檻，雖然學起來不算很難，但是做好也需要很大的功夫，今天作者從一個小白的視角出發，用最簡單的方式製作一個看起來還行的微信交互。
精簡一下題目關鍵字，“小白”，“看起來厲害”。製作過程實際上並不是很高深，否則就沒有小白什麼事情了。此外，要看起來厲害，一方面展示出來的時候不至於被鄙視，另一方面自己做的時候也有動力，畢竟即時激勵有利於學習。
試想：如果學習一週就畫個圖和學習2小時就能夠做一個不錯的原型交互，哪個更能夠吸引你？
一、成果展示
Gif圖如下：
首先將最終的成果放上來，供大家參考，體驗請戳我。
介紹一下所製作原型能夠進行交互的部分，因為是小白內容，所以製作比較簡單，複雜的交互自然是沒有的。
向右滑動鼠標進行解鎖；點擊微信並打開；6個一級入口之間是可以相互切換的，即微信，通訊錄，發現，我，添加，和搜索；對話頁面的微信公眾平臺是可以打開的；微信公眾平臺和搜索中的返回鍵是可以用的。除了以上提到的之外，其它功能是不能夠使用的，所以才有了題目的看起來厲害但是實際小白。
二、製作步驟
1. 截圖獲取素材
截圖是很重要的一步，畫圖的速度比較慢且需要用到不少技巧，所以只論展示，截圖性價比最高。
通過截圖，就可以獲得製作一個簡單展示原型所需要的全部內容。
2.鎖屏效果的製作
鎖屏效果是通過動態面板來實現的，即以動態面板向右拖動作為觸發條件，讓鎖屏頁面逐漸隱藏，讓微信打開頁面顯示。此處為了能夠讓轉換稍微自然一些，動畫特效使用了逐漸。
在微信圖標上製作一個熱鍵，然後將該熱鍵設置為單擊觸發，觸發的行為如下圖所示：
即打開微信開屏頁面，同時等待1500毫秒後接著切換為微信打開頁面，同時將微信打開頁面的所有熱鍵全部置於頂層。其中1500毫秒是模擬載入的過程，如果沒有這個設置，切換就是一閃而過。
將所有熱鍵置於頂層是為了讓熱鍵全部能夠使用，因為鎖屏頁面熱鍵不能夠可點擊，所以默認都是置於底層的。而這一步之後，需要使用到這些熱鍵，因此提到最頂部。
熱鍵的分佈如上圖所示：所有可以按的地方全部分佈有熱鍵，同時，在上一步已經將熱鍵全部置頂，因此所有鍵位都是可以點擊的。
4. 頁面之間的切換
接下來的操作就是重複工作了，簡單的說就是在熱鍵上加上相應的功能即可，以通訊錄為例：
如上圖寫觸發的效果即可，其它的同理進行書寫。
熱鍵有如上這麼多，寫的過程大同小異。通訊錄的設置做到的內容是：將通訊錄置頂從而完成切換，然後將用到的熱鍵全部置頂以預備後續的使用。
5. 調整所有元件的排列層次
這一步的操作也很重要，因為錯誤的層級關係有可能導致鍵是不可用的，或者鍵在所有的頁面都是可用的。一個簡單的判斷原則就是：想象每一步的頁面是什麼，以及在這個頁面下哪些鍵是存在的，哪些鍵是不存在的。
比如：在鎖屏頁面，微信的打開就是不能夠實現的功能，因此這一步只有打開鎖屏這一個交互，其它的功能都應該至於非頂層以免出現邏輯錯誤。
總結
所有制作過程如上所示，總的來說並不複雜，雖然操作步驟不少，但是實際的技術含量就是小白級別。
用的主要功能有：
點擊觸發條件：通過單擊可以實現後續步驟；滑動觸發條件：通過滑動可以實現後續步驟；動態面板：可以滑動的面板，裡面可以裝各種元件；可以點擊的熱區：一個不可見，但是可以設置觸發條件的元件。#專欄作家#
馬璐，人人都是產品經理專欄作家。關注產品設計以及用戶體驗，力求在技術一定的情況下將產品做到極致，充分發揮技術的潛能。
題圖來自 Pexels，基於 CC0 協議