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


Welly SEO 編輯部
2023-03-17更新
# 設計
# 行銷Marketing
UI/UX是什麼?UI和UX的差別是什麼?本文將介紹UI UX設計流程5步驟和3個常見的UI UX軟體,並分享UI UX設計師職業解密,最後推薦UI UX書籍與線上課程。
(一)UI是什麼?
UI全名為User Interface,而UI中文則翻成使用者介面。
所謂的介面可以解讀為「媒介」,換句話說,UI是著重在設計與使用者互動時接觸的媒介,是與使用者最具連接性的視覺設計。
因此UI設計的重點在於產品介面如何呈現才能讓使用者操作直覺且流暢。
以電梯為例,使用電梯最直接會與使用者接觸的就是電梯樓層與開關門按鈕,如果按鈕圖案設計得不夠直覺,使用者將不知道究竟哪一個按鍵是開門或關門,也就表示這個使用者介面的視覺設計不佳。
由此例可以得知,雖然整部電梯能夠很好地運作,但與使用者接觸的媒介如果呈現不佳,仍無法使商品發揮效用,因此UI設計在視覺上的呈現,像是字體大小、字型、按鈕、整體配色等都不容小覷。
(三)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步驟做介紹。
STEP1. 了解需求
第1步是UX發揮的領域,主要以使用者為中心去了解他們的需求與痛點,換言之,就是以設計思考的方法去了解使用者最真實的想法,過程中除了可以透過訪談、觀察的方式認識使用者,還可以藉由IA(Information Architecture)資訊架構整理基礎的網站規劃,其主要分成以下3個面向:
- 使用者(User):受眾、需求、痛點、行為等。
- 情境(Context):產品環境背景如何?
- 內容(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設計書或是線上課程學習,都是精進自己的好方法。
以下將分享2本UI UX書推薦和UI UX線上課程平台推薦。
(一)打造最強網頁UI/UX設計腦
《打造最強網頁UI/UX設計腦:設計師都該懂的絕佳設計・溝通法則》適合UI/UX入門不久的新手,也是網上非常熱門的UI UX自學書,它將告訴你「溝通」在UI/UX世界裡的重要性,並教你基本的設計法則。
(二)WEB設計職人必修:UX Design初學者學習手冊
《WEB設計職人必修:UX Design初學者學習手冊》也是一本在網路上許多人推薦的初學UX設計書,裡面主要會提到UX的基本觀念與流程,除此之外,也會教學簡單導入UX的方法。
(三)UI/UX線上課程平台:Hahow、YOTTA
如果想要透過線上課程進修,除了在Hahow UX和UI課程都很豐富之外,友讀YOTTA上也有很多UI/UX課程可以購入,以下各推薦一門熱門課程給大家參考:
- YOTTA:Adobe Xd設計實務|成為UI設計 師的8項核心技能
- Hahow:產品設計實戰:用Figma打造絕佳UI/UX
以上就是UI/UX設計的介紹,感謝閱讀!如果您希望定期收到Welly為您整理的行銷新知或定期彙整的知識懶人包,都可以填寫下方申請表訂閱Welly的電子報噢!▼


想收到 Welly 彙整的國內外行銷新知?
訂閱可以收到:
每週一篇新知報
雙月一本電子書
SEO 系統性學習文