UI/UX是什麼?分享UI/UX設計比較、UI/UX流程5步驟

UI/UX是什麼?分享UI/UX設計比較、UI/UX流程5步驟
Welly SEO 編輯部

Welly SEO 編輯部

2023-03-17更新

數位行銷

# 設計

# 行銷Marketing

UI/UX是什麼?UI和UX的差別是什麼?本文將介紹UI UX設計流程5步驟和3個常見的UI UX軟體,並分享UI UX設計師職業解密,最後推薦UI UX書籍與線上課程。

UI UX設計是什麼?UI UX比較表分享!

「UI UX」想必如今大家一定不陌生,現在電商平台盛行,最常見的UI/UX是運用在架設網站或是設計新的APP時,會需要UI UX技能的協助。

網路上除了時常討論UI UX是什麼之外,更多的是比較兩者之間的差異,雖然UI和UX確實是不同面向的專業領域,但他們之間卻是唇齒相依、密不可分的關係,究竟UI設計是什麼?UX設計又是什麼呢?

(一)UI是什麼?

UI全名為User Interface,而UI中文則翻成使用者介面。

所謂的介面可以解讀為「媒介」,換句話說,UI是著重在設計與使用者互動時接觸的媒介,是與使用者最具連接性的視覺設計

因此UI設計的重點在於產品介面如何呈現才能讓使用者操作直覺且流暢

以電梯為例,使用電梯最直接會與使用者接觸的就是電梯樓層與開關門按鈕,如果按鈕圖案設計得不夠直覺,使用者將不知道究竟哪一個按鍵是開門或關門,也就表示這個使用者介面的視覺設計不佳。

由此例可以得知,雖然整部電梯能夠很好地運作,但與使用者接觸的媒介如果呈現不佳,仍無法使商品發揮效用,因此UI設計在視覺上的呈現,像是字體大小、字型、按鈕、整體配色等都不容小覷。

(二)UX是什麼?

UX全名為User Experience,而UX中文則翻成使用者體驗。

UX設計是早於1990年代就推出的概念,而所謂的使用者體驗設計不單單限於產品本身的使用,還包含企業的整體服務、商品包裝等,皆必須站在使用者的角度出發,並利用設計思考的概念讓整個使用者體驗的流程是符合邏輯的。

因此UX更偏向後端的產品設計,且更著重在產品本身使用起來的感覺與流程如何。

而在UX設計流程必須研究使用者的習慣與需求,並仔細觀察使用者行為,在得到觀察與分析的結果後,除了應用在商品本身的使用體驗外,整個消費者旅程、行銷漏斗裡的各項服務也都應該注重UX設計。

(三)UI UX差異為何?UI UX比較表分享

UI和UX之所以常常讓人分不清楚其差異,是因為兩者確實有些部分是相互重疊,像是在互動設計上,UI/UX就必須相互合作與討論,才能設計出兼具好的使用者體驗與視覺介面的商品。

而在實際應用上,通常會先執行UX設計,才輪到UI設計整個視覺介面,而中間的串連就需要UI、UX設計師去討論與協商。

以下利用表格的方式比較UI/UX的差異:

