上一篇文章為設(shè)計(jì)師們撥云見(jiàn)霧，分析了模態(tài)彈窗與非模態(tài)彈窗，受到了挺多讀者的喜愛(ài)，詳文《春節(jié)專題！App 設(shè)計(jì)系列之模態(tài)彈窗與非模態(tài)彈窗》，但是其實(shí)對(duì)于彈窗的詮釋還是有限，彈窗的作用是引導(dǎo)、指導(dǎo)用戶，給予用戶反饋信息。那么在這類反饋信息中，怎樣的提示才能更加人性化？本文根據(jù)提示信息中的正反例子、各種提示的作用，來(lái)為大家說(shuō)明解釋，提示的人性化設(shè)計(jì)與提示形式的多樣性。

一. 提示反饋概述

提示反饋：是指用戶在系統(tǒng)內(nèi)進(jìn)行任務(wù)操作時(shí)系統(tǒng)的回應(yīng)。

目的：遵循用戶心理預(yù)期，告知用戶當(dāng)前狀況，反饋用戶有效信心。

二. 提示的人性化設(shè)計(jì)要點(diǎn)（利用正反例子）

1. 提示信息應(yīng)針對(duì)特定的用戶場(chǎng)景

例：花瓣的收集成功，如果只顯示成功，則會(huì)增加用戶辨識(shí)難度。

解析：提示樣式是多樣的，提示信息是有區(qū)別的。如刷新提示不適用做模態(tài)彈窗，刪除確認(rèn)不適用做非模態(tài)彈窗等等，提示信息肯定有所不同，刷新顯示「刷新成功」，關(guān)注顯示「關(guān)注成功」。

針對(duì)不同的用戶場(chǎng)景，需要有不同的提示內(nèi)容與之對(duì)應(yīng)。有些應(yīng)用在所有的成功狀態(tài)下都使用同一種提示信息，如「關(guān)注成功」與「取消關(guān)注成功」，都僅僅提示「成功」，會(huì)給用戶帶來(lái)難以區(qū)分的不便利影響。

△ 花瓣、微博

作用：不同提示信息能符合用戶當(dāng)下情景的使用需求。

反例：一款應(yīng)用中所有提示信息都一樣。

2. 提示信息應(yīng)簡(jiǎn)潔易讀

例：刷新成功、關(guān)注成功、取消關(guān)注。

解析：提示信息應(yīng)用最廣是「刷新」，用戶操作后接到的提示反饋不應(yīng)阻礙用戶閱讀，因此大多數(shù)app刷新提示的信息放置于頂部或底部，避免阻礙用戶操作。

常見(jiàn)有些產(chǎn)品的提示信息帶有符號(hào)，雖然符號(hào)表情能為提示信息增加趣味性，但是復(fù)雜或者過(guò)多的信息堆積，會(huì)影響用戶理解，增加閱讀障礙。

作用：提示為用戶說(shuō)明當(dāng)下的狀態(tài)、所處的位置及操作的結(jié)果，所以簡(jiǎn)明的信息是易于理解、易于閱讀、易于交流的，提高用戶易讀性。

反例：一大串奇怪的文字字符。

3. 用戶遇到問(wèn)題時(shí)提示應(yīng)友善

例：404頁(yè)面、輸入錯(cuò)誤時(shí)。

解析：用戶使用過(guò)程中的錯(cuò)誤行為是常見(jiàn)的，但是有些錯(cuò)誤因素卻不一定是用戶造成的。如常見(jiàn)的網(wǎng)絡(luò)連接錯(cuò)誤、服務(wù)器未響應(yīng)，登錄或注冊(cè)無(wú)反應(yīng)等。用戶在操作的過(guò)程中出現(xiàn)問(wèn)題，情緒上會(huì)有波動(dòng)，優(yōu)秀的設(shè)計(jì)能很好的安撫不安的用戶情緒。

作用：友善對(duì)待你的用戶，可以讓用戶體驗(yàn)到你的產(chǎn)品是舒服的、便利的、是為他們而設(shè)計(jì)的，從而提升用戶體驗(yàn)，抓住了用戶的滿足感，更能在接下來(lái)抓住用戶的心，提高用戶對(duì)產(chǎn)品的信賴度。

