編輯導(dǎo)語：狀態(tài)可見性原則對(duì)于設(shè)計(jì)中的一些細(xì)節(jié)具有重要的指導(dǎo)意義，本文作者圍繞“狀態(tài)可見性原則”展開，對(duì)其進(jìn)行了詳盡的深度解讀，看看應(yīng)該如何讓用戶了解正在發(fā)生的事情。

這一年，更多的是關(guān)于交互的思考。如果說界面是外表的話，那么交互就是其靈魂，只有交互合理的產(chǎn)品，才能夠讓用戶更好的使用，而交互細(xì)節(jié)成熟的產(chǎn)品對(duì)體驗(yàn)上的提升則更巨大。寫這篇的起源是平日在設(shè)計(jì)評(píng)審時(shí)或多或少會(huì)遇到以下的交互問題：

在思索如何能夠盡量避免遺漏細(xì)節(jié)的過程中，發(fā)現(xiàn)狀態(tài)可見性原則對(duì)于這些細(xì)節(jié)有比較重要的指導(dǎo)意義。

這一原則想必大家都不陌生，但可能并沒有引起大家的重視，且網(wǎng)上大部分文章對(duì)于此原則的解釋都比較簡(jiǎn)短。因此在探索過程中產(chǎn)出了這篇比較詳盡的關(guān)于狀態(tài)可見性原則的深度解讀。目錄如下，重點(diǎn)已圈好～

大家可以根據(jù)上述目錄來進(jìn)行選擇性閱讀，當(dāng)然全文閱讀也是極好的～

一、狀態(tài)可見性原則：簡(jiǎn)述

1. 相關(guān)問題闡述

我們?cè)陂_頭闡述了可能遇到的一些問題。而以上情況的出現(xiàn)，都源自于我們?cè)谠O(shè)計(jì)時(shí)思考的不夠全面，很多時(shí)候都忽略了某些情況下的設(shè)計(jì)，導(dǎo)致有些關(guān)鍵體驗(yàn)上的問題未被發(fā)現(xiàn)。我們可以看下微博和知乎在斷網(wǎng)下點(diǎn)贊的例子。

可以看到，微博在斷網(wǎng)下依然有點(diǎn)贊動(dòng)作的反饋，且沒有任何異常提示，這樣會(huì)導(dǎo)致用戶大多數(shù)以為此次操作是成功的。但知乎在斷網(wǎng)情況下，點(diǎn)贊是不能生效的，且有消息提示“異常提醒”。

這樣的話其實(shí)就能夠讓用戶明白此次操作沒有成功。在這種場(chǎng)景下，微博的點(diǎn)贊就屬于“不恰當(dāng)?shù)姆答仭薄６@些設(shè)計(jì)，都可以歸因于狀態(tài)可見性原則的范疇。

2. 狀態(tài)可見性原則定義

讓我們先了解一下狀態(tài)可見性原則的定義。這是尼爾森(Jakob Nielsen)-人機(jī)交互學(xué)博士，于1995年1月1日發(fā)表了「十大可用性原則」。而可用性原則位于十大可用性原則之首。

雖然只有這么一句話，但其中包含的意義比較重大。我們現(xiàn)在所使用的系統(tǒng)，都運(yùn)用了狀態(tài)可見性原則，如果沒有，那么系統(tǒng)幾乎會(huì)掉入不可用的現(xiàn)象。而系統(tǒng)在使用體驗(yàn)上的差異性，有很大一部分原因也在于可見性原則運(yùn)用的好與壞。

我們來舉一個(gè)生活中的例子來幫助大家理解。當(dāng)你手機(jī)沒電，你用充電器連接手機(jī)時(shí)，在連接的一瞬間（恰當(dāng)時(shí)間），手機(jī)狀態(tài)發(fā)生變化（恰當(dāng)反饋）讓你成功獲取手機(jī)正在充電的信息（系統(tǒng)狀態(tài)）。

