UI/UX工具挑選入門指南

Stephanie Kuo
Mar 29, 2017 · 6 min read

這些是一般常見的UI工具,是不是多到一個爆炸?這篇文章會超級簡單迅速的簡介這些工具到底在幹嘛的?他們有哪些特長?什麼時候該召喚誰出場?看完之後你會迅速了解什麼情況下該使出哪一種工具。

接下來我會依照以下的順序來介紹:
Wireframe -> Mockup -> Animation -> Prototype

I. Wireframe

Wireframe我推薦使用AxureBalsamiq,這兩者除了拿來畫電子板wireframe之外,都可以做簡單的動畫,點擊按鈕會連結到另外一個畫面,不過都不如真正的prototype工具來的好用。

這兩個裡面,我又更喜歡Balsamiq一點。Balsamiq的特色就是抖抖的線條,充滿童趣的手繪風,使用上也比Axure直覺。wireframe就是不能讓客戶覺得太真,不然他們就會專注在挑小細節上面,而忽略整體的流程順暢度。手繪風格就是個讓客戶覺得不會太真的好幫手。

當然自己手繪也是個好辦法,不過電子版比較容易跟其他人分享或網路協作,也不用自己慢慢畫icon,直接套現成的就好了。因為我操作軟體的速度也很快,完全不輸手繪,我自己是比較喜歡用軟體畫Wireframe。

Balsamiq介面

II. Mockup

這幾套軟體大概就是身為Visual Designer天天在用的好朋友們了。

  1. Sketch

要說Mockup的王者自然是Sketch,又便宜又強大,一年只要99鎂,學生還有半價。要說我是為了Sketch而買Mac的也不為過。

他同時結合了Photoshop圖層的特點,以及Illustrator的圖版功能,變得超級強大。

其中最強大的應該是Symbol的功能。例如你可以把常用的按鈕做成Symbol,到時候需要修改按鈕的顏色或是形狀的時候,就不用一個一個畫面去改,非常的方便。

除此之外,Sketch還有很多非常好用的plug-in。

Zeplin可以方便和工程師協作,只要把sketch檔案傳到Zeplin上面,他就會自動顯示色票、寬高,工程師就可以非常方便地確認他們需要的數值。

Craft可以直接把sketch檔案輸出到Invision做prototype,還有他會提供許多profile pictures, content。還有其他小功能等待摸索。

Sketch Plug-In

2. Adobe XD

其實我下載了很久,但還沒有機會摸過,但聽說結合了Sketch的優點,也是滿好用的,目前Beta版免費測試中,沒有Mac的人可以嘗試看看。

3. Photoshop

Photoshop強大的修圖功能就不多說,有時候做mockup也需要統一圖片色調,或是裁圖、修圖、把畫面合成到手機螢幕上之類的,還是滿常用到的。

我會用Photoshop做網頁mockup,因為Cut&Slice me切圖太強大。但完全不推薦使用Photoshop做手機畫面,因為手機畫面常常需要同時看多個畫面,PS沒有圖版功能,做起來會很崩潰。

以下介紹幾個好用的plug-in:

Photoshop Plug-in

WebZapVelositey都是方便快速畫格線跟分區塊的工具,差別在於Velositey免費。

Cut&Slice me是一套切圖神器,只要把圖層依照規則命名好,按下一個鍵就可以一口氣全部輸出,還可以培養出良好的圖層命名習慣。要說是我是為了Cut&Slice me而選擇用Photoshop做網頁也不為過。

5. Illustrator

我只推薦用Illustrator畫icon。雖然畫icon會用到的功能Sketch基本上都有,但還是Illustrator用起來順手,快捷鍵也多,在畫複雜的icon時還是滿方便的。

BUT!!!千萬不要用Illustrator做mockup!!!!!!!!!!!!!!!!!!!

很多從平面轉UI的設計師會很習慣用Illustrator做圖,但是用Illustrator切圖真的會切到崩潰,真的會崩潰,請相信我。Illustrator的圖層功能難用到爆炸,要切圖還只能一個一個開新畫板,然後又無法拉出準確的寬高,切圖速度大概是SketchPhotoshop的十倍吧。

曾經接受過上一個設計留下來的網頁ai檔,最後把東西一個一個貼到PS上重新做了一個版本,那時候真的是欲哭無淚。

拜託!求你了!千萬不要用Illustrator做mockup!!!!!!!!!!!!!!!!!!!

6. InDesign

還有一些公司會要求用InDesign這套排版軟體來做UI Design,到底好在哪裡,對我來說至今仍是個謎……

III. Animated Interaction

有時候用文字敘述很難表現出自己想要的動畫效果,這時候我就會用HTML/CSS寫我想要的動畫。Codepen上可以找到很多範例,可以直接拿過來改,改好之後直接傳給工程師說,我哪個地方想要用這個動畫。好處是工程師可以直接看每個transition是幾秒,不用看著一個GIF自己在那邊猜。

IV. Prototype

InvsionMarvel的介面基本上差不多,都是直接在輸出的jpg檔上面畫框框,連到另外一頁。操作非常簡單,任何人一分鐘都能輕鬆上手。除了可以在網頁上顯示之外,也有專用的APP,讓你的設計看起來跟真的APP有87分像。主要是在做User Testing的時候會使用這兩個工具。大家可以玩玩看下面的範例。

https://invis.io/3XAA2ZQ9A#/217097140_2_Set_Up_Night

目前看起來是Invision比較具有優勢,因為可以直接把Sketch輸出,不用先輸出到自己的電腦再上傳一次。

另外,工程師友人覺得直接用Swift coding也很快,供大家參考。

給直接end的你:

總之,現在立刻刷下去買Sketch就對了。

Stephanie Kuo

Written by

從冰天雪地的密西根HCI畢業之後,現在在矽谷為一間B2B公司做UX Design,天天為系統管理員做設計。希望能用中文和更多台灣人分享UX。http://www.stephkuo.com/

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade