編輯器是內(nèi)容類(lèi)社區(qū)產(chǎn)品必不可少的組件。對(duì)于編輯器的選型，很多人認(rèn)為直接找個(gè)開(kāi)源的就行了。其實(shí)事情并沒(méi)有那么簡(jiǎn)單。

我們的產(chǎn)品是一個(gè)面向研發(fā)技術(shù)人員的內(nèi)容類(lèi)社區(qū)。內(nèi)容類(lèi)社區(qū)有兩類(lèi)用戶(hù)：內(nèi)容生產(chǎn)者、內(nèi)容消費(fèi)者。編輯器是產(chǎn)品和內(nèi)容生產(chǎn)者之間的關(guān)鍵觸點(diǎn)，其重要性不言而喻。在編輯器選型時(shí)，我們發(fā)現(xiàn)用戶(hù)習(xí)慣于使用office系列軟件寫(xiě)文檔。于是選擇了一款風(fēng)格接近于office軟件的在線富文本開(kāi)源編輯器，如下圖：

用戶(hù)的抱怨

產(chǎn)品不斷發(fā)展，用戶(hù)規(guī)模逐漸變大，用戶(hù)對(duì)編輯器的抱怨也擠滿(mǎn)了產(chǎn)品的意見(jiàn)反饋區(qū)：

? ? “按鈕密密麻麻的，找個(gè)按鈕太難了！”

“默認(rèn)字體能不能修改下啊！”

“網(wǎng)上那么多編輯器，不能直接抄一個(gè)嗎？”

“編輯器一點(diǎn)都不酷，連markdown都不支持?！?/p>

“表格真心難用啊！邊線拖不動(dòng)，從外面拷貝過(guò)來(lái)的表格格式全亂了。鬧心！”

……

考慮到社區(qū)中技術(shù)大牛們的影響力，產(chǎn)品決定優(yōu)先解決他們關(guān)心的問(wèn)題，比如引入markdown。

我們?cè)诰庉嬈魃显黾恿薽arkdown的選項(xiàng)，讓用戶(hù)可以在原先的富文本編輯器和markdown編輯器之間切換。但是根據(jù)用戶(hù)使用數(shù)據(jù)分析，每100篇文章中不到1篇才使用了markdown。普通技術(shù)人員的抱怨聲依舊……

思考和抉擇

真的需要這么多按鈕嗎？

必須得承認(rèn)，在產(chǎn)品初期，功能強(qiáng)大、按鈕眾多的編輯器，吸引了很多新用戶(hù)。但是在產(chǎn)品發(fā)展過(guò)程中，用戶(hù)開(kāi)始關(guān)注常用按鈕的使用體驗(yàn)。

人在處理信息、記憶細(xì)節(jié)方面的能力是有限的，過(guò)多的選擇會(huì)讓用戶(hù)無(wú)所適從。想想看吧，密密麻麻的幾排按鈕擺在你的眼前。

席克定律指出，如果用戶(hù)面臨的選擇越多，那么做出決定的時(shí)間也會(huì)相應(yīng)增加。

從一段時(shí)間的用戶(hù)使用數(shù)據(jù)看，大部分的按鈕其實(shí)極少使用。如下圖：

寫(xiě)文章一定要不停點(diǎn)擊按鈕嗎？

從用戶(hù)使用數(shù)據(jù)看，大部分用戶(hù)都喜歡把編輯器的默認(rèn)字體A調(diào)整為字體B。如果把默認(rèn)的字體調(diào)整字體B，那么用戶(hù)就會(huì)少一次點(diǎn)擊操作。

那么，默認(rèn)的字體大小，還有默認(rèn)的行距，等等，是不是也可以改變成大多數(shù)人喜歡的默認(rèn)值呢。

直接抄一個(gè)網(wǎng)上的極簡(jiǎn)版編輯器不行嗎？

直接抄別人的是不可行的。

每個(gè)產(chǎn)品面對(duì)的用戶(hù)不同，其使用訴求、場(chǎng)景也是不一樣的。即使極簡(jiǎn)版的編輯器，背后也有其產(chǎn)品理念、典型用戶(hù)場(chǎng)景。

能同時(shí)滿(mǎn)足所有人的編輯需求嗎？

技術(shù)大牛想要很酷的編輯器，他們覺(jué)得富文本編輯器太low，需要的是markdown。他們是少數(shù)派，但往往都是意見(jiàn)領(lǐng)袖，你很難不重視他們的意見(jiàn)。他們很識(shí)貨、也很懂你，和他們溝通產(chǎn)品毫無(wú)障礙，這確實(shí)是個(gè)誘惑。但是他們想要的編輯功能往往會(huì)讓普通的技術(shù)人員產(chǎn)生迷惑。

