fbpx

手機、網頁 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 格式即可。

 

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

0 留言

發表留言 »

姓名(*)
信箱(*)