什么是用戶界面和體驗設(shè)計?這里有4點想法

1 評論 10026 瀏覽 37 收藏 10 分鐘

用戶界面是人與機器交流的媒介,用戶向機器發(fā)出指令,機器隨即開始一段進程,回復(fù)信息,并給出反饋,用戶可以根據(jù)用戶反饋進行下一步操作的決策。體驗設(shè)計注重產(chǎn)品的全局架構(gòu)和功能,以及用戶使用感受。那一起到文章中那看看用戶界面和體驗設(shè)計具體是什么?以及它們的區(qū)別。

因為發(fā)現(xiàn)仍然有小伙伴跑來問我比較基礎(chǔ)的專業(yè)劃分問題,所以翻譯了這篇科普文。

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

一、什么是用戶界面設(shè)計?

廣泛來講,用戶界面是人與機器交流的媒介,用戶向機器發(fā)出指令,機器隨即開始一段進程,回復(fù)信息,并給出反饋,用戶可以根據(jù)用戶反饋進行下一步操作的決策。

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

用戶界面設(shè)計對于數(shù)碼產(chǎn)品來說主要關(guān)注的是布局、信息結(jié)構(gòu),以及界面元素在顯示屏和各種終端平臺上的展示,電子游戲和電視界面也包括其中。

1981 年的 Xerox 8010 信息系統(tǒng)(圖片來源:DigiBarn ,圖片有裁剪)

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

B2B 儀表板用戶界面設(shè)計

優(yōu)秀的用戶界面設(shè)計利用清晰、統(tǒng)一的視覺層次和內(nèi)容結(jié)構(gòu)來引導(dǎo)用戶完成任務(wù),并減少非必要的內(nèi)容和元素。

出色的用戶界面通過真實世界的符號隱喻傳達信息——例如:按鈕、聲量滑塊、日歷、軟盤樣式的保存圖標(biāo)等。

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

  • 輸入:讓用戶可以進行選擇或輸入信息,包括復(fù)選框、單選框、下拉框和文本域等交互組件等。
  • 導(dǎo)航:用于選擇目的地和篩選信息的組件,包括下拉菜單、滾動條、面包屑、頁簽和分頁等。
  • 信息:向用戶提供反饋的交互元素,包括圖標(biāo)、文字、媒體、進度條和提示等。

圖片來源:Thrive

高效的設(shè)計師會參考優(yōu)秀設(shè)計案例、設(shè)計慣例、標(biāo)準(zhǔn)以及可用性原則來確保界面方案符合用戶需要。

其中最重要的設(shè)計原則包括:

  • 統(tǒng)一的界面元素能讓用戶快速熟悉并掌握使用方式;
  • 清晰的元素層級和頁面結(jié)構(gòu)能讓用戶一眼看到最重要的內(nèi)容;
  • 用顏色和字體等樣式來向用戶暗示元素的優(yōu)先級以及作用;
  • 發(fā)送系統(tǒng)狀態(tài)變更、錯誤以及用戶操作時,提供反饋信息,以便用戶了解進程并進行下一步?jīng)Q策;
  • 了解用戶喜好和需求優(yōu)先級,讓操作過程更順暢自然;
  • 利用留白及合理布局讓界面更加清晰易懂。

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

二、用戶界面設(shè)計和體驗設(shè)計的差別

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

用戶體驗設(shè)計注重產(chǎn)品的全局架構(gòu)和功能,以及用戶使用感受。相較于界面設(shè)計師來說,體驗設(shè)計師的工作集中在通過信息架構(gòu)來組織內(nèi)容,通過用戶調(diào)研、任務(wù)測試和商業(yè)分析進行方案決策。

以電子商務(wù)的賬號創(chuàng)建和下單流程為例:體驗設(shè)計師使用用戶流程、體驗地圖、低保真線框圖和交互原型等方法,并通過用戶測試來驗證和優(yōu)化設(shè)計理念。

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

三、用戶界面設(shè)計與體驗設(shè)計的對比

界面并不是產(chǎn)品的真正解決方案,界面設(shè)計通常在體驗設(shè)計師的工作中占重頭戲,但并不是全部。你可以這樣理解:如果說用戶體驗是消耗品的話,那么用戶界面就是工具(使用消耗品的工具)。

用戶體驗設(shè)計是包含很多個步驟的設(shè)計策略流程,其目標(biāo)是創(chuàng)造產(chǎn)品具有吸引力、方便使用、易于理解的產(chǎn)品。通過用戶體驗設(shè)計這個流程,我們可以獲得正確的用戶界面解決方案。

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

四、用戶界面設(shè)計師做什么?

用戶界面設(shè)計師在用戶體驗設(shè)計師提供的線框圖的基礎(chǔ)上,創(chuàng)造更加接近最終形式的產(chǎn)品界面方案。他們需要遵循體驗線框圖所表達的信息層級和優(yōu)先級,并將合理統(tǒng)一的視覺和交互規(guī)則運用于整個產(chǎn)品。

電商界面概念設(shè)計,圖片來源:Remco Bakker

用戶界面設(shè)計師的職責(zé)范圍包括視覺層級、構(gòu)圖、間距、對其、標(biāo)題和文字的視覺比重、組件使用規(guī)則(按鈕、表單等)以及配色規(guī)范和Logo。

由于現(xiàn)如今用戶界面越來越多的涉及到動態(tài)交互及過渡,而不限于簡單的靜態(tài)頁面,界面設(shè)計師也會需要與動效和交互設(shè)計師合作,并優(yōu)化用戶體驗設(shè)計師所提供的基本交互理念。

用戶界面設(shè)計也包含數(shù)據(jù)可視化和信息設(shè)計的工作,這些能通過簡單的信息展示幫助用戶快速理解復(fù)雜的數(shù)據(jù)。

珠寶電商概念設(shè)計,圖片來源:Tubik

用戶界面設(shè)計師提供最終的頁面高保真原型給程序開發(fā)人員,上文提到用戶界面設(shè)計有時與用戶體驗設(shè)計有重合之處,其實它也可以涉及到前端開發(fā),尤其可能參與建立前端組件庫、和頁面模板。

為了提高用戶體驗優(yōu)化效率,我們的工作方式正在變得越來越成熟。因為當(dāng)今世界的數(shù)字化進程,用戶界面設(shè)計扮演的角色愈發(fā)重要。在接下來的數(shù)十年里,用戶界面設(shè)計將突破二維屏幕,朝著3D和VR(虛擬現(xiàn)實)、AR(增強現(xiàn)實)和MR(混合現(xiàn)實)的方向演化。

無論技術(shù)、屏幕、場所和環(huán)境如何,界面設(shè)計的關(guān)注點都會堅持聚焦于人機交互與體驗的高效性。

 

原文作者:Mikos Philips

原文鏈接:UI vs UX? — ?A Guide to UI?Design

譯文作者:Z_Yuhan

譯文鏈接:https://www.jianshu.com/p/3c77e53ace2c

本文由 @Z_Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!