我們都在研究好的設(shè)計(jì)，感嘆優(yōu)秀的產(chǎn)品帶給我們的尖叫，但我們或許從未思考過(guò)，糟糕的用戶體驗(yàn)設(shè)計(jì)也會(huì)給用戶帶來(lái)很大的傷害。這個(gè)產(chǎn)品體驗(yàn)欄目的靈感來(lái)自于喬納森·沙利亞特的《設(shè)計(jì)的陷阱：用戶體驗(yàn)設(shè)計(jì)案例透析》這本書。在本書的介紹里，有這么一句話——設(shè)計(jì)能殺人、使人憤怒、使人傷心。讀到這句話的時(shí)候，讓人驚愕，讓人不可思議，但這就是事實(shí)，這就是糟糕的用戶體驗(yàn)設(shè)計(jì)會(huì)導(dǎo)致的后果。「體驗(yàn)陷阱」的第一期，就讓我們來(lái)看看那些被忽視的文章編輯器對(duì)用戶體驗(yàn)的影響有多糟糕。

一、什么是文章編輯器？

文章編輯器是一個(gè)產(chǎn)品最基礎(chǔ)的構(gòu)成部分，不管是前臺(tái)還是后臺(tái)，編輯器都是一個(gè)非?；A(chǔ)的功能。比如一個(gè)產(chǎn)品需要發(fā)布新的資訊內(nèi)容，在后臺(tái)就一定需要有一個(gè)文章編輯器才能實(shí)現(xiàn)這個(gè)功能。
文章編輯器在各大網(wǎng)站、APP產(chǎn)品里都非常常見，特別對(duì)于以內(nèi)容生產(chǎn)為主的社區(qū)、平臺(tái)，比如像站酷網(wǎng)、人人都是產(chǎn)品經(jīng)理、知乎、頭條、網(wǎng)易這些平臺(tái)，文章編輯器是一個(gè)非?；A(chǔ)又必不可少的功能。

二、我們理想中的文章編輯器？

1. 有用性
文章編輯器要能實(shí)現(xiàn)內(nèi)容的發(fā)布，當(dāng)用戶從本地或在線文檔（比如騰訊文檔、飛書、石墨等）復(fù)制內(nèi)容進(jìn)去時(shí)候，可以輕松實(shí)現(xiàn)二次編輯，比如插入圖片、調(diào)整標(biāo)題樣式等。
2. 易用性
編輯器的界面、功能，要能滿足多數(shù)用戶的期望，比如支持多張圖片上傳、第三方音頻/視頻鏈接，以及整個(gè)操作過(guò)程中使用起來(lái)愉悅、友好。
3. 容錯(cuò)性
當(dāng)用戶出現(xiàn)操作錯(cuò)誤的時(shí)候，系統(tǒng)能夠及時(shí)給用戶提示，比如圖片上傳進(jìn)度、圖片尺寸大小限制、必填項(xiàng)勾選等等。容錯(cuò)性對(duì)用戶體驗(yàn)的影響特別大，如果用戶在使用過(guò)程中不清楚哪個(gè)地方犯錯(cuò)不能繼續(xù)操作，用戶對(duì)系統(tǒng)就會(huì)陷入焦慮。

三、實(shí)際產(chǎn)品設(shè)計(jì)中的編輯器

1. 站酷
站酷網(wǎng)是全國(guó)最大的設(shè)計(jì)師平臺(tái)，吸引了國(guó)內(nèi)眾多優(yōu)秀的設(shè)計(jì)師和設(shè)計(jì)知識(shí)創(chuàng)作者，但是他們的文章編輯器，體驗(yàn)下來(lái)卻非常糟糕。接下來(lái)讓我們來(lái)看看這個(gè)糟糕的文章編輯器，給用戶帶來(lái)了多大的體驗(yàn)傷害。
當(dāng)我開開心心地把一篇在騰訊文檔寫好的內(nèi)容復(fù)制到站酷編輯器的時(shí)候，在對(duì)標(biāo)題進(jìn)行格式調(diào)整的時(shí)候，全局樣式竟然會(huì)同步更改，比如想把「標(biāo)題」更改為「標(biāo)題1」的樣式，整篇文章就會(huì)一起更新，這讓人摸不著頭腦。不過(guò)我沒(méi)放棄，經(jīng)過(guò)多番嘗試，才發(fā)現(xiàn)需要在標(biāo)題上下各加一個(gè)Enter，這樣才能設(shè)置成功（我是一個(gè)BUG解決天才）。

