照虎畫虎——簡單WeUI模板UX設計學習

藝術雖然分爲獨立的各個領域，可是總有相通之處。UI/UX設計也是一種藝術，就像美術同樣，UI/UX的設計也須要大量的臨摹其餘優秀做品來提升本身的水平。

不過俗話說：「照貓畫虎」，若是你臨摹的對象不合適，頗有可能只得其形而不得其意。那麼，到哪裏去尋找合適的臨摹素材，作到「照虎畫虎」？其實不少知名軟件的新動向，都值得咱們去參考，好比微信小程序的設計工具：WeUI。

首先咱們須要找到WeUI的模板，其實想要找到這個，也並非很難，在Mockplus的例子項目中，有大量的國內外的優秀App的模板，WeUI也在這其中。雖然這個模板中頁面有點少，不過也可謂言簡意賅，UX設計中須要的元素，這裏都有涉及到。固然，你也能夠到微信的公衆開發平臺上找到這個例子的所有文檔。

咱們先在這裏看一下效果。由於這裏選取的只是幾個具備表明性的頁面，因此並不涉及頁面間跳轉的設置，各位看官還請在左側的控制面板中自行切換頁面。

這個模板的重點是在第一個頁面，下面打開這個模板，咱們來具體看一下這個頁面是如何設計的。

基礎的組件擺放就很少說了，主要看交互。首先來看上半個頁面，中間黃色的區域實際上是兩個重合放置的「組」，這兩個組分別對應兩種狀況：已完成和數據加載中。點擊「成功提示」，出現「已完成」提示框，並在1.5秒以後自動消失。點擊「加載中提示」，數據加載中的提示框產生相同的交互動做。好的，效果咱們已經看到了，那麼，問題來了：如何實現呢？

這種效果彈窗而且自動消失的效果其實並不難，用「圖片」、「形狀」和「單行文字」來組成這個「已完成」，而後選中這些組件，單擊右鍵打開菜單，選擇「合併爲組」，而且在右側的屬性面板中取消這個組的可見選項。

接下來的交互設置：拖動「成功提示」到這個黃色的區域，選擇「點擊時」 > 「顯示/隱藏」的交互命令，而後打開下方的參數面板，選擇「顯示」。這樣就實現點擊顯示「已完成」的效果。那麼若是設置這個出現的組自動消失呢？其實很簡單，上一步的操做稍加改動，就能夠實現自動消失了。

咱們仍是拖拽「成功提示」的這個連接點到「已完成」的區域，選擇交互命令「點擊時」 > "顯示/隱藏"，在下方的參數面板中，設置須要作一些改動，這裏咱們選擇「隱藏」，而後在「延遲」的選項中輸入「1500」，至關於延遲了1500毫秒，也就是1.5秒。這樣就能夠在點擊「成功提示」的1.5秒後使「已完成」自動消失了。

一樣的方法，咱們設置到「數據加載中」便可。

嗯，就這樣。咱們來看這個頁面的下半頁。

這裏的組件，看上去好像都是一個，其實……它不是一個組件在戰鬥，看到這裏是否是清楚了不少？

而後就是交互的設置了，若是把這些綠色的矩形變成「活」的進度條呢？在這裏，命令中的「調整尺寸」，在完成對每一個形狀分別的「調整尺寸」設置的過程當中，必定要記得作兩個調整，首先是「固定到」這裏，要選擇形狀組件正確的成長方向。而後是「執行時長」，這個位置必定要調整，否則你的形狀組件會在一瞬間就長大了，不能體現出較好的視覺效果。

「上傳」按鈕這裏只是一個簡單的點擊組件顯示另外一個不可見組件的交互設置，這裏就再也不多說了。

第三頁的交互其實和第一和上半部分的交互效果基本是相同的，只不過這裏紅色的圖標設置過顯示以後就再也不設置隱藏，第二頁和第四頁主要是關注組件的樣式，但願能夠給你們提供一些參考。

怎麼樣？這樣一來，自動消失和進度條的交互命令是否是已經學會了呢？例子項目裏還有不少的模板，下一次在向你們介紹其餘有用的功能吧。