現在大部分的網站版面配置都不會太差,但 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 格式即可。