新手上課!什麼是用戶介面和體驗設計?

Z Yuhan:用户界面(UI,User Interface)設計是設計軟體產品所涉及到的幾個交叉學科之一。

不論是用戶體驗(UX,User Experience)、交互設計(ID,Interaction Design),還是視覺/圖形設計(Visual / Graphic Design),都能牽扯到用户界面設計。

一、什麼是用户界面設計?

廣泛來講,用户界面是人與機器交流的媒介。用戶向機器發出指令,機器隨即開始一段進程,回複訊息,並給出反饋。用戶可以根據用戶反饋進行下一步操作的決策。

人機交互(HCI,Human Computer Interaciton)所關注的主要是數字介面,即過去的打孔機、命令行,直至今天的圖形介面(GUI,Graphic Design)。

用户界面設計對於數碼產品來說主要關注的是布局、訊息結構,以及介面元素在顯示屏和各種終端平台上的展示。電子遊戲和電視介面也包括其中。

△ 1981 年的 Xerox 8010 訊息系統(圖片來源:DigiBarn

用户界面設計師根據設計原則來創作符合用戶需求的設計,而不是單純地提供技術解決方案。

在這過程中往往需要在平衡取捨用戶功能需求和展示效果(由品牌定位和視覺設計決定)。

△ B2B 儀錶板用户界面設計

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

出色的用户界面通過真實世界的符號隱喻傳達訊息,例如按鈕、聲量滑塊、日曆、軟盤樣式的保存圖標等。

用户界面的組成元素主要包括:

  • 輸入:讓用戶可以進行選擇或輸入訊息,包括複選框、單選框、下拉框和文本域等交互組件等。
  • 導航:用於選擇目的地和篩選訊息的組件,包括下拉菜單、滾動條、toast、頁簽和分頁等。
  • 訊息:向用戶提供反饋的交互元素,包括圖標、文字、媒體、進度條和提示等。

△ 圖片來源:Thrive

高效的設計師會參考優秀設計案例、設計慣例、標準以及可用性原則來確保介面方案符合用戶需要。

其中最重要的設計原則包括:

  • 統一的介面元素能讓用戶快速熟悉並掌握使用方法;
  • 清晰的元素層級和頁面結構能讓用戶一眼看到最重要的內容;
  • 用顏色和字體等樣式來向用戶暗示元素的優先順序以及作用;
  • 發送系統狀態變更、錯誤以及用戶操作時,提供反饋訊息,以便用戶了解進程並進行下一步決策;
  • 了解用戶喜好和需求優先順序,讓操作過程更順暢自然;
  • 利用留白及合理布局讓介面更加清晰易懂。

△ 植物澆水App,圖片來源:Tubik

二、用户界面設計和體驗設計的差別

用户界面設計和用戶體驗設計很容易混淆。雖然二者有重合之處,但是各自有截然不同的技能需求。

用戶體驗設計注重產品的全局架構和功能,以及用戶使用感受。

相較于介面設計師來說,體驗設計師的工作集中在通過訊息架構來組織內容通過用戶研究與調查、任務測試和商業分析進行方案決策。

以電子商務的帳號創建和下單流程為例,體驗設計師使用用戶流程、體驗地圖、低保真線框圖和交互原型等方法,並通過用戶測試來驗證和優化設計理念。

△ Apple Watch 原型動畫,圖片來源:Alex Dovhyi

三、用户界面設計與體驗設計的對比

介面並不是產品的真正解決方案。介面設計通常在體驗設計師的工作中占重頭戲,但並不是全部。

你可以這樣理解:如果說用戶體驗是消耗品的話,那麼用户界面就是工具(使用消耗品的工具)。

用戶體驗設計是包含很多個步驟的設計策略流程,其目標是創造產品具有吸引力、方便使用、易於理解的產品。

通過用戶體驗設計這個流程,我們可以獲得正確的用户界面解決方案。

△ 用戶體驗(UX)與用戶體驗(UI),圖片來源:Shane Rounce

四、用户界面設計師做什麼?

用户界面設計師在用戶體驗設計師提供的線框圖的基礎上,創造更加接近最終形式的產品介面方案。

他們需要遵循體驗線框圖所表達的訊息層級和優先順序,並將合理統一的視覺和交互規則運用於整個產品。

△ 電商介面概念設計,圖片來源:Remco Bakker

用户界面設計師的職責範圍包括視覺層級、構圖、間距、對齊、標題和文字的視覺比重、組件使用規則(按鈕、表單等)以及配色規範和Logo。

由於現如今用户界面越來越多的涉及到動態交互及過渡,而不限於簡單的靜態頁面,介面設計師也會需要與動效和交互設計師合作,並優化用戶體驗設計師所提供的基本交互理念。

用户界面設計也包含數據可視化和訊息設計的工作,這些能通過簡單的訊息展示幫助用戶快速理解複雜的數據。

△ 珠寶電商概念設計,圖片來源:Tubik

用户界面設計師提供最終的頁面高保真原型給程序開發人員。

上文提到用户界面設計有時與用戶體驗設計有重合之處,其實它也可以涉及到前端開發,尤其可能參與建立前端組件庫和頁面模板。

為了提高用戶體驗優化效率,我們的工作方式正在變得越來越成熟。因為當今世界的數字化進程,用户界面設計扮演的角色愈發重要。

在接下來的數十年裡,用户界面設計將突破二維螢幕,朝著3D和VR(虛擬現實)、AR(增強現實)和MR(混合現實)的方向演化。

無論技術、螢幕、場所和環境如何,介面設計的關注點都會堅持聚焦於人機交互與體驗的高效性。


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

以下幾點請你深思一下

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化