如果在某個(gè)環(huán)節(jié)出現(xiàn)問題，比如連接上手機(jī)2分鐘后（不恰當(dāng)時(shí)間），手機(jī)狀態(tài)才發(fā)生變化。那么你肯定會(huì)認(rèn)為哪里出現(xiàn)了問題。這就是狀態(tài)可見性原則的基礎(chǔ)運(yùn)用。

二、狀態(tài)可見性原則：拆解

那么我們?nèi)绾文軌蛏羁汤斫庖粋€(gè)原則呢，最簡(jiǎn)單的做法就是將其拆分，并結(jié)合實(shí)例理解。下面通過原則拆解來進(jìn)行深刻解讀。

我們將拆解分為以下三個(gè)部分，下面的篇幅會(huì)更詳盡地進(jìn)行說明：

1. 合理時(shí)間的定義和表現(xiàn)

時(shí)間在這里指的就是系統(tǒng)的響應(yīng)時(shí)間，而合理則可以理解為時(shí)間的長(zhǎng)短。這句話可以理解為從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時(shí)間是否正常，是否有影響到用戶的正常體驗(yàn)。

當(dāng)我們?cè)谶M(jìn)行打字輸入時(shí)，我們敲擊鍵盤的同時(shí)，屏幕上就會(huì)出現(xiàn)對(duì)應(yīng)的文字。而如果出現(xiàn)文字的反應(yīng)時(shí)間過長(zhǎng)，我們就會(huì)感覺到明顯的卡頓，此時(shí)的響應(yīng)時(shí)間就會(huì)變得“不合理”。

根據(jù)Robert B. Miller在他的研究《人機(jī)對(duì)話的響應(yīng)時(shí)間》中以及其它相關(guān)資料，制作得出以下結(jié)論圖：

以上是人機(jī)交互響應(yīng)時(shí)間的總覽，接下來細(xì)節(jié)深化每個(gè)時(shí)間點(diǎn)對(duì)應(yīng)的操作。

我們先看100ms以內(nèi)的。我們平時(shí)使用的小組件動(dòng)畫，比如說按鈕反饋，勾選反饋，以及其他需要瞬時(shí)反饋的操作，基本都是在100ms內(nèi)完成的。

在看100ms-1s區(qū)間的，在這個(gè)期間進(jìn)行的動(dòng)畫，用戶能夠很清晰的看見動(dòng)畫發(fā)生的過程，而又不顯得遲鈍。我們普通UI中應(yīng)用的動(dòng)畫則大部分在100ms-500ms這個(gè)范圍內(nèi)。

為何在這個(gè)時(shí)間內(nèi)呢？

個(gè)人的理解是：對(duì)于發(fā)生在UI界面內(nèi)的動(dòng)畫，100ms內(nèi)的動(dòng)畫太快，人只能感受到開始和結(jié)束的狀態(tài)，不能看見發(fā)生過程，因此一般大于100ms，而500ms是用戶即時(shí)感知的最長(zhǎng)時(shí)間，因此小于這個(gè)范圍內(nèi)的動(dòng)畫較為合理。

最后看下1s-10s這個(gè)區(qū)間的：在這個(gè)階段，最有可能進(jìn)行的就是相關(guān)頁面的加載行為，或者某些小型文件的上傳和預(yù)覽。針對(duì)于這種情況，我們一般會(huì)在加載進(jìn)行中，添加對(duì)應(yīng)的加載效果，來緩解用戶的焦慮和等待情緒。

最后則是10s以上的，一般用于大型文件的上傳或者弱網(wǎng)環(huán)境的加載過久。

大約10秒鐘后，用戶的情緒將達(dá)到極限，內(nèi)心將開始產(chǎn)生疑惑，超過10秒，用戶往往會(huì)離開網(wǎng)站，而不是試圖繼續(xù)恢復(fù)他們一開始想要做的事情。

因此，我們?cè)谶M(jìn)行系統(tǒng)設(shè)計(jì)中，需要對(duì)超過這一時(shí)間內(nèi)的行為，進(jìn)行對(duì)應(yīng)的反饋。比如加載超過10s的時(shí)候，我們是不是需要給用戶提供離開的選項(xiàng)，或者提示用戶重新加載這樣一種行為。我們可以看下高德和美團(tuán)在加載中的例子。

