UI/UX工具挑選入門指南
這些是一般常見的UI工具，是不是多到一個爆炸？這篇文章會超級簡單迅速的簡介這些工具到底在幹嘛的？他們有哪些特長？什麼時候該召喚誰出場？看完之後你會迅速了解什麼情況下該使出哪一種工具。
接下來我會依照以下的順序來介紹：
Wireframe -> Mockup -> Animation -> Prototype
I. Wireframe
Wireframe我推薦使用Axure和Balsamiq，這兩者除了拿來畫電子板wireframe之外，都可以做簡單的動畫，點擊按鈕會連結到另外一個畫面，不過都不如真正的prototype工具來的好用。
這兩個裡面，我又更喜歡Balsamiq一點。Balsamiq的特色就是抖抖的線條，充滿童趣的手繪風，使用上也比Axure直覺。wireframe就是不能讓客戶覺得太真，不然他們就會專注在挑小細節上面，而忽略整體的流程順暢度。手繪風格就是個讓客戶覺得不會太真的好幫手。
當然自己手繪也是個好辦法，不過電子版比較容易跟其他人分享或網路協作，也不用自己慢慢畫icon，直接套現成的就好了。因為我操作軟體的速度也很快，完全不輸手繪，我自己是比較喜歡用軟體畫Wireframe。
II. Mockup
這幾套軟體大概就是身為Visual Designer天天在用的好朋友們了。
要說Mockup的王者自然是Sketch，又便宜又強大，一年只要99鎂，學生還有半價。要說我是為了Sketch而買Mac的也不為過。
他同時結合了Photoshop圖層的特點，以及Illustrator的圖版功能，變得超級強大。
其中最強大的應該是Symbol的功能。例如你可以把常用的按鈕做成Symbol，到時候需要修改按鈕的顏色或是形狀的時候，就不用一個一個畫面去改，非常的方便。
除此之外，Sketch還有很多非常好用的plug-in。
Zeplin可以方便和工程師協作，只要把sketch檔案傳到Zeplin上面，他就會自動顯示色票、寬高，工程師就可以非常方便地確認他們需要的數值。
Craft可以直接把sketch檔案輸出到Invision做prototype，還有他會提供許多profile pictures, content。還有其他小功能等待摸索。
2. Adobe XD
其實我下載了很久，但還沒有機會摸過，但聽說結合了Sketch的優點，也是滿好用的，目前Beta版免費測試中，沒有Mac的人可以嘗試看看。
3. Photoshop
Photoshop強大的修圖功能就不多說，有時候做mockup也需要統一圖片色調，或是裁圖、修圖、把畫面合成到手機螢幕上之類的，還是滿常用到的。
我會用Photoshop做網頁mockup，因為Cut&Slice me切圖太強大。但完全不推薦使用Photoshop做手機畫面，因為手機畫面常常需要同時看多個畫面，PS沒有圖版功能，做起來會很崩潰。
以下介紹幾個好用的plug-in：
WebZap和Velositey都是方便快速畫格線跟分區塊的工具，差別在於Velositey免費。
Cut&Slice me是一套切圖神器，只要把圖層依照規則命名好，按下一個鍵就可以一口氣全部輸出，還可以培養出良好的圖層命名習慣。要說是我是為了Cut&Slice me而選擇用Photoshop做網頁也不為過。
5. Illustrator
我只推薦用Illustrator畫icon。雖然畫icon會用到的功能Sketch基本上都有，但還是Illustrator用起來順手，快捷鍵也多，在畫複雜的icon時還是滿方便的。
BUT!!!千萬不要用Illustrator做mockup!!!!!!!!!!!!!!!!!!!
很多從平面轉UI的設計師會很習慣用Illustrator做圖，但是用Illustrator切圖真的會切到崩潰，真的會崩潰，請相信我。Illustrator的圖層功能難用到爆炸，要切圖還只能一個一個開新畫板，然後又無法拉出準確的寬高，切圖速度大概是Sketch或Photoshop的十倍吧。
曾經接受過上一個設計留下來的網頁ai檔，最後把東西一個一個貼到PS上重新做了一個版本，那時候真的是欲哭無淚。
拜託！求你了！千萬不要用Illustrator做mockup!!!!!!!!!!!!!!!!!!!
6. InDesign
還有一些公司會要求用InDesign這套排版軟體來做UI Design，到底好在哪裡，對我來說至今仍是個謎……
III. Animated Interaction
有時候用文字敘述很難表現出自己想要的動畫效果，這時候我就會用HTML/CSS寫我想要的動畫。Codepen上可以找到很多範例，可以直接拿過來改，改好之後直接傳給工程師說，我哪個地方想要用這個動畫。好處是工程師可以直接看每個transition是幾秒，不用看著一個GIF自己在那邊猜。
IV. Prototype
Invsion和Marvel的介面基本上差不多，都是直接在輸出的jpg檔上面畫框框，連到另外一頁。操作非常簡單，任何人一分鐘都能輕鬆上手。除了可以在網頁上顯示之外，也有專用的APP，讓你的設計看起來跟真的APP有87分像。主要是在做User Testing的時候會使用這兩個工具。大家可以玩玩看下面的範例。
https://invis.io/3XAA2ZQ9A#/217097140_2_Set_Up_Night
目前看起來是Invision比較具有優勢，因為可以直接把Sketch輸出，不用先輸出到自己的電腦再上傳一次。
另外，工程師友人覺得直接用Swift coding也很快，供大家參考。
給直接end的你：
