...

給業主與新手設計師的UI/UX指南

UIUX新手指南

文章目錄

近年用戶體驗設計的概念愈來愈受重視,造就了UI/UX設計師的出現。但UI和UX到底有什麼分別呢?如果業主要跟設計師溝通,應該具備什麼樣的概念、接洽流程為何?

了解UI與UX的差異很重要,因為你得搞清楚你的網頁究竟需要的是哪方面的改善、聘請哪種設計師。也有很多人也選擇直接使用其他架設網站軟體,減少UI與UX的煩惱。有好的UI不代表有好的UX,這兩個並不通用。確定你的需求才不會造成尷尬的後果,所以讓我們來看看UI和UX究竟是什麼。

UI、UX設計是什麼?

已故的蘋果CEO 史蒂夫·賈伯斯說過:「大部分的人以為產品外觀做得美觀就是一個好設計(UI),但實際上成功的設計不能只是好看更必須要好用(UX)。」UI與UX是完全不一樣的定義,但兩者之間卻如同唇齒彼此相依,不可失去彼此。

UI(User Interface)使用者介面

UI中文稱為「使用者介面」。介面指的是APP、網頁等可以與使用者互動的媒介。UI著重的是使用者介面的『呈現』,實務工作上則包含外觀(Graphic)和互動設計(I簡而言之,這兩者有著密不可分的重要性。在產品開發階段,會從UX設計再到UI。UX設計就像是骨骼,著重於「用起來怎麼樣?」而UI設計則是血肉,加入美觀、互動性的元素,讓產品活起來,著重於「看起來怎麼樣?」。nteraction)等範疇。如:視覺美感、設計美學、便利性、風格呈現,細節更包含了字型、字體大小、顏色、標誌、按鍵、動畫效果等。UI的呈現,會影響到使用者的使用感受以及順暢性。

身為一個UI設計師,我們可能會想的是:
・網站要使用樣的什麼顏色與風格?
・按鍵要用什麼樣的動畫?
・要如何運用對比的顏色增加文字的閱讀性?

UX(User Experience)使用者經驗

UX中文稱為「使用者經驗」。包含的範圍更為廣泛,涵蓋使用者與產品從頭到尾的所有『互動過程』。UX的主要任務在於解決用戶使用產品時的痛點、提升產品使用流暢性,透過用戶在使用產品時產生的需求、回饋、感受、偏好,將以解決、優化,進而創造最優質的使用者經驗。

身為一個UX設計師,我們可能會想的是:
・要如何改善網路購物的結帳流程?
・用戶需要完成的步驟有哪些?
・按鈕應該要放在哪裡?
・這樣的用戶體驗是直接明瞭的嗎?

UI/UX差異總整理

UI(User Interface)
使用者介面
UI(User Interface)
使用者介面
定義使用者與產品之間的溝通媒介。以使用者感受為出發點來設計產品。
任務視覺設計:版型配置、字體配置、顏色搭配、互動效果等。市場調查與研究、使用者行為分析、資訊架構設計、流程設計等。
達成目的UI設計師著重在「產品如何呈現」,確保用戶在使用產品時,整體的介面、按鈕、配色、字體…等都能讓人感到舒服順暢。UX設計師著重在「產品使用起來的感覺」,透過蒐集者使用者意見與反饋,確保流程可解決用戶痛點、使用順暢,讓用戶擁有優質的使用經驗。

簡而言之,這兩者有著密不可分的重要性。在產品開發階段,會從UX設計再到UI。UX設計就像是骨骼,著重於「用起來怎麼樣?」而UI設計則是血肉,加入美觀、互動性的元素,讓產品活起來,著重於「看起來怎麼樣?」。

UX和UI其實還是多重疊的地方

UX 設計師關注介面設計,更關心所有會影響使用體驗的一切,例如資訊架構、互動設計、內容、使用者的認知、經驗、需求、價值觀。也就是說,UX設計師其實是包山包海的,橫跨眾多領域,單憑一人之力是無法完成的,甚至可以說UI也涵蓋在UX裡面,以負責的工作內容來看,如下圖。