我們可以看到，在到達(dá)10s后，美團(tuán)自動(dòng)給出了一個(gè)當(dāng)前網(wǎng)絡(luò)不可用的，請(qǐng)檢查網(wǎng)絡(luò)的提示，并終止了加載進(jìn)程。而高德地圖則是沒有任何提示，自動(dòng)結(jié)束了加載。相比之下，美團(tuán)能夠讓用戶明白為什么中斷了該進(jìn)程，也就擁有了更好的用戶體驗(yàn)。

且對(duì)于一般情況下都超過10s以上的形式，我們無須讓用戶停在當(dāng)前頁面等待。比如微博或者抖音的視頻上傳，一般會(huì)消耗比較久的時(shí)間，因此當(dāng)用戶點(diǎn)擊上傳后，都只會(huì)留一個(gè)小地方來展示上傳進(jìn)度，用戶隨時(shí)可以做其他的事情，這樣有效避免了用戶長(zhǎng)時(shí)間等待的問題。

以上則是常見的在合理時(shí)間內(nèi)的表現(xiàn)，但目前也存在一些特殊場(chǎng)景：時(shí)間設(shè)計(jì)中的延遲。比如時(shí)間延遲，圖蟲和微博會(huì)在用戶停留幾秒后增加評(píng)論區(qū)域的顯示，根據(jù)用戶停留時(shí)間，判斷用戶對(duì)當(dāng)前內(nèi)容感興趣，以此來增加用戶的互動(dòng)。

類似的這種設(shè)計(jì)還有抖音的評(píng)論分享，當(dāng)超過一定時(shí)間后，評(píng)論圖標(biāo)自動(dòng)變?yōu)榕笥讶D標(biāo)。而在PC端，也有一個(gè)很典型的案例，不知道大家注意到?jīng)]有，就是關(guān)于hover的延遲。

我們?cè)谑褂胔over顯示時(shí)，一般可能大家認(rèn)為中的都是鼠標(biāo)移動(dòng)上去立刻顯示，但在某些應(yīng)用場(chǎng)景中，延遲300ms再進(jìn)行hover顯示，會(huì)更合理，舉例如下：

大家可以看到上圖，在你快速移動(dòng)時(shí)，是不會(huì)顯示下方的補(bǔ)充說明的。在停留大概300ms后，則會(huì)出現(xiàn)提示。其實(shí)這里對(duì)應(yīng)了兩種用戶場(chǎng)景：

第一種是快速移動(dòng)的場(chǎng)景，有利于用戶切換不同頁簽時(shí)不打擾用戶；而在停留時(shí)，用戶則是想要看更詳細(xì)的信息。因此在這里使用hvoer延遲既能不打擾用戶，也能滿足用戶的不同需求。

這里是之前做的一個(gè)案例，就是由于沒有考慮到hover延遲，從而使得用戶在快速移動(dòng)時(shí)會(huì)讓hover的信息產(chǎn)生干擾。

以上的內(nèi)容都是針對(duì)于時(shí)間的詳細(xì)解釋。只有了解在對(duì)應(yīng)的時(shí)間系統(tǒng)處于哪種狀態(tài)，我們才能夠滿足狀態(tài)可見性原則中“恰當(dāng)?shù)臅r(shí)間”這一原則。從而更好的對(duì)系統(tǒng)進(jìn)行對(duì)應(yīng)的交互設(shè)計(jì)，讓用戶在使用產(chǎn)品時(shí)獲得優(yōu)秀的體驗(yàn)。

2. 加餐時(shí)刻：頁面呈現(xiàn)

按照目錄接下來應(yīng)該講反饋了，但在反饋之前想先提及一下頁面信息呈現(xiàn)。只有當(dāng)用戶理解當(dāng)前頁面所表達(dá)的信息后，才能夠進(jìn)行接下來的操作，從而得到對(duì)應(yīng)的反饋。在這里主要提及兩個(gè)點(diǎn)：一是核心信息，二是預(yù)期信息。

