本文是關(guān)于反饋反饋的;反饋是用戶完成某事后系統(tǒng)對用戶的響應(yīng)。根據(jù)場景，此響應(yīng)將具有不同的響應(yīng)形式和不同的角色。

設(shè)計(jì)規(guī)范中最重要的部分是組件規(guī)范。開發(fā)組件規(guī)范有什么好處？

高效和簡單：在熟悉組件的使用之后，在設(shè)計(jì)界面時(shí)，您只需合理地使用組件即可快速構(gòu)建Web界面，這樣既高效又無錯(cuò)誤。由于存在一整套組件規(guī)范，因此無需在交互設(shè)計(jì)和可視化設(shè)計(jì)過程中每次都重復(fù)工作。

統(tǒng)一的用戶體驗(yàn)：通過使用統(tǒng)一的組件規(guī)范，可視化和交互設(shè)計(jì)可確保確保整體用戶體驗(yàn)。

改進(jìn)設(shè)計(jì)集成：由于減少了組件的重復(fù)性工作，交互設(shè)計(jì)人員/PM可以花更多的時(shí)間和精力來討論業(yè)務(wù)的綜合功能，設(shè)計(jì)方法，設(shè)計(jì)思路和定義產(chǎn)品。從而推動業(yè)務(wù)創(chuàng)新。

根據(jù)組件的用途，它可以分為六類：反饋反饋，表單，基本基礎(chǔ)，數(shù)據(jù)數(shù)據(jù)，導(dǎo)航導(dǎo)航等。

本文是關(guān)于反饋反饋的;反饋是用戶完成某事后系統(tǒng)對用戶的響應(yīng)。根據(jù)場景，此響應(yīng)將具有不同的響應(yīng)形式和不同的角色。

吐司

定義：用戶生成操作，出現(xiàn)吐司提示，一般2-3s消失;吐司中的提示通知用戶需要理解的信息。讓用戶的行為在使用過程中獲得反饋和幫助。

使用場景：

提供有關(guān)成功，警告或錯(cuò)誤的反饋。

頂部中心顯示并自動消失，這是一個(gè)輕量級提醒，不會中斷用戶的操作。

例如，如果短書未上載主題封面，請單擊“創(chuàng)建主題”按鈕，將出現(xiàn)“吐司”提示，提示用戶首先上載主題封面以創(chuàng)建主題。

有三種類型的Toast消息提示類別：成功類，失敗類和通用類。

有兩種類型的組件樣式：您可以單擊以使其消失，并且您無法單擊以使其消失。

提醒警報(bào)提示

定義：當(dāng)用戶進(jìn)行某種操作時(shí)，網(wǎng)站會顯示相應(yīng)的警告信息提示用戶，提示信息的狀態(tài)不會主動消失。

使用場景：

當(dāng)頁面需要向用戶顯示警告消息時(shí)。

始終顯示非浮動圖層的靜態(tài)表示，并且不會自動消失。某些組件用戶可以單擊關(guān)閉。

例如，在淘寶購物車之后，刪除后會出現(xiàn)警告警告。淘寶的例子屬于警報(bào)的變種。用戶可以單擊“刪除此刪除”以在還原之前執(zhí)行破壞性操作。

警報(bào)警報(bào)有三種類型的消息分類：成功類，失敗類和常規(guī)類。當(dāng)然，您也可以不包含圖標(biāo)操作。如果您有圖標(biāo)操作，則警報(bào)性會更強(qiáng)。

有兩種類型的警報(bào)警報(bào)組件樣式：具有刪除操作，沒有刪除操作。

對話框?qū)υ捒?/p>

定義：用于提示用戶完成當(dāng)前操作或完成任務(wù)所需的一些其他信息。對話框可以是帶有“確定/取消”的簡單應(yīng)答模式，也可以是填寫表單的自定義復(fù)雜模式。

使用場景：

用戶在執(zhí)行重要操作時(shí)需要執(zhí)行第二次確認(rèn)。

用于重要的反饋提示，讓用戶了解信息提示。

加載少量表單填充類以減少頁面跳轉(zhuǎn)。

Windows系統(tǒng)的“確定”按鈕通常位于左側(cè)，而Mac OS通常在右側(cè)確定。出于這個(gè)原因，我們通?？吹降臎Q定有時(shí)在左邊，有時(shí)在右邊。

微博和微信公眾號后臺的對話框在左側(cè)確定，而淘寶的對話框在右側(cè)。微信公眾賬號的對話框是一個(gè)小的浮動圖層彈出窗口，避免了掩碼的出現(xiàn)，對話框也出現(xiàn)在操作按鈕附近，對用戶的干擾也是最弱的。

對話框?qū)υ捒蛴腥N常見的使用場景。表單對話框，提示類，輕量級提示類和表單類樣式都基于輔助確認(rèn)類對話框樣式的更改。

通知通知提醒框

定義：懸停顯示在頁面的右上角，用于全局提醒通知。常見于服務(wù)器異常，操作失敗等。

使用場景：

更復(fù)雜的通知內(nèi)容。

帶有交互的通知，為用戶提供下一個(gè)操作點(diǎn)。

系統(tǒng)積極推動。

通知通知提示框顯示在網(wǎng)頁的右上角。一般來說，它會在4-5秒內(nèi)消失。您也可以單擊十字以關(guān)閉它。

工具提示文字提示

定義：簡單輕量的文本提示。

使用場景：

當(dāng)鼠標(biāo)移入時(shí)，會立即顯示提示，當(dāng)刪除時(shí)，它會立即消失，并且不會攜帶復(fù)雜的文本和操作。

通常用于解釋動作按鈕的文本描述。

瀏覽器還附帶了一個(gè)工具提示。瀏覽器本身與本文工具提示之間的區(qū)別在于瀏覽器附帶的鼠標(biāo)通常以2s顯示，通常用于文本提示進(jìn)行折疊。例如，一本簡單的書，以及本文的工具提示鼠標(biāo)似乎移入，剪切組件的樣式與瀏覽器完全不同。

工具提示組件可以具有以下不同樣式，具體取決于需要解釋的對象的位置。

專欄

UX，微信公眾號：UEDC，每個(gè)人都是產(chǎn)品經(jīng)理專欄作家。曾任華為ITUX互動小組組長，現(xiàn)為美國Mission Mission高級互動設(shè)計(jì)師。

這篇文章最初發(fā)表。未經(jīng)許可，禁止復(fù)制

該地圖來自Pexels，基于CC0協(xié)議

« 為商家做生意的利弊是什么？ | 榮獲“領(lǐng)導(dǎo)力領(lǐng)軍團(tuán)隊(duì)”，此次巡演應(yīng)邀參加2018年小谷圍國際產(chǎn)業(yè)人才大會 »