電腦玩物

Canva 是現在非常多人使用的線上設計工具 ，透過大量的範本與素材，就算不是專業設計師，只要組合各式各樣的模板，也能快速產生可用的圖像，無論是用在網頁文章中的解說圖片、YouTube 影片的封面，各種社群上的圖文搭配，都能節省許多時間。還能製作流程圖、文件報告、協作白板、影片編輯等等。 尤其陸續添加的 AI 功能，讓 Canva 對一般人來說更好上手設計圖文影音的工作流程。

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

其實電腦玩物在 2018 年就介紹過這款工具：「 Whimsical 複雜想法用圖解簡單傳達：多合一可協作圖表工具 」，經過了 3 年， 「 Whimsical 」除了有不少改進外，最近重新使用，發現他的順暢度與「免費版就能實現的強大功能」，可以說是目前對一般用戶來說上手門檻低、又非常好用的流程圖、心智圖、設計圖等線上白板繪圖工具選擇。

你有沒有做過這樣的事情，想跟設計者描述一個你想要的顏色，於是說：「在黃昏夕陽下看海的那種感覺的顏色。」有可能設計者很想打你，這樣的「感覺」，到底可以是什麼顏色呢？

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

如果團隊之間想要溝通進度流程，可以使用「 Trello 」這樣的專案溝通工具。如果團隊之間想要即時討論與交代任務細節，可以用「 Slack 」取代郵件與即時通。若是團隊之間需要文件內容的協同合作，則有「 Quip 」、「 Dropbox Paper 」或「 HackMD 」等各種工具選擇。 那麼如果你需要的是一個團隊的「 視覺溝通 」流程時，例如設計封面海報，而覺得大多雲端協作服務都少了「 視覺啟發 」，那麼或許可以試試看這個「 Niice 」服務。 「 Niice 」是一塊視覺收集、圖像搜尋與設計管理的專用看板，它可以讓你在上面排序、討論、關聯各種設計圖，甚至還有人工智慧分析功能幫你「刺激靈感」，而且用在團隊或個人使用皆可。

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

之前我在「 到這裡找色彩設計靈感！12個設計師必備配色表網站 」一文中介紹了許多線上的選色、配色網站，但是這些工具大多只是提供隨機產生的配色表，雖然有符合配色邏輯，或是可以找出類似顏色，但比較缺乏具體的產品色彩建議。 而今天看到一個新的線上工具： 「 Culrs 」，他號稱可以提供設計者真實有效的配色建議 ，因為網站中 根據不同的目標客戶、產品性質、情感特性、流行趨勢、文化地區 ，提供了各種類型的具體配色表，總計超過數百組。 甚至還有依據不同作業系統，不同網站設計需求而提供的熱門配色風格，很值得設計者們參考。

和我前幾天在「 台灣開發幫你工作加分的 16 款生產力工具推薦清單 」一文中介紹過的「 Himelight 設計吸睛履歷表，個人化履歷格式範本下載 」類似，「 CakeResume 」也是一個台灣團隊開發的線上履歷設計工具。 在幾次的版本更新中，目前「 CakeResume 」成為一個介面非常舒適易用的履歷編輯器，它提供了大量精美且不同主題的「履歷範本元素」，有個人簡介、經歷表、技能表、照片牆等等，然後你只要像組合積木一樣拖拉組合這些元素，就能製作出屬於自己獨一無二的履歷表。 而且這份漂亮的履歷表不僅製作輕鬆，還能讓你免費線上分享，或是免費下載成 PDF 履歷文件。

顏色是設計工作中不可或缺的關鍵之一，我自己的工作經驗裡，當和設計師溝通如何設計網頁、排版書籍時，有時就會需要用到顏色代碼，例如和設計師詢問這設計的顏色是多少 RGB 或 CMYK 數值？而我希望可以微調成多少的數值？ 比起說我想樣更溫暖的黃色，直接說試試看 rgb(237, 226, 23) ，或是 #ede217 ，這樣溝通起來是不是更加明確？ 像是我之前介紹過的「設計配色網站」：「 到這裡找色彩設計靈感！12個設計師必備配色表網站 」，當我們找到自己喜歡的配色風格後一樣是獲得 HEX、 RGB 等顏色代碼，這樣才能準確地與設計進行確認。 那麼，如何在眼睛所見、腦袋所想的實際顏色，與科學的 RGB、 HEX、 CMYK 等數值之間進行轉換呢？ Google 搜尋現在就 內建 了這樣的顏色代碼轉換查詢小工具 ！

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

靈感不可能憑空產生，一定是透過一些外在的刺激與連結，從而讓自己的腦袋裡有了新的想法，所以創意生成的過程，參考別人的範例是一條必經之路，無論是設計、書寫、開發、生產都是如此。（參考： 不會靈光一現的東西正是靈感，生產好點子的五個方法 ） 今天要推薦的這個服務： 「 Collect UI 」，正是以每日激發介面設計師新靈感為目的而架設的網站。 他不是提供可以下載的 免費介面設計素材 ，也不是提供 免費的網頁版型套用 ，但或許對網頁設計師來說更重要，因為「 Collect UI 」透過每日更新的創意介面設計範例，提供設計師們在設計登入頁、付費頁、 Landing Page、404頁面等不同網頁時的靈感刺激。 「 Collect UI 」有一段自我描述說得很好，他說這裡收集的創意設計不代表就一定是最完美的 UI ，有些甚至可能是美感空想大於實際用途的設計奇想，但正是因為有這些自由發揮的範例，所以設計師們可以從裡面找到一些點子，找到一些自己腦袋打結時可以多一些想像的空間。

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

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