1）界面核心信息的呈現(xiàn)

一個(gè)用戶界面如果沒有核心信息的呈現(xiàn)，那么給到用戶的反饋是很弱的，用戶第一眼都不知道從界面中能夠獲取什么內(nèi)容，尤其是在移動(dòng)端核心信息的呈現(xiàn)更為重要：

比如上述兩個(gè)案例，在界面上只呈現(xiàn)了最重要的內(nèi)容，移除了其他全部干擾內(nèi)容，讓用戶更聚焦。

當(dāng)然平時(shí)接觸到的不可能全部是這種頁面，我們?cè)陧撁嫘畔⒊尸F(xiàn)較多時(shí)，也需要進(jìn)行重點(diǎn)信息的呈現(xiàn)。在這里放一個(gè)動(dòng)態(tài)的案例讓大家對(duì)比一下重點(diǎn)區(qū)分的形式。

2）界面預(yù)期信息的呈現(xiàn)

除了核心信息，還有預(yù)期信息的呈現(xiàn)，說白了其實(shí)就是元素的可交互性與不可交互性。

當(dāng)事情按照用戶預(yù)計(jì)的方向運(yùn)行時(shí)，用戶會(huì)有強(qiáng)烈的控制感。在PC上，用戶可以使用鼠標(biāo)懸停來判斷該元素是否可交互，但在移動(dòng)設(shè)備上，用戶只能通過點(diǎn)擊來判斷是否為交互元素。

這就要求我們?cè)谝苿?dòng)端設(shè)計(jì)時(shí)需要清晰地考慮到可交互元素與不可交互元素在外觀上的區(qū)分。我們先來看一個(gè)關(guān)于微信的例子：

大家可以看一下微信的數(shù)字呈現(xiàn)，除了默認(rèn)的黑色字體外，是不是還出現(xiàn)了一種淺藍(lán)色字體。而你點(diǎn)擊藍(lán)色字體，則發(fā)現(xiàn)可以調(diào)出動(dòng)作面板。而黑色字體則不會(huì)。

這就是利用顏色的區(qū)分來引導(dǎo)告知用戶部分信息的可點(diǎn)擊性。而目前關(guān)于移動(dòng)端可交互元素如何設(shè)計(jì)，如何讓評(píng)審時(shí)不再聽到“你這個(gè)看著像不可點(diǎn)的”這句話。根據(jù)相關(guān)資料和過往項(xiàng)目，總結(jié)出以下幾點(diǎn)：

3. 歸納：元素中的可交互性

首先根據(jù)目前人們的認(rèn)知，基礎(chǔ)控件類型的都是可以操作的，比如按鈕，導(dǎo)航欄、底部標(biāo)簽欄等。下圖為工作中做的一些基礎(chǔ)控件：

拋開基礎(chǔ)控件，剩余重點(diǎn)是文字類。文字類在不加任何提示的情況下，用戶會(huì)默認(rèn)為不可操作的對(duì)象。一般我們通過下列幾種方式來體現(xiàn)其可操作性。

介紹了可交互性，那么再來講一下不可交互性的元素。不可交互的部分有一個(gè)非常重要的點(diǎn)，就是應(yīng)該需要讓用戶認(rèn)識(shí)到該元素為什么是不可交互的，不對(duì)用戶造成困擾。

4. 歸納：元素中的不可交互

不可交互的處理方式一般分為置灰和隱藏兩種方式。我們首先來看看置灰無反饋類別的使用場(chǎng)景：

還會(huì)存在一種置灰有反饋類別的使用場(chǎng)景，而對(duì)于非按鈕類狀態(tài)的置灰，經(jīng)過資料和相關(guān)調(diào)研，發(fā)現(xiàn)可以根據(jù)其使用場(chǎng)景來設(shè)置是否給出反饋，比如網(wǎng)易云音樂的音樂列表場(chǎng)景。

