這是一篇關(guān)于交互設(shè)計(jì)中比較基礎(chǔ)的知識(shí)點(diǎn)——操作流程的三個(gè)重點(diǎn)，針對這個(gè)作為拓展，作者發(fā)現(xiàn)其中還是有很多值得探討的問題。

每一個(gè)階段看待問題的觀念不一樣，在前進(jìn)的過程中，我希望利用這種方式，總結(jié)自己的想法，以后不斷地學(xué)習(xí)和沉淀之后，都可以看到階段性的自己。

隨著互聯(lián)網(wǎng)的快速發(fā)展，產(chǎn)品的視覺層也基本成熟，而如今越來越多人更加關(guān)注的用戶體驗(yàn)。

一個(gè)產(chǎn)品的體驗(yàn)甚至可以直接決定了整個(gè)產(chǎn)品失敗與否，大部分優(yōu)秀的體驗(yàn)設(shè)計(jì)都是存在細(xì)節(jié)中，我們甚至不會(huì)很直接地發(fā)現(xiàn)他，但是當(dāng)一個(gè)產(chǎn)品體驗(yàn)不好的時(shí)候，我們隨時(shí)都會(huì)感覺到。

交互設(shè)計(jì)越來越被人們重視，甚至連我也將交互掛著嘴上，朗朗上口。

但是有的時(shí)候我會(huì)發(fā)現(xiàn)，其實(shí)并不是很了解更深入的細(xì)節(jié) ，有時(shí)候咱們嘴上說的用戶體驗(yàn)更多的是基于自己的一個(gè)習(xí)慣，甚至是想當(dāng)然。

而最近我也一直在查閱這方面相關(guān)的資料，希望可以通過總結(jié)的方法，加強(qiáng)自己的認(rèn)知，但是自己有點(diǎn)懶，拖了實(shí)在很久。

另外我的文筆也不是很好，寫不出啥優(yōu)美的句子，更多的是希望可以和大家一起探討與交流。

根據(jù)交互設(shè)計(jì)中的操作，從最基礎(chǔ)的形式上去詳細(xì)地拆解，拆分為前中后三個(gè)步驟，針對這三個(gè)步驟進(jìn)行詳細(xì)的分析。

在一個(gè)相對完善的交互流程中，基本是圍繞著這三個(gè)點(diǎn)進(jìn)行：

通過操作前的預(yù)知性，讓用戶更好地預(yù)見操作內(nèi)容，從而減輕對信息的認(rèn)知負(fù)擔(dān)；操作中，即時(shí)告知用戶正在發(fā)生的事情，反映操作現(xiàn)狀，減輕用戶焦慮。

整套流程也并不是一個(gè)死胡同，所以操作結(jié)束后，我們可以返回之前的狀態(tài)；而整個(gè)交互流程，都是為了更好地提高交互體驗(yàn)，整個(gè)流程也是在不斷循環(huán)的。

所以我也主要針對這三個(gè)方向，通過自己的理解，結(jié)合案例進(jìn)行總結(jié)。

一、操作前可預(yù)知

預(yù)知這個(gè)詞，從小在我心目中，就是一個(gè)很神秘的詞語，就像電影里面的預(yù)知未來那么神奇。

但是預(yù)知這個(gè)詞語，在交互設(shè)計(jì)中是確確實(shí)實(shí)存在的。

但是此預(yù)知非彼預(yù)知，并不是在股票app中預(yù)知一匹黑馬，而他是盡可能最大程度上提高用戶操作前指導(dǎo)，方便地為用戶做出正確的選擇，很好地提升了產(chǎn)品的易用性與使用效率。

根據(jù)我個(gè)人的理解，我總結(jié)為以下幾點(diǎn)：

1. 指示明確

如果要盡可能讓操作后的結(jié)果滿足用戶的預(yù)期，那么這個(gè)預(yù)期可能就是產(chǎn)品操作前的預(yù)知——用戶非常清楚地知道這個(gè)是什么功能，就好比生活中的指示牌一樣，指示如果你這樣走，你會(huì)去哪？

