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

一、什么是文章編輯器？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、思考總結(jié)

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司