除開置灰的另一種場(chǎng)景就是隱藏，工具類應(yīng)用對(duì)于隱藏這個(gè)操作使用得較多，比如我們平時(shí)使用的sketch和figma也基礎(chǔ)應(yīng)用了這一操作場(chǎng)景。

好了，說完了用戶界面的相關(guān)內(nèi)容，只有了解上述內(nèi)容，讓用戶明白界面哪些是可交互，哪些不可交互。才能夠讓用戶進(jìn)入到下面的“恰當(dāng)反饋”。

5. 恰當(dāng)反饋的定義和表現(xiàn)

在這里我先講手勢(shì)操作，因?yàn)槭謩?shì)操作是前提，然后再講反饋設(shè)計(jì)。

1）手勢(shì)操作

反饋的前置條件是操作，我們?cè)诩硬椭幸呀?jīng)告知了如何引導(dǎo)用戶操作，但在移動(dòng)端中可能還包含一些隱藏的手勢(shì)操作，利用不同的手勢(shì)可以達(dá)成不同的操作響應(yīng)。我們來看一下這個(gè)案例：

這是即刻對(duì)同一個(gè)控件進(jìn)行了兩種手勢(shì)的定義，但大部分用戶可能對(duì)于第二種長(zhǎng)按手勢(shì)的功能其實(shí)是不知道的。這樣的功能來說對(duì)于新手用戶來說是處于不易發(fā)現(xiàn)的“彩蛋“功能。

又比如下方的知乎雙擊點(diǎn)贊，以及最近微博更新的連續(xù)點(diǎn)擊效果：

如果我在這里不進(jìn)行事先說明，可能部分用戶還不知道。但好在上述兩種方式的設(shè)計(jì)前提是建立在不影響主功能使用的，用戶依舊可以通過其他操作來完成。

說這些的是為了表明，我們?cè)谠O(shè)計(jì)反饋時(shí)，要考慮到手勢(shì)操作的用戶認(rèn)知程度，一些特殊的手勢(shì)操作雖然能提高用戶的操作效率，但用戶如果都不能發(fā)現(xiàn)，何談提高效率，更多的作為“隱藏彩蛋”功能出現(xiàn)。

因此我們?cè)诋a(chǎn)品設(shè)計(jì)中要盡量注意去使用常規(guī)手勢(shì)而不是非常規(guī)手勢(shì)，下列歸納了部分手勢(shì)：

大部分情況下我們其實(shí)使用“點(diǎn)擊”和“滑動(dòng)”就可以完成大部分系統(tǒng)操作。如果我們需要加其他操作最好在用戶第一次進(jìn)入時(shí)加上引導(dǎo)。

當(dāng)然，在某些情況下，我們是需要將常用的操作，轉(zhuǎn)化為不常用的操作，來防止用戶發(fā)生誤操作，比如下方的keep在運(yùn)動(dòng)中停止的按鈕，考慮到運(yùn)動(dòng)的場(chǎng)景，單純的點(diǎn)擊很容易被誤觸。因此keep對(duì)“結(jié)束”這一功能采用“長(zhǎng)按+引導(dǎo)”的方式來防止用戶誤操作：

OK，接下來正式進(jìn)入反饋這個(gè)環(huán)節(jié)。

2）反饋設(shè)計(jì)

反饋就是當(dāng)用戶對(duì)于系統(tǒng)進(jìn)行相關(guān)的操作后，系統(tǒng)對(duì)應(yīng)引起的一系列變化。反饋從類型上可以分為視覺反饋、聽覺反饋和觸覺反饋。

聽覺反饋和觸覺反饋在這里簡(jiǎn)單講一下，一般在我們的設(shè)計(jì)中使用的比較少，聽覺反饋目前用的最多的是語音助手和地圖類工具在息屏?xí)r后的反饋，比如下方的高德地圖反饋，能夠讓你在進(jìn)行開車或騎行時(shí)，即使關(guān)掉屏幕，也能通過語音反饋知道此時(shí)正在導(dǎo)航中：