在很早之前，蘋果推出滑動(dòng)解鎖的時(shí)候，可謂是人皆喊好。蘋果就是用非常明確的文字描述結(jié)果會(huì)如何，并且搭配指示箭頭告訴用戶需要這么滑。

雖然現(xiàn)在科技發(fā)達(dá)了，已經(jīng)有指紋可以代替，但是這依舊是一個(gè)很棒的設(shè)計(jì)；所以我個(gè)人理解的是左右箭頭如果表現(xiàn)得不夠直觀的時(shí)候，其實(shí)也可以用文字加以輔助描述。

2. 減少疑惑

減少用戶的疑惑，用戶在已有的習(xí)慣基礎(chǔ)上，已經(jīng)能正確理解產(chǎn)品界面，并不需要太多的創(chuàng)新、以及打破常規(guī)，如果變得太多只會(huì)讓用戶覺得太疑惑。

從圖形用戶界面的推出一直到現(xiàn)在，圖標(biāo)都作為界面中大部分功能的入口，而一個(gè)明確的圖標(biāo)是能夠讓用戶更好的理解，圖標(biāo)都是具有明確指定含義的、或源于生活中的各種圖形標(biāo)志，它充分模擬現(xiàn)實(shí)世界，并且根據(jù)元素的關(guān)鍵性特征進(jìn)行提煉。

但是還是有很多功能，并不能清晰地用圖標(biāo)展示，這個(gè)時(shí)候依然使用圖標(biāo)，往往會(huì)給用戶帶來疑惑，所以適當(dāng)?shù)臅r(shí)候用文字描述，效果也不錯(cuò)。

3. 狀態(tài)可見

清楚明確的狀態(tài)可以讓用戶操作前，更好地預(yù)知結(jié)果，以便省去多余的反復(fù)試錯(cuò)過程，在很大程度上優(yōu)化用戶體驗(yàn)。

這一點(diǎn)常體現(xiàn)在進(jìn)度條、字幕索引導(dǎo)航上，像媒體類或者閱讀類的產(chǎn)品，用戶拖拽進(jìn)度條肯定是想快進(jìn)或者倒退。但是用戶并不能很準(zhǔn)確記住他想要的準(zhǔn)確位置，所以這個(gè)時(shí)候拖拽進(jìn)度條就會(huì)有一個(gè)小型預(yù)覽窗口，分組導(dǎo)航也是這種效果，當(dāng)用戶區(qū)滑動(dòng)調(diào)整時(shí)，他會(huì)提示跳轉(zhuǎn)的目的地。

前段時(shí)間，我在使用sketch的時(shí)候也發(fā)現(xiàn)這個(gè)小細(xì)節(jié)，快速選擇圖層的時(shí)候，他會(huì)在前面顯示清晰的狀態(tài)，相比這一點(diǎn)ps就不夠直觀。

目前市場上的產(chǎn)品體量越來越大，整個(gè)界面加載時(shí)間可能需要一小會(huì)，所以越來越多產(chǎn)品可能會(huì)利用結(jié)構(gòu)界面的形式來作為加載緩沖頁面，讓用戶完全進(jìn)入頁面前更加地了解界面結(jié)構(gòu)。

這種形式在部分網(wǎng)頁端也適用。

4. 小結(jié)

用戶對未知的事物會(huì)產(chǎn)生焦慮感、恐懼感，如果操作前，不能夠準(zhǔn)確判斷出后果，便會(huì)感到恐懼，不會(huì)輕易操作，如果操作之后的結(jié)果與預(yù)期不一致，便會(huì)產(chǎn)生挫敗感，那這將是一個(gè)失敗的體驗(yàn)、進(jìn)而損失用戶; 因此，我們需要從用戶的角度出發(fā)，盡可能的完善操作前的功能，增強(qiáng)設(shè)計(jì)表達(dá)能力，符合操作預(yù)期。

二、操作中有反饋

從問題的最本源出發(fā)開始思考，為什么會(huì)有反饋呢？

這就好比人與人走在街上，你給對方打招呼，然而對方并不想搭理你，這個(gè)時(shí)候你肯定會(huì)覺得他冷冰冰的，毫無人情味。

