高手總結(jié)！深挖體驗(yàn)設(shè)計(jì)中的交互組件（上）

前言

組件是體驗(yàn)設(shè)計(jì)工作中的一個(gè)重要概念，很多設(shè)計(jì)師接觸最多的組件類(lèi)型是 UI 組件，而對(duì)交互組件處于一知半解的狀態(tài)。今天本篇文章將從底層邏輯出發(fā)，并結(jié)合具體的交互案例幫助大家了解什么是交互組件，分析和研究常見(jiàn)交互組件的運(yùn)行機(jī)制。

推薦閱讀：

一、交互組件是什么？

在體驗(yàn)設(shè)計(jì)中，交互組件是一種可復(fù)用的設(shè)計(jì)元素，用于實(shí)現(xiàn)特定的產(chǎn)品功能。相較于 UI 組件，它側(cè)重于產(chǎn)品功能的實(shí)現(xiàn)和用戶目標(biāo)的達(dá)成。設(shè)計(jì)師可以對(duì)既定交互組件進(jìn)行優(yōu)化以提升產(chǎn)品的易用性和可用性。

二、交互組件的特點(diǎn)是什么？

1. 交互組件通常具有以下特點(diǎn)：

可復(fù)用性：交互組件具有很強(qiáng)的可復(fù)用性，在同一個(gè) app 或同一個(gè)設(shè)計(jì)系統(tǒng)中可以根據(jù)業(yè)務(wù)場(chǎng)景和功能需求復(fù)用，在一定程度可以避免重復(fù)設(shè)計(jì)和減少開(kāi)發(fā)工作量。

模塊化：交互組件根據(jù)業(yè)務(wù)需求遵循交互邏輯以模塊化的方式進(jìn)行組織，方便設(shè)計(jì)師進(jìn)行調(diào)用和團(tuán)隊(duì)協(xié)作，提高設(shè)計(jì)效率。

可定制性：交互組件不是一成不變的，通常會(huì)根據(jù)不同的使用場(chǎng)景和需求提供可定制的選項(xiàng)和參數(shù)，方便設(shè)計(jì)師據(jù)此進(jìn)行個(gè)性化創(chuàng)作。

易用性：交互組件通常具備易用性特點(diǎn)，例如明確的提示信息和易于操作的界面元素等，以提高用戶滿意度。

三、常見(jiàn)的交互組件案例與解析

在我們使用交互組件進(jìn)行項(xiàng)目設(shè)計(jì)時(shí)，需要充分了解不同組件的特點(diǎn)和適用環(huán)境。常用的交互組件通常有按鈕、彈窗、滑桿、彈出菜單、通知提醒等。以下內(nèi)容將結(jié)合具體案例深挖常見(jiàn)交互組件的底層邏輯，闡述交互組件在體驗(yàn)設(shè)計(jì)中的作用。

1. 按鈕

按鈕是一種常見(jiàn)的交互組件，可以用于執(zhí)行交互動(dòng)作，展示系統(tǒng)狀態(tài)。

案例分享：通過(guò)使用游戲中心下載文件，研究按鈕組件的狀態(tài)變化和提升按鈕組件的可用性。

通過(guò)以上我們可以發(fā)現(xiàn)，按鈕組件的交互特性通常具有以下特點(diǎn)：

1. 按鈕的交互層級(jí)較高。
2. 按鈕文本需要包含表達(dá)交互動(dòng)作的動(dòng)詞，如下載、保存、安裝、關(guān)注、登錄等。也可以增加輔助文本表達(dá)系統(tǒng)的運(yùn)行狀態(tài)，降低用戶等待焦慮。
3. 按鈕的交互熱區(qū)通常為按鈕本身。
4. 按鈕通常具有默認(rèn)態(tài)、點(diǎn)擊態(tài)、高亮態(tài)等不同狀態(tài)。

2. 搜索

承載搜索功能的交互組件一般是搜索按鈕，搜索框等。

案例分享：使用 qq 音樂(lè)搜索框進(jìn)行模糊搜索/精確搜索操作。

搜索功能需要復(fù)雜的系統(tǒng)支撐，上述流程釋義僅為典型操作。

搜索框組件通常具有以下特點(diǎn)：

1. 搜索框的位置通常為頁(yè)面頂部，可以通過(guò)滑動(dòng)等操作隱藏，以便用戶沉浸式的使用產(chǎn)品
2. 搜索框的交互層級(jí)低于頂部導(dǎo)航欄
3. 搜索框可以用于精準(zhǔn)搜索/模糊搜索等任務(wù)，通過(guò)優(yōu)化搜索系統(tǒng)可以減低用戶輸入文本的數(shù)量，提高搜索效率
4. 搜索框通常有激活態(tài)和未激活態(tài)
5. 搜索流程包含的交互手勢(shì)通常為點(diǎn)擊、長(zhǎng)按、滑動(dòng)和鍵盤(pán)輸入（語(yǔ)音輸入）等

