電腦玩物

要開始討論宣傳網頁的版面，要確認新產品網站的 Landing Page 規劃，或是要思考產品 App 初期的功能架構，還是任何跟設計初期的版面架構規劃有關的草圖需求，這時候都可以先畫出一個「 Wireframe 線框圖」， 在這樣的「 Wireframe 線框圖」中還不需要太精細的設計或真的做出功能，反而是先用簡單的線條畫出草稿，讓大家腦中的想法有一個基礎但具體的討論圖像即可。 這樣的「 Wireframe 線框圖」除了手繪，或是用任何可繪圖軟體（例如簡報軟體）製作外，也有專門的「 Wireframe 線框圖」工具。

線上圖片設計工具很常見，其中我最常使用的是 Canva ，我也在電腦玩物撰寫過這個線上工具的不同利用教學： Canva 日常的設計家：簡報海報、資訊圖表免費製圖 不只是設計工具， Canva 協作圖表報告、專案企劃、筆記範本教學 3分鐘完成一張小孩生日卡、邀請卡，可搭配的免費工具教學 類似的工具也不少， 今天要分享的「 Polotno Studio 」，也是其中一款另類的替代選擇。

我雖然不曾擔任過開發網站、應用軟體的專案經理或設計師，但是也曾經從內容編輯、創作者的角度，參與過一些網站、 App 規劃的討論，那時候為了比較清楚的表達自己期待中的「圖形使用者介面（GUI）設計樣貌」，除了有時手繪草圖外，也曾經利用「 原型設計工具 （GUI prototyping tool ）」來繪製出網站和 App 的原型草稿。 當然，因為上述原因，我的需求比較沒有那麼專業，對我來說簡單易用，可以表達出腦中概念就夠了。 而今天，就要來介紹一款可以解決我自己問題，相信也能解決你的問題的「 原型設計軟體 」：「 Pencil 」，這是一款單機軟體，免費開源，可以免費商業使用，並且同時支援 Windows、 Mac 與 LInux 平台！

在電腦玩物中大多是根據我自己的興趣，隨意研究的寫一些文章，所以有時候相關聯的文章都很分散，雖然有用「標籤」來整理（例如： 簡報設計 標籤），不過難免沒有次序。 這其實跟我在 Evernote 與 Onenote 中討論整理方法時很像（ 分析 Evernote 與 Onenote 兩種截然不同的筆記整理邏輯 ），這時候，就需要一篇目錄來做一個統整。（參考： Evernote 整理3部曲-2：應該優先採用目錄清單分類法 ） 就讓我來試試看這樣整理的效果吧！先從簡單的嘗試開始， 把我寫過的設計工具與設計資源，整理成一篇總目錄，並且讓這篇懶人包可以在 電腦玩物 「 保持更新 」 。這樣無論我自己或讀者要查詢起來也方便得多。

今年初我在電腦玩物推薦過「 Smartmockups 快速合成網頁與 App 使用情境照片 」這個免費線上服務後，我自己發表文章時就常常利用這個工具來製作「合成照片」，把網頁截圖或 App 截圖合成到使用情境照片中，創造更好看的文章主圖。 基本上「 Smartmockups 」提供的免費情境照片多，橫跨 Windows、 Mac、 Android 與 iOS 裝置，算是我目前看過最好用的免費合成照片工具，尤其在合成 3C 產品上比 FotoFunia 等類似合成照片工具更專業。 而今天要補充推薦另一個類似工具：「 Magic Mockups 」，老實說他的情境照沒有「Smartmockups 」豐富，但是卻多了一個特色： 一張照片裡有筆電、手機雙螢幕，可以同時製作網頁與 App 雙機合成照。

這個工具對於社群媒體編輯、網路文章作者，乃至於網頁設計、 App 開發者和產品行銷者來說，都是一個簡單但有用的好工具。「 Smartmockups 」，乍看之下或許你第一時間不知道他要幹嘛，其實他就是要幫你 快速合成各種網頁與 App 的情境照片！ 例如我在寫文章時，常常介紹到一些 App 與網頁，如果只有秀出單純截圖，好像還不足以作為文章的開頭主圖，這時候如果可以把 App 或網頁的畫面嵌入到一張使用情境照片中，或是真的去拍一張使用情境照片，那味道就會全然不同，只是，我們不一定有那樣的時間，也不一定拍得出那麼精緻的情境照。 這時候，「 Smartmockups 」就派上用場了，我只要在網站上提供的手機、電腦、筆電各種裝置情境圖中選一張滿意的照片，然後上傳我的 App 或網頁截圖，「 Smartmockups 」就會幫我瞬間完成合成，提供給我一張高解析度的產品情境照片！而且完全免費也不須登入。

我之前曾經介紹過一個「 免帳號登入的線上室內設計圖工具 」，獲得很大迴響，這類的免洗工具雖然功能不比專業軟體，可是就很適合來滿足簡單、臨時的需求，省去那些麻煩的步驟，甚至省去學習操作的時間，就能快速製作出一個「可用」的成品，這樣工作才能快速推進。 類似的概念，也符合今天要推薦的這個線上版的網頁原型設計工具：「 quickMockup 」，他看起來很簡單，但是相對操作起來很快速流暢；他沒有太專業功能，但也不需要註冊登入；他提供的素材不算多，但剛好夠用，而且任何人不需學習就能快速上手。 「 quickMockup 」正如其名，他的目的是讓我們簡單快速畫出一個網頁或介面設計草圖 ，然後可以立刻分享給團隊夥伴溝通討論。他不是要當專業設計工具，但是臨時需要，還真的能快速滿足需求。