對(duì)數(shù)量龐大的普通技術(shù)人員來(lái)說(shuō)，他們就是想寫(xiě)一篇文章，僅此而已。他們喜歡簡(jiǎn)單、快速寫(xiě)文章的體驗(yàn)。編輯器嘛，能用就行。

編輯效果能像office一樣好嗎？

要達(dá)到office編輯體驗(yàn)要花費(fèi)巨大的成本。我們沒(méi)那么多人，也沒(méi)那么多時(shí)間。

還是要在用戶(hù)需求和成本之間權(quán)衡，量力而行。

抉擇：我們要為大多數(shù)的普通技術(shù)人員做一款簡(jiǎn)單易用的在線編輯器。

改進(jìn)之路

我們對(duì)編輯器進(jìn)行了幾大類(lèi)改進(jìn)：修改按鈕的默認(rèn)值、刪除基本不用的按鈕、隱藏不常用的按鈕、合并功能相同的按鈕、格式優(yōu)化。

其中，格式優(yōu)化包括內(nèi)部自建表格的格式修改，還有從外部拷貝文字、表格等的格式適配。深深地體會(huì)到了“把復(fù)雜留給自己，把簡(jiǎn)單送給用戶(hù)”，其過(guò)程太過(guò)累心，本文不再介紹了。下面簡(jiǎn)單介紹下前四類(lèi)改進(jìn)，其中，用到了《簡(jiǎn)約至上》中的不少方法。

修改默認(rèn)值

目標(biāo)：即使用戶(hù)不點(diǎn)擊按鈕，也能獲得良好的編輯格式體驗(yàn)。

主要把默認(rèn)字體、默認(rèn)字體大小、行距、段前距、段后距、字間距等按鈕的默認(rèn)值按照大多數(shù)人喜歡的格式進(jìn)行了調(diào)整。

刪除

目標(biāo)：聚焦用戶(hù)的核心編輯需求，關(guān)注常用按鈕的功能體驗(yàn)，干掉一些從未使用、極少使用的按鈕。

套用《點(diǎn)石成金》中的第三原則：去掉一半的按鈕，然后把剩下的按鈕再去掉一半。

即使某個(gè)按鈕極少使用，但是“敝帚自珍”，刪除也需要下很大的決心。

經(jīng)過(guò)艱難的權(quán)衡，刪除了視頻、格式刷、清除格式、模板等按鈕。

隱藏

目標(biāo)：普通技術(shù)人員常用的按鈕可見(jiàn)，隱藏那些不常用、但是又必不可少的按鈕，隱藏技術(shù)大牛、專(zhuān)家級(jí)用戶(hù)使用的按鈕。

隱藏的好處很明顯，用戶(hù)不會(huì)因?yàn)椴怀Ｓ玫谋姸喟粹o而分散注意力。

選擇哪一種隱藏呢？

第一種，收縮展開(kāi)型。這種方式的弊端比較明顯，展開(kāi)后，按鈕的位置發(fā)生了變化，讓用戶(hù)抓狂。

第二種，下拉菜單型。不常用的按鈕隱藏在下拉菜單中，鼠標(biāo)點(diǎn)擊后出現(xiàn)。

第三種，實(shí)時(shí)出現(xiàn)型。這種方式下，隱藏的按鈕在用戶(hù)需要的時(shí)候出現(xiàn)。比如選中圖片后，出現(xiàn)圖片調(diào)整懸浮按鈕，可以修改圖片大小。選中表格后，才出現(xiàn)表格的各種操作按鈕。

產(chǎn)品選擇了“第二種 + 第三種”的隱藏方式。

合并功能相同的按鈕

目標(biāo)：功能相同的按鈕盡量合并。

原來(lái)文字、表格、圖片都有自己的對(duì)齊按鈕（左對(duì)齊、右對(duì)齊、居中對(duì)齊），共有9個(gè)按鈕，其實(shí)不需要這么多。我們把對(duì)齊按鈕減少到了3個(gè)，即文字、表格、圖片的對(duì)齊都用一套按鈕。

最終改進(jìn)后的編輯器如下圖：

以終為始

新的編輯器實(shí)際效果如何，還需要通過(guò)埋點(diǎn)數(shù)據(jù)和用戶(hù)調(diào)研來(lái)驗(yàn)證。

花費(fèi)不小代價(jià)改進(jìn)的編輯器，可以推廣到其它產(chǎn)品線，使其價(jià)值最大化。

web端編輯器修改告一段落，還有移動(dòng)端呢。

不得不說(shuō)，做一款簡(jiǎn)單易用的編輯器，真的不容易！

本文由 @?pahelia 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議