2017年6月29日 星期四

Pencil 免費開源原型設計軟體,內建網站、 App 原型設計圖庫


我雖然不曾擔任過開發網站、應用軟體的專案經理或設計師,但是也曾經從內容編輯、創作者的角度,參與過一些網站、 App 規劃的討論,那時候為了比較清楚的表達自己期待中的「圖形使用者介面(GUI)設計樣貌」,除了有時手繪草圖外,也曾經利用「原型設計工具(GUI prototyping tool )」來繪製出網站和 App 的原型草稿。

當然,因為上述原因,我的需求比較沒有那麼專業,對我來說簡單易用,可以表達出腦中概念就夠了。

而今天,就要來介紹一款可以解決我自己問題,相信也能解決你的問題的「原型設計軟體」:「 Pencil 」,這是一款單機軟體,免費開源,可以免費商業使用,並且同時支援 Windows、 Mac 與 LInux 平台!




  • 這篇文章的前因後果:

「前因」:我之前在電腦玩物介紹過「好用原型設計軟體 Mockplus 免費畫互動 App 與網頁」,那是一個雲端為主的線上工具,有比較好看的介面設計元素。而今天介紹的「 Pencil 」比較老派傳統,但卻是一個單機可用的軟體。

「後果」:如果你喜歡使用單機軟體,還可以參考我的這一篇總整理:「免費軟體下載推薦懶人包,電腦玩物的 50+ 單機軟體短評清單」。




Pencil 」已經可以算是一款老牌的原型設計軟體,從早期的 Windows 電腦軟體介面開始,慢慢加入了網頁原型設計功能,近幾年也增加了手機 App 開發的模型。

與時俱進,讓「 Pencil 」可以做出網站或 App 的示意草圖、流程圖、互動設計,並且目前軟體本身都還有在持續更新




作為一款 GUI 原型設計軟體,「 Pencil 」內建了各種設計元素,包含網頁圖示、電腦軟體圖、手機 App 圖庫等。

只接從左方的圖庫拖曳,就可以把各種元素拖曳到右邊的編輯區,進行整合排列。




但還是可以看到「 Pencil 」有些圖庫有點老舊,例如 Android 與 iOS 的圖庫都還是舊版介面。

這時候,「 Pencil 」除了可以讓你自己匯入圖庫外,還能線上下載更多圖像元素。打開最左下方的「圖庫按鈕」,選擇要「 Install from Repository 」。




在線上圖庫中,就有像是 Android 比較新版的介面元素可以選擇。




除了利用「 Pencil 」建立網頁、 App 的原型畫面外,他也支援利用超連結建立操作互動流程

例如我可以在一個按鈕上設定「 Link To 」,然後指定當點擊這個按鈕後,要開啟到第二的原型設計頁面。




「 Pencil 」還支援導出各種檔案格式,從簡單的圖片、 PDF ,到可以互動操作的 HTML 網頁格式




如果我導出成網頁 HTML 檔案,那麼我就可以在瀏覽器中打開這個應用程式原型,並且根據我前面設計的「超連結」,進行互動操作的測試。




除了網站與 App 原型設計圖外,「 Pencil 」也支援畫流程圖,這也是在應用程式開發過程中需要的,先畫出這個應用的互動與資料架構。




最後,在繪製流程圖或設計原型草圖時,可以利用「 Pencil 」內建的大量免費美工圖庫,透過搜尋關鍵字,找到自己需要的圖示,用到自己的設計中,當作填充材料或示意圖。

  • 如果你是搜尋而來,說不定你想找的,還想學的是:




作為一款免費、開源,且跨平台的單機軟體,「 Pencil 」能夠滿足原型設計的基本需求,功能簡單好上手,在繪製網站原型草圖、 App 原型草圖、網站架構流程圖時方便易用

而且還支援匯出成圖檔、 PDF 與 HTML 網頁,並且可以讓我們在 HTML 網頁上測試互動操作流程,說不定對你來說,也能幫你畫出有點專業的原型草圖。

「 Pencil 」下載網站

*感謝您閱讀電腦玩物 Esor 的文章,電腦玩物專注人性化的高效率工作方法,您可以追蹤「電腦玩物 Facebook」,或是參考 Esor 的改進工作效率相關「課程」、「書籍」,更歡迎把電腦玩物加入你的 RSS 訂閱清單。

(轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:Pencil 免費開源原型設計軟體,內建網站、 App 原型設計圖庫

喜歡這篇文章嗎?歡迎追蹤我的FacebookTwitterGoogle+,獲得更多有趣、實用的數位科技消息,更歡迎直接透過社群聯繫我。



from 電腦玩物 http://www.playpcesor.com/2017/06/pencil-app.html

沒有留言:

張貼留言