[分享] 網頁 UI 設計苦手的實用工具包

2013年1月9日

在許多中小企業或是個人工作室裡製作網站經常是一條龍式的「垂直整合」:工程師得身兼架設伺服器、資料庫甚至是... 介面設計。介面設計對許多缺乏美感的阿宅工程師來說這是一大挑戰,因為多數的情況下老闆/產品經理看不懂 Database schema ,但是卻能一眼看出網站漂不漂亮。以下分享一些個人常用到的工具/資源給有相同困擾的工程師。

免費工具

Pencil Project

Pencil Project 是正港免費的 Wireframe 軟體,也是我目前使用的主力工具。它需要下載安裝,支援 Windows、Mac、Linux 平台,也提供 Firefox 外掛。使用草稿除了非常方便溝通外,使用 Pencil Project 預先定義好的 UI 元件也能避免老闆/客戶/產品經理想出太前衛的介面。

Cacoo

與 Pencil Project 不同的是,Cacoo 是一個「網站」工具,只要有瀏覽器就能使用。Cacoo 提供付費加值功能,如果是個人使用的話,免費版本也算很夠用了。

付費工具

Balsamiq

Balsamiq 可以做出高品質的手繪風格草稿設計圖,介面很容易上手。不考慮價格的話,Balsamiq 絕對是首選推薦軟體。註冊 Balsamiq 帳號可以獲得 30 天試用期,您一定要試試看!

Mockingbird

Mockingbird 也是網站形式的工具,可以線上免費試用,如果要取得所有功能需要付費

其他工具

Yahoo! Design Pattern Library

非專業的 UI 設計人員常常用錯 UI 元件,其實每個 UI 元件都有其背後隱含的意義,而這些細節往往是介面好壞的關鍵。如果沒有受過專業的 UI 設計訓練的話,請趕快上 Yahoo! Design Pattern Library 惡補一下。裡面有對介紹每個 UI 元素與建議用途,有了這些背景知識,設計出的介面絕對會更上一層樓!

Flickr

使用高品質的圖可以讓網站的質感大加分,不過臨時要用才出外景可能趕不上專案時程。Flickr 提供大量高品質的圖片,但是要特別注意照片的授權。如果是公開用途的話,在 Flickr 搜尋的時候別忘了將 "Only search with Creative Common-licensed content" 選項打勾,以免不小心侵權喔!

IconFinder

一些漂亮的小圖示可以達到畫龍點睛的效果。對於許多缺乏美感,無法使用 Photoshop 自製 Icon 的阿宅工程師來說,直接來 IconFinder 找素材是最快的了。

UI Cloud

有時候要做一個 UI 元件(如搜尋框、下載按鈕),但是又不曉得該如何設計樣式才會好看,此時 UI Cloud 可以幫上忙。在 UI Cloud 可以找到各種不同的 UI 元件設計,非常適合設計新手找靈感。

Reference

  1. 製作wireframe的免費工具
  2. 讓你的簡報脫胎換骨 ─ 《簡報藝術2.0》
  3. 60 User Interface Design Tools A Web Designer Must Have
  4. imockups for ipad - $6.99
  5. 網頁設計,怎樣最美?
  6. 網頁介面設計師的好用工具們
  7. [簡報] 用原型驅動設計@WebConf2013
  8. 那些mockup沒告訴你的事@WebConf.tw 2013

0 意見 :

Related Posts Plugin for WordPress, Blogger...