UI/UX其實還是多重疊的地方

UI/UX設計流程

UI/UX 設計師的工作,是規畫介面的流程與動線,並設計良好的視覺呈現,讓客戶體驗到舒適流暢的產品服務。因此了解使用者的心理世界,也是每位 UI/UX 設計師的任務之一。

所以如何與業主溝通就變得很重要!坊間可能會遇到業主要求多或不了解設計而時常出現大改的情況,為了杜絕這樣的情形發生,飛拉霓詳列以下 UI/UX 設計6大步驟,讓業主們清楚知道現在製作到哪一步驟,設計師也可以在每個階段完成後請業主簽名蓋章,避免之後又更改需求。

1.網站需求瞭解 蒐集資料

在網站設計工作開始之前,UX設計師需透過市場調查、製作問卷、面談等方式蒐集資料,分析並了解使用者需求及網站使用習慣。而這項工作,在現在台灣的公司中,蠻大一部分會變成專案經理或業務的職責之一,接收客戶需求並整理分析相關資料提供給團隊。

在這個階段,我們需要暸解以下四點:
客戶:也就是需求方,可能是老闆、其他部門或甲方。
用戶:產品的終端使用者。
目標:本次需求的問題。例如加入XX功能、提升XX%的購買量都是可能的目標。
限制:時間、成本、或設計限制。

2.進行設計思考 分析

經由前面所蒐集到的資料,規劃出使用者輪廓(Persona),站在其角度發掘需求及痛點,並以此為基礎,規劃能吸引用戶點擊、刺激購買慾,並增加轉換率的設計。

3.繪製地圖 報價

針對使用者輪廓,並跟客戶確認製作方案後,將其繪製成網站地圖(Sitemap),以檢視網頁大致的架構,再交由資訊團隊分析此專案所需的人力、成本等構成,進而製作報價。

網站地圖(Sitemap)
網站地圖(Sitemap)

4.基本雛型 排版

確認報價後,接下來與客戶進行設計溝通,先利用線框圖(Wireframe),使用簡單的灰階、線條、符號或框線,來表達網頁的排版架構。呈現出網頁介面的主要內容與排版架構,幫助雙方確認網站核心部分。如果省去線框圖,將可能造成雙方對網站的設計認知有所落差,導致後期大量修改,延誤交付時間。

線框圖(Wireframe)
線框圖(Wireframe)

5.介面視覺 設計

跟客戶確認線框圖製作的網頁排版後,UI 設計師再進行視覺設計中的字型、顏色與 Icon 設計等細節調整製作視覺稿,以增強產品質感與使用體驗的效果。完成後再與業主確認是否為對方想要的感覺。

6.易用性測試 改良

最後,確認功能的設計邏輯是否順暢,及整體介面是否直觀、易操作。藉由易用性測試來評估網站是否真的能滿足使用者需求,再針對測試結果的反饋,進行細節上的修改與調整。

設計小技巧

在了解UI/UX和設計流程後,總的來說就是要注意這三件事:

1. 以用戶需求為本的設計思考 經由不斷的思考與測試,我們可以更有效率的設計出更貼近使用者需求的產品。除了從使用者的角度,也會從技術及商業層面進行討論,達到品牌與用戶間的平衡。

2. 介面設計是可互動的 簡單來說就是使用者如何使用介面,介面又給使用者什麼樣的回饋。 一些通用的設計原則,可以確保使用體驗,不會因為超出使用者的預期,而對產品的產生不信任,然後放棄產品。

3. 開發流程的轉變 比起平面設計大多是一次性,UI/UX設計的不同之處在於會不斷優化,不斷重複“規劃→設計→開發→測試”的過程。雖然真的很煩(XD),但卻可以讓使用者體驗得到最優化。