3. 頂部導(dǎo)航欄

頂部導(dǎo)航欄用于單頁(yè)面中多個(gè)平行級(jí)模塊間的快速切換。

案例分享：體驗(yàn)小米 14 主題商店 app 頂部導(dǎo)航欄的切換操作

通過(guò)以上案例我們可以發(fā)現(xiàn)頂部導(dǎo)航欄組件的交互操作較為簡(jiǎn)單，主要為點(diǎn)擊和橫向滑動(dòng)。該組件的特點(diǎn)為：

1. 頂部導(dǎo)航欄的位置一般為頁(yè)面頂部
2. 頂部導(dǎo)航欄的交互手勢(shì)為點(diǎn)擊和橫向滑動(dòng)
3. 可以通過(guò)點(diǎn)擊模塊標(biāo)簽切換，也可以通過(guò)滑動(dòng)不包含橫向滑動(dòng)交互動(dòng)作的內(nèi)容區(qū)實(shí)現(xiàn)切換
4. 頂部導(dǎo)航欄的模塊數(shù)量可以根據(jù)業(yè)務(wù)定義決定，但最小值為 2

4. 滑桿

滑桿組件用于連續(xù)性數(shù)值的快速調(diào)整，也可以通過(guò)優(yōu)化交互組件兼顧精細(xì)操作。

案例分享：體驗(yàn)小米相冊(cè)編輯功能包含的滑桿組件

通過(guò)以上案例我們可以發(fā)現(xiàn)滑桿組件一般通過(guò)橫向拖動(dòng)完成連續(xù)性數(shù)值的調(diào)整，該組件具有以下特點(diǎn)：

1. 滑桿組件的交互手勢(shì)為輕觸和拖動(dòng)。
2. 滑桿組件交互效率高，調(diào)節(jié)速度快。通過(guò)優(yōu)化橫向拖動(dòng)的阻尼，可以同時(shí)滿足快速調(diào)整和精細(xì)調(diào)整的用戶需求。

5. 滑動(dòng)選擇器彈窗

滑動(dòng)選擇器用于連續(xù)性數(shù)值的調(diào)整，交互層級(jí)高，會(huì)打斷用戶當(dāng)前操作，對(duì)用戶的干擾較大。

案例分享：華為運(yùn)動(dòng)健康 app 調(diào)整時(shí)間的操作

通過(guò)以上案例我們可以發(fā)現(xiàn)滑動(dòng)選擇器具有以下特點(diǎn)：

1. 通常適用于連續(xù)性數(shù)值的調(diào)整
2. 交互手勢(shì)為：點(diǎn)擊、拖動(dòng)和滑動(dòng)
3. 需要通過(guò)點(diǎn)擊確定按鈕完成保存操作

四、總結(jié)和建議

本文闡述了交互組件的概念，帶大家了解了交互組件的四個(gè)特點(diǎn)：可復(fù)用性、模塊化 、可定制性和易用性。交互組件在體驗(yàn)設(shè)計(jì)工作中作為一個(gè)有力的設(shè)計(jì)工具，可以用來(lái)提升產(chǎn)品的易用性和可用性，可以對(duì)設(shè)計(jì)方案的標(biāo)準(zhǔn)化和可迭代性具有不可替代的作用。同時(shí)也會(huì)發(fā)現(xiàn)交互組件是一個(gè)持續(xù)優(yōu)化的設(shè)計(jì)元素，它服務(wù)的對(duì)象是產(chǎn)品的設(shè)計(jì)目標(biāo)。既定的交互組件具有一定程度的指導(dǎo)意義，我們可以深入挖掘交互組件的功能特性和用法之后，緊密結(jié)合用戶的真實(shí)需求，輸出令用戶滿意的體驗(yàn)設(shè)計(jì)方案。我們也可以借鑒蘋(píng)果的人機(jī)界面指南（Human Interface Guidelines）、谷歌的 Material Design 等成熟的設(shè)計(jì)系統(tǒng)，結(jié)合項(xiàng)目要求、業(yè)務(wù)背景等客觀因素輸出設(shè)計(jì)方案。

今天主要通過(guò) 5 個(gè)案例的分享和學(xué)習(xí)，帶大家深入了解了 5 個(gè)常見(jiàn)的交互組件。這幾個(gè)組件可以在一定程度支撐工作中的設(shè)計(jì)任務(wù)，在工作中經(jīng)常用到的其他組件例如氣泡、浮層等，在接下來(lái)的時(shí)間里再給大家?guī)?lái)分享。