反例：枯燥乏味的空白頁(yè)。

4. 用戶在即將犯錯(cuò)時(shí)的避錯(cuò)提示

例：誤點(diǎn)刪除。

解析：當(dāng)用戶在進(jìn)行一項(xiàng)極其「危險(xiǎn)」的操作時(shí)，能給予用戶顯眼的信息提示，避免用戶犯錯(cuò)。曾經(jīng)就經(jīng)歷過(guò)不好的產(chǎn)品體驗(yàn)，在該應(yīng)用上正在查閱信息，進(jìn)入到套餐項(xiàng)目里，一般用戶會(huì)先看清套餐條款，再選擇購(gòu)買，但是不小心點(diǎn)擊到購(gòu)買按鈕時(shí)，購(gòu)買已經(jīng)產(chǎn)生，既不需要用戶再次確認(rèn)，也沒(méi)有任何提示彈窗，涉及金額不小，一個(gè)誤操作就讓用戶犯了錯(cuò)。即便是支付寶，對(duì)于小額數(shù)值還需要用戶自己去設(shè)置是否免密操作。所以作為產(chǎn)品本身，應(yīng)當(dāng)選擇盡量避免讓用戶輕易犯錯(cuò)。反之如果不能解決這種用戶問(wèn)題，可能會(huì)讓用戶的忠誠(chéng)度降低。

作用：避免用戶在誤操作時(shí)產(chǎn)生了消極情緒，避錯(cuò)提示能夠給予用戶需要的「安全保障」，提高用戶忠誠(chéng)度。

反：直接清空緩存、直接刪除聯(lián)系人。

5. 完成反饋提示——激勵(lì)

例：簽到成功、完成有獎(jiǎng)。

解析：此類提示很常見(jiàn)，簽到機(jī)制與獎(jiǎng)勵(lì)機(jī)制是現(xiàn)在娛樂(lè)類、社交類平臺(tái)慣用的運(yùn)營(yíng)手法，通過(guò)獎(jiǎng)勵(lì)的措施培養(yǎng)用戶習(xí)慣，來(lái)達(dá)到保持產(chǎn)品活躍度的目的，工具類應(yīng)用則多用完成任務(wù)即獎(jiǎng)勵(lì)的形式來(lái)維持用戶熱度。但也有不好的體驗(yàn)，最直接的就是無(wú)反饋提示，有些產(chǎn)品是存在簽到模塊，但是點(diǎn)擊卻只是換了「已簽到」的字樣。

△ 觸漫、欲望與成就

作用：刺激用戶活躍度，引導(dǎo)與鼓勵(lì)用戶操作行為，培養(yǎng)用戶使用習(xí)慣。

反例：無(wú)反饋效果。

6. 錯(cuò)誤提示信息應(yīng)該是對(duì)用戶有用的，有幫助的

例：請(qǐng)輸入正確驗(yàn)證碼、請(qǐng)輸入正確密碼。

解析：錯(cuò)誤提示和避錯(cuò)提示是有區(qū)別的。錯(cuò)誤提示信息是為讓用戶有效地避免犯錯(cuò)，人都不喜歡犯錯(cuò)，用戶也不喜歡，但是僅僅只是避免用戶的犯錯(cuò)行為還不夠，交互邏輯不夠嚴(yán)謹(jǐn)?shù)慕缑妫瑳](méi)有區(qū)分的錯(cuò)誤提示有可能造成用戶操作停滯，影響用戶體驗(yàn)。

最常見(jiàn)的還是網(wǎng)頁(yè)中的登錄注冊(cè)界面，當(dāng)你輸完賬號(hào)與密碼時(shí)，僅提示用戶登入失敗，并無(wú)提示用戶是賬號(hào)有誤，還是密碼有誤。即影響用戶體驗(yàn)，還會(huì)讓用戶對(duì)產(chǎn)品失去耐心。

作用：為用戶提供最快捷、最清晰的解決方案，能讓用戶快速意識(shí)與糾正錯(cuò)誤。

反例：模糊不清地描述用戶的錯(cuò)誤。

7. 提示信息可以根據(jù)產(chǎn)品特性位于不同位置

例：頂部刷新、底部刷新。