所以產(chǎn)品中的有效反饋可以提高溫情，不僅如此咱們還應(yīng)該做得更完善一點(diǎn)——我們需要準(zhǔn)確告訴用戶，你在哪？你是誰？你干嘛了！你能干嘛！你不能干嘛。

而這些就是反饋需要滿足的最基本要求，那么需要反饋的形式有哪些呢？

這里，我總結(jié)了以下幾點(diǎn)、

1. 反饋的形式

操作反饋，這一步屬于操作的中間，而我也覺得這一步是最為關(guān)鍵的一步，那么何為反饋呢？

反饋說得通俗一點(diǎn)就是輸入后即時(shí)返回輸出。好比我敲鍵盤，屏幕上里面出現(xiàn)字母的道理一樣，但這僅僅是一種形式。反饋的表現(xiàn)形式基本上分為視覺、聽覺、觸覺這三個(gè)大類，而這些表現(xiàn)形式，又有哪些需要注意的呢？

2. 視覺反饋形式

反饋的形式有很多種，就像上面我舉例的一樣，視覺表現(xiàn)類的反饋，說的通俗一點(diǎn)就是肉眼可以直接看到的反饋，也是最常見的一種反饋形式，這種多表現(xiàn)于動(dòng)效、彈窗、狀態(tài)、文本等等。

下面呢，我重點(diǎn)探討針對動(dòng)效和彈窗2個(gè)方向。

2.1 動(dòng)效反饋

隨著互聯(lián)網(wǎng)的快速發(fā)展，動(dòng)效也越來越普及咱們的每一款產(chǎn)品中，但是動(dòng)效的存在并不是為了凸顯設(shè)計(jì)師的技法，動(dòng)效也有它專門的研究方向和實(shí)際作用。

這篇總結(jié)呢也不是專門針對動(dòng)效設(shè)計(jì)而說的，所以就不深入討論。
這里我大致總結(jié)一下操作反饋中，運(yùn)用到的動(dòng)效方法以及作用。

2.1.1 反映狀況

一個(gè)優(yōu)秀的動(dòng)效反饋可以很明確的引導(dǎo)用戶視線，通過注意力的吸引讓用戶確定發(fā)生的內(nèi)容。

比如iOS的應(yīng)用，在長按之后，圖標(biāo)都會(huì)抖動(dòng)起來，很明確的反饋給用戶通過你的操作，現(xiàn)在可以刪除了，這樣可以和正常狀態(tài)形成區(qū)別（曾經(jīng)一度以為應(yīng)用是嚇得瑟瑟發(fā)抖）

在比較多的電商產(chǎn)品中購買商品、或者應(yīng)用截圖，縮小應(yīng)用窗口等等一系列的操作反饋，都可能會(huì)運(yùn)用到這種效果。

通過簡單的路徑動(dòng)效，明確的引導(dǎo)用戶關(guān)注這個(gè)操作所產(chǎn)生的狀態(tài)，一般來說引導(dǎo)產(chǎn)生后的東西是對用戶有意義的，是可以進(jìn)一步操作的。

就好比我要看看購物車有多少商品了，或者截圖后點(diǎn)擊圖片進(jìn)繼續(xù)編輯，縮小的窗口隱藏位置，所以動(dòng)效的運(yùn)用也是合理化的，并不是任何反饋都需要采用這種方法。

2.1.2 消除疑惑

在動(dòng)效的反饋表現(xiàn)中，不僅僅體現(xiàn)在反饋結(jié)果的引導(dǎo)，也有很多動(dòng)效的反饋。

這是為了解決用戶的疑惑，用簡單的動(dòng)效明確告知用戶目前進(jìn)行的狀態(tài)，減少用戶疑惑，這種的一般體現(xiàn)在加載、刷新等等。

在操作中的加載，這個(gè)是最常見的加載形式有轉(zhuǎn)菊花，也會(huì)有個(gè)別產(chǎn)品會(huì)為了突出品牌形象，菊花換成有意義的東西。

