UI教務處|UI/UX核心觀念|用Figma打造絕佳UI/UX


Posted by itiswonderfall on 2021-12-17

前言

朋友說現在很多企業都把 UI 設計工具改成 Figma ,就讓我對這個軟體更加感興趣,想知道到底它為什麼可以這麼厲害?也剛好因為公司有外訓的機會所以購買此課程,在這把一些學習心得筆記下來,第一章先來介紹一下 UI / UX 的核心觀念。

圖片來源

 


 

UI

User Interface 又被稱為 UI ,指的是使用者可以看得到、摸得到甚至可以聽得到,可以與它做互動的一個東西。

UI cover

 

那所謂的介面設計還有平面設計,到底有哪裡不一樣呢?

最大差別當然是「 使用者 」這三個字,必須要有使用者,要可以跟它互動,這才叫做使用者介面,然後平面設計的話,像是海報、看板,沒有一個特定的使用者,所以你也不能去跟他互動,所以這樣子就比較屬於平面設計的範疇。

( 圖片來源 — 左樂高看手機手稿右樂高

 

為什麼需要介面?

介面是使用者和產品中間的溝通橋樑,使用者輸入資料給介質,介質輸出資料給產品的後端伺服器,然後產品顯示回饋給介質最後再讓使用者知道,那這就是介面最主要的一個功能。

介面運作流程

( 圖片來源 — 人物介質產品

 

那生活中有哪些介面?

手機、平板、 Siri 都是現代常見的載體,但其實介面這個東西已經存在在我們生活周遭非常久了,例如下方的:自動販賣機、 gameboy …等等,有非常多的實體按鈕,它其實也是介面的一種,因為你可以跟它互動,在你下指令後,這個產品也會做它應該要做的事情,所以其實介面幾乎是無所不在的,你也可以想想還有什麼東西是會出現在我們生活中的介面喔。

介面範例

( 圖片來源 — 左上中上右上左下中下右下

 


 

UX

使用者體驗( User Experience ) 又稱 UX ,是使用者對於產品或服務,他整體的體驗或者是感受。

UI cover

 

UX 教父

UX 這個概念,最早是 Donald Arthur Norman 提出的,而他也被稱為 UX 教父,因為他早期是在蘋果擔任使用者體驗架構師,也是第一位用使用者體驗當作正式職稱的人,他在 1998 年的時候和他的一位夥伴一起創立顧問公司,而這公司就非常注重「 以人為本 」的一個設計方向。

Norman 在 2012 年的時候有接受過一個採訪,其中有一個非常重要的片段,他表示其實 UX 使用者體驗,就是所有跟產品有關體驗的一個總合。

也就說使用者今天在使用產品之前、使用中或是使用後,他所產生的不管是生理或心理上的反應,都可以代表 UX 的一個範圍之一。
例如說他報紙上看到廣告,所以上網搜尋或到店詢問,然後享受你的產品跟服務,最後把心得分享或推薦給朋友,這些都算是使用者體驗的一環。

( 圖片來源 —

 

UX 範圍

UX範圍

圖片來源

UX 所涵蓋的範圍還有面向其實非常廣,所以比較難用一句話去定義它,它包含了許多跨領域的專業,最基本的像是視覺設計、互動設計,或者是說資訊架構、人因工程等等。

 

UX 職責

UX職責

( 圖片來源 — 左上右上左下右下

並不是說職稱叫 UX 的人就要攬起所有責任,它必須要是許多不同的角色,一起介入來達到一個好的使用體驗。
譬如說左上的產品經理能不能規劃出一個符合用戶需求的功能,右上的設計師可不可以做出好的介面,左下的工程師能不能透過一些程式的撰寫加快這個頁面讀取速度,又或者右下的客服人員能不能及時回覆使用者的問題,那這些都影響到使用者對於
產品的一個體驗。

 

UCD

前面提到所謂的以使用者為中心的設計,簡稱叫做 UCD ,它有幾個比較明確的步驟和流程:

  1. 在一開始的時候,你需要去了解使用者在什麼樣情境下,會來使用這個產品。
  2. 定義使用者他的真實需求是什麼。
  3. 做設計的解決方案。
  4. 評估這個設計的解決方案有沒有解決到使用者的問題,可以透過不管是使用者訪談,或是說使用者的滿意度評估,甚至是你用一些數據分析的方式,去判斷你這設計有沒有解決他的問題。

UCD

 

那我們有沒有辦法去判斷一個產品體驗到底好不好?

這是一個叫做 Peter 的人所提出的,類似蜂巢狀的一個圖表,那這裡面包含的七大指標幫助你去判斷說一個好的產品設計或是說好的使用體驗,應該是什麼樣子,它指出除了基本的易用性之外,一個有價值的 UX ,應該包含這 7 個指標。

產品體驗

 


 

結語

UI 關注是使用視覺元素跟互動模式來呈現資訊,幫助使用者來完成任務, UX 則是透過更廣的視角,來檢視整個產品從頭到尾的體驗。

 


 

參考資料

產品設計實戰:用Figma打造絕佳UI/UX


#UI #UX #ui教務處 #用 Figma 打造絕佳 UI / UX







Related Posts

2019 Web Backend 面試總結

2019 Web Backend 面試總結

瀏覽器的事件傳遞機制

瀏覽器的事件傳遞機制

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料

ASP.NET Core Web API 入門教學 - 使用PATCH局部更新資料


Comments