本文譯自 Mikos Philips 的 UI vs UX? — ?A Guide to UI Design

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

——

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

什么是用戶(hù)界面設(shè)計(jì)？

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

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

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

1981 年的 Xerox 8010 信息系統(tǒng)（圖片來(lái)源：DigiBarn ，圖片有裁剪）

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

B2B 儀表板用戶(hù)界面設(shè)計(jì)

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

出色的用戶(hù)界面通過(guò)真實(shí)世界的符號(hào)隱喻傳達(dá)信息——例如按鈕、聲量滑塊、日歷、軟盤(pán)樣式的保存圖標(biāo)等。

用戶(hù)界面的組成元素主要包括：

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

圖片來(lái)源：Thrive

高效的設(shè)計(jì)師會(huì)參考優(yōu)秀設(shè)計(jì)案例、設(shè)計(jì)慣例、標(biāo)準(zhǔn)以及可用性原則來(lái)確保界面方案符合用戶(hù)需要。其中最重要的設(shè)計(jì)原則包括：

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

植物澆水App，圖片來(lái)源：Tubik

用戶(hù)界面設(shè)計(jì)和體驗(yàn)設(shè)計(jì)的差別

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

用戶(hù)體驗(yàn)設(shè)計(jì)注重產(chǎn)品的全局架構(gòu)和功能，以及用戶(hù)使用感受。相較于界面設(shè)計(jì)師來(lái)說(shuō)，體驗(yàn)設(shè)計(jì)師的工作集中在通過(guò)信息架構(gòu)來(lái)組織內(nèi)容；通過(guò)用戶(hù)調(diào)研、任務(wù)測(cè)試和商業(yè)分析進(jìn)行方案決策。以電子商務(wù)的賬號(hào)創(chuàng)建和下單流程為例，體驗(yàn)設(shè)計(jì)師使用用戶(hù)流程、體驗(yàn)地圖、低保真線框圖和交互原型等方法，并通過(guò)用戶(hù)測(cè)試來(lái)驗(yàn)證和優(yōu)化設(shè)計(jì)理念。

Apple Watch 原型動(dòng)畫(huà)，圖片來(lái)源：Alex Dovhyi

用戶(hù)界面設(shè)計(jì)與體驗(yàn)設(shè)計(jì)的對(duì)比

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

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

用戶(hù)體驗(yàn)（UX）與用戶(hù)體驗(yàn)（UI），圖片來(lái)源：Shane Rounce

用戶(hù)界面設(shè)計(jì)師做什么？

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

電商界面概念設(shè)計(jì)，圖片來(lái)源：Remco Bakker

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

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

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

珠寶電商概念設(shè)計(jì)，圖片來(lái)源：Tubik

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

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

無(wú)論技術(shù)、屏幕、場(chǎng)所和環(huán)境如何，界面設(shè)計(jì)的關(guān)注點(diǎn)都會(huì)堅(jiān)持聚焦于人機(jī)交互與體驗(yàn)的高效性。

總結(jié)

以上是生活随笔為你收集整理的gui界面怎么分页_什么是用户界面和体验设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。