例如今日頭條就是四個(gè)字的刷新，除此還有進(jìn)度條的形式，例如音頻加載的進(jìn)度反饋，短視頻播放時(shí)間進(jìn)度，這種類型的表現(xiàn)可以明確的告知用戶目前的狀態(tài)（懶得找配圖了，大家腦補(bǔ)一下）。

本頁面操作中的狀態(tài)反饋，一般會(huì)運(yùn)用到模態(tài)加載，但是在有的情況下，會(huì)使得用戶并不明確是哪個(gè)地方在加載。

所以不僅如此，我們還可以針對使用場景，繼續(xù)明確反饋，例如下拉刷新反饋，下拉加載更多信息、發(fā)送消息、確定功能等等一系列。

頁面內(nèi)的反饋呢，當(dāng)然不僅僅局限于上面描述的。

比如眾所周知的點(diǎn)贊動(dòng)效，但是如果已經(jīng)通過明確的動(dòng)效來反饋你已經(jīng)點(diǎn)贊，這個(gè)時(shí)候咱們就不需要使用其他方法再配合反饋，會(huì)顯得額外累贅（配圖有點(diǎn)難找，大家繼續(xù)腦補(bǔ)）。

還有一種動(dòng)效反饋，就是當(dāng)我們下滑頁面至底部的時(shí)候，會(huì)有小波浪的水紋，這個(gè)處理方式就很好地告訴用戶——恭喜你，你已經(jīng)到了最底部了，下面沒東西了。

相反，如果我們?nèi)鄙龠@個(gè)細(xì)節(jié)，可能用戶會(huì)很疑惑，甚至認(rèn)為手機(jī)是不是卡了。所以呢，我個(gè)人覺得，細(xì)節(jié)才是咱們設(shè)計(jì)師最應(yīng)該把控的。

動(dòng)效設(shè)計(jì)更好的表現(xiàn)過程，加強(qiáng)用戶對界面的認(rèn)識(shí)，加強(qiáng)了信息的傳達(dá)，直觀的表現(xiàn)狀況，并且運(yùn)用良好的動(dòng)效反饋，減少了用戶對信息間更少的疑惑。

但是動(dòng)效設(shè)計(jì)的運(yùn)用，不單單只是這些，還有很多很多值得我們?nèi)ヌ接憽?/p>

2.2 彈窗反饋

彈窗類型的反饋，也是屬于視覺形式中比較常用的一種方式。而彈窗也分為兩種類型：一個(gè)是模態(tài)，一個(gè)是非模態(tài)（關(guān)于模態(tài)之前看過幾篇文章寫的很棒，建議感興趣的同學(xué)可以單獨(dú)去查閱）。

兩者的區(qū)別呢，就是需不需要用戶近一步操作。

那么這里呢，我也主要通過這2個(gè)方向，來大致探討一下反饋的形式和一些細(xì)節(jié)問題。

2.2.1 模態(tài)

模態(tài)彈窗除了告訴用戶信息內(nèi)容外還需要用戶進(jìn)行功能操作，必須對其進(jìn)行回應(yīng)，否則不能繼續(xù)其它操作。

所以一般來說，盡量減少使用模態(tài)窗口，過多的使用會(huì)導(dǎo)致用戶視線打斷，體驗(yàn)十分不友好，所以模態(tài)窗口的使用場景很明確。

彈出的模態(tài)不要讓用戶感到驚訝。讓用戶執(zhí)行操作，如單擊按鈕、跟隨鏈接或選項(xiàng)、觸發(fā)模式。

不請自來的模式可能會(huì)使用戶感到驚訝，雖然目前很多產(chǎn)品都采用打開即推送活動(dòng)，這種方式是站著商業(yè)的角度，犧牲了一定的用戶體驗(yàn)。

模態(tài)彈窗可以很好的吸引用戶注意力。常用的有對話框、動(dòng)作欄還有浮層。

對話框交代信息準(zhǔn)確明顯，用戶快速掌握反饋內(nèi)容，從而進(jìn)行下一步操作。

動(dòng)作欄一般多出現(xiàn)在底部，而這個(gè)更像是一個(gè)操作選項(xiàng)的容器，承載的內(nèi)容較多。

