國產原型工具 http://www.mockplus.cn, 該工具功能很棒.
每次打開軟件都需先登陸, 好在項目文件是可以保存到本地, 可以注冊為免費版/個人版/團隊版/企業版. 我是免費賬號, 功能自然有限制, 但不影響整體使用, 我的賬號 harry@163.com, 也可以通過手機號登錄, 官網博客經常有免費的激活碼, 激活后可以升級為個人賬號(1個月有效).
mockplus UI 做的很棒, 而且跨平台, 我特意使用 winspyex 簡單分析了一下, 是用新版Delphi 的 firemonkey 技術開發的.
mockplus 教程: https://doc.mockplus.cn/?p=152 https://doc.mockplus.cn/?cat=20
mockplus 博客: https://www.mockplus.cn/blog
免費的 Pencil Project , http://pencil.evolus.vn/
=========================
幾個組件的使用
=========================
"文字表格"組件:
文字表格有點像 pencil 中的表格, 可以直接通過寫內容的方式設定表頭和每個cell的文字, 比pencil強大多了, pencil表格最讓人抓狂的是, 沒法控制每列的寬度, mockplus 可以在內容最后一行使用特殊的語法控制每列寬度和對齊方式, 比如 {2,2R,4R,4C,2C} , 可以猜出來這個表格共5列, 每列有不同的對齊方式.
"表格"組件:
"表格"組件要比"文字表格"組件更強大, 它更像是Excel的樣子, 可以控制行高、列寬、合並單元格, 以及調整每個cell的邊框樣式.
甚至我們可以將Excel的內容直接復制進來.
"熱區"組件:
"熱區"是一個特殊的組件, 它是透明的(即不可見), 但是有大小. 可以看作是一個隱形的按鈕, 主要是用來完成交互設計, 使用"熱區"來響應點擊等事件, 完成互動設計.
"導航"組件:
web 設計中常用, 用來展現"首頁>軟件>下載"這樣的導航效果, 導航條中每個鏈接都可以引出交互熱點.
"內容面板"組件:
這個組件有點像Delphi的Frame概念, 內容面板可以包含多個frame, 每個frame都可以關聯到其他的"頁面", 注意是"頁面", 而不是普通組件. 也就是說"內容面板"組件是頁面容器, 比如 frame1 關聯了 page1, frame2 關聯了 page2. 如果我們有兩個按鈕 button1 和 button2, 點擊button1/button2分別想跳轉到page1/page2上, 這時候, 我們可以將button1和frame1綁定, 就能達到點擊button1跳轉到 page1; 同理button2也一樣.
"彈出面板"組件:
如果想在頁面上彈出一個對話框, 可以加一個彈出面板, 該面板是一個不可見容器, 可以在容器中加入UI組件. 如果要想在某個組件上觸發一個彈出對話框, 可以將該組件和"彈出面板"關聯. 在彈出時, 彈出面板畫布會覆蓋在原來的畫布上, 達到彈出效果.
=========================
原型設計技巧
=========================
如何設定一個組件在頁面加載時隱藏?
方法1 (推薦): 加一個定時器組件, 將定時器的延時設置為 0, 再將定時器和該組件綁定即可.
方法2(不推薦): 直接將該組件設置為不可見, 這個方法的缺點是, 在設計時候該組件會變成一個淡黃色的長方形, 然后就看不出這到底是一個什么組件了.
=========================
幾個功能介紹
=========================
"數據填充"功能
在mockplus 工具條有個油漆桶按鈕, 即是數據填充.
1. 頁面上選中Text和Label等組件, 然后使用"數據填充"功能可以很方便地填寫一些文字內容, mockplus 內置了很多文本模式, 有人名/日期/郵箱/隨機文字等等.
2. 也支持圖片組件的填充
3. 支持單獨組件的填充, 也支持批量填充.
"轉換為快速格子"功能(即Repeater)
在mockplus 工具條的"格式刷"旁邊, 有一個井字形的工具, 即為"轉換為快速格子", 這個功能非常好用, 可以實現批量復制的功能. 具體操作為,在頁面上 選中一個或多個可視化組件, 然后點擊該工具按鈕, 就能形成一個小的cell, 該cell有橫向和縱向復制功能. 再配合"數據填充"功能可以很快完成大量數據的錄入.
"腦圖"功能
腦圖功能是項目樹的腦圖風格, 比較適合形成演示, 或者放到設計文檔中.
"項目模板"功能
mockplus 安裝包包含一個移動app的示例, 對於web示例, 可以在創建項目界面中, 選擇下載一個在線模板, 然后在這個基礎之上作業修改.