2018
04
12

UI/UX工具挑選入門指南[轉載自Stephanie Kuo(As A Product Designer)]

關鍵字:網頁設計

I. Wireframe

 
 

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

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

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

II. Mockup

 
 

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

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

Adobe XD

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

Photoshop

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

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

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

 
 

※ Photoshop Plug-in

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

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

Illustrator

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

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

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

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

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

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就對了。

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.