當(dāng)文章篇幅撐過(guò)編輯器的默認(rèn)高度以后，這個(gè)時(shí)候就會(huì)出現(xiàn)一個(gè)非常糟糕的體驗(yàn)，你找不到編輯器的工具欄。比如你想上傳圖片或者修改內(nèi)容，你都不知道工具欄去哪里了，這個(gè)時(shí)候用戶徹底迷失，變得異常焦躁。解決這個(gè)問(wèn)題的唯一辦法是——把編輯器全屏。

創(chuàng)過(guò)第一關(guān)以后，全屏的編輯器又出現(xiàn)一個(gè)非常糟糕的體驗(yàn)。那就是當(dāng)你去調(diào)整某一段文字的時(shí)候，比如加一個(gè)換行，這個(gè)時(shí)候編輯器的光標(biāo)就會(huì)像幽靈一樣跑到底部，你只能重新找到剛才的原位置，你以為是眼花再試一次之后，光標(biāo)再次出現(xiàn)在底部，簡(jiǎn)直讓你懷疑人生。

當(dāng)你從頭部開始上傳圖片的時(shí)候，和調(diào)整字段一樣，光標(biāo)又會(huì)像幽靈一樣跑到底部，這個(gè)時(shí)候，你還得去找之前的位置，才能繼續(xù)上傳。不過(guò)經(jīng)過(guò)多番的嘗試，我又破解了站酷編輯器的設(shè)計(jì)密碼，原來(lái)可以從底部開始倒著傳圖片，那該死的光標(biāo)，就不會(huì)跑到底部去了，這個(gè)秘訣讓我提升了很高的效率，我真感慨自己的的智商：）

從站酷的編輯器可以看出，他們違反了尼爾森十大原則的系統(tǒng)性可見原則和防錯(cuò)原則。第一，在用戶的內(nèi)容高度超出編輯器默認(rèn)高度以后，編輯器的工具欄消失不見，這其實(shí)是一個(gè)功能BUG，不但沒(méi)有修復(fù)也沒(méi)有提示用戶使用全屏操作，用戶徹底迷失；第二，在用戶調(diào)整內(nèi)容換行的時(shí)候，光標(biāo)會(huì)像幽靈一樣跳到底部，這也屬于功能的BUG，沒(méi)有修復(fù)也沒(méi)有系統(tǒng)提示，最后導(dǎo)致用戶在內(nèi)容發(fā)布階段就變得垂頭喪氣，最終浪費(fèi)了無(wú)數(shù)寶貴的時(shí)間。
拓展閱讀：
尼爾森十大可用性原則第一條，系統(tǒng)可見性原則，保持界面的狀態(tài)可見，變化可見，內(nèi)容可見。讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答仭?
尼爾森十大可用性原則第五條，防錯(cuò)原則，比出現(xiàn)錯(cuò)誤信息才提示更好的，是通過(guò)更用心的設(shè)計(jì)來(lái)防止這類問(wèn)題發(fā)生。在用戶選擇動(dòng)作發(fā)生之前，就要防止用戶混淆或者錯(cuò)誤選擇。對(duì)產(chǎn)品進(jìn)行不同的操作、重組或特別安排，防止用戶出錯(cuò)。
2. UI中國(guó)
UI中國(guó)的文章編輯器，雖然不支持從騰訊文檔、飛書文檔直接復(fù)制過(guò)去的格式，但編輯器設(shè)計(jì)得非常清爽，給用戶的第一印象非常好。但是，就在用戶開開心心準(zhǔn)備發(fā)布一篇精心準(zhǔn)備的文章時(shí)候，噩夢(mèng)來(lái)了。
UI中國(guó)的服務(wù)器非常不穩(wěn)定，所以當(dāng)用戶上傳圖片的時(shí)候，圖片的加載進(jìn)度特別慢。其實(shí)慢一點(diǎn)也能接受，但是當(dāng)進(jìn)度條達(dá)到100%以后，圖片始終還是無(wú)法載入，有時(shí)候需要等幾秒，有時(shí)候等10幾秒最后換回來(lái)的一串錯(cuò)誤代碼——Error during file upload。這個(gè)時(shí)候用戶還有耐心，也許就是服務(wù)器偶然發(fā)生故障，于是再次重新上傳，但收到的還是同樣的結(jié)果。