與之差不多的還有浮層彈窗，但是浮層更具有指向性，并且不會(huì)對頁面其他內(nèi)容進(jìn)行過多的遮擋，但是在操作性的角度上并沒有動(dòng)作欄方便。

在執(zhí)行刪除操作后，會(huì)有對話框的形式告知用戶，并讓用戶進(jìn)一步操作，因?yàn)檫@個(gè)操作是一個(gè)不可逆的狀態(tài)，需要用戶確認(rèn)，并不是直接就刪除掉了。

但是我也發(fā)現(xiàn)QQ的側(cè)滑刪除，并不會(huì)彈窗反饋。我個(gè)人的理解是：也許是因?yàn)镼Q刪除不會(huì)刪除聊天記錄，并不是很重要，用戶已經(jīng)通過了側(cè)滑操作，不需要再進(jìn)一步提醒，從而減少操作的負(fù)擔(dān)。

模態(tài)彈窗可以很好的聚焦用戶視線，重要的內(nèi)容可以讓用戶再進(jìn)行操作。針對不同的場景，我們可以使用不同的形式，但是過多的反饋，也會(huì)使得用戶煩躁。

2.2.2 非模態(tài)

非模態(tài)彈窗不會(huì)影響用戶操作，用戶可以不與回應(yīng)，過一段時(shí)間就會(huì)自動(dòng)消失，可以說再某些基礎(chǔ)原理上和模態(tài)是相反的，但是非模態(tài)的彈窗一般是體現(xiàn)產(chǎn)品變更的信息和提示信息等，操作后會(huì)馬上給予反饋。

Toast是安卓系統(tǒng)的一個(gè)控件名詞，在iOS中與之對應(yīng)的是HUD。HUD出現(xiàn)的頻率很少，只有iOS系統(tǒng)調(diào)節(jié)音量的時(shí)候才出現(xiàn)過。兩者之間還是存在一定的不同，HUD里的內(nèi)容可以變化，Toast不可以，但是現(xiàn)在兩平臺(tái)基本共通，所以在使用上并沒有很大的場景限制。

資訊類的產(chǎn)品中，用戶刷新后，為了體現(xiàn)產(chǎn)品變更的信息，一般都會(huì)采用Toast彈窗進(jìn)行反饋，準(zhǔn)確的告知用戶刷新結(jié)果。雖然安卓的官方規(guī)定寫的是Toast放置在頂部，但是在大部分的產(chǎn)品中，Toast的位置比較隨意，顏色也可以自由變換，甚至可以搭配圖標(biāo)。因?yàn)門oast展示時(shí)間較短，搭配圖標(biāo)可以提高信息的可讀性。

Toast信息提示也可以稱為輕提示，相比模態(tài)的對話框，這個(gè)就比較友好，并不會(huì)打斷用戶的操作，以比較簡單的方式提示用戶信息；但是有的時(shí)候可能會(huì)被用戶忽略，所以使用的時(shí)候，我們也應(yīng)該根據(jù)場景具體判斷。

Snackbar也是安卓系統(tǒng)中的一個(gè)控件，雖然他不屬于操作反饋里面的內(nèi)容，但是我還是簡單描述一下。

與Snackbar對應(yīng)的有Noticebar（通告欄），Noticebar常出現(xiàn)在頂部，Snackbar常出現(xiàn)在底部。

Snackbar和Toast明顯不同的區(qū)別就是可以進(jìn)一步操作，但是他又解決了Toast展示時(shí)間短的一個(gè)問題——既能不影響用戶，又能較好的體現(xiàn)信息，引導(dǎo)用戶操作。

所以我個(gè)人覺得Snackbar是介于模態(tài)和非模態(tài)中間的另外一種形式。

在視覺的操作反饋中，除了動(dòng)效和彈窗，還有很多其他形式，例如狀態(tài)等。

但是其中的道理基本都差不多，只是為了更好的讓用戶明白進(jìn)行了這個(gè)操作，你給我一個(gè)怎么樣的反饋，可以讓用戶比較直觀的了解內(nèi)容。

3. 聽覺反饋形式

