《當(dāng)你離開的時(shí)候》疑苔，一首來自Tanya的歌碱蒙，將離別時(shí)的不舍與無奈娓娓道來。然而本篇并不是一片音樂介紹，并不會(huì)細(xì)說那些戀人分手時(shí)的傷感情懷赛惩。在這里我想聊的是交互設(shè)計(jì)中當(dāng)用戶完成編輯任務(wù)哀墓，離開當(dāng)前頁面或浮層時(shí)候的一些事兒。

我從實(shí)習(xí)開始喷兼，最初接觸到的功能模塊就是“設(shè)置”篮绰。在產(chǎn)品的設(shè)置模塊中，當(dāng)用戶完成設(shè)置編輯任務(wù)便會(huì)離開當(dāng)前頁面或浮層季惯，跳轉(zhuǎn)到另一個(gè)頁面吠各。編輯完成之后離開，這種行為看起來自然平常勉抓，可是經(jīng)常也會(huì)發(fā)生一些意外贾漏，比如：電商商戶王尼瑪興致勃勃地花了一個(gè)小時(shí)，在某電商后臺(tái)中編輯了一長溜店鋪資料藕筋，然后看到右上角“新消息”的入口上突然出現(xiàn)一個(gè)小紅點(diǎn)纵散。“有戲隐圾！”王尼瑪手賤地點(diǎn)擊了一下“新消息”伍掀，然后什么都沒有保存頁面就這么跳轉(zhuǎn)過去了……

圖片發(fā)自簡書App

生命中的一小段又被喂了狗的感覺。

當(dāng)然暇藏，沒有保存的錯(cuò)誤跳出放在當(dāng)下有交互設(shè)計(jì)的電商公司應(yīng)該都不會(huì)出現(xiàn)了蜜笤，畢竟編輯后離開場景的安全性應(yīng)該也算是常識(shí)了。編輯功能不僅僅在設(shè)置頁面存在盐碱，內(nèi)容編輯把兔、篩選項(xiàng)編輯、預(yù)訂商品內(nèi)容編輯等等都牽涉到編輯功能瓮顽。編輯完成之后離開頁面或浮層垛贤，會(huì)牽涉到用戶已編輯內(nèi)容的保存問題。再擴(kuò)展一些趣倾，編輯后離開還牽涉到用戶什么時(shí)候可以退出聘惦，以及退回位置和退回后狀態(tài)變化的問題。雖然都是小問題儒恋，但是如果不仔細(xì)考慮善绎，很容易在產(chǎn)品框架階段就埋下低級(jí)錯(cuò)誤隱患，后來改起來就很費(fèi)時(shí)費(fèi)力了诫尽。

這里就用戶編輯后離開這個(gè)場景禀酱，梳理一下基本的設(shè)計(jì)原則。

1. 防錯(cuò)性與可見性：避免錯(cuò)誤跳出

防錯(cuò)性是編輯后離開場景下交互設(shè)計(jì)的首要問題牧嫉〖粮“永遠(yuǎn)不要讓用戶覺得自己是傻子”减途，作為交互設(shè)計(jì)師，我們應(yīng)當(dāng)理解用戶很多時(shí)候就會(huì)是不動(dòng)腦地去操作曹洽，然而這不等于我們要用交互去讓他們認(rèn)識(shí)到自己的傻鳍置。“我剛剛好傻啊送淆，怎么沒有保存”税产、“我怎么那么傻，手賤點(diǎn)了那個(gè)按鈕”偷崩，如果用戶總是在我們的界面上覺得自己被愚弄了辟拷，不能做任何報(bào)復(fù)的他們只能放棄使用來和平地表達(dá)抗議。

避免用戶出錯(cuò)阐斜，就要避免用戶莫名其妙地離開了編輯狀態(tài)衫冻。比如一個(gè)編輯頁面上不要有編輯無關(guān)功能的入口，因?yàn)槲覀儫o法阻止用戶的好奇心谒出。

同時(shí)隅俘，保存按鈕的高可見性也會(huì)防止用戶莫名其妙地點(diǎn)擊別處。

如果一定會(huì)有別的入口到推，那么我們可以考慮邊編輯邊保存考赛。這看起來固然是一個(gè)安全的好方法惕澎，但是這樣做帶來的緩存負(fù)擔(dān)以及用戶希望撤銷編輯時(shí)候的尷尬我們也不能不考慮莉测。

