UI/UX工具挑選入門指南 - Medium

還有一些公司會要求用InDesign這套排版軟體來做UI Design，到底好在哪裡，對我來說至今仍是個謎…… III. Animated Interaction. 有時候用文字敘述很難表現 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinAAPD — AsAProductDesignerUI/UX工具挑選入門指南這些是一般常見的UI工具，是不是多到一個爆炸？這篇文章會超級簡單迅速的簡介這些工具到底在幹嘛的？他們有哪些特長？什麼時候該召喚誰出場？看完之後你會迅速了解什麼情況下該使出哪一種工具。

接下來我會依照以下的順序來介紹：Wireframe->Mockup->Animation->PrototypeI.WireframeWireframe我推薦使用Axure和Balsamiq，這兩者除了拿來畫電子板wireframe之外，都可以做簡單的動畫，點擊按鈕會連結到另外一個畫面，不過都不如真正的prototype工具來的好用。

這兩個裡面，我又更喜歡Balsamiq一點。

Balsamiq的特色就是抖抖的線條，充滿童趣的手繪風，使用上也比Axure直覺。

wireframe就是不能讓客戶覺得太真，不然他們就會專注在挑小細節上面，而忽略整體的流程順暢度。

手繪風格就是個讓客戶覺得不會太真的好幫手。

當然自己手繪也是個好辦法，不過電子版比較容易跟其他人分享或網路協作，也不用自己慢慢畫icon，直接套現成的就好了。

因為我操作軟體的速度也很快，完全不輸手繪，我自己是比較喜歡用軟體畫Wireframe。

Balsamiq介面II.Mockup這幾套軟體大概就是身為VisualDesigner天天在用的好朋友們了。

Sketch要說Mockup的王者自然是Sketch，又便宜又強大，一年只要99鎂，學生還有半價。

要說我是為了Sketch而買Mac的也不為過。

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

其中最強大的應該是Symbol的功能。

例如你可以把常用的按鈕做成Symbol，到時候需要修改按鈕的顏色或是形狀的時候，就不用一個一個畫面去改，非常的方便。

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

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

Craft可以直接把sketch檔案輸出到Invision做prototype，還有他會提供許多profilepictures,content。

還有其他小功能等待摸索。

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

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

我會用Photoshop做網頁mockup，因為Cut&Sliceme切圖太強大。

但完全不推薦使用Photoshop做手機畫面，因為手機畫面常常需要同時看多個畫面，PS沒有圖版功能，做起來會很崩潰。

以下介紹幾個好用的plug-in：PhotoshopPlug-inWebZap和Velositey都是方便快速畫格線跟分區塊的工具，差別在於Velositey免費。

Cut&Sliceme是一套切圖神器，只要把圖層依照規則命名好，按下一個鍵就可以一口氣全部輸出，還可以培養出良好的圖層命名習慣。

要說是我是為了Cut&Sliceme而選擇用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這套排版軟體來做UIDesign，到底好在哪裡，對我來說至今仍是個謎……III.AnimatedInteraction有時候用文字敘述很難表現出自己想要的動畫效果，這時候我就會用HTML/CSS寫我想要的動畫。

Codepen上可以找到很多範例，可以直接拿過來改，改好之後直接傳給工程師說，我哪個地方想要用這個動畫。

好處是工程師可以直接看每個transition是幾秒，不用看著一個GIF自己在那邊猜。

IV.PrototypeInvsion和Marvel的介面基本上差不多，都是直接在輸出的jpg檔上面畫框框，連到另外一頁。

操作非常簡單，任何人一分鐘都能輕鬆上手。

除了可以在網頁上顯示之外，也有專用的APP，讓你的設計看起來跟真的APP有87分像。

主要是在做UserTesting的時候會使用這兩個工具。

大家可以玩玩看下面的範例。

https://invis.io/3XAA2ZQ9A#/217097140_2_Set_Up_Night目前看起來是Invision比較具有優勢，因為可以直接把Sketch輸出，不用先輸出到自己的電腦再上傳一次。

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

給直接end的你：總之，現在立刻刷下去買Sketch就對了。

--5MorefromAAPD — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected] — AsAProductDesignerAboutHelpTermsPrivacyGettheMediumappGetstartedStephanieKuo2.9KFollowers從冰天雪地的密西根畢業之後，來到天天都是大太陽的矽谷。

意外從科技業踏進金融業做UXDesign，天天為交易員做設計。

希望能用中文和更多台灣人分享UX。

http://www.stephkuo.com/FollowMorefromMediumPaulineSushkoinGEMAcademyDriveConversionswithEnhancedUI/UXDesignVaibhavSharmaTCM(TyroneClusterManager) — DashboardDesignFelixCurbbun2FormDesignUXTipsstoryworksHowtoManageUserAttentionwithScrollingHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable