2021年最好用的12個UI/UX設計工具，網頁設計都該試試看

網頁設計、網頁開發、UIUX是什麼？ · Adobe XD：整合在雲端上的UI/UX設計 · Figma：超人氣線上UI/UX設計 · Webflow：網站編輯，所見即所得 · Sketch：歷久不衰 ... 最新消息 科技新聞 Adobe AI人工智慧 chatbot DeepMind NLP OpenAI 人工智慧醫療 人機互動 元宇宙 台灣人工智慧學校 機器人 深度學習 生成對抗網路 軍用AI 食物AI Amazon Apple Covid-19新冠肺炎 Google IBM KKBOX Line Meta(Facebook) Netflix NVIDIA Samsung TIOBE Unity3D 區塊鏈 台灣人工智慧實驗室 數位行銷 SEM SEO GoogleSearchConsole JohnMueller 軟404 社群行銷 聯名行銷 程式設計課程 C++ C語言 Java Python Python課程-控制結構 R語言 網站前端開發 CSS HTML JavaScript RWD響應式網站 設計 AfterEffect UI/UX設計 VFX影片後製 學員見證 Java課程 Python課程 UI/UX設計課程 前端工程師課程 網路行銷 網頁設計 Search 29.4 C Taipei 星期四,26月,2022 Signin Welcome!Logintoyouraccount yourusername yourpassword Forgotyourpassword?Gethelp Passwordrecovery Recoveryourpassword youremail Apasswordwillbee-mailedtoyou. 達內科技報|接軌AI世代的數位觀點 最新消息 科技新聞 AllAdobeAI人工智慧chatbotDeepMindNLPOpenAI人工智慧醫療人機互動元宇宙台灣人工智慧學校機器人深度學習生成對抗網路軍用AI食物AIAmazonAppleCovid-19新冠肺炎GoogleIBMKKBOXLineMeta(Facebook)NetflixNVIDIASamsungTIOBEUnity3D區塊鏈台灣人工智慧實驗室 Google提升AI人工智慧膚色辨識技術，減少深膚色人群誤判 娛樂文化龍頭迪士尼跨足元宇宙，創造夢幻虛擬世界！ ChromeWebStore上線新徽章，Google擴充功能使用更安心 全球首屆「元宇宙時裝周」盛會，同樣也複刻了20年前的失敗 數位行銷 AllSEMSEOGoogleSearchConsoleJohnMueller軟404社群行銷聯名行銷 前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO? FLoC取代Cookie爆4大爭議，Google提出新解「主題取代群組」 新網頁要多久才會被索引？Google：數小時到數週 【SEO新聞】Google現在按設備類型進行軟404檢測 程式設計課程 AllC++C語言JavaPythonPython課程-控制結構R語言 Java和Python是什麼程式語言?到底又有什麼區別? 2021年Python蟬聯TIOBE年度程式語言獎，2022年仍穩居冠軍寶座 TIOBE7月程式語言排行:Python有望擠下Java與C奪冠 大一生把Python程式碼可視化:Ryven讓debug變簡單！ 網站前端開發 AllCSSHTMLJavaScriptRWD響應式網站 前端工程師網頁開發神器Emmet入門教學-有效減少寫HTML/CSS語法的時間 前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO? RWD和AWD的差異與優缺點 基礎JavaScript教學-再談遞增與遞減運算子 設計 AllAfterEffectUI/UX設計VFX影片後製 RWD和AWD的差異與優缺點 從哆啦A夢到iPhone…為何UI設計用「圓角」就是比較討喜？ 2021年最好用的12個UI/UX設計工具，網頁設計都該試試看 疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢 學員見證 AllJava課程Python課程UI/UX設計課程前端工程師課程網路行銷網頁設計 零基礎轉職軟體工程師在職進修Python讓他薪資多50% 進可攻·退可守的一技之長-Python課程結業後成功轉職工程師 被日文系耽誤的工程師魂？Python課程結業後的他，竟錄取全球百大企業！ 研究所開始鋪路未來扎實的Python課程讓我錄取竹科工程師 Home設計UI/UX設計2021年最好用的12個UI/UX設計工具，網頁設計都該試試看 設計UI/UX設計 2021年最好用的12個UI/UX設計工具，網頁設計都該試試看 2021-10-15 byRuthy 1488 Share Facebook Twitter Email Print LINE 目錄 網頁設計、網頁開發、UIUX是什麼？網頁設計(WebDesign) 網頁開發(Webdevelopment) 使用者介面設計（UI設計，UserInterface）使用者體驗設計（UX設計，UserExperience）AdobeXD：整合在雲端上的UI/UX設計Figma：超人氣線上UI/UX設計Webflow：網站編輯，所見即所得Sketch：歷久不衰的經典UI/UX設計工具Mockplus：跨部門神器，讓不同團隊的人都看的懂！Claritee：不會設計仍可從零上手InVision：讓團隊不失去方向，保持工作進度AxureRP：我很醜，可是我有脈絡Framer：解決溝通上的煩惱OrigamiStudio打造出FB與IG的UIUX設計Marvel：產出APP的設計圖Justinmind節省UI/UX設計的時間 網頁設計、網頁開發、UIUX是什麼？ 手機介面越做越人性化，美觀大方的頁面讓你一頁接著一頁的滑。

