數位行銷

UI/UX使用者介面和體驗設計

使用者介面(UI,User Interface)設計是設計軟體產品所涉及到的幾個交叉學科之一。 不論是用戶體驗(UX,User Experience)、交互設計(ID,Interaction Design),還是視覺/圖形設計(Visual / Graphic Design),都能牽扯到使用者介面設計。

 

一、什麼是使用者介面設計?
廣泛來講,使用者介面是人與機器交流的媒介。使用者向機器發出指令,機器隨即開始一段進程,回覆資訊,並給出回饋。使用者可以根據使用者回饋進行下一步操作的決策。
人機交互(HCI,Human Computer Interaciton)所關注的主要是數位介面,即過去的打卡機、命令列,直至今天的圖形介面(GUI,Graphic Design)。
使用者介面設計對於數碼產品來說主要關注的是佈局、資訊結構,以及介面元素在顯示幕和各種終端平臺上的展示。電子遊戲和電視介面也包括其中。

0 GAGk 4G3l8C1nL0u

Xerox 8010 Information System in 1981 (DigiBarn, used under CC BY; cropped from original)

maxresdefault

圖片來源:https://www.youtube.com/watch?v=YXE6HjN8heg

使用者介面設計師根據設計原則來創作符合用戶需求的設計,而不是單純地提供技術解決方案。在這過程中往往需要在平衡取捨使用者功能需求和展示效果(由品牌定位和視覺設計決定)。

0 5LM71htzEVLuwZjR

B2B 儀錶板使用者介面設計(B2B dashboard UI design)

優秀的使用者介面設計利用清晰、統一的視覺層次和內容結構來引導使用者完成任務,並減少非必要的內容和元素。

出色的使用者介面通過真實世界的符號隱喻傳達資訊,例如按鈕、聲量滑塊、日曆、軟碟樣式的保存圖示等。

使用者介面的組成元素主要包括:
o 輸入:讓使用者可以進行選擇或輸入資訊,包括核取方塊、單選框、下拉清單和文本域等交互元件等。
o 選單/導航:用於選擇目的地和篩選資訊的元件,包括下拉式功能表、捲軸、toast、頁籤和分頁等。
o 信息:向使用者提供回饋的交互元素,包括圖示、文字、媒體、進度條和提示等。

0 YbkX1wj39X0CqS3L

iOS app UI design, by Thrive

高效的設計師會參考優秀設計案例、設計慣例、標準以及可用性原則來確保介面方案符合使用者需要。其中最重要的設計原則包括:
o 統一的介面元素能讓使用者快速熟悉並掌握使用方法;
o 清晰的元素層級和頁面結構能讓使用者一眼看到最重要的內容;
o 用顏色和字體等樣式來向使用者暗示元素的優先順序以及作用;
o 發送系統狀態變更、錯誤以及使用者操作時,提供回饋資訊,以便使用者瞭解進程並進行下一步決策;
o 瞭解用戶喜好和需求優先順序,讓操作過程更順暢自然;
o 利用留白及合理佈局讓介面更加清晰易懂。

UI design for a plant watering mobile app, by Tubik

二、使用者介面設計和體驗設計的差別
使用者介面設計和使用者體驗設計很容易混淆。雖然二者有重合之處,但是各自有截然不同的技能需求。
使用者體驗設計注重產品的全域架構和功能,以及用戶使用感受。相較於介面設計師來說,體驗設計師的工作集中在通過資訊架構來組織內容通過使用者調研、任務測試和商業分析進行方案決策。以電子商務的帳號創建和下單流程為例,體驗設計師使用使用者流程、體驗地圖、低保真線框圖和交互原型等方法,並通過用戶測試來驗證和優化設計理念。

Apple Watch wireframe animation (UX design by Alex Dovhyi)

三、使用者介面設計與體驗設計的對比
介面並不是產品的真正解決方案。介面設計通常在體驗設計師的工作中占重頭戲,但並不是全部。你可以這樣理解:如果說使用者體驗是消耗品的話,那麼使用者介面就是工具(使用消耗品的工具)。
使用者體驗設計是包含很多個步驟的設計策略流程,其目標是創造產品具有吸引力、方便使用、易於理解的產品。通過使用者體驗設計這個流程,我們可以獲得正確的使用者介面解決方案。

0 NpuGcXHzmO2L6xVp

The difference between UI and UX (Illustration by Shane Rounce)

四、使用者介面設計師做什麼?
使用者介面設計師在使用者體驗設計師提供的線框圖的基礎上,創造更加接近最終形式的產品介面方案。他們需要遵循體驗線框圖所表達的資訊層級和優先順序,並將合理統一的視覺和交互規則運用於整個產品。

eCommerce UI design store concept, by Remco Bakker

使用者介面設計師的職責範圍包括視覺層級、構圖、間距、對齊、標題和文字的視覺比重、元件使用規則(按鈕、表單等)以及配色規範和Logo。
由於現如今使用者介面越來越多的涉及到動態交互及過渡,而不限於簡單的靜態頁面,介面設計師也會需要與動效和交互設計師合作,並優化用戶體驗設計師所提供的基本交互理念。
使用者介面設計也包含資料視覺化和資訊設計的工作,這些能通過簡單的資訊展示説明使用者快速理解複雜的資料。

Jewelry store eCommerce UI design concept, by Tubik

使用者介面設計師提供最終的頁面高保真原型給程式開發人員。上文提到使用者介面設計有時與使用者體驗設計有重合之處,其實它也可以涉及到前端開發,尤其可能參與建立前端元件庫和頁面範本。
為了提高使用者體驗優化效率,我們的工作方式正在變得越來越成熟。因為當今世界的數位化進程,使用者介面設計扮演的角色愈發重要。在接下來的數十年裡,使用者介面設計將突破二維螢幕,朝著3D和VR(虛擬實境)、AR(增強現實)和MR(混合現實)的方向演化。
無論技術、螢幕、場所和環境如何,介面設計的關注點都會堅持聚焦於人機交互與體驗的高效性。


原文連結:《UI vs UX  —  A Guide to UI Design》 Mikos Philips
注譯者的微信公眾號:「交互進階」

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
點此加我們LINE
DMC Firewall is a Joomla Security extension!