我雖然不曾擔任過開發網站、應用軟體的專案經理或設計師，但是也曾經從內容編輯、創作者的角度，參與過一些網站、 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 」內建的大量免費美工圖庫，透過搜尋關鍵字，找到自己需要的圖示，用到自己的設計中，當作填充材料或示意圖。
- 如果你是搜尋而來，說不定你想找的，還想學的是：
1.更多設計工具：懂設計更有競爭力！職場必學10種免費線上設計軟體
2.室內設計工具：用這款免費室內設計軟體，畫出設計師般精美設計圖
3.商用流程圖軟體：yEd 免費下載商業使用流程圖軟體！自動排版超好用
作為一款免費、開源，且跨平台的單機軟體，「 Pencil 」能夠滿足原型設計的基本需求，功能簡單好上手，在繪製網站原型草圖、 App 原型草圖、網站架構流程圖時方便易用
而且還支援匯出成圖檔、 PDF 與 HTML 網頁，並且可以讓我們在 HTML 網頁上測試互動操作流程，說不定對你來說，也能幫你畫出有點專業的原型草圖。
「 Pencil 」下載網站
＊感謝您閱讀電腦玩物 Esor 的文章，電腦玩物專注人性化的高效率工作方法，您可以追蹤「電腦玩物 Facebook」，或是參考 Esor 的改進工作效率相關「課程」、「書籍」，更歡迎把電腦玩物加入你的 RSS 訂閱清單。
（轉貼本文時禁止修改，禁止商業使用，並且必須註明來自電腦玩物原創作者 esor huang（異塵行者），及附上原文連結：Pencil 免費開源原型設計軟體，內建網站、 App 原型設計圖庫
Source:: playpcesor.com