這時你不禁會想：只要會做網站的話，就能輕鬆設計出這樣美觀的介面嗎？未必！網站設計與開發的領域其實可細分成使用者介面（UI）、使用者體驗（UX）、網頁設計（WebDesign）和網頁開發（Webdevelopment）領域，簡介如下： 網頁設計(WebDesign)  網頁設計是一個廣泛的類別總稱，涵蓋各種關於網站視覺效果、網站可用性的領域，包含UI/UX設計等。

網頁開發(Webdevelopment)  製作網站的技術端部分，專注於coding，也就是擁有第一段所述「做網站」的能力。

網站開發可分為網頁「前端」和伺服器端的「後端」。

使用者介面設計（UI設計，UserInterface） 網頁設計的項目之一，處理人們與網頁、app互動的元件如按鈕、手勢識別 等。

使用者體驗設計（UX設計，UserExperience） 另一個網頁設計的項目之一，處理用戶在使用網站或應用程序時的行為和感受。

其實UX 設計的日常工作中，視覺表現只是其中的一個項目。

他們需要針對用戶進行深度研究，可說是人類學、心理學、人因工程學等的跨領域學問。

一個手機版的網頁，為要兼顧兼顧便利及美觀，因此對於頁面的動線、順序、流程與使用細節上都需要重視。

並確認UI所設計出來的視覺，能傳達UX設計師展示的路徑。

簡單來說，UI設計傾向於眼睛所看見的「外在呈現」，UX則致力於使用者的「內在使用感受」。

UI可以是將UX理念實踐的美學工程師，可透過以下12款常見的原型設計平台來執行： AdobeXD：整合在雲端上的UI/UX設計 全名為AdobeExperienceDesign，是UI/UX設計師最常見的向量繪圖程式，若原本在平面設計上習慣使用Adobe出的Photoshop或Illustrator等軟體，使用AdobeXD時對於其操作介面會更直觀、容易上手。

框線構成的形式，整合設計師的思維、現有的工作流程，設計出電腦版、行動裝置的網站介面，可隨時將原型設計圖輸出，直接分享給其他人觀看與操作，即時接收回饋與修改。

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

Figma從推出至今，愈來愈受到UI/UX設計師的青睞。

這一款基於瀏覽器的協作式設計工具雖被廣泛稱為UX設計應用程式，但也可使用於快速原型設計的軟體。

其他功能包括Figmotion和Autoflow等外掛程式及ArcTool和VectorNetworks的可用性。

Webflow：網站編輯，所見即所得 近來流行的線上網頁架站平台，使用者大多介於「外行平面設計師」及「專業網站工程師」之間，即使不會Coding和切版，仍可輕鬆建置出個人風格強烈的網站。

