常聽別人討論UI、UX，自己卻搞不懂它們是什麼嗎？
別緊張！就算你沒有設計背景，本篇文也能幫你快速掌握，
並告訴你為什麼一定要做網站UI、UX！
UI、UX 是什麼意思？一篇讓你完全了解 UI 和 UX 設計的差異戰國策集團
UI 、UX是什麼？網站沒UI、UX會怎樣？
UI、UX就是使用者與網站互動的方法及感覺，會共同影響你的使用體驗！
為了讓大家能快速區分兩者差別，這邊簡單用一張表說明差異：
| UI | UX | |
| 定義 | 人與產品／網頁互動的方法 | 人與產品／網頁互動的感覺 |
| 設計方向 | 介面風格設計、操作直覺性、視覺互動 | 使用網站的便利性與流暢度 |
| 設計重點 | 版型、按鈕、表格、互動動畫 | 網站架構、流程、使用動線、易用性測試、使用者體驗分析 |
| 目標 | 呈現精美、方便操作的介面給使用者 | 確保介面符合使用者邏輯，並能引導使用者解決問題 |
UI、UX雖然會互相影響，但實際上扮演著不同角色，下面就讓我們一起來深入了解：
UI、UX小百科－介面是什麼？
這裡的介面指得是可以接收使用者指令並操控電腦的操作物件，像是觸控螢幕、面板都屬於介面的一部份。
UI、UX小百科－網站架構是什麼？
網站架構（Website Architecture）就像是網站的骨架，透過順序與位置的編排，定義內容與功能間的關係。
UI、UX小百科－什麼是易用性測試？
易用性測試（Usability Testing）是一種工程師或設計師用來評估產品或服務好不好用的測試方法，偏好透過使用與互動的過程，找出未被發現的問題。
UI 設計是什麼？
UI （User Interface）的意思就是使用者介面，著重在以精美、直覺的視覺設計，引導使用者正確操作產品或網站。
以下是我們常見的UI設計範圍：
- 介面風格
- 版面配置
- 按鈕設計
- 字體設計
- 視覺互動設計
由於設計時也會考量到顏色、圖型給使用者帶來的感受，因此也屬於UX 設計的一部分。
我不做網站UI會怎樣？
雖然網站沒UI 一樣能運作，但沒UI的網站就像沒裝潢的房屋，很容易讓使用者感到不舒服、體驗不佳，進而跳出網站。
下面簡單舉例給你看：
| 網站沒UI或UI 混亂 | 網站UI 精緻 | |
| UI狀況 | 顏色配置混亂
版面規劃不佳 |
舒適的顏色
適當的排版 |
| 使用過程 | 使用者不僅感到沮喪或不舒服，還找不到想要的資訊 | 使用者順利瀏覽網站
並得到想要的結果 |
| 結果 | 使用者滿意度下降
跳出率提高 |
使用者滿地度上升
累積更多死忠用戶 |
從上述兩種情況，我們一下就可以看出有做UI 的網站未來發展比較好。
UX 設計是什麼？
UX(User Experience) 也被稱為UE，意思是使用者體驗，通常指人與產品互動所帶來的感受。 像產品本身的使用效果，或是使用時的心理感受、數位服務與系統間的互動體驗，都可以說是UX設計的一部分。
下面簡單帶你看常見的UX 設計範圍：
- 數位介面體驗
- 產品操作體驗，如：刮鬍刀或咖啡機的使用
- 實體服務體驗，如：售後服務
- 品牌印象（含商品與包裝）
- 數位內容呈現
UX可以是產品本身，也可以是不斷進步的服務與體驗，只要能解決使用者痛點，帶來流暢的使用者體驗，便能算是好的UX。
我的網站可以沒UX嗎？
很多人以為網站可以解決使用者痛點，便不需要進行額外的UX設計，然而網站沒有UX，就像是蓋好但沒經過規劃的房子，很容易讓人在裡面迷路，或找不到功能。
下面簡單舉例給你看：
| 網站沒有UX | 網站有良好UX | |
| UX狀況 | 網站架構混亂
功能重複或互相影響 網站顯示時間較長 |
網站架構清晰
功能獨立且運作良好 網站擁有良好的顯示性能 |
| 使用過程 | 使用者感到混亂
找不到想要的功能 使用者無法使用功能 |
使用者能快速找到資訊
能使用功能解決痛點 |
| 結果 | 跳出率提高
網站流量與轉換率下降 |
網站流量與轉換率提升
提升SEO排名效果 累積更多死忠用戶 |
我的網站好嗎？
UI、UX小百科－網站流量是什麼？
網站流量代表一段時間內進入網站瀏覽的人數，通常會作為網站是否受歡迎的指標。
UI、UX小百科－什麼是轉換率？
網站轉換率（Website Conversion Rate）是指一段時間內，主動在網站中購物、訂閱、詢問或分享的使用者在所有用戶中所佔的比例。
UI、UX 差在哪？一張表幫你分析
UI、UX常被放在一起討論，許多公司也常把它們合併成一個職位，但實際上UI、UX作用不同，究竟它們差在哪？讓我們用一張表幫你分析：
| UI （使用者介面） | UX(使用者體驗) | |
| 網站組成 | 網站門面 | 網站靈魂 |
| 差異 | 著重視覺設計 | 著重產品與服務的數據分析 |
| 目的 | 易於理解和使用
加強互動設計細節 加強CIS品牌印象 |
愉快的使用體驗
不斷更新的技術 完整流暢的訊息結構 |
| 工具與方法 | Photoshop
Sketch illustrator Figma |
用戶研究
樹狀測試 情感圖譜 用戶旅程圖 使用者問卷 |
| 呈現方式 | 吸睛的視覺設計
直覺性的操作設計 |
流暢的資訊架構
良好的產品／網站性能 |
UI、UX 雖然會互相影響，但在設計中還是有各自要完成的目標～
UI、UX小百科－什麼是訊息架構？
訊息架構就是資訊架構（Information Architecture，簡稱 IA），主要作用是將網站中的訊息整理成容易理解的順序，方便使用者快速找到資訊。
UI、UX小百科－什麼是樹狀測試？
樹狀測試（Tree Testing）在UX中是一種很常見的測試方法，目的在了解使用者是否能理解網站中訊息，快速找到想要的功能。
UI、UX小百科－UX 一定要做用戶旅程圖嗎？
視情況，用戶旅程圖（User Journey Map）也被叫做使用者地圖，是一種幫助UX設計師了解使用者行為及想法的圖表，可以協助設計師快速用戶在各個不同階段的痛點。
當然，這種方法也可以透過使用者訪談或其他可用性測試取代。
UI、UX小百科－情感圖譜在UX 測試中很重要嗎？
情感圖譜（Emotional Map）能真實展現使用者在操作產品時的情緒波動。
通常會以X、Ｙ兩軸標示使用者的行為與使用階段，並透過顏色與文字紀錄，協助UX 設計師做更準確的分析。
UI V.S UX 哪個重要？4現象告訴你缺一不可
許多人會問UI、UX哪個重要，我的網站可以只設計UI 或 UX嗎？
事實上UI、UX 必須同時存在，才能有良好的視覺與體驗，下面用4現象帶你了解：
現象一：介面一看就懂
很多人會以為吸睛的介面設計，就一定好用，但若是沒有在設計時做好使用者流程規劃，那麼即使介面再好看、再酷炫，也有可能因為按鈕的位置、顏色配置混亂、文字的大小或意思不明確，導致使用時找不到必要資訊，引起操作問題。
現象二：良好體驗留住用戶
前面有說，良好的UI設計帶來的視覺感受也屬於UX 用戶體驗的一部分。
如果你想提高使用者滿意度，並藉此留住客戶，那麼最好在設計時，同步考慮視覺風格與資訊架構，確保兩者在介面上都能擁有良好的動線，才能提供友善的用戶體驗，並藉此吸引新客，留住舊客。
現象三：資訊明白提升導購力
別以為文字不屬於UI、UX 設計，好的文案不只能帶動使用者情緒，還能適度提供資訊，引導用戶做下關鍵決定！
因此建議你在進行設計時，也不要忘了對文字加工，為它安排適當的設計與動線，讓文字訊息能發揮作用，進一步提升網站導購力。
現象四：流程清晰測試更準確
混亂的網站架構，不只會讓用戶感到沮喪，也會影響產品、網站的測試結果，混淆分析師的判斷，導致錯誤的修改決定。
因此建議你，在設計時就製作清晰的資訊架構與順暢的操作流程，才能在未來的使用中幫助分析師找到優化的重點，藉此提升使用者體驗，為網站帶來更多流量及轉換。
UI 、UX 設計怎樣才算好？掌握15要點，用戶都滿意！
想做好UI、UX 很簡單，只要掌握以下概念，便能做出大多數用戶都滿意的好設計：
UI 設計8要點
- 統一視覺風格
- 介面清晰與直觀
- 視覺元素一致
- 恰當的視覺動畫
- 明確的視覺動線
- 明確的錯誤提示
- 良好的色彩配置
- 明確的用詞指示
UX 設計7要點
- 使用者為主設計
- 直觀的操作互動
- 順暢的使用流程
- 所有人都能直觀使用
- 適用廣泛裝置，如：電腦、手機、平板
- 清晰的網站架構
- 良好的產品性能
我的UI、UX設計有做好嗎？
UI 、UX 設計如何應用？
UI、UX設計很廣泛，除了業界常說得產品設計，UI、UX還會應用在以下5領域：
- 官方網站
- 電商平台
- 線上軟體
- APP 應用
- 線上遊戲
官方網站
像我們常逛得春水堂、恆隆行、新光三越、國泰世華等網站，也會運用UI、UX設計，讓消費者不易在網站中迷路、迅速找到想要的資訊，或順利運用網站中的各種功能。
電商平台
沒想到吧！很多電商平台像：MOMO、PChome、蝦皮也會運用UI、UX，讓消費者聚焦在促銷的商品或折扣上，並運用順暢簡單的購物流程，減少我們的思考時間，讓我們在短時間內衝動消費。
線上軟體
除了會讓我們失控的購物平台，網路上也有很多好用的線上軟題，像是：Notion、Trello、Evernote 也會透過好的UI、UX設計協助我們工作！
像是Trello 清晰的版面架構可以幫我們掌握資訊、notion中醒目的標籤色能指示我們如何操作。
這些都是線上軟體中很常見的UI、UX設計應用。
UI、UX小百科－Notion、Evernote是什麼？
Notion、Evernote是現代人常用的線上筆記軟體，雖然都能與Google 日曆連接使用，但Notion 內建的功能遠比Evernote 豐富，能透過不同的指令與模組，創造自己想要的筆記版面。
APP應用
不只電腦，連手機常用的APP 也會大量運用到UI、UX。
像我們常用的Line 會透過提示提醒你有未讀訊息，或大家少不了的uber eats 會在結帳時額外推薦餐點，誘惑你買更多。
線上遊戲
線上遊戲的UI、UX大家可能比較少接觸，但舉凡登錄界面、操作系統、ICON 設計、遊戲動畫指示都屬於遊戲UI、UX的一部分。
和其他領域相比，UI、UX在遊戲領域的應用更為複雜，設計師與其他部門的合作也會更為彈性且頻繁。
UI、UX小百科－什麼是ICON？
ICON 簡單來說就是小圖標，常被用來放在電腦桌面、手機APP或網站表示訊息或是功能。
UI 、UX與視覺設計師如何協作？專家親揭合作心法
開發過程中，UI、UX 與視覺設計師往往需要密切合作，才能創造出美觀又實用的成品。
雖然工作中會有重複的地方，但還是可以視需求與專業，重新調配彼此工作。
UI V.S視覺設計差在哪？
同樣專注於視覺設計，但UI 與視覺設計師在開發中還是有各自負責的部分：
| UI設計師 | 視覺設計師 | |
| 專業領域 | 使用者介面設計 | 視覺元素設計 |
| 職責 | 為使用者設計美觀且識別度高的元件及排版 | 創建美觀的插圖、圖型、排版 |
| 設計理念 | 注重界面功能性、邏輯性和可用性 | 注重視覺美感、創意表達和品牌形象 |
| 技能 | Adobe XD、Sketch、Figma | Adobe Photoshop、Illustrator |
| 目標 | 提供美觀又實用的介面 | 創造足夠的視覺及品牌吸引力 |
| 成品 | APP 介面設計
程式介面 網站設計 |
廣告
平面海報 CIS企業識別系統 |
| 發展方向 | UX 或產品設計師 | 藝術總監
創意總監 品牌設計師 |
| 協作領域 | 介面整體視覺風格
介面元件與組件的視覺風格 介面的品牌調性 動畫的呈現方式與風格 確保平面素材與介面風格一致 |
|
那麼實際上他們到底是如何合作呢？下面就由專家們現身說法告訴你。
UI、UX小百科－元間與組件是什麼？差在哪？
UI 的元件與組件有以下差異：
- 元件：介面設計上的小部件，通常擁有基本的功能，如按鈕、對話框，通常設計上較簡單。
- 組件：UI中的組件，通常是指結構負責的功能畫面，像：表單、彈出視窗，通常由多個元件組成。
UI、UX小百科－什麼是CIS 系統
CIS 就是企業識別系統，簡單來說就是設計師為企業製作出一整套符合企業風格的設計方案，讓企業擁有品牌識別度。
UI 、UX與視覺設計師合作心法大公開
透過以下3個心法，UI、UX與視覺設計師的工作即使重疊，也可以成功合作，打造出美觀又實用的產品或網站：
心法一：確認整體風格
在專案開始之前，UI、UX 及視覺設計師應先相互確認整體風格與功能，以免未來發生使用介面不夠直覺、與功能不符，或是整體配色混亂的情況。
建議UI、UX設計師，在這個過程中將調查好的用戶需求、項目、架構流程編寫成需求文檔，方便視覺設計師初步發想整體風格。
心法二：了解用戶繪製功能地圖
決定整體風格之後，便交由UI、UX 設計師透過數據分析或使用者訪談等方式，彙整使用者需求與流程，並繪製出架構圖或是線框圖，幫助設計師在既定位置思考視覺元素的應用。
UI、UX小百科－架構圖是什麼？
架構圖（Architecture Diagram）在UX中指得是將功能與網站架構以圖型表示，方便設計師們可以快速找出不合邏輯的地方。
UI、UX小百科－什麼是線框圖？
線框圖也被叫做Wireframe，簡單來說就是以圖型的方式標注使用者介面的視覺與功能安排，讓UI 設計師能在不受視覺設計干擾的情況下，説明介面的基本結構與功能。
心法三：相互協作完成網站
當UI、UX 與視覺設計師對網站架構與功能有了共識，便能根據各自的專業與需求，相互協作完成網站。
UI 、UX 設計師需要哪些工具？
UI、UX 需要不少工具整理架構並輔助設計，以下是6種常用工具：
Figma
Figma 是目前業界最常用的UI、UX 設計工具，除了簡單直覺的UI 設計介面，UI、UX設計師也看以依靠其中的Protype 功能，模擬元件實際應用後的視覺、互動效果。
此外，Figma 也額外提供不少模板及FigJam功能，方便使用者能高效整理資訊，或繪製出使用者框架，功能靈活多元，因此深受許多UI、UX 設計師喜愛。
UI、UX小百科－Protype是什麼？
Protype也被叫做互動原型，簡單來說就是已經設計好，可以進入測試的UI 介面，能夠在工程師開發前進行互動模擬，並藉此驗證設計的實用性。
AdobeXD
Adobe XD 和Figma 一樣屬於UI、UX 設計軟體，功能同樣靈活多變，還能與Adobe 旗下的illustrator、Photoshop 進行協作，輕鬆使用早已做好的視覺素材。
不過 Adobe XD 在使用介面上較為複雜，操作直覺性也不如Figma，再加上價格昂貴，因此業界較少使用。
Sketch
Sketch 是蘋果系統專用的UI、UX 設計軟體，雖然提供強大的設計系統與插件功能支持，但由於系統封閉，加上操作直覺性不如Figma及Adobe XD，在台灣的接受度不高，用戶還是以SOHO族或國外設計師為主。
那麼Figma、Adobe XD、Sketch 差在哪呢？
| Figma | AdobeXD | Sketch | |
| 支持系統 | Windows 及Mac OS | Windows 及Mac OS | Mac OS |
| 功能 | 介面設計
Protype 互動設計 |
介面設計
強大的Protype 互動設計 |
基本介面設計
其餘功能需靠差件 |
| 專案規模 | 大型設計項目 | 中小型設計項目 | 大型設計項目 |
| 社群 | Ｏ | 有，但不多 | Ｏ |
| 插件 | Ｏ | 有，但不多 | Ｏ |
| CSS 輸出 | Ｏ | Ｏ | 有，但需用插件查看 |
| 歷史紀錄 | 30天 | 所有歷史皆可回溯 | 10天 |
| 即時協作 | 可看到他人滑鼠軌跡 | Slack 插件即時溝通 | 可即時更新檔案 |
| 價格 | 免費或
US$15／月 |
NT$1785／月
（需訂閱整套Adobe creative 方案） |
US$9／月 |
| 推薦程度 | 5 ☆ | 4.5 ☆ | 4 ☆ |
UI、UX小百科－什麼是插件？
插件（Plugin）是軟體中的擴充功能，透過第三方平台開發，並在線上安裝使用。
除了讓原本的軟體更好用，部分插件還能整合雲端服務，讓你擁有更方便的設計體驗。
Zohopagesense
在UI、UX 設計中 Zohopagesense 屬於測試工具，透過A／B Test、Splint Test 及熱度圖協助UI、UX 設計師分析使用者行為，評估資訊架構、視覺元素的編排是否正確，並進一步優化，為用戶帶來更好的體驗，或更直覺的購物指示。
UI、UX小百科－什麼是A／B Test？
A／B Test 就是 A／Ｂ測試，作法是在確保測試人數一樣的情況下，隨機變動測試版本中的其中一個元素，像按鈕的顏色、文字，以此找出使用者更喜歡的版本。
UI、UX小百科－Splint Test ？
Splint Test 中文叫做拆分測試，可以說是A／Ｂ測試的放大版，作法是在測試人數相同的情況下，將兩個完全不同的版本拿來做測試，以協助UI、UX 設計師快速找出使用者更喜歡的編排模式。
UI、UX小百科－熱度圖好用嗎 ？
熱度圖（Heatmap）是一種非常好用的分析工具，能透過視覺化使用者的活動軌跡與點擊次數，讓UI、UX 分析師了解使用者的興趣與需求，並對網站進行優化。
Optimal Workshop
和Zohopagesense 不同，Optimal Workshop 是一個完全專注於UX 體驗分析的測試平台。
其中的樹狀測試、卡片測試等工具，能幫助UX 設計師在大型專案中，深入掌握使用者行為，並以更詳細的數據與測試圖表，協助UX 設計師進行更全面的網站優化。
那麼Zohopagesense 與 Optimal Workshop誰更適合作為UX 分析工具呢？
| Zohopagesense | Optimal Workshop | |
| 主要功能 | A/B 測試、分流測試、熱度圖分析 | 卡片測試、樹狀圖、線框圖等測試工具 |
| 支援平台 | Web 應用程式、跨裝置支援 | 僅支持Web 應用程序 |
| 用途 | 專注優化UI／UX 使用者體驗
但對於用戶研究功能較侷限 |
全面的UX分析與用戶研究功能 |
| 適合專案 | 官方網站、電商平台、個人部落格 | 線上應用程式
大型網站 |
| 價格 | US$14／月 | US$208／月 |
Zohopagesense 與 Optimal Workshop 專注優化的領域不同，在進行UI、UX 設計時挑選適合的工具才能達到最好的效果～
UI、UX小百科－卡片測試能測試什麼？
卡片測試（Card Sorting Test）是一種UX 設計師用來評估網站中的資訊是否對使用者有用的方法。
測試時通常會準備一組資訊，邀請使用者依序分類，以此判斷使用者與設計師心中的想法是否一致或需要優化。
Trello
Trello 雖然是專案管理工具，卻是UI、UX 設計師在大型專案中的好幫手！
原因在於大型專案中的UI、UX設計通常即為混亂，使用Trello不僅能讓UI、UX 設計師即時掌握專案進度，還能提高團隊的協作與溝通效率，減少資訊落差所產生的設計問題，讓UI、UX設計師提交更完整的成品。
UI 、UX怎麼做？5步驟小白也能輕鬆上手
利用以下5步驟，你也能輕鬆做出好的UI、UX 設計：
Step1：了解使用者需求
首先了解你的使用者需求，並透過數據分析，整理出完整的使用者資訊架構、使用者人物誌，為網站做出更清晰的定位。
Step2：製作使用者體驗地圖
這邊需要你結合使用者分析，為你的客戶繪製使用者地圖，將介面所需的功能進行分類與排序，以利後續做初步的視覺設計。
Step3：繪製Wireframe 流程圖
接下來就可以進行簡單的Wireframe 流程圖規劃了！
你可以利用線框簡單呈現介面的排版、樣式，並同時在上標註操作流程與功能配置，並透過具體的架構，規劃UI 元件與視覺元素的位置編排。
Step4：設計產品原型並測試
在這個步驟，需要你將UI 中的視覺元素、操作元件、字型顏色間距及色彩配置納入Wireframe 線框圖中，並製作成Protype 互動元件，經過多方測試與評估後才能使用。
Step5：撰寫技術文件
千萬別以為你的UI、UX 只要製作完就好！少了技術文件，前端工程師可能會恨死你。
沒有技術文件的UI、UX 設計，相當於讓前端工程師自行判斷顏色、字型與間距，容易造成製作上的失誤。
建議你，最好的設計完成後，獨立製作說明文件，標註你的顏色色碼、字型大小及框線尺寸，才能讓你的UI、UX 設計完美上線。
挑設計不如懂設計・打造玩美UI、UX就靠戰國策！
戰國策網頁設計五大的服務優勢 :
1. 穩健經營與豐富經驗
戰國策自2000年成立以來，已經超過24年穩健經營，憑藉卓越的服務和誠信經營，贏得了市場的高度信任和認可。公司擁有超過三萬家企業客戶，其中包括許多知名的上市和上櫃公司。我們專注於每一個網頁設計專案，提供專業的諮詢服務與執行計畫，確保客戶的每一分投入都能產生最大的價值。我們擁有近萬家的網站製作經驗，並免費提供網站架構規劃，讓客戶從一開始就走在正確的方向上。
2. 專業團隊與一站式服務
每個專案都有專屬的網路顧問、網管技術專案經理、資深網頁設計師、程式開發工程師及客服經理為您量身服務，確保每個環節都達到最佳效果。我們不僅提供網頁設計，還擁有豐富的主機管理和維運經驗，能夠一站式滿足客戶的所有需求，從設計、開發到後續的網站運維，為您省去多方協調的麻煩，是您最值得信賴的行銷夥伴。
3. 全年無休服務與終身保固
戰國策致力於為客戶提供無微不至的服務，我們的客服團隊全年無休，隨時準備為您解決任何問題。此外，我們還提供終身保固服務，確保您的網站在任何時候都能正常運作，為您的業務保駕護航。這種持續的支持和保障讓客戶可以放心依賴我們的服務，無需擔心未來的技術問題。
4. 開放性原始碼保障客戶權益
戰國策提供給每位客戶完整且開放的網站系統程式原始碼，並承諾完全0抽成。客戶可以自行掌握名單、會員完整資料、金流、定價機制等核心資料，未來絕對不會被系統廠商綁死。這樣的透明和開放性確保了客戶的自主權，讓您在網站運營上擁有完全的掌控力和靈活性。
5. 免費網站架構規劃與行銷支持
我們不僅提供專業的網站設計服務，還免費為客戶規劃網站架構，並撰寫公司簡介及品牌故事。此外，我們還提供網路行銷服務，幫助您的品牌在網路上獲得更多的曝光和商機。這些增值服務確保您的網站不僅美觀且功能齊全，還能有效推廣您的業務，提升市場競爭力。
結語
現代網路發達，網站不再只是提供資訊就好，而是利用本文介紹的UI、UX，解決用戶痛點，才能為網站帶來好的成長。
除了介紹UI、UX ，我們也分享了設計工具與流程，如果你想改造網站，卻不知道怎麼開始，隨時諮詢戰國策都能獲得協助！
如果您有任何問題
歡迎諮詢戰國策365天全年無休的客服中心
加入官方LINE:@119m
免付費客服專線 0800-003-191