當你看到一個很棒的 App 介面設計，想要知道他使用了哪些 配色 ？手機上瀏覽了一些網站，想知道讓你驚豔的版面用了什麼顏色？剛剛拍下的照片，立刻就想查出照片裡景物的色碼？但是如果還要先截圖，然後才能打開其他 App 或傳回到電腦去查詢，實在有點麻煩。 「 Pixolor 」這款免費的 Android App 正是要解決上述問題的螢幕取色器， 最大特色就是「 Pixolor 」是一個「即時的」螢幕取色器 ，透過漂浮的氣泡放大鏡，我們可以立即知道畫面上任何 App、 網頁、照片中的顏色代碼。 這對 設計師 來說應該很有幫助，對程式開發者、網頁開發者來說也是便利的配色輔助工具，即使像我的工作不是在設計，但有時候依然要跟設計師溝通：「我想要用什麼顏色」，這時候從手機直接就能獲得參考畫面的色碼，不失為一個便利管道。

回到總目錄： [年度精選]比軟體更強悍 33 種文書繪圖免費線上工具 當你準備設計一個「 網站首頁 」、「 書籍封面 」、「 海報視覺 」，甚至是每個人都會遇到的「 簡報頁面設計 」時，「顏色」可能是一個比放了什麼漂亮圖片更重要的元素，網路上有很多討論色彩心理學的文章都說準確的、舒適的色彩應用可以產生迷人的印象。 我自己也不是色彩設計的高手，但最近在研究設計師們會如何選色、配色時，發現了許多 線上的自動配色網站 ，這些網站提供了很多聰明的選色器工具，或是很多具有創意的配色表，可以提供許多「原來可以、應該這樣配色」的好建議，甚至激發設計師們的色彩搭配靈感。 所以今天這篇文章，就讓我把這段時間收集研究的成果，一起分享出來給需要的朋友，或許因為我不是設計師所以下面的解釋不夠專業，但相信這些免費的線上配色表、選色器服務，對設計師們一定有所幫助。

最新更新 ： 2017年 Android App 下載推薦（下）：60+需求200+工具總整理 前一陣子看到 Google 在 Google Play 商店開設了一個新的網頁：「 Best-In-Class Android Design 」，裡面精選了十幾款 Google 認為最能體現 Android 設計精神的 App 推薦，這讓我也起心動念，想要來寫一篇關於那些可以 體驗 Android 最佳介面設計 的 App 精選下載清單。 雖然一般的新聞媒體大多認為 iPhone 的 iOS 系統有更漂亮的設計，但是其實 Android 在這幾年來也有走出自己「獨特的設計風格」，加上 Android 上一些獨特的功能，其實我們一樣可以在 Android 上的許多經典 App 裡享受到非常棒的使用體驗，只是這個體驗的模式不一定和大家看慣的 iOS 相同而已。 所以我才想再來寫一篇體驗 Android 最佳介面設計的 App 精選下載清單，讓使用 Android 的朋友，可以更徹底地從好用的 App 中了解 Android 也是可以用起來很順暢動人的。

正在開發一個網站、一款 App ，想要跟設計師與工程師協調產品的畫面規劃？正在製作一本新書封面或一張活動海報，想要跟設計師溝通草稿上的細節修改？上述這樣的「設計溝通」需求常常在工作上發生，但如果大家不是在同一個辦公室工作（尤其現在設計常常可能是外發作業），沒辦法聚在同一間會議室的大白板前針對每一個視覺細節做具體的討論，那麼就可能常常發生設計溝通不良的問題。 今天，要跟大家分享一個雲端的團隊合作服務：「  Conceptboard 」，它可以取代會議室裡的大白板，讓團隊不需要在辦公室裡也能透過自由的雲端黑板來進行圖文討論，尤其特別適合用來開產品的設計會議，讓需要視覺討論的合作變得更加簡單直覺。

真正的設計師有自己慣用的設計軟體來完成真正具備商業性或藝術性的作品，這樣的專業設計是一回事，不是本文要討論的設計。因為在專業設計的另外一面，許多職場工作者（包含上班族、專案經理、行銷企劃、學校老師）如果仔細回想自己過去的工作經驗，應該都會發現偶爾總是會忽然跑出一些 跟設計有關的工作任務 ，例如： 要製作一份校內文宣、要在社內簡報裡畫一些漂亮圖表、要畫一張公司內活動海報、要在團隊溝通時畫出我想做的產品原型圖。 雖然我們不是專業的設計師，但「設計」這個需求無所不在，無論是工作上、生活中隨時都需要「一些小設計」，就算是我在會議簡報裡一張簡單的圖表，如果可以活用有效的工具來設計，不僅能呈現出更好的效果，其實也比我自己用不適合的工具來畫，要節省更多的時間精力。

回到總整理目錄： [年度精選] 辦公室裡一定用得上的100種免費資源下載 在電腦玩物寫完「 向量圖庫免費下載！設計師一定要知道的五個專業圖庫 」一文後，我發現這些向量圖庫裡有一個很大的類別是關於 ICON 圖示的使用，於是，便開始研究工作上用得到的更進階 ICON 圖示 免費下載 、 搜尋圖庫 服務。 我自己在多年前寫過「 Icon Download 三個最棒的圖示搜尋引擎,免費網頁素材圖庫下載 」，記得那時候是為了製作部落格版型，而去研究哪裡可以下載網頁版型上用得到的 ICON 按鈕素材。