而震動(dòng)反饋?zhàn)铋_始是在蘋果內(nèi)的應(yīng)用，包括你在知乎上進(jìn)行點(diǎn)贊，appstore下載應(yīng)用，都會(huì)進(jìn)行對(duì)應(yīng)的反饋，讓你的感受“實(shí)體化”，提升使用體驗(yàn)。

而目前在其他app上，也逐漸開始了應(yīng)用，比如大家熟知的微信“拍一拍”，在拍頭像的同時(shí)會(huì)伴隨著震動(dòng)反饋；以及iMessage的反饋，它會(huì)在煙花綻放的那一剎那有震動(dòng)反饋，給用戶更真實(shí)和有趣的體驗(yàn)。

好了，最后來講視覺反饋，視覺反饋是我們目前最常見的反饋，也是平日里接觸最多的交互反饋。視覺反饋可以分為以下三種類型：

控件反饋舉一個(gè)最常見的案例，就是我們按鈕的狀態(tài)變化，我們通常可以看到狀態(tài)有以下幾種變化：

大家對(duì)上述按鈕的狀態(tài)可能都比較熟悉，但在很多情況下可能會(huì)忽略一些其他控件的點(diǎn)擊狀態(tài)，比如我們看下方的一個(gè)例子：

這是點(diǎn)擊“收藏”按鈕時(shí)兩個(gè)不同點(diǎn)，一個(gè)沒有點(diǎn)擊狀態(tài)的感應(yīng)，一個(gè)有。這其實(shí)也是之前我比較疑惑的一個(gè)點(diǎn)，從功能性上來講，它并不影響后續(xù)的使用。

但這種點(diǎn)擊狀態(tài)在官方文檔上到底有沒有明確說明呢，特意去查了下官方文檔，在IOS中的設(shè)計(jì)原則中有這么一段描述（黑字加粗部分）。

并且在IOS的原生應(yīng)用中，基本都遵循這一原則：

雖然有這樣一條原則說明，但并沒有特別嚴(yán)苛的規(guī)定我們必須要這樣做，因?yàn)榧词箾]有這種反饋，也不會(huì)特別影響用戶的整體操作，更多的是帶來使用體驗(yàn)上的提升。

因此大家可以在平日的使用中根據(jù)產(chǎn)品的設(shè)計(jì)階段，特別是在優(yōu)化體驗(yàn)的時(shí)候，可以考慮這一部分。接下來我們看一下頁面反饋：

當(dāng)我們觸發(fā)的可交互元素不涉及頁面的跳轉(zhuǎn)，那么此時(shí)的反饋多數(shù)用于當(dāng)前頁面本身的反饋。而一般是由alert、toast、action sheet等來構(gòu)成的。我們需要利用這些控件來對(duì)用戶的相關(guān)操作給出反饋，比如下面躺平和夸克的例子，當(dāng)用戶操作時(shí)有對(duì)應(yīng)的后續(xù)反饋：

再來看一個(gè)有對(duì)比性的例子：

上圖是QQ音樂和網(wǎng)易云音樂對(duì)于退出賬號(hào)這一場(chǎng)景采用的不同控件，那么這兩種控件哪種使用得更為合理。從用法上來說，兩者都沒有錯(cuò)誤，但目前的移動(dòng)端設(shè)計(jì)在這個(gè)場(chǎng)景逐漸傾向左側(cè)的設(shè)計(jì)形式。

因?yàn)閺氖褂贸潭壬蟻碚f，左側(cè)的Action sheet 的級(jí)別會(huì)弱于右側(cè)的Alert，對(duì)用戶的打斷程度會(huì)更弱，且Action sheet可以通過點(diǎn)擊空白處來取消，而右側(cè)的alert在移動(dòng)端大部分都是模態(tài)的，只能通過操作來取消。

因此對(duì)于這兩種需要根據(jù)使用場(chǎng)景來進(jìn)行區(qū)分：一般來講，Alert更適合用于對(duì)系統(tǒng)操作有一定風(fēng)險(xiǎn)或者很重要的操作【需要引起用戶強(qiáng)烈注意】，Action sheet則相對(duì)于Alert更輕量化，對(duì)用戶的打斷較弱。

