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

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

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

說動就動，查找到微信小程序的設計規範後，讓我們(men) 開始吧。造大夢的事兒(er) 還是讓大佬們(men) 去幹吧，咱們(men) 幹點實在的。

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

首先嚐試做WeUI的界麵元素吧。經過一會(hui) 兒(er) 的折騰，搞成了一套（好在WeUI的界麵元素比不是太多）。有了這個(ge) ，之後就方便了。

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

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

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

好了，讓我們(men) 來看看效果。點這裏看我的成果：

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

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