當你正在規劃一個網站的版面設計、想要製作一個活動網頁、想要上線一個購物網頁，這時候或許需要從其他網站的設計中尋找一些靈感啟發，那麼， 平常有沒有什麼好工具可以幫我們「收集網頁設計靈感」呢？ 我立刻想到一些方法，例如就單純用瀏覽器的書籤儲存這些網站的網址連結？ Google 最新版書籤 也能顯示部分網站預覽圖，但還是無法把真正需要的「畫面」儲存下來。或者 用 Evernote 擷取網頁 ？但是 Evernote 不能拍照長網頁，一般網頁擷取也無法完美保留版面格式。 上面的問題讓我們可以思考，什麼是網頁設計師需要的網站書籤工具？這樣的書籤工具目的不只是記下網址而已，而是要「拍下畫面」。而今天要介紹的「 Hypershoot 」或許就是一個為了幫網頁設計師收集靈感而誕生的書籤工具。

在 2011 年我介紹過「 Cacoo 線上中文免費畫流程圖軟體，即時協同設計多種企劃草圖 」後，我自己就一直有使用「 Cacoo 」這個來自日本的雲端服務。我主要用它來畫一些設計類的圖形，我可以線上畫出草圖架構，然後透過雲端協同合作的方式，與設計師針對草圖進行明確具體的溝通： 免費版就能與他人線上協作，也是 Cacoo 的一大特色。 而當電腦玩物近期也介紹了許多線上圖表的繪圖工具，包含： Draw.io 中文線上製作流程圖首選！專業水準完全免費 Coggle 最好用免費線上心智圖軟體教學：簡單卻強大 好用原型設計軟體 Mockplus 免費畫互動 App 與網頁 creately 線上圖表軟體：免費套用數千資訊圖表範本 夠用才是更好用！ Google 繪圖解決團隊協作圖表需求 有朋友問我會怎麼選擇？還是會繼續使用 Cacoo 嗎？ Cacoo 最大特色就是他可以畫出上述所有類型的圖表，包含流程圖、心智圖，也可以畫網頁或 App 的設計草圖，甚至還能畫 室內設計圖 。

我很喜歡 Paper 這款免費手繪 App 的核心衷旨：「讓每個人都可以成為創作者。」在之前電腦玩物寫過的這篇「 懂設計更有競爭力！職場必學10種免費線上設計軟體 」文章裡，我提到即使我們大多數人不是從事設計工作，但工作上的簡報、文章裡的圖表、溝通產品的原稿等等，許多職場的任務都需要「設計」的技巧。 而這時候像是 Paper 或前述文章裡提到的設計軟體，可以讓即使不熟悉創作技巧、缺乏美感專業的工作者，也能做出「有那麼一點樣子」的成果。以「 Paper by FiftyThree 」這款 App 來看，透過各種不同筆觸的筆刷、自然的水墨渲染效果，加上 Paper 最新版內建的 Think Kit 工具 ，我們可以在數位螢幕上輕鬆畫出有模有樣的手繪圖稿，甚至是精細的心智圖、流程圖、原型設計草圖這類手繪圖表！ 2015/9 新增： Paper 終於有 iPhone App！3.0 版將取代你的優美手帳

之前雖然在電腦玩物中介紹過一系列強大的線上圖表製作工具，像是特別適合設計專業流程圖的：「 Draw.io 」，或是擅長畫出實用心智圖的：「 Coggle 」，還有設計網頁、軟體介面的專職工具：「 MockPlus 」等。 但是，我也常常說：「要依據自己的需求等級選擇夠用就好的工具。」就像如果我只是想要裁切一張圖片，與其打開 Photoshop ，不如用小畫家就能解決，這樣的工作流程裡其實節省了開啟大軟體可能耗費的效能與時間，節省了學習自己用不到的專業功能的時間。 那麼，如果你畫流程圖、畫心智圖、畫網頁原型圖，或是畫任何圖表的需求沒有那麼多、沒有那麼專業，但偶爾要用到時，或許一個「夠用就好」的圖表製作好工具，就是我們平常已經習慣使用的 Google Drive 中內建的「 Google 繪圖」。

前幾天在友站 小眾軟件 上看到一個免費易用的 原型設計軟體 ：「 摩客 Mockplus 」，由大陸團隊開發，在去年（2014）下半年推出，是一個同時具備線上版、 Windows 與 Mac OS X 電腦版的 Prototype 設計工具， Mockplus 自詡為：「 如果把 Axure 看作一頭大象，Mockplus 是一隻輕快的小鹿。」 原型（ Prototype ）設計，可以幫助專案企劃時有效的溝通網頁功能、軟體介面、 App 互動，透過畫出原型，讓產品經理、設計師、程式開發師、主管、客戶之間能夠了解產品本身的使用流程，把想像或文字化為具體可用的示範。 相比許多其他 Prototype 原型設計工具，「 摩客 Mockplus 」這個軟體最大特色就是非常簡潔易用，並且可以設計出「 具備實際操作互動功能 」的 App、 網頁、軟體原型，兼顧了專業與好上手，免費版就基本上夠用，值得有需要的朋友試試看。