為了解決這個(gè)問(wèn)題，我以為是圖片的尺寸或大小出現(xiàn)了問(wèn)題，但經(jīng)過(guò)查閱，并無(wú)任何問(wèn)題，完全是官方的尺寸規(guī)范以內(nèi)。最后通過(guò)數(shù)次的嘗試，我總算摸到一點(diǎn)點(diǎn)規(guī)律，當(dāng)一張圖片反復(fù)上傳出現(xiàn)亂碼的時(shí)候，那就先去傳其他的圖片，最后再返回上傳這張圖片，運(yùn)氣好的時(shí)候就解決了，運(yùn)氣不好的話，你就休息一下再來(lái)上傳。我只能感慨自己實(shí)在太聰明了。
從UI中國(guó)的編輯器可以看出，他們和站酷一樣，違反了尼爾森十大原則的第五條原則，防錯(cuò)原則。在用戶上傳圖片出現(xiàn)錯(cuò)誤以后，并沒(méi)有給用戶及時(shí)的中文提示（99%的設(shè)計(jì)師看不懂Error during file upload這串英文代碼，毫無(wú)意義），導(dǎo)致用戶在使用過(guò)程中產(chǎn)生焦躁、憤怒的情緒，浪費(fèi)了無(wú)數(shù)寶貴的時(shí)間。
3. 微信公眾號(hào)
微信公眾號(hào)是知識(shí)創(chuàng)作者最常用的工具了，但事實(shí)上對(duì)于新手來(lái)說(shuō)，它的設(shè)計(jì)非常不友好。我還想起當(dāng)我第一次操作公眾號(hào)發(fā)布文章的時(shí)候，當(dāng)我把內(nèi)容都編輯好以后，我找不到「發(fā)布」的按鈕。我很難理解「群發(fā)」的功能，特別是當(dāng)我在下拉列表發(fā)現(xiàn)竟然還藏著一個(gè)「發(fā)布」按鈕，我以為那就是發(fā)布。但當(dāng)我開開心心準(zhǔn)備分享我的推文時(shí)候，我在自己的公眾號(hào)卻怎么也找不到這篇文章。

最后我只能重新編輯一次，但問(wèn)題還是沒(méi)有解決。群發(fā)到底是什么意思？當(dāng)我點(diǎn)擊以后「群發(fā)」以后，又出現(xiàn)了群發(fā)、定時(shí)群發(fā)和分組群發(fā)的按鈕，我實(shí)在難以理解這幾個(gè)按鈕有什么不同，我現(xiàn)在又應(yīng)該選擇什么。我猶豫不定，害怕犯錯(cuò)，又不知道如何解決，最后只能求助朋友。

微信公眾號(hào)在「發(fā)布文章」這個(gè)環(huán)節(jié)的設(shè)計(jì)，完全違背了交互心理學(xué)上的席克定律，給用戶太多、不清晰的選擇，增加了用戶的學(xué)習(xí)和消耗成本，對(duì)于公眾號(hào)新手來(lái)說(shuō)，簡(jiǎn)直就是一次噩夢(mèng)。其次也違背了尼爾森十大原則的第十條，人性化幫助原則，沒(méi)有給新手解釋清楚「群發(fā)」和「發(fā)布」的區(qū)別，也沒(méi)有對(duì)核心功能做出對(duì)應(yīng)的文字解釋，讓用戶在操作的過(guò)程中產(chǎn)生數(shù)次焦躁，最終只能求助于他人。
拓展閱讀：
席克定律是指人的信息傳遞時(shí)間與刺激的平均信息量之間呈線性關(guān)系。簡(jiǎn)單一點(diǎn)我們可以理解為：人面臨越多的選擇，所要消耗的時(shí)間成本越高。
尼爾森十大原則第十條，人性化幫助原則，幫助性提示最好的方式是：①無(wú)需提示；②一次性提示；③常駐提示；④幫助文檔。
4. 脈脈
脈脈作為擁有1.1億用戶的職場(chǎng)社交獨(dú)角獸，為用戶提供的專欄編輯器，用戶體驗(yàn)差到讓人絕望。
脈脈使用的編輯器，屬于十年前最早一批的編輯器，不管是功能還是樣式，都非常掉身價(jià)，和他們的品牌調(diào)性不匹配。它們不支持從騰訊文檔、飛書復(fù)制過(guò)去的文章（Markdown格式），所以我每次都需要調(diào)整格式才能和源文檔格式一致，極大增加了編輯成本。這也是我最后放棄脈脈更新的原因，他們流失了一個(gè)內(nèi)容創(chuàng)作者。

在用戶上傳圖片以后，他們沒(méi)有做自適應(yīng)配置，整個(gè)編輯器無(wú)法看到圖片的完整內(nèi)容，用戶根本不知道自己上傳的圖片是否正確。更糟糕的是，當(dāng)你想等比例調(diào)整圖片的大小，圖片就完全扭曲，讓用戶進(jìn)一步崩潰。

