[第二屆構建之法論壇] 預培訓文檔(原型工具)

在阿超完成了編碼、單元測試、調試後，完成了第一個可用的版本，一會兒打印出好多份不一樣的題目，讓孩子作了。老師看了做業以後對阿超讚許有加。別的老師聞訊也想要相似的程序，讓全校的小學生都能用，並提出了一些小小的要求，例如：

• 題目避免重複
• 可定製數量
• 能夠控制一下參數

乘除法、括號、數制範圍、數值範圍、……

阿超的兒子興高采烈地回家來給老爸彙報，並說「老師明天就想要！」阿超有些撓頭，原來就是隨手寫了個程序，如今怎麼來了一些用戶，還帶來了很多需求？因而阿超熬夜作出了這個軟件的初始版本 ，交給了老師，過了幾天老師說，教導主任看了很滿意，並且教導主任提議，能夠把這個程序放到學校的網站上，再多一些要求，好比能生成期中期末的試卷。並且但願網站至少在五點到晚十二點能訪問。

阿超嘆了一口氣：這是多複雜的一個工程阿！嘆氣歸嘆氣，阿超仍是着手開始準備設計這個網頁的原型。

他找到了三個能夠無償使用的原型設計軟件：

• 墨刀

連接：https://modao.cc/

提供了免費版本，多平臺，網頁/程序，附有多套模板。用戶可共享本身的模板，內有討論區，內部交流較密切，多幹貨

• xiaopu

連接：https://www.xiaopiu.com

使用說明：https://www.zhihu.com/question/19592829/answer/148240132

• mockplus

連接：https://www.mockplus.cn/

因爲這些軟件的使用方式都大同小異，因而阿超下載了mockplus的桌面版，同時爲了瞭解基礎的UI組件，阿超也找到了幾個UI素材庫，在簡單瞭解了UI組件後，阿超開始設計起來網站的原型。

……

阿超從組件欄中拖出了一個瀏覽器界面

這個網站可以出題、檢查學生的答題狀況，阿超想了想，又加上了錯題本和統計功能，一個刷題網站怎麼能沒有統計功能呢，阿超喃喃道。

因而阿超從組件欄中拖出了菜單欄，雙擊修改了菜單欄的內容後，變成了這個樣子：

在添加了一些基礎的組件以後，我的中心已經逐漸成型：

隨後咱們在左上角的項目中，添加新的頁面：

隨後設置動畫：雙擊首頁菜單欄，鼠標點擊其中「試卷生成」欄目上方的按鈕，並拖動到試卷生成頁面，表示該按鈕與頁面綁定，演示時，點擊試卷生成，便可直接轉跳至「試卷生成頁面」。

如今還剩下三個頁面，請你來幫幫阿超，設計它們的原型吧！

參考連接

• http://next.36kr.com/posts/collections/1
• https://www.zhihu.com/question/19592829