設計好壞的差異

好的UI設計可以讓你很清楚知道按鈕在哪裡,直覺的知道下一步的流程,清晰的文字、按鈕、顏色、乾淨簡單的設計;好的UX設計會考慮到你每一個動作的流程,讓你在使用任何工具、系統、服務時,都能用最簡單的方式完成動作,即使有發生錯誤也會友善提醒,不會讓你重複一樣的動作而卡關。

下面是以網站的形式做UI/UX設計好壞的案例。

好的 UI:文字、按鈕、圖片等元素使用一致的設計樣式

好的 UI:文字、按鈕、圖片等元素使用一致的設計樣式
Source: Career Foundry

好的 UI:馬上知道要按哪一個登入按鈕

好的 UI:馬上知道要按哪一個登入按鈕
Source: Career Foundry

好的UX:填錯密碼時清楚的提醒

Source: Career Foundry

UI/UX 可以應用在哪裡

UI/UX 不只是用在數位系統開發,其實 UI/UX 無所不在~~舉凡一般網站、平板、手機、網站、點餐機、汽車控制台、電影、虛擬實境(VR)、展場設計、餐廳.…..,有數不完的應用方式。

再詳細舉例:餐廳的UI/UX設計,先思考餐廳的受眾有誰呢?有消費者、點餐結帳人員、廚師、服務人員:設計之前再收集足夠的使用者體驗,包含消費者的點餐、等餐、座位配置,服務人員的送餐路線、廚師的餐廳動線、結帳人員收費流程、餐廳空間規劃、用餐後評價…等,以上的各種使用者體驗、習慣、空間動線就是由UX設計師收集歸納後進行流程設計,設計後交由UI設計師進行視覺設計與優化,依照CIS設計原則設計,以上就是一個完整的餐廳UI/UX設計。

所以當你有以上需求,就可以來找飛拉霓諮詢啦~

結語

經過飛拉霓的講解,相信大家對 UI/UX 設計已經有粗淺的認識。現在大家之所以都重視 UI/UX,是因為市場漸漸證明越能貼近使用者需求感受的產品,越受消費者青睞。

然而很多小公司為了節省成本,通常會讓UI設計師和尚兼撞鐘地兼差UX的工作,但是UX需要有更多的背景知識與調查研究,才能有效地讓使用者在瀏覽網頁時,達到心理歷程上的改變,造成購買慾;不過,若設計師空有UX思維,缺乏UI的基本能力,則也容易讓網站的整體呈現觀感不好,而無法達到目標。

因此,最好的方式是有UX設計師來協助整個網站的使用者經驗與互動更流暢,搭配UI設計師將UX的理念得以實踐,讓產品在激烈的市場競爭中脫穎而出!

飛拉霓創意工作室

飛拉霓創意工作室

主打美式結合各式風格,打造令人耳目一新的獨特觀感,讓您的設計簡易明瞭又吸睛。透明化的價格、新潮設計、跨國設計師。

網頁設計

一頁式網頁

適合傳遞單一服務或商品的網頁

$8,800起

形象網站

適合品牌與企業的形象網站

$10,800起

購物車網站

想要有形象又是網路商店

$30,800起

其他服務

平面設計

服務包含LOGO設計、UI&UX設計、一頁式圖片設計。

SEO優化

透過網站結構、文字與內容敘述、關鍵字部署和更多重要的優化提升網站排名。

廣告代操與優化

提供社群媒體廣告與Google關鍵字廣告帶操。讓您做了網站,不怕沒有客人!

品牌流程規劃

我們將結合產業客群與需求、使用者經驗到流程、心理學規劃、與情感配色來探討最能夠產生共鳴的設計方案。

2023中旬推出!

電話:

04-37077059

網頁設計線上報價單

不論是要使用套版網站、半套版、或是客製化,都可以使用我們獨創的網頁表單讓您輕鬆得初步報價!

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.