關(guān)于頁面反饋這部分還有些控件有比較細(xì)致的區(qū)分，比如toast提示適用于更輕量化的場(chǎng)景反饋，因?yàn)槿W(wǎng)彈窗相關(guān)的內(nèi)容也有很多了，在這里不細(xì)講，但大家在使用控件時(shí)需要注意下列IOS官網(wǎng)上的一個(gè)原則規(guī)定：

原則上盡量不去打斷用戶，給予輕量化的信息反饋，除非是某些需要引起特別注意的場(chǎng)景。關(guān)于這個(gè)的舉例，我們可以看下京東和淘寶在加入購物車的例子：

淘寶是使用傳統(tǒng)的toast來進(jìn)行加入成功的反饋，而京東則是利用一個(gè)小動(dòng)畫來達(dá)到告知用戶已加入成功的提示。相比之下京東的提示則更加有趣和輕量。因此我們除開傳統(tǒng)的控件外，也可以利用動(dòng)效來進(jìn)行更為恰當(dāng)?shù)姆答仭?/p>

最后，我們來講一下頁面跳轉(zhuǎn)反饋：

這可能是大部分設(shè)計(jì)師都一直忽略的問題，在我們的設(shè)計(jì)說明中，也一直很少涉及到頁面跳轉(zhuǎn)的單獨(dú)說明，而開發(fā)一般會(huì)按系統(tǒng)默認(rèn)的方式去設(shè)計(jì)。

那么在頁面跳轉(zhuǎn)中，一般涉及到以下幾種方式，左右切換，上下切換以及聯(lián)動(dòng)性切換。很多設(shè)計(jì)師其實(shí)并沒有太注意左右切換和上下切換的區(qū)別方式，那么在這里進(jìn)行詳細(xì)的說明下：

最常見的跳轉(zhuǎn)就是左右切換。在大多數(shù)情況下，我們一般采用的是這類跳轉(zhuǎn)方式，且該方式應(yīng)用在大多數(shù)應(yīng)用程序中：

這種方式也跟我們平時(shí)的視覺順序有關(guān)，我們一般看事物都是從左到右的順序來進(jìn)行的。這種場(chǎng)景普遍存在于界面中，比如一般性的頁面切換，功能進(jìn)入等；接下來我們繼續(xù)講上下跳轉(zhuǎn)：

根據(jù)資料總結(jié)上下跳轉(zhuǎn)的場(chǎng)景應(yīng)用有以下：

觸發(fā)的新頁面相對(duì)于當(dāng)前頁面是臨時(shí)性的操作(微信發(fā)紅包，新添加群人員，新建筆記本，新建話題等)，一般用上下的跳轉(zhuǎn)方式：

跳轉(zhuǎn)前后的頁面存在比較緊密的強(qiáng)關(guān)聯(lián)性，想讓兩個(gè)頁面的聯(lián)系更緊密，可以采用這種方式。比如QQ音樂和網(wǎng)易云的歌曲列表和播放頁之間就采用的這種方式。

大家觀察一下，同樣的上下跳轉(zhuǎn)方式，為什么網(wǎng)易云的整體看上去更加自然柔和呢，除了運(yùn)動(dòng)節(jié)奏外，還因?yàn)樵谡w的運(yùn)動(dòng)過程中，網(wǎng)易云以唱片為聯(lián)動(dòng)點(diǎn)，將兩個(gè)頁面聯(lián)系起來，從而更加地柔和，這也就是接下來要講的第三個(gè)跳轉(zhuǎn)方式：聯(lián)動(dòng)跳轉(zhuǎn)。

這種跳轉(zhuǎn)方式一般會(huì)以頁面中的某個(gè)控件作為前后頁面的承載點(diǎn)，從而讓兩個(gè)頁面的聯(lián)系非常緊湊，視覺上更加舒適美觀，但同時(shí)開發(fā)難度也比較大，適用于比較固定的某些頁面。除了我們熟悉的APP Store外，我們看下面兩個(gè)案例：