點(diǎn)擊上傳圖片以后，還需要用戶點(diǎn)擊「上傳」，才能真正實(shí)現(xiàn)圖片上傳，增加了用戶的操作步驟。其次已上傳的圖片不能取消選中，如果想要取消當(dāng)前圖片，只能再次上傳一次圖片。
最糟糕的是，文章竟然不支持自動(dòng)或手動(dòng)保存，想象一下當(dāng)你花費(fèi)了1個(gè)小時(shí)好不容易編輯好的文章，最后因?yàn)椴恍⌒年P(guān)閉瀏覽器導(dǎo)致文章丟失了，這就是使人憤怒的設(shè)計(jì)，這幾乎把用戶使用的欲望徹底剿滅了，永遠(yuǎn)不會(huì)再回來(lái)。
脈脈的編輯器設(shè)計(jì)，嚴(yán)重違反了尼爾森十大原則中的多條原則，比如撤銷重做原則、防錯(cuò)原則、容錯(cuò)原則等，可以說(shuō)是非常糟糕的設(shè)計(jì)，這樣的編輯器幾乎可以毀滅任何一個(gè)內(nèi)容創(chuàng)作者的心情。
拓展閱讀：
尼爾森十大可用性原則第三條，撤銷重做原則，給用戶更多自主操作權(quán)，當(dāng)用戶在使用產(chǎn)品過(guò)程中產(chǎn)生錯(cuò)誤的操作時(shí)，應(yīng)提供更多的解決方案，例如撤銷或重做等功能。
尼爾森十大可用性原則第九條，容錯(cuò)原則，幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。如果無(wú)法自動(dòng)挽回，則提供詳盡的說(shuō)明文字和指導(dǎo)方向，而非代碼如404等。
5. 135編輯器
135編輯器作為國(guó)內(nèi)最大的編輯器頭部產(chǎn)品，他們幾乎把編輯器可能有的功能都設(shè)計(jì)了，比如導(dǎo)入文章、語(yǔ)音合成、模版、一鍵排版等等。但是這個(gè)功能如此豐富的編輯器給新用戶的體驗(yàn)則留下糟糕的印象。
135編輯器的功能非常強(qiáng)大，這就像一個(gè)2003年半的Word辦公軟件，一眼望去，都是數(shù)不清的功能。這樣的設(shè)計(jì)導(dǎo)致了新手不知道如何開始，他們的按鈕權(quán)重幾乎都一樣，比如新建、關(guān)閉、導(dǎo)入、微信復(fù)制等等，沒(méi)有重點(diǎn)突出核心功能。

人在操作軟件時(shí)候的記憶屬于短期記憶，一般只會(huì)保留5-7秒，這便是心理學(xué)上最出名的7±2效應(yīng)。在新手首次使用該軟件的時(shí)候，面對(duì)幾十上百個(gè)的功能，根本不知道如何下手。用戶需要學(xué)習(xí)的成本非常高，甚至當(dāng)你編輯好文章以后，你都不知道如何把文章同步到微信公眾號(hào)，因?yàn)椤肝⑿艔?fù)制」這個(gè)按鈕沒(méi)有重點(diǎn)突出，從字面意思也無(wú)法獲取真正的意思。這也違背了人類運(yùn)動(dòng)的預(yù)測(cè)模型費(fèi)茨定律，如果你想小孩子也簡(jiǎn)單輕松的能關(guān)掉房屋的開關(guān)，那么你的開關(guān)就應(yīng)該大一點(diǎn)，明顯一點(diǎn)。

其次過(guò)度商業(yè)化把這款編輯器的用戶體驗(yàn)毀滅了，幾乎80%的功能都需要加入VIP會(huì)員，然后你需要反復(fù)關(guān)閉窗口，操作路徑變得又長(zhǎng)又繁瑣。試問(wèn)，一個(gè)新用戶在使用一款陌生的編輯器的時(shí)候，需要關(guān)閉幾十次廣告，你覺得他還有耐心去使用嗎？