UI 使用者介面設計UX 使用者體驗設計
定義設計與使用者互動時接觸的媒介設計整體流程服務與產品的體驗
核心任務直覺性的視覺設計了解使用者需求後,設計出符合邏輯的商品與流程
目標利用視覺設計與美學,讓使用者在使用過程中感到舒適、直覺、流暢。利用設計思考結果,設計出能夠解決使用者痛點並兼具良好體驗的產品與流程。
實際工作內容
  • 視覺設計
  • 互動設計
  • 前端設計
  • 設計思考與研究
  • 互動設計
  • 後端設計
  • UI UX設計流程有哪些?介紹UI UX流程5步驟

    如果你是UI UX入門不久的設計師或是在考慮是否從事UI UX設計職業,想必會想大概了解究竟UX設計流程或是UI流程是如何進行,以下簡單將UI/UX流程分成5步驟做介紹。

    UI/UX設計流程5步驟:

    STEP1. 了解需求

    第1步是UX發揮的領域,主要以使用者為中心去了解他們的需求與痛點,換言之,就是以設計思考的方法去了解使用者最真實的想法,過程中除了可以透過訪談、觀察的方式認識使用者,還可以藉由IA(Information Architecture)資訊架構整理基礎的網站規劃,其主要分成以下3個面向:

    1. 使用者(User):受眾、需求、痛點、行為等。
    2. 情境(Context):產品環境背景如何?
    3. 內容(Content):內容形式、呈現的資訊型態等。

    當使用者資料收集完畢後,可以再藉由Persona人物誌繪製出更明確的受眾樣貌,有利於將大量的使用者資訊統整,並用於後續的流程中。

    STEP2. 畫出功能地圖(Functional Map)

    所謂的功能地圖是將產品需要的功能進行分類,並劃出各個功能的主次順序,以利後續UX設計師在產品開發時,可以一目瞭然功能設計的架構。

    此外,清楚畫出功能地圖也有利於UI設計師檢視完整的服務與產品功能設計,進而在後續的視覺設計與互動設計可以有更明確的設計藍圖。

    STEP3. 製作邏輯流程

    邏輯流程目的:不同情境下產品會出現的狀態與需要的功能確認。

    而邏輯流程可以再依據不同的用途分成Flow Chart和UI Flow:

    • Flow Chart:主要針對UX設計產品操作進行流程圖的繪製,藉由不同的圖形標籤表示不同的流程內容。
    • UI Flow:依據使用者體驗為中心產生的Flow Chart設計出對應的產品操作介面圖,利用視覺雛形使得後續產品溝通能更加直觀。

    STEP4. 線框稿(Wireframe)

    線框稿Wireframe是利用呈現主要的內容與基本排版,進行架構的確認,像是是否為使用者需要的配置等,都是必須考量的重點。

    然而需注意繪製線框稿時,無需在顏色、字型等細節上做過多的琢磨,UI/UX團隊僅需著重在整個產品的架構、功能與流程即可。

    STEP5. 設計原型並進行測試(Mockup & Prototype)

    在製作出原型Prototype前,會先請UI設計師設計Mockup視覺設計稿,也就是基於上個步驟的Wireframe加入更詳細的視覺設計,以增加質感、美感與使用介面的直覺性為目標。

    接著,最後就是原型Prototype的製作,所謂的原型是指產品初期的樣子,基本上已經可以進行簡單操作與測試,並做最後的優化,確定沒有問題後,就可以將產品上架了。

    若是產品通過了市場的小規模初步驗證、要進行設計上的優化時,企業通常會開始進行CIS的設計與規範制定。若是公司已有設計好的CIS規範,則可於此階段提出給UI設計師將元素套用至產品中、優化整體的設計調性。

    UI UX軟體介紹|業界常使用的軟體有哪些?

    在UI/UX的世界裡,擁有實用的UI UX設計軟體可以幫助UI/UX設計師事半功倍,以下將介紹目前業界常見的3大UI/UX軟體。

    (一)Figma

    Figma是受各界設計師愛戴的線上設計工具,主要於網頁進行,透過macOS或Windows的桌面應用程式可啟用離線編輯功能,檔案待連上網路後就會上傳雲端,因此其方便、簡單操作又能共同編輯的特性,是讓「Figma UI UX」的應用總是一起討論的原因。

    以Figma網頁設計來說,簡單且直覺的拖曳編輯器加上快速的框線建立,能夠協助UI/UX設計師即時地進行原型設計,甚至還有模擬介面操作的功能,與許多的支援模組外掛,不管是視覺上的UI設計師還是功能上的UX設計師都能輕鬆使用Figma設計基本的產品草稿。

    (延伸閱讀:想快速產出站內行銷用圖?Canva大量模板供你選擇!

    (二)Adobe XD

    Adobe XD的全名為Adobe Experience Design,是同時具備UI/UX所需功能的向量繪圖軟體,因此「Adobe XD網頁設計」總會讓人聯想在一起。

    而如果你是時常使用Adobe系列軟體的設計師,像是Photoshop、Illustrator等,那你在使用Adobe XD勢必會得心應手;在產品介面設計工具應用上,可將Figma的設計草稿轉放進Adobe XD進行更近一步的工程設計,上面有許多工程開發時需要用上的spec細節,是UI/UX設計師必備工具之一。

    (三)Sketch

    主要針對UI設計的Sketch,以簡單的功能介面在UI/UX工具裡佔有一席之地,其屬於向量繪圖軟體,無需擔心改尺寸的問題;除此之外,使它歷久不衰的原因還包含Sketch的價格平易近人,且網上的教學資源豐富,對於剛踏入UI/UX界的人來說,十分友善。

    以上三種都是相當好用的MarTech設計工具!其中只有Adobe XD的入門門檻稍微高一些,其他兩種設計工具對行銷人來說都是相當好上手的!有興趣、有需求的你都可以嘗試看看喔!

    UI UX設計師職業解密|如何成為UI UX設計師?

    了解UI/UX的基本執行流程和常用軟體後,如果你想成為UI設計師或是UX設計師,需要具備的軟硬實力有哪些呢?

    以UI設計師的軟實力來說,「美感」無疑是首要必須具備的能力,同時也需要設計上的創造力;至於UX設計師在前期的使用者分析上必須要發揮洞察力,而在後期的產品設計上則需要創意力。

    如果以整個UI/UX來說,兩者都需要有顆樂於學習的心和一定的溝通能力,因為科技不斷地進步,設計師必須隨時注意產業的變動,並學習新的工具與技能;此外,因UI和UX在開發產品時,必須相互討論與協作,因此溝通能力也是必備的軟實力之一。

    至於大家最在意的薪資水平,普遍來說,新鮮人的月薪通常落在3~4萬元,會依據不同產業略微不同,像是科技業或是知名大企業薪資就會較高;而通常超過5年的資深UI/UX設計師月薪可以超過5萬元。

    UI/UX需要的軟硬實力與人格特質

    UI UX書籍與UI UX線上課程推薦

    UI/UX領域的知識又廣又深,且會隨著科技的進步日新月異,想要踏入UI/UX領域的你除了需要具備上述的軟硬實力和人格特質,也要擁有願意不斷接收新知的心,因此透過UI UX設計書或是線上課程學習,都是精進自己的好方法。

    以下將分享2本UI UX書推薦和UI UX線上課程平台推薦。

    (一)打造最強網頁UI/UX設計腦

    《打造最強網頁UI/UX設計腦:設計師都該懂的絕佳設計・溝通法則》適合UI/UX入門不久的新手,也是網上非常熱門的UI UX自學書,它將告訴你「溝通」在UI/UX世界裡的重要性,並教你基本的設計法則。

    《打造最強網頁UI/UX設計腦:設計師都該懂的絕佳設計・溝通法則》

    (二)WEB設計職人必修:UX Design初學者學習手冊

    《WEB設計職人必修:UX Design初學者學習手冊》也是一本在網路上許多人推薦的初學UX設計書,裡面主要會提到UX的基本觀念與流程,除此之外,也會教學簡單導入UX的方法。

    《WEB設計職人必修:UX Design初學者學習手冊》

    (三)UI/UX線上課程平台:Hahow、YOTTA

    如果想要透過線上課程進修,除了在Hahow UX和UI課程都很豐富之外,友讀YOTTA上也有很多UI/UX課程可以購入,以下各推薦一門熱門課程給大家參考:

    以上就是UI/UX設計的介紹,感謝閱讀!如果您希望定期收到Welly為您整理的行銷新知或定期彙整的知識懶人包,都可以填寫下方申請表訂閱Welly的電子報噢!▼

    img_CTA
    img_CTA

    想收到 Welly 彙整的國內外行銷新知?

    訂閱可以收到:

    每週一篇新知報

    雙月一本電子書

    SEO 系統性學習文

    熱門文章

    編輯精選

    最新文章