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

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

LiveTools 網站：請點我 首頁就說明四大分類，有按鈕、表單、圖標、絲帶四種生成器。

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

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

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

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

Balsamiq.Cloud 網站：請點我 要輸入Email註冊或用Google登入，除了線上版也有桌面版可下載。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  線上工具Cacoo懶人包UI設計LiveToolsFluidUIBalsamiq.CloudJetstrapMockingbirdProto.ioEZoAppAndroidAssetStudiogliffy 你可能對這些內容也有興趣 上一篇：nPlayer–全能高清播放器APP，支援多種編碼、遠程播放、外掛字幕 下一篇：Apple推出重點教學影片，幫助iPhoneX使用者更快上手 作者：阿湯 對電腦&網路資訊充滿興趣與熱情、瘋了似的每日堅持發文，「阿湯」這個名字是由湯姆克魯斯而來的，雖然我沒有他帥氣，也不會演電影，但我會寫文章.... 更多關於阿湯的文章》 0留言▼ 發表留言» 點擊這裡以取消回覆 姓名(*) 信箱(*) Δ 最近大家都在看 歡迎加入粉絲團 就是教不落-阿湯 最新文章 文章分類文章分類 選取分類 淘寶敗家誌  (74) 開箱文&評測  (849)    氣炸鍋快速上桌系列  (1)    電腦&週邊  (113)    生活&家電  (246)    視聽&娛樂  (44)    Mobile&週邊  (316)    軟體&APP  (59)    其它類型  (51)    相機&週邊  (15)    汽車&機車  (22)    親子&教育  (3) iOS相關  (924)    JB越獄及相關應用  (27)    iOS相關教學  (149)    iOSAPP  (605)    iOS遊戲  (116)    APPLE新訊  (30)    Cydia軟體  (9)    設備管理軟體  (3) Android相關  (972)    AndroidAPP  (791)    Android遊戲  (125)    Android教學  (58)    Google新訊  (3) 電腦小教室  (715)    Windows相關教學  (140)    Office相關教學  (236)    SEO相關教學  (7)    MacOS教學  (87)    網頁相關  (18)    網路相關教學  (61)    Gmail相關教學  (18)    Google相關教學  (115)    瀏覽器相關教學  (24) WindowsPhone  (41)    WindowsPhone軟體  (22)    WindowsPhone遊戲  (2)    WindowsPhone相關教學  (13)    WindowsPhone新訊  (1) 電腦軟體  (1,447)    Office  (19)    網路工具  (138)    防毒軟體  (74)    多媒體影音  (89)    系統工具  (293)    瀏覽器  (379)       Edge瀏覽器  (2)       IE瀏覽器  (30)       Firefox瀏覽器  (76)       Safari瀏覽器  (11)       Chrome瀏覽器  (286)       Opera瀏覽器  (11)       其它瀏覽器  (10)       瀏覽器工具  (18)       百度瀏覽器  (1)    影像處理  (126)    郵件軟體  (3)    文書處理  (62)    光碟燒錄  (13)    桌面佈景  (16)    即時通訊  (32)    翻譯軟體  (5)    打字軟體  (8)    帳務軟體  (1)    資料夾管理  (26)    壓縮軟體  (13)    其它工具  (80)    桌面工具  (42)    部落格工具  (4)    MacOS專區  (107)    手機工具  (13)    作業系統  (12)    網頁設計軟體  (3)    Linux專區  (5)    Windows8APP  (1) WordPress  (129)    WP-plugins(外掛)  (50)    WP-themes(佈景)  (40)    WordPress筆記  (34) 網路大小事  (905) 線上工具/服務  (861) 雲端服務  (63) 網路社群  (277) 旅遊&美食&活動記事  (97) 遊戲相關  (112) 未分類  (6) 教不落友站 流氓夫妻生活   ↑