聽覺是反饋的另外一種形式，其反饋的強(qiáng)度也高于視覺反饋，所以我們在使用時(shí)要極其慎重，因?yàn)檫^多的視覺反饋，會(huì)給用戶造成干擾。

經(jīng)常會(huì)使用聽覺反饋的方式，比如電話和短信。

因?yàn)橐话銇碚f呢，手機(jī)來電可能是很突然的，并不是時(shí)時(shí)刻刻都看著手機(jī)；所以聽覺反饋，這個(gè)時(shí)候可能更容易引起人們的注意，不僅如此，例如收到消息，或者郵件發(fā)送成功等等。

聲音是直觀的感受，有的時(shí)候往往大于我們所看到的東西。而我們需要充分體現(xiàn)現(xiàn)實(shí)世界中的感受，增強(qiáng)感官反饋，所以在有的東西表現(xiàn)上，我們可以適當(dāng)利用聽覺效果打造效果。

例如刪除照片的咔呲聲，就好比撕碎一樣；拍照時(shí)候的咔嚓聲，就好比快門一樣，這樣可以在扁平化的視覺上，喚起情感方面的舒適感受。

4. 觸覺反饋形式

觸覺反饋通常是以震動(dòng)的形式，但是觸覺反饋并不能很好的傳遞信息。

觸覺反饋，在整個(gè)反饋中并不是獨(dú)立存在的，它往往也會(huì)伴隨著視覺或者聽覺反饋一起，它可以作為一個(gè)輔助反饋的形式存在。

比較常見的觸覺反饋可能就是錯(cuò)誤操作、或者信息錯(cuò)誤，會(huì)有震動(dòng)反饋，提示用戶操作錯(cuò)誤。

還有一種反饋就是當(dāng)我們調(diào)節(jié)音量的時(shí)候，我們長按音量鍵快速調(diào)節(jié)，當(dāng)聲音變成震動(dòng)模式后，它會(huì)伴隨著震動(dòng)，反饋我們的操作結(jié)果。

觸覺類的反饋雖然并不能有效的傳遞信息，目前的產(chǎn)品設(shè)計(jì)中，觸覺反饋的出場率還是很少的，但是使用得當(dāng)，效果也還不錯(cuò)，所以在運(yùn)用的過程中，一定要謹(jǐn)慎。

5. 小結(jié)

操作流程中的反饋，可以說是整個(gè)流程中最重要的一步，即時(shí)響應(yīng)用戶的操作、確認(rèn)操作結(jié)果。

在信息的傳遞過程中，會(huì)有不同的結(jié)果，以及各種展示的方式，我們需要用最清晰的方法去答復(fù)用戶，也要是最簡潔的。

正所謂只有掌握了方法的基本原理，我們才能在前進(jìn)的道路上，為所欲為。

在動(dòng)效和彈窗的反饋中，表現(xiàn)的形式有很多種，每一種可能都有自己不同的特點(diǎn)，體現(xiàn)的效果也可能會(huì)有所不同，我們應(yīng)該根據(jù)具體情況具體分析。

三、操作后可返回

產(chǎn)品交互流程的最后一步，操作后返回，這一步也是必不可少的，雖然平時(shí)都會(huì)注意到，但是也可能往往被忽略。

返回是所有操作中唯一一個(gè)可以控制頁面后退的一種方式，其中還是有很多需要注意的內(nèi)容，

1. 返回的種類

操作后可返回，但是這個(gè)返回的功能可能并不局限于返回，其實(shí)流程進(jìn)行中、或者流程結(jié)束，返回的功能都有不同的形式展示，比如，關(guān)閉和完成。他們都體現(xiàn)的一樣的功能，即操作結(jié)束后可以原路返回。

1.1 返回

返回在各種流程中都是十分常見的出現(xiàn)，常用的表現(xiàn)手法就是向左的箭頭，一般出現(xiàn)的位置在導(dǎo)航欄，所以也稱為反向?qū)Ш健?/p>

反向?qū)Ш阶鳛槲ㄒ徊倏仨撁婧笸说膶?dǎo)航方式，但是安卓的手機(jī)一般底部都會(huì)有一個(gè)物理的返回鍵，而蘋果的手機(jī)一般都會(huì)采用右滑的形式返回。