2. 安全性：離開保存，彈窗提示

當(dāng)我們確實(shí)無法采用減少入口或邊編輯邊保存的方式防止用戶犯錯(cuò)的時(shí)候唧喉，我們應(yīng)該至少給他們一個(gè)提醒：“Hey buddy捣卤， 你這么做是在搞事情“诵ⅲ”

提醒浮層突兀且尷尬董朝，但是并不失為一種有效的安全措施。特別是當(dāng)我們希望顯得自己對(duì)用戶很友好的時(shí)候干跛，這里是交互設(shè)計(jì)師們盡情發(fā)揮情感化文案設(shè)計(jì)的場所子姜。當(dāng)我們希望挽留用戶，或者鼓勵(lì)用戶多寫點(diǎn)啥的時(shí)候楼入，這也是一塊好的交流地哥捕。

當(dāng)然，首先用戶要愿意理你嘉熊。

3. 可預(yù)見性與反饋

確保用戶編輯行為的安全無虞之后遥赚，交互還需要確保的一點(diǎn)是不要讓用戶迷失。如果離開后來到一片和之前完全沒有聯(lián)系的新頁面阐肤，難保用戶不會(huì)問出人生三大問題凫佛。因此編輯之后離開到達(dá)的頁面應(yīng)當(dāng)是可預(yù)見的讲坎，而不是讓用戶去理解滄海桑田。

當(dāng)然愧薛，很可能的晨炕，用戶在編輯完成離開后，之前的頁面因?yàn)榫庉嫯a(chǎn)生的結(jié)果已經(jīng)完全不一樣了（如編輯店鋪頁面）厚满，或者因?yàn)榫庉嬏峤坏慕Y(jié)果而到了下一步頁面（比如編輯支付內(nèi)容然后提交）府瞄。這個(gè)時(shí)侯，反饋的重要作用就體現(xiàn)出來了碘箍。在頁面內(nèi)給用戶清晰地反饋遵馆，讓他們知道經(jīng)歷了蛻變或旅途后他們已經(jīng)到達(dá)一個(gè)新的地點(diǎn)。有時(shí)候這樣的反饋還可以加點(diǎn)小驚喜丰榴。

4. 流暢性：用戶想看結(jié)果货邓，而不是等待

編輯完成離開后，一般用戶最關(guān)心的就是編輯得到的結(jié)果四濒。在這個(gè)時(shí)候换况，任何炫酷卻拖拉的動(dòng)效都可能是糟糕的。用戶體驗(yàn)應(yīng)當(dāng)是流暢的盗蟆，動(dòng)效的存在應(yīng)當(dāng)給用戶建立適當(dāng)?shù)恼J(rèn)知模型戈二。但是編輯過程的特殊性在于，編輯本身是產(chǎn)生結(jié)果的喳资，編輯后離開有既定的認(rèn)知預(yù)期觉吭，就是看到結(jié)果。此時(shí)的動(dòng)效就像魔術(shù)師的戲法仆邓，干凈利落的可以讓用戶得到投入后收獲的喜悅鲜滩，而冗長的動(dòng)效只會(huì)讓用戶想去揍那個(gè)魔術(shù)師。指示可以有节值，但更重要的是流暢徙硅。

其實(shí)編輯后離開是一個(gè)很小的交互設(shè)計(jì)點(diǎn)。但在我遇見過的設(shè)計(jì)中搞疗，從小公司的初創(chuàng)產(chǎn)品到大廠的成熟產(chǎn)品嗓蘑，都出現(xiàn)過這樣的問題。也許有的頁面編輯重量確實(shí)不大匿乃，但是一點(diǎn)點(diǎn)細(xì)節(jié)上的不安全或者不爽慢慢就會(huì)演變?yōu)閷?duì)于整個(gè)用戶體驗(yàn)的不認(rèn)可桩皿。而且交互設(shè)計(jì)師的追求就應(yīng)當(dāng)是把握每個(gè)細(xì)節(jié)的用戶體驗(yàn)，難道不是嗎扳埂？

1922

20170528 @ Home

圖片發(fā)自簡書App