此平台提供乾淨、語意化的程式語言和設計加速開發人員的工作，內建程式為大眾皆可使用的零編碼，設計者便可直接創建網站的功能與版型，Webflow會自動轉換為線上可使用的網站，因此不用等全部架構設計完成，便可即時看見在網路上的呈現。

Sketch：歷久不衰的經典UI/UX設計工具 以簡單功能與UI設計專門為訴求，早期成為UI/UX設計師慣用軟體，較資深的設計者大多首選以此為主軸的設計流程。

可創建各種形式的使用者介面，例如瀏覽器、行動裝置或程式的按鍵執行，因此使用者已達全球數百萬工程師。

Sketch提供流暢的設計介面與豐富的繪圖功能，設計師可創建高質量圖像。

強調介面性能的Sketch和可跨平台線上使用的Figma雖不同特點，但能使設計者專注、快速的解決問題才是重點。

Mockplus：跨部門神器，讓不同團隊的人都看的懂！ 簡潔易用並專注於原型設計的UI/UX設計軟體，非常適合跨團隊協作。

可幫助專案企劃有效的溝通網頁功能、軟體介面、App互動，透過畫出原型，讓產品經理、設計師、程式開發、主管、客戶之間能夠了解產品本身的使用流程，把想像或文字化為具體可用的示範。

Mockplus支援不同平台 Axure、Sketch、AdobePhotoshop、Figma and AdobeXD匯入原型設計。

同時支援電腦版Windows和Mac的桌面應用程式及行動裝置系統iOS和Android應用程式，所有項目同步到MockPlusCloud，快速的組合中就能產生可以互動操作的原型圖。

Claritee：不會設計仍可從零上手 一款智慧型線框圖UI/UX設計工具，可將想法轉換為可視線框圖，是產品開發的關鍵一步，因為它提供一種低成本的可視化方法，無論設計者僅完成單個頁面還是整個網站，都可自動查看互動式原型。

團隊可確認投入時間和資源創建過程中，能在原型設計呈現前解決問題。

InVision：讓團隊不失去方向，保持工作進度 在繁雜的團隊工作中，日復一日，總容易迷失與工作效率低落，藉由這一款強化團隊溝通互動的原型UI/UX設計平台，簡化工作流程、掌握整體專案進度，縮短工作的流程與溝通。

InVision提供從線框圖轉換到UI設計所需的所有元素，輕鬆實現團隊合作的呈現和原型設計。

同時支持即時設計修改和收集團隊的快速反饋，設計師通常也會用來管理自己的工作流程。

AxureRP：我很醜，可是我有脈絡 有別於Sketch介面的美觀，Axure更專注在使用者互動上，兩者各有特點，但剛開始學習UI/UX設計容易過於注重表面的視覺呈現(VisualDesign)而非核心的使用者需求(UserNeeds)。

Axure的簡陋反而讓使用者能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上，快速繪製低擬真(low-fidelity)的Wireframe，同時也可以做到中高擬真(mid-tohigh-fidelity)的互動原型(Prototype)。

AxureRP將SVG導入、Sketch和Adob​​eXD集成與原型製作功能相結合。

可輕鬆的將Adob​​eXD和Draw共享AxureRP原型和畫板，並在螢幕頂部收集輸入。

可檢查佈局介面、獲取CSS片段和下載，同時將靜態圖像轉換為動態AxureCloud原型。

AxureRP還增加綜合文檔、自動化紅線和更完整的移交給開發人員，無需程式語言。

Framer：解決溝通上的煩惱 製作UI/UX設計原型最重要的目的就是「溝通」，近年來許多設計流程裡，開始重視”原型”的重要性，使用Framer原型設計中，使用者可以基礎的想法驗證，再根據測試結果來修正設計方向。

這樣的測試循環，可有效降低部分設計錯誤。

Framer所撰寫的語言則是CoffeeScript，因此它的程式語言非常接近口語。

但使用介面與工作流程對初學者會有點複雜，需要開發人員和設計師投入大量時間來學習他們的方法。

