InVision 彙整 - Coding幫幫忙

2021最好用的12個UI,UX設計工具~通通收起來!!(4)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(4)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(3)

Origami Studio 打造出 FB 與 IG 的UIUX設計

臉書（Facebook）用來打造Instagram的原型UI/UX設計工具。即使不會寫程式的設計師也能快速建立App原型（Prototype），還可匯出原始碼給工程師使用，拉近設計師與工程師溝通的距離。臉書（Facebooke）旗下許多使用者介面是Origami Studio設計和建立而成，例如，Instagram、通訊軟體Messenger、社團功能Groups等。

臉書（Facebooke）在 2013 年推出了這個原型製作工具。起初建立在蘋果圖形視覺化應用程式Quartz Composer上的工具，是原生OS X的應用程式，但 Xcode 環境的那部分並不是最好的原型製作選擇。所以臉書（Facebooke）去年推出了 Origami Studio。

Marvel：產出APP的設計圖

設計者不需會寫程式便能製作「會動」的app，這裡的會動指的是能夠像真正的app那樣操作，但只能呈現靜態的畫面，也無法在手機中真正運行，不過最大好處就是只要有設計圖，就能快速產生初版的Prototype，不需寫出真正的App就讓使用者體驗到UI/UX設計，如果想要修改畫面也能快速修改完成。

Justinmind 節省UI/UX設計的時間

快速一體化的原型UI/UX設計可讓設計人員專注於用戶體驗。很容易與最廣泛使用的設計平台結合，包括Sketch和Photoshop，可從這些平台中、瀏覽器或檔案系統中來新增內容和影像，甚至可使用Justinmind建立自己的UI圖庫，並提供全套模板來創建高擬真原型。

上述任何一個設計平台，都很適合目前的UI/UX設計師，與其花時間思考使用哪一個平台時，仍還是需要思考問題的本質，「心態」是最重要的一部分，有健康的心，在面對挑戰時試著使用適合的工具找方法解決，讓這些平台為整個團隊工作，自己在使用上愈駕輕就熟，就愈有時間與團隊和諧地進行網站創建工作。

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同！UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則，優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!(上)

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!(上)

2021最好用的12個UI,UX設計工具~通通收起來!!(3)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(3)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(2)

Mockplus：跨部門神器，讓不同團隊的人都看的懂！

簡潔易用並專注於原型設計的UI/UX設計軟體，非常適合跨團隊協作。可幫助專案企劃有效的溝通網頁功能、軟體介面、App 互動，透過畫出原型，讓產品經理、設計師、程式開發、主管、客戶之間能夠了解產品本身的使用流程，把想像或文字化為具體可用的示範。

Mockplus支援不同平台 Axure、Sketch、Adobe Photoshop、Figma and Adobe XD匯入原型設計。同時支援電腦版Windows和Mac的桌面應用程式及行動裝置系統iOS和Android應用程式，所有項目同步到 Mock PlusCloud，快速的組合中就能產生可以互動操作的原型圖。

Claritee：不會設計仍可從零上手

一款智慧型線框圖UI/UX設計工具，可將想法轉換為可視線框圖，是產品開發的關鍵一步，因為它提供一種低成本的可視化方法，無論設計者僅完成單個頁面還是整個網站，都可自動查看互動式原型。團隊可確認投入時間和資源創建過程中，能在原型設計呈現前解決問題。

InVision：讓團隊不失去方向，保持工作進度

在繁雜的團隊工作中，日復一日，總容易迷失與工作效率低落，藉由這一款強化團隊溝通互動的原型UI/UX設計平台，簡化工作流程、掌握整體專案進度，縮短工作的流程與溝通。InVision提供從線框圖轉換到UI設計所需的所有元素，輕鬆實現團隊合作的呈現和原型設計。同時支持即時設計修改和收集團隊的快速反饋，設計師通常也會用來管理自己的工作流程。

Axure RP：我很醜，可是我有脈絡

有別於Sketch介面的美觀，Axure更專注在使用者互動上，兩者各有特點，但剛開始學習UI/UX設計容易過於注重表面的視覺呈現 (Visual Design) 而非核心的使用者需求 (User Needs)。Axure 的簡陋反而讓使用者能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上，快速繪製低擬真 (low-fidelity) 的 Wireframe，同時也可以做到中高擬真 (mid- to high-fidelity) 的互動原型 (Prototype)。

Axure RP將 SVG 導入、Sketch 和Adobe XD集成與原型製作功能相結合。可輕鬆的將Adobe XD和Draw共享Axure RP原型和畫板，並在螢幕頂部收集輸入。可檢查佈局介面、獲取CSS片段和下載，同時將靜態圖像轉換為動態Axure Cloud原型。Axure RP還增加綜合文檔、自動化紅線和更完整的移交給開發人員，無需程式語言。