聯(lián)動(dòng)頁面的好處，就是能整體的頁面銜接的更加柔和自然。我們也可以發(fā)現(xiàn)，在很多的概念設(shè)計(jì)中，??用得最多的過渡動(dòng)效也是這種聯(lián)動(dòng)設(shè)計(jì)，比如下方來自Sang Nguyen的概念設(shè)計(jì)

因?yàn)橐胩嵘撁娴恼w柔順效果，目前來看聯(lián)動(dòng)的方式是最為好的，但同時(shí)其實(shí)現(xiàn)難度也較大。

3. 如何讓用戶理解

這是原則拆解的最后一個(gè)小部分，其實(shí)就是通過前面兩部分的拆解，原則已經(jīng)講述得差不多了。而讓用戶了解，在我看來，就是我們給予用戶的反饋能夠讓用戶看懂。

首先看下這個(gè)案例：

大家可以看到文案一的整體表述，其實(shí)會(huì)讓用戶迷茫，到底哪個(gè)是撤回的操作，哪個(gè)是取消的操作。而文案二整體的文案和按鈕都有非常清晰的指向，能夠讓用戶清晰理解其意圖，達(dá)到繼續(xù)操作的目的。我們?cè)倏匆幌麻_頭的知乎反饋的例子，其實(shí)設(shè)計(jì)上還可以更進(jìn)一步：

通過文案二的進(jìn)一步設(shè)計(jì)，能夠讓用戶在知道操作異常的同時(shí)知其原因，幫助用戶快速解決當(dāng)前問題。其實(shí)文案這部分的內(nèi)容，在個(gè)人看來：

一是盡量少用專業(yè)術(shù)語或者含糊不清的詞語來反饋給用戶；二是在告知用戶出錯(cuò)時(shí)，盡量附帶簡(jiǎn)短的原因說明。這樣用戶更好地去理解想要表述的內(nèi)容。

三、總結(jié)

OK，寫到最后，你會(huì)發(fā)現(xiàn)以上所講的內(nèi)容，其實(shí)都是在闡述一個(gè)原則——“狀態(tài)可見性原則：系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)通過適當(dāng)?shù)姆答仯冀K讓用戶了解正在發(fā)生的事情?！?/p>

相信大家現(xiàn)在已經(jīng)知道什么是合理的時(shí)間，什么是恰當(dāng)?shù)姆答仯约叭绾巫層脩衾斫?。通過這樣的一個(gè)原則，我們能夠更好地去考慮到交互上的細(xì)節(jié)呈現(xiàn)，例如一個(gè)可交互元素的不同狀態(tài)，點(diǎn)擊后的反饋等。其實(shí)原則整體與我們的很多知識(shí)相關(guān)聯(lián)，這也是知識(shí)體系的一部分。

最近學(xué)到的關(guān)于知識(shí)體系的認(rèn)知，就是你在學(xué)習(xí)一個(gè)新的知識(shí)的同時(shí)，能夠把你的舊知識(shí)串聯(lián)起來，這樣你的整體知識(shí)才不會(huì)碎片化，而是體系化。通過這樣的方式，你在透徹認(rèn)知一個(gè)原則的同時(shí)，能夠聯(lián)想到各種關(guān)聯(lián)場(chǎng)景，從而能夠把整體的設(shè)計(jì)及交互做得更完善。

最后想說：經(jīng)典的原則之所以經(jīng)典，你會(huì)發(fā)現(xiàn)雖然它是很早之前提出來的，但具有時(shí)代超前性。在面對(duì)如今產(chǎn)品應(yīng)用場(chǎng)景和形態(tài)都發(fā)生巨大變化的當(dāng)下，它仍然適用。

文章中不可避免會(huì)存在不足之處，如果對(duì)文章中內(nèi)容有更好建議，歡迎隨時(shí)交流。

本文由 @阿東 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議