手機、網頁 UI 設計線上工具懶人包，初學者也能設計出好看又好用的介面

現在大部分的網站版面配置都不會太差，但 APP 阿湯卻很常遇到配色怪怪的、Icon 也很難按的情況，尤其有些店家只是出個 APP 幫忙行銷，告訴消費者「我們也有 APP 可以用唷」這種，阿湯是覺得就算你沒經驗也應該要多練習，利用這篇介紹的線上工具與資源，並以手機版為主要示範，希望就算是剛入門的 UI 設計師也能輕鬆做出漂亮又人性化的介面，讓自己與使用者都能滿意，也能為產品加分。

Live Tools

網站：請點我

首頁就說明四大分類，有按鈕、表單、圖標、絲帶四種生成器。

試試看按鈕，除了可再右邊編輯名稱、調整字體與形狀的尺寸、邊框厚度，往下看還能分別設計正常、懸停、狀態的配色。

再看一下 Icon 的部分，可置入檔案或拖入範例，尺寸、顏色也很好調整，最後除了可存 PNG 圖檔還能生成 Base64。

Fluid UI

網站：請點我

要先註冊帳號才能開始用，背景上色後，就可以開始從右邊拖入各種按鈕、圖案等任意配置，放入按鈕後也能設定 Link 的位置，可同時與其他介面一起設計。

完成的項目會收在帳戶中可隨時點開來編輯，或更改設置包括手勢等，不過免費版不能下載，只能線上儲存。

Balsamiq.Cloud

網站：請點我

要輸入 Email 註冊或用 Google 登入，除了線上版也有桌面版可下載。

以類似草圖方式來添加設計，所有元件也是從上方拖進去後再更改細節，包括文本、標籤、菜單等等，蠻容易上手。

Jetstrap

網站：請點我

提供手機、桌機或筆電模式可切換瀏覽，免費版只能線上模擬試用，也是要輸入 Email 或用社群帳號登入。

看到這裡應該會發現今天介紹的線上工具都很容易上手，依循選擇模板、拖入需要的配置並依需求自行調整，只是差別在可以轉存或只能線上試用。

Mockingbird

網站：請點我

不用註冊也能在線上使用，但有註冊功能會更完整，尤其應該蠻多人會需要與同事共享編輯，點擊圖示除了調整樣式也能設定連結的頁面。

不過線上提供的元件沒有很多，基本上就是頁面看到的這些，其他再自己調整細節。

Cacoo

網站：請點我

點免費試用會連到付費方案表，往下滑免費註冊才能開始用，除了空白版本也能選擇範本再開始，左欄可看到提供的選項相當多。

像這樣從人家做好的樣式來更改，比較適合沒頭緒的入門者，靈感可能就是隨意點擊置換來產生的。

Proto.io

網站：請點我

先輸入 Email 註冊就能免費試用 15 天，網站強調可從其他軟體例如 Sketch 或 Photoshop，選擇要設計的樣式吧，已經有最新的 iPhoneX。

招牌的黑劉海出現了，步驟跟其他工具一樣但阿湯覺得工具面版稍稍複雜一點，但也不難理解。

EZoApp

網站：請點我

阿湯也是不註冊先看看試用版功能，這款介面除了從左邊拖入設計外，右邊也會顯示 HTML、CSS、JS 代碼。

提供的範本不多但很精緻，大家可以盡情使用。

gliffy

網站：請點我

輸入 Email 開始試用 14 天，除了介面設計還有流程圖、樹狀圖等可供商務使用。

網格底可以很精確的比對物件的比例，移動時也有參考線，不過阿湯是覺得手機方面的素材比較少，倒是很適合做簡報內容的編輯。

Android Asset Studio

網站：請點我

最後來看這個專門設計 Icon 的網站，雖然標榜供 Android 使用，但做出來的成品應該是通用的，包含了啟動器圖標、APP 捷徑、通知欄的圖示等七項生成器。

各種字型、圖案樣式都能編輯，最後再存成 PNG、JPG、GIF 或 SVG 格式即可。