OrigamiStudio打造出FB與IG的UIUX設計 臉書（Facebook）用來打造Instagram的原型UI/UX設計工具。

即使不會寫程式的設計師也能快速建立App原型（Prototype），還可匯出原始碼給工程師使用，拉近設計師與工程師溝通的距離。

臉書（Facebooke）旗下許多使用者介面是OrigamiStudio設計和建立而成，例如，Instagram、通訊軟體Messenger、社團功能Groups等。

臉書（Facebooke）在2013年推出了這個原型製作工具。

起初建立在蘋果圖形視覺化應用程式QuartzComposer上的工具，是原生OSX的應用程式，但Xcode環境的那部分並不是最好的原型製作選擇。

所以臉書（Facebooke）去年推出了OrigamiStudio。

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

Justinmind節省UI/UX設計的時間 快速一體化的原型UI/UX設計可讓設計人員專注於用戶體驗。

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

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

標籤AdobeXDAxureRPClariteeFigmaFramerInVisionJustinmindMarvelMockplusOrigamiStudioSketchWebflow網頁設計 Share Facebook Twitter Email Print LINE PreviousarticleAI增添步槍精準度，以色列戰隊藉助人工智慧取勝Nextarticle「高顏值」人工智慧WinGo自動分類垃圾，回收資源還能換美食！ 你可能也想看 RWD和AWD的差異與優缺點 Ruthy-2022-03-24 從哆啦A夢到iPhone…為何UI設計用「圓角」就是比較討喜？ Ruthyand詹家瑄-2022-01-18 疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢 Ruthy-2021-09-07 UI/UX按鈕設計基本7個原則，優化電商轉換率 Ruthy-2021-09-03 年過50歲的日本副社長自學Python！寫出的AI還被雀巢採用 Ruthyand詹家瑄-2021-04-29 介面、體驗大不同！UI設計/UX設計工作內容完整剖析 Ruthyand詹家瑄-2020-08-27 使用A/B測試來改善網站UI設計的30個例子 Ruthyand詹家瑄-2020-07-16 今年10月即將入手的新身分證，它的UI設計有啥亮點？ Ruthy-2020-03-27 UI設計師的配色攻略：5個黑色的設計意義/用法 Ruthyand詹家瑄-2020-01-19 落實「數位優先」的UI設計，Audi、福斯把Logo壓扁了？ Ruthyand詹家瑄-2020-01-19 00:01:41 改變UI竟能增進友情、UX讓麵包烤更香？Netflix紀錄片揭露設計師巧思 Ruthy-2020-01-19 6個酷炫HTML5電子書翻頁效果 Ruthy-2020-01-17 AfterEffect 【網路行銷影片VFX後製】三秒完成的十種AfterEffects標題文字特效 Ruthy-2019-09-26 網路行銷影片的文字標題太無聊？使用特效吧！根據國外有32萬人次訂閱的VFX影片後製教學頻道「SonduckFilm」精選出來的Top10... VFX影片後製 VFX剪輯高手揭露:新手常犯的影片後製10大誤區 Ruthy-2019-09-26 國外一名擁有十多年經驗的VFX影像後製/剪接師，分享了一些新手剪輯師常犯的錯誤——你會驚覺，這些錯誤是如此的常見。

有可能是因為新手們不太清楚以下的剪輯小撇步： 這篇文章中，列出了10個新手們常犯的剪輯小誤區，只要避免這些錯誤，你在剪輯的工作上就能更加流暢，有立竿見影的效果。

其中四個是關於工作整理、三個關於音效編輯、另外三個則是其他你沒想到的問題。

目錄： 凌亂的的資料夾 混亂的時間軸 錯誤的版本管理 沒有自動儲存或檔案備份 音軌不順或雜音四起 平庸的背景混音 馬虎的配樂編輯 差強人意的標題與字幕 錯誤編碼和影片速率 缺乏自我專業度的提升 凌亂的的資料夾 ▲凌亂的的資料夾示意圖 身為一個影片剪輯師，擁有一個分類整齊、一目然的資料夾是必備能力。

