12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(4)

 

本文為下篇,上篇請看此連結

 

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個原則,優化電商轉換率


心生病了該怎辦?人工智慧24小時待命為你的心治療!(上)


發明家不是人!人工智慧DABUS首位獲得發明專利AI!(上)


東奧與AI技術的完美結合!7個黑科技報你知!(1)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(3)

 

本文為下篇,上篇請看此連結

 

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

 

 

Framer:解決溝通上的煩惱

製作UI/UX設計原型最重要的目的就是「溝通」,近年來許多設計流程裡,開始重視”原型”的重要性,使用Framer原型設計中,使用者可以基礎的想法驗證,再根據測試結果來修正設計方向。這樣的測試循環,可有效降低部分設計錯誤。Framer所撰寫的語言則是 CoffeeScript,因此它的程式語言可以說是非常接近口語。但是使用介面與工作流程對初學者會有點複雜,需要開發人員和設計師投入大量時間來學習他們的方法。

下篇請看此連結

 

 

 

推薦文章:
介面、體驗大不同!UI設計/UX設計工作內容完整剖析


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


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


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


特斯拉研發高效能AI晶片D1,完整滿足人工智慧的訓練需求!


發明家不是人!人工智慧DABUS首位獲得發明專利AI!(上)


壓力大受不了?臉書聊天AI聽你訴苦還會記住你說過的事(上)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(2)

 

本文為下篇,上篇請看此連結

 

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雖不同特點,但是能使設計者專注、快速的解決問題才是重點。

 

 

Mockplus:跨部門神器,讓不同團隊的人都看的懂!

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

 

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

 

下篇請看此連結

 

 

 

 

 

推薦文章:
介面、體驗大不同!UI設計/UX設計工作內容完整剖析


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


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


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


人工智慧也搞發明!還成為全球首例取得發明專利的AI?!(上)


超高效能人工智慧訓練晶片D1,竟出自特斯拉研究團隊?!


壓力大受不了?臉書聊天AI聽你訴苦還會記住你說過的事(上)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(1)



目錄

1. 網頁設計、網頁開發、UIUX是什麼?

1-1. 網頁設計 (Web Design) 

1-2. 網頁開發 (Web development) 

1-3. 使用者介面設計(UI設計,User Interface)

1-4. 使用者體驗設計(UX設計,User Experience)

2. Adobe XD:整合在雲端上的UI/UX設計

3. Figma:超人氣線上UI/UX設計

4. Webflow:網站編輯,所見即所得

5. Sketch:歷久不衰的經典UI/UX設計工具

6. Mockplus:跨部門神器,讓不同團隊的人都看的懂!

7. Claritee:不會設計仍可從零上手

8. InVision:讓團隊不失去方向,保持工作進度

9. Axure RP:我很醜,可是我有脈絡

10. Framer:解決溝通上的煩惱

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

12. Marvel:產出APP的設計圖

13. Justinmind 節省UI/UX設計的時間

 

網頁設計、網頁開發、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款常見的原型設計平台來執行:

 

Adobe XD:整合在雲端上的UI/UX設計

全名為 Adobe Experience Design,是UI/UX設計師最常見的向量繪圖程式,如果原本在平面設計上習慣使用Adobe 出的 Photoshop或Illustrator等軟體,使用 Adobe XD 時對於其操作介面會更直觀、容易上手。

 

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

影片連結:https://youtu.be/h4D0GGlYL1o

 

 

下篇請看此連結

 

 

 

推薦文章:
介面、體驗大不同!UI設計/UX設計工作內容完整剖析


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


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


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


蘋果靠AI偵測兒童情色照,卻讓人擔心隱私疑慮!(上)


沒人陪你聊心事?!臉書AI陪你談心還會記得你說的話!(上)


人工智慧技術大突破!冬奧將引AI裁判為選手評分?!