微信小程序的原型設計嘗鮮

"小程序”來了，大世界要變了？微信小程序可能是近期業績最火的話題之一了。

這個根植于微信流量巨無霸的應用，將對應用市場、對微商、電商、對企業的開發成本、獲客成本將產生深遠影響？將制造出繞開Google Play和AppStore的另一大App體系？將實現“知人性”的PM張小龍先生的“用后即走”的輕量App之夢？將秒殺傳統的App？

雖有海量追捧者趨之若鶩，但也有冷靜人士淡定的白眼。但無論如何，騰訊這步棋子既然落在了棋盤上，絕不能悔棋，更不可能半途而廢，你我這樣神經敏感的PM、UX，不嘗鮮是不可能的。

說動就動，查找到微信小程序的設計規范后，讓我們開始吧。造大夢的事兒還是讓大佬們去干吧，咱們干點實在的。

干活兒首先得挑個工具，我這里使用了Mockplus，近期國內的一款比較流行的原型設計。比較順手，線框、交互都能勝任。

首先嘗試做WeUI的界面元素吧。經過一會兒的折騰，搞成了一套（好在WeUI的界面元素比不是太多）。有了這個，之后就方便了。

在提示和上傳頁面中，我使用了交互，點擊“成功提示”按鈕，彈出提示。點擊“上傳”按鈕，完成進度條的走動。

操作很簡單：在Mockplus中選中按鈕，直接拖拽到準備彈出的提示框上，設置“顯示/隱藏”，并在消失時做了延遲處理。提示框的默認顯示狀態，設為“不可見”。

至于進度條的走動，是設置每個進度軌道的“調整尺寸”的交互（設置寬度變化），多拖拽幾次鼠標，設置鏈接就好了，如圖：

好了，讓我們來看看效果。點這里看我的成果：

http://run.mockplus.cn/Tnr9w9TyUKjXeDeR/index.html

這個嘗試到此暫時結束，頁面不多，算是個半成品。但在制作時，我邊做邊琢磨微信在設計中的一些理念：簡約、準確、易用。這個偉大的產品之所以在國內能夠深入人心，還是有些道理的。