他能讓你的其他工作夥伴，一看到你的資料夾，就知道你目前的工作進度，並且順暢的接手剪輯的工作。

這樣的工作習慣不但能讓你在與其他剪輯師交接工作時更加順利，也將減輕你的工作負擔，讓你在開始工作時，更快銜接上上一次的工作進度。

所以，請將你的資料夾按照一定的邏輯分類，並在資料備份的硬碟中，也要保持一致的分類邏輯。

另外，你也必須確保你備份了所有下載的影音檔、螢幕截圖以及檔案。

你絕對不會知道當別人在離線的狀況下，看到你的檔案還需要上雲端去下載的時候，內心多麽崩潰。

所以，這舉手之勞可是會讓別人大大感謝你的。

其實，檔案管理不只讓新手剪輯師苦惱。

今天不管你是不是剪輯師，有效管理檔案都能讓工作事半功倍。

若你也對檔案管理毫無頭緒，這裡的小技巧能讓你凌亂的數位檔案乖乖就緒，再也不會像迷宮一樣令人頭昏！ 混亂的時間軸 ▲混亂的時間軸示意圖 井然有序的時間軸，可以讓別人輕易的找到特定的剪輯片段，並且讓片段順序組織化。

在較大型的專案中，若沒有這樣的習慣，很容易使你的工作變得一團亂。

遵從以下幾點，就能避免時間軸混亂的災難： 替你的影像軌、音軌命名 讓每個組件都在指定的影像軌、音軌中 善用顏色標籤來分類不同類型的剪輯片段 別在時間軸的結尾任意留下垃圾 錯誤的版本管理 This... 最新文章 Google提升AI人工智慧膚色辨識技術，減少深膚色人群誤判 AI人工智慧 2022-05-31 娛樂文化龍頭迪士尼跨足元宇宙，創造夢幻虛擬世界！ 元宇宙 2022-05-31 ChromeWebStore上線新徽章，Google擴充功能使用更安心 Google 2022-05-25 全球首屆「元宇宙時裝周」盛會，同樣也複刻了20年前的失敗 AI人工智慧 2022-05-03 烏俄戰爭中，人工智慧應用與技術如何幫助烏克蘭？ 科技新聞 2022-05-03 富比世企業技術專欄：2022年的人工智慧七大突破 AI人工智慧 2022-05-03 Google不忍了！祭出法律手段，迫使YouTubeVanced中止開發 Google 2022-04-19 前端工程師網頁開發神器Emmet入門教學-有效減少寫HTML/CSS語法的時間 網站後端開發 2022-04-15 Java和Python是什麼程式語言?到底又有什麼區別? 程式設計課程 2022-04-13 日本新創推元宇宙痛覺模擬器，不只有感覺，連痛覺都完美複製！ 虛擬實境VR 2022-04-08 熱門文章 五部人工智慧電影告訴你：未來人類會與AI談戀愛⋯⋯還是被毀滅？ 電影 2020-08-05 IBM背書！入行AI人工智慧必學Python的8大理由 Python 2020-01-19 6個酷炫HTML5電子書翻頁效果 HTML 2020-01-17 APCS是什麼？所有APCS檢定的問題這篇都會回答你！ APCS檢測-高中升大學資工系指標 2020-03-13 【機器學習懶人包】10種演算法圖解-從監督式到非監督式學習 AI人工智慧 2020-06-16 人工智慧再突破！史上最強解馬賽克技術64倍解析度還原成無碼 AI人工智慧 2020-07-01 零基礎轉職軟體工程師在職進修Python讓他薪資多50% Python課程 2021-07-20 來跟GOOGLE人工智慧玩吧！讓GoogleVisionAPI說出你的圖片是什麼 AI人工智慧 2020-01-19 新網頁要多久才會被索引？Google：數小時到數週 SEO 2021-07-14 00:04:56 浪浪別哭！AI人工智慧貓窩，讓浪貓暖度嚴寒 AI人工智慧 2020-01-19