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

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

 

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

 

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

 

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

 

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

 

首先嚐試作WeUI的界面元素吧。通過一下子的折騰，搞成了一套（好在WeUI的界面元素比不是太多）。有了這個，以後就方便了。

 

 

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

 

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

 

 

至於進度條的走動，是設置每一個進度軌道的「調整尺寸」的交互（設置寬度變化），多拖拽幾回鼠標，設置連接就行了，如圖：

 

 

好了，讓咱們來看看效果。點這裏看個人成果：

 

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

 

 

這個嘗試到此暫時結束，頁面很少，算是個半成品。但在製做時，我邊作邊琢磨微信在設計中的一些理念：簡約、準確、易用。這個偉大的產品之因此在國內可以深刻人心，仍是有些道理的。