解析：提示信息的位置是不固定的，上一篇文章的彈窗形式為大家解釋了多類彈窗的特點(diǎn)及區(qū)別。不同位置的用戶體驗(yàn)是不同的，當(dāng)用戶視覺(jué)中心放在中部以下時(shí)（如閱讀類app），此時(shí)的大部分次要提示信息應(yīng)當(dāng)放置于頂部，如刷新提示，主要提示信息需要放置于中間乃至全屏彈窗。

作用：遵循用戶使用習(xí)慣，滿足用戶使用所需。

反例：任何提示都以同樣式彈窗顯示。

8. 提示信息中色彩的應(yīng)用（紅色、綠色、品牌形象色）

例：成功、錯(cuò)誤。

解析：色彩心理學(xué)對(duì)于人的影響巨大，不了解的可以翻閱相關(guān)色彩心理書籍，根據(jù)色彩心理學(xué)一論，顏色對(duì)于人的情緒是有導(dǎo)向作用。正確的使用配色能更好的體現(xiàn)提示信息的優(yōu)先層級(jí)。如常用的「刪除」、「退出」、「注銷」一般以紅色為主，代表警告操作，優(yōu)先層級(jí)最高等。成功操作一般為綠色，也有使用自身品牌形象色。

作用：通過(guò)色彩心理學(xué)滿足用戶當(dāng)前使用情景，有效地反饋提示信息的內(nèi)容。

反例：沒(méi)有區(qū)分。

三. 提示形式（利用正反例子）

1. 頁(yè)面提示（全屏彈窗）

△ 布卡app

優(yōu)點(diǎn)：優(yōu)先級(jí)最高，可以讓用戶停留在產(chǎn)品想要給用戶看的頁(yè)面，信息展示最全。

缺點(diǎn)：遮擋用戶當(dāng)前頁(yè)面，阻礙用戶進(jìn)行操作，影響用戶體驗(yàn)。

2. 窗口提示（模態(tài)窗口）

優(yōu)點(diǎn)：吸引用戶視覺(jué)焦點(diǎn)。

缺點(diǎn)：模態(tài)彈窗下需要用戶進(jìn)行操作才可繼續(xù)，影響用戶體驗(yàn)。非模態(tài)彈窗下提示信息顯示不全，用戶容易忽略。

3. 標(biāo)簽提示（輸入表單常見(jiàn)）

優(yōu)點(diǎn)：提示用戶當(dāng)前操作存在的問(wèn)題。

缺點(diǎn)：不宜存在太多表單。

4. 動(dòng)畫提示（加載動(dòng)畫、刷新動(dòng)畫）

優(yōu)點(diǎn)：使頁(yè)面生動(dòng)有趣，提升產(chǎn)品體驗(yàn)。

缺點(diǎn)：過(guò)于花俏的動(dòng)畫不僅會(huì)讓人疲憊，還會(huì)增加產(chǎn)品的開(kāi)發(fā)難度。

5. 點(diǎn)擊反饋（按鈕的點(diǎn)擊效果）

優(yōu)點(diǎn)：讓用戶更好融入產(chǎn)品的使用情景，辨識(shí)當(dāng)前操作。

缺點(diǎn)：按鈕的可點(diǎn)擊標(biāo)識(shí)不可以太低，會(huì)讓用戶誤以為是不可操作狀態(tài)。

四. 總結(jié)

用戶至上的設(shè)計(jì)理念，其根本的核心就是用戶讀得懂、讀得快。用戶的目的是想知道現(xiàn)在的自己在哪里、在做什么、應(yīng)該做什么、且知道這樣做的結(jié)果，在iOS Human Interface Guidelines 中也有所體現(xiàn)，并且蘋果把此類信息稱之為「反饋」。其實(shí)這篇文章不止適用于App的產(chǎn)品設(shè)計(jì)中，也同樣可適用于Web設(shè)計(jì)中。

作者微信號(hào)：JJ865477301

歡迎關(guān)注作者的微信公眾號(hào)：「JAYGO」

「App提示好文推薦」

• 《如何做出用戶不反感的錯(cuò)誤提示？來(lái)看這篇總結(jié)！》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之提示類》
• 《「這個(gè)控件叫什么」系列之Toast（吐司提示）的曾經(jīng)、現(xiàn)在與未來(lái)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com