以上這張圖是交互設(shè)計(jì)師的知識體系，涉及到的內(nèi)容特別多，本文主要想給大家解釋的是UX和UI的關(guān)系，以后再詳細(xì)給大家介紹交互設(shè)計(jì)的其他方面。

在交互設(shè)計(jì)的世界中，一直充斥著各種諸如UX、UI這樣的專業(yè)名詞。不明真相的你是否一直很好奇他們到底是什么意思呢？

在傳遞一個(gè)非凡的網(wǎng)站使用體驗(yàn)給終端用戶的過程中，UX（User Experience 用戶體驗(yàn)）設(shè)計(jì)和UI（User Interface 用戶界面）設(shè)計(jì)兩者皆是其中重要的組成部分，但又并不相同。我們將快速的分解出兩者之間的關(guān)鍵差異，并接著討論他們又是如何關(guān)聯(lián)在一起的。

UI （用戶界面） 設(shè)計(jì)主要包括Web設(shè)計(jì)的視覺部分。它呈現(xiàn)了展示層和互動(dòng)層的不同層次，賦予產(chǎn)品一個(gè)整體的外觀觀感和感受。

 UI （用戶界面） 設(shè)計(jì)主要包括Web設(shè)計(jì)的視覺部分。它呈現(xiàn)了展示層和互動(dòng)層的不同層次，賦予產(chǎn)品一個(gè)整體的外觀觀感和感受。

Usability.gov 是一個(gè)面向Web設(shè)計(jì)最佳實(shí)踐和指南的重要資源網(wǎng)站，其中將不同的UI元素分類為：

- 輸入類（Input） --- 文本字段表單（Textfield forms）、日期字段表單（date field forms）、下拉列表（dropdown lists）、復(fù)選框（checkboxes）、列表框（list boxes）、可點(diǎn)擊按鈕，等等。

- 導(dǎo)航類（Navigation） --- 滑動(dòng)條（Sliders）、搜索字段表單（searchfield forms）、分頁元素（pagination）、側(cè)邊欄（siderbars）、標(biāo)簽（tags）、圖標(biāo)（icons）等等。

- 分享類（Sharing） --- 好友列表（Friendlists）、關(guān)注按鈕（follow buttons）、贊/頂（like/promote）、分享按鈕、邀請好友，等等。

- 信息類（Information）--- 文本內(nèi)容（Textcontent）、提示信息（tooltips）、消息框（message boxes）、通知提醒（notifications）、圖標(biāo)、進(jìn)度條（progress bar），等。

UI設(shè)計(jì)不僅僅包含第一次訪問某個(gè)頁面時(shí)所看到內(nèi)容，還包括當(dāng)用戶與這些頁面元素互動(dòng)時(shí)元素如何反饋的設(shè)計(jì)。下面這個(gè)天氣預(yù)報(bào)的App 就是一個(gè)UI設(shè)計(jì)的互動(dòng)部分的典型范例展示：

如果UI把這些內(nèi)容都涵蓋了，那還剩下什么給UX呢？

 UX（用戶體驗(yàn)）設(shè)計(jì)被定義為：通過改善用戶和產(chǎn)品互動(dòng)過程中的可用性（usability）、易用性（ease of use）、樂用性（pleasure）來提升用戶滿意度和忠誠度（粘性）的過程。

So，他們兩者是如何關(guān)聯(lián)的呢？有效的UI和UX設(shè)計(jì)會(huì)緊密配合，為用戶創(chuàng)造一個(gè)全面愉悅的體驗(yàn)。如果其中之一沒有達(dá)標(biāo)，將會(huì)大大的影響整個(gè)設(shè)計(jì)的表現(xiàn)。例如，一個(gè)網(wǎng)站的UI設(shè)計(jì)很棒，但UX設(shè)計(jì)很糟糕，就會(huì)感覺不對勁。因?yàn)樗磥砻赖牧钊梭@嘆，但是卻又非常難以駕馭。另一方面，有些東西很實(shí)用但很不好看，就是UX設(shè)計(jì)很棒，UI設(shè)計(jì)很糟糕的典型例子。

60秒看完，有沒有懂一些了呢？

原文來自：Medium

翻譯：shunz

About AIVA