拓展閱讀：
7±2效應(yīng)就是指人的短期記憶容量在7±2的數(shù)量之間浮動(dòng)，也就是說(shuō)，用戶最多同時(shí)處理5～9個(gè)信息。
費(fèi)茨定律是人類運(yùn)動(dòng)的預(yù)測(cè)模型，主要用于人機(jī)交互和人體工程學(xué)。該定律預(yù)測(cè)光標(biāo)或手指從一個(gè)起始位置移動(dòng)到最終目標(biāo)所需的時(shí)間（T）由兩個(gè)參數(shù)決定，即光標(biāo)或手指到目標(biāo)的距離（D）和目標(biāo)的大?。╓）。
6. 國(guó)內(nèi)某知名CMS系統(tǒng)
這是一個(gè)國(guó)內(nèi)非常出名的開源CMS系統(tǒng)，目前已停止更新維護(hù)，不過(guò)國(guó)內(nèi)的企業(yè)網(wǎng)站估計(jì)有50%都是基于這個(gè)系統(tǒng)搭建。做過(guò)外包設(shè)計(jì)的朋友都知道，經(jīng)常會(huì)聽見客戶說(shuō)系統(tǒng)難用，那么為什么難用，我們先來(lái)看看這些商業(yè)項(xiàng)目中管理后臺(tái)的編輯器有多糟糕。
點(diǎn)擊添加內(nèi)容后，直接跳轉(zhuǎn)到一個(gè)新窗口，這個(gè)新窗口還把當(dāng)前屏幕都遮住了，這不得不讓用戶需要把這個(gè)窗口縮小才能復(fù)制內(nèi)容。這個(gè)設(shè)計(jì)最讓人頭疼的是當(dāng)你的桌面應(yīng)用打開過(guò)多時(shí)候，你根本不知道這個(gè)內(nèi)容窗口在哪里，讓人感到無(wú)比焦躁。

編輯器的的樣式、功能就幾乎可以忽略不計(jì)了，因?yàn)檫@畢竟是一款開源的系統(tǒng)，而且官方都已經(jīng)停止更新了。如果你從騰訊、飛書文檔直接復(fù)制內(nèi)容進(jìn)去，文本格式就是錯(cuò)亂的，這和脈脈一樣，這幾乎需要在編輯器里重新調(diào)整格式才行，這嚴(yán)重提升了用戶的使用成本。這對(duì)于很多兼職為公司負(fù)責(zé)更新網(wǎng)站的用戶來(lái)說(shuō)，簡(jiǎn)直就是一場(chǎng)災(zāi)難。過(guò)去有太多次用戶對(duì)編輯器的問(wèn)題提出了很多次，包括不懂使用、增加功能等，總之，這些開源系統(tǒng)的編輯器，對(duì)很多用戶來(lái)說(shuō)就是一場(chǎng)噩夢(mèng)。

四、思考總結(jié)

通過(guò)數(shù)款大廠產(chǎn)品的體驗(yàn)總結(jié)，我們發(fā)現(xiàn)，對(duì)于文章編輯器這個(gè)非?；A(chǔ)但又必不可少的功能，其實(shí)帶給用戶的體驗(yàn)非常糟糕。類似的糟糕體驗(yàn)，其實(shí)還數(shù)不勝數(shù)，我們這一期就不再展開。最后我們對(duì)此次的體驗(yàn)陷阱做一個(gè)簡(jiǎn)單的總結(jié)。
我認(rèn)為，造成如此糟糕的編輯器體驗(yàn)的原因有兩個(gè)，第一個(gè)，大部分的產(chǎn)品團(tuán)隊(duì)完全不重視編輯器這個(gè)功能。在很多產(chǎn)品、設(shè)計(jì)，包含程序工程師看來(lái)，這就是一個(gè)非常基礎(chǔ)簡(jiǎn)單的功能，所以他們對(duì)編輯器非常輕視，也許開發(fā)出來(lái)的產(chǎn)品團(tuán)隊(duì)自己都沒(méi)有親身測(cè)試發(fā)布過(guò)，才會(huì)導(dǎo)致有如此多明顯、讓人憤怒的BUG。然而他們根本不知道這樣的設(shè)計(jì)對(duì)用戶的實(shí)際體驗(yàn)影響有多么糟糕。
第二個(gè)，產(chǎn)品團(tuán)隊(duì)完全沒(méi)有遵循最基礎(chǔ)的設(shè)計(jì)原則意識(shí)。國(guó)內(nèi)大部分產(chǎn)品設(shè)計(jì)師對(duì)設(shè)計(jì)基礎(chǔ)原則、理論都非常忽視，甚至覺得這些純理論的指導(dǎo)原則毫無(wú)意義。這也是設(shè)計(jì)這門學(xué)科在國(guó)內(nèi)發(fā)展的真實(shí)寫照，但我們從這些體驗(yàn)陷阱可以看出，一個(gè)沒(méi)有遵循設(shè)計(jì)基礎(chǔ)原則的產(chǎn)品，體驗(yàn)下來(lái)，是多么的糟糕，多么的讓人絕望。

作者：設(shè)計(jì)大偵探
 來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司