返回功能一般出現(xiàn)的場景多用于二級頁面及以上，通過用戶的操作，進(jìn)入了新的場景，就可以利用返回的功能，退出功能場景。

1.2 關(guān)閉

關(guān)閉其實(shí)和返回上本質(zhì)意義還是一致的——退出功能場景。

但是關(guān)閉更傾向于整個(gè)任務(wù)流程終止，就好比上面咱們一起討論的操作彈窗反饋，這個(gè)時(shí)候操作可返回的原理就是利用關(guān)閉的形式結(jié)束反饋，可能是取消按鈕，也有可能是關(guān)閉圖標(biāo)。

但是這個(gè)時(shí)候要注意，關(guān)閉圖標(biāo)和取消按鈕屬于相同的功能，且只能存在一個(gè)，否則會(huì)給用戶選擇上帶來疑惑。

關(guān)閉指的是結(jié)束一個(gè)任務(wù)流程，一般出現(xiàn)的場景多用于任務(wù)流程，或者該頁面進(jìn)行的交互操作，并沒有進(jìn)入新的場景，這個(gè)時(shí)候關(guān)閉功能使用居多。

1.3 完成

完成其實(shí)在某種意義上和關(guān)閉是相對的，完成更傾向于整個(gè)任務(wù)流程中，一個(gè)操作已經(jīng)結(jié)束，用戶完成了此次的操作。

雖然在體驗(yàn)產(chǎn)品的過程中，我發(fā)現(xiàn)使用完成的很少，但是也是存在的，一般更多的出現(xiàn)在編輯成功后、訂單結(jié)算后、以及任務(wù)操作完成后，都會(huì)利用完成作為結(jié)束整個(gè)流程的按鈕。

這三種類型其實(shí)都屬于操作后可返回的概念，但是本質(zhì)上還是有一點(diǎn)點(diǎn)不同，就如第二點(diǎn)里面說到的一樣，同一個(gè)功能不會(huì)重復(fù)出現(xiàn)2個(gè)。

就比如我們常見的彈窗一樣，一般只要有結(jié)束彈窗的按鈕，就不會(huì)再新增一個(gè)關(guān)閉的圖標(biāo)，這樣會(huì)顯得很多余、累贅。

2. 返回去何處？

雖然上面總結(jié)的同樣功能不建議同時(shí)存在，但是在很多產(chǎn)品中，我們可以看到返回和關(guān)閉共存的情況。

其實(shí)這就是和上面討論的一樣，在一個(gè)很長的操作流程中，用戶點(diǎn)擊返回按鈕的時(shí)候，系統(tǒng)無法判斷你是要結(jié)束流程，還是回到上一頁面；所以就會(huì)出現(xiàn)返回、關(guān)閉同時(shí)存在的情況。

在部分產(chǎn)品中可能會(huì)有這種情況，但是也有部分產(chǎn)品并不是這種方法，他們是直接根據(jù)業(yè)務(wù)屬性、以及任務(wù)的場景，最終決定返回的意義（這個(gè)我也不好說誰好誰壞，可能都有其中的道理）

在很多推薦閱讀、或者相關(guān)商品的產(chǎn)品中，人們抱著無目的的心態(tài)，訪問系統(tǒng)推送的猜你喜歡。

這個(gè)時(shí)候?qū)蛹壙赡芤呀?jīng)很深很深，一層層的返回也許不是很友好，所以有的產(chǎn)品使用的是直接返回到一級頁面（站酷的猜你喜歡，返回就是直接回到一級頁面）。

在很多購物電商類的產(chǎn)品中，每個(gè)店鋪都有自己不同的分類結(jié)構(gòu)和眾多商品，用戶在店鋪選購的時(shí)候，也許通過關(guān)聯(lián)商品、推薦商品已經(jīng)繞得比較暈的時(shí)候，返回功能也許不能很好地找回迷失的路程。

所以底部這個(gè)時(shí)候都會(huì)有一個(gè)店鋪的圖標(biāo)，而這個(gè)功能更是完美地避免了多次返回的操作，實(shí)現(xiàn)了快速回到店鋪首頁的功能。