本篇為系列文章,下篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(4)

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同！UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則，優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!(上)

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!(上)

2021最好用的12個UI,UX設計工具~通通收起來!!(2)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(2)

本篇為系列文章,上篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(1)

Figma：超人氣線上UI/UX設計

在和團隊討論進行時，腦袋靈光一現便可立即記錄下來的線上工具，擁有自由拖曳的編輯器、框線創建，輕輕鬆鬆就將溝通內容即時落實在高擬真度的原型設計中！不僅如此，內建的動畫素材增添身歷其境的呈現效果。

Figma 從推出至今，愈來愈受到UI/UX設計師的青睞。這一款基於瀏覽器的協作式設計工具雖被廣泛稱為UX設計應用程式，但也可使用於快速原型設計的軟體。其他功能包括 Figmotion 和 Autoflow 等外掛程式及Arc Tool和Vector Networks 的可用性。

Webflow：網站編輯，所見即所得

近來流行的線上網頁架站平台，使用者大多介於「外行平面設計師」及「專業網站工程師」之間，即使不會 Coding 和切版，仍可輕鬆建置出個人風格強烈的網站。此平台提供乾淨、語意化的程式語言和設計加速開發人員的工作，內建程式為大眾皆可使用的零編碼，設計者便可直接創建網站的功能與版型，Webflow 會自動轉換為線上可使用的網站，因此不用等全部架構設計完成，便可即時看見在網路上的呈現。

Sketch：歷久不衰的經典UI/UX設計工具

以簡單功能與UI設計專門為訴求，早期成為UI/UX設計師慣用軟體，較資深的設計者大多首選以此為主軸的設計流程。可創建各種形式的使用者介面，例如瀏覽器、行動裝置或程式的按鍵執行，因此使用者已達全球數百萬工程師。

Sketch提供流暢的設計介面與豐富的繪圖功能，設計師可創建高質量圖像。強調介面性能的Sketch和可跨平台線上使用的Figma雖不同特點，但能使設計者專注、快速的解決問題才是重點。

本篇為系列文章,下篇請點2021最好用的12個UI,UX設計工具~通通收起來!!(3)

更多網頁設計或程式語言相關文章請點閱下方連結~

其他閱讀

介面、體驗大不同！UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢

使用 A/B 測試來改善網站 UI 設計的 30 個例子

UI/UX 按鈕設計基本7個原則，優化電商轉換率

SEO情報站:Google改變了處理軟404檢測和分類的方式

AI偵測兒童色情功能讓一向注重隱私的蘋果備受爭議?!(上)

陷在情緒裡出不來?讓人工智慧心理治療APP替你開解!!(上)

2021最好用的12個UI,UX設計工具~通通收起來!!(1)

今天為了UI/UX設計師整理出12個超好用的網頁設計工具!!有興趣的你千萬不要錯過嘍~~(1)

網頁設計、網頁開發、UIUX是什麼？

手機介面越做越人性化，美觀大方的頁面讓你一頁接著一頁的滑。這時你不禁會想：只要會做網站的話，就能輕鬆設計出這樣美觀的介面嗎？未必！網站設計與開發的領域其實可細分成使用者介面（UI）、使用者體驗（UX）、網頁設計（Web Design）和網頁開發（Web development）領域，簡介如下：

網頁設計 (Web Design)

網頁設計是一個廣泛的類別總稱，涵蓋各種關於網站視覺效果、網站可用性的領域，包含UI/UX設計等。

網頁開發 (Web development)

製作網站的技術端部分，專注於 coding，也就是擁有第一段所述「做網站」的能力。網站開發可分為網頁「前端」和伺服器端的「後端」。

使用者介面設計（UI設計，User Interface）

網頁設計的項目之一，處理人們與網頁、app互動的元件如按鈕、手勢識別

等。

使用者體驗設計（UX設計，User Experience）

另一個網頁設計的項目之一，處理用戶在使用網站或應用程序時的行為和感受。其實UX 設計的日常工作中，視覺表現只是其中的一個項目。他們需要針對用戶進行深度研究，可說是人類學、心理學、人因工程學等的跨領域學問。

一個手機版的網頁，為要兼顧兼顧便利及美觀，因此對於頁面的動線、順序、流程與使用細節上都需要重視。並確認UI所設計出來的視覺，能傳達UX設計師展示的路徑。簡單來說，UI設計傾向於眼睛所看見的「外在呈現」，UX則致力於使用者的「內在使用感受」。UI可以是將UX理念實踐的美學工程師，可透過以下12款常見的原型設計平台來執行：