3. 可能需要注意的

操作后可返回，那就意味著返回功能是必須的，只不過表現(xiàn)的形式、種類有很多。

那么，咱們在設(shè)計(jì)返回功能的時(shí)候，需要注意些什么？我這里通過分析總結(jié)了幾點(diǎn)。

3.1 位置

通常的返回功能都是放置在導(dǎo)航欄的右邊，這個(gè)也一直是大家很有爭議的一個(gè)問題。

我個(gè)人覺得也許為了提高頁面的停留時(shí)長，畢竟返回這個(gè)功能對整個(gè)場景影響比較大，加強(qiáng)返回操作難度，所以才將這個(gè)功能放置在最難點(diǎn)擊的左上角。

蘋果官方建議是將用戶想點(diǎn)擊的內(nèi)容放置在右邊，所以很多流程結(jié)束的完成，都是放置在導(dǎo)航欄的右上角。

針對這個(gè)進(jìn)行拓展，我發(fā)現(xiàn)很多彈窗設(shè)計(jì)，大部分的關(guān)閉都是放置在右邊；但是也有少許的放置在左邊，也許這個(gè)就是根據(jù)蘋果的官方建議，想提高彈窗的存活率，增強(qiáng)操作難度，將關(guān)閉放置在左邊。

微信這次更新，紅包界面的關(guān)閉也是從以前的左邊移到了最順手的下方。

可能因?yàn)榧t包界面，大家不會(huì)像廣告彈窗一樣反感地關(guān)閉，不需要很難的關(guān)閉；而紅包如果領(lǐng)取完，用戶也可以快速地將紅包界面關(guān)閉。

3.2 分段操作

當(dāng)一個(gè)信息量比較大，任務(wù)流程比較繁重的情況下，用戶操作中難免會(huì)遇到重新編輯，或者返回上一步的操作。

這樣也許會(huì)影響整個(gè)流程，而我之前已經(jīng)填寫過的信息還需要一步步原路返回，才能找到我想到的位置；但是如果我們通過分段信息展示，用戶可以針對性操作，這樣就避免了返回功能帶來的困惑。

閑魚的評估閑置功能，在任務(wù)流程中左上角的返回可以快速結(jié)束任務(wù)流程，回到分類頁面，而每一條已經(jīng)編輯過的信息，我們也可以利用修改功能進(jìn)行快速修改，避免了更多的麻煩。

不僅僅如此，有些產(chǎn)品也會(huì)利用到步驟條的形式，這樣不僅僅可以直觀了解流程的步驟，也可以在用戶需要返回的時(shí)候更加高效。

4. 小結(jié)

雖然我們不會(huì)落下操作流程的最后一環(huán)——返回，因?yàn)槿鄙俜祷氐牧鞒?，測試走幾遍就可以發(fā)現(xiàn)問題；但是其中隱藏的一些細(xì)節(jié)內(nèi)容以及方式、種類，往往是我們所忽略的東西。

相同功能有且只有一個(gè)——減少用戶的疑惑，針對不同的使用場景，返回的用途也不一樣，通過任務(wù)的分解、導(dǎo)航欄的合理運(yùn)用、隨時(shí)關(guān)閉分流程等方法，提高返回功能的效率。

總結(jié)

其實(shí)最簡單的道理，大家都懂，但是并不能說出一二三四 ，甚至都是抱著我以為、我覺得，或者喊著用戶習(xí)慣來進(jìn)行。

其實(shí)交互設(shè)計(jì)中有很多有意思的小細(xì)節(jié)以及設(shè)計(jì)規(guī)律、方法論在其中，只不過前人已經(jīng)為我們種下了果樹，后人就干脆涼快地乘涼了。

但是我們還是要掌握好種子的配方，才能更好地前行。我也希望這篇文章只是一個(gè)起點(diǎn)，通過它拓展更多的知識(shí)內(nèi)容。

愿未來，我們一起種下成長的果實(shí)。

作者：徐思磊

來源：https://www.ui.cn/detail/465790.html

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

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