木柄很早就想寫一篇以用戶體驗(yàn)要素為核心的文章，只是一直沒(méi)有找到合適的切入口。直到有一天，用慣金山詞霸的我心血來(lái)潮去研究了有道詞典，關(guān)于用戶體驗(yàn)寫作的構(gòu)想就一下子清晰了。在此文中，木柄以android版的金山詞霸app與有道詞典app作為分析對(duì)象，主要研究它們的單詞本功能，從小處切入，闡釋用戶體驗(yàn)思想的方方面面。
木柄首先明確一下單詞本的功能與組織構(gòu)架。單詞本是英語(yǔ)詞典應(yīng)用的重要組成部分，幫助用戶把查詢過(guò)的重點(diǎn)詞匯記錄整理起來(lái)，以便用戶后續(xù)查閱、學(xué)習(xí)、記憶。從某種意義上來(lái)說(shuō)，單詞本之于詞典應(yīng)用相當(dāng)于收藏夾之于提供內(nèi)容整理功能的普通應(yīng)用。一個(gè)單詞本的架構(gòu)組織是這樣的：
第一，單詞本列表頁(yè)。用于列出所有的單詞本。
第二，單詞本單詞列表頁(yè)。用于列出目標(biāo)單詞本中的具體單詞。如下圖：
有道詞典單詞列表頁(yè)
金山詞霸單詞列表頁(yè)
第三，單詞卡片（概覽）頁(yè)。用于呈現(xiàn)一個(gè)單詞的核心信息，僅包含單詞、音標(biāo)、中文含義這幾個(gè)方面，方面用戶查看。如下圖：
有道詞典單詞卡片頁(yè)
金山詞霸單詞卡片頁(yè)
第四，單詞詳情頁(yè)。用于呈現(xiàn)詳細(xì)的單詞信息。如下圖：
有道詞典單詞詳情頁(yè)
金山詞霸單詞詳情頁(yè)
好了說(shuō)明了這些基礎(chǔ)概念，下面木柄開(kāi)始正式分析。
1 為什么要有單詞卡片（概覽）頁(yè)
不同于pc端用戶會(huì)正兒八經(jīng)的坐在電腦桌前注意力較為集中的使用軟件，移動(dòng)端的特點(diǎn)是環(huán)境復(fù)雜化與時(shí)間碎片化。這些特點(diǎn)在單詞本應(yīng)用上會(huì)體現(xiàn)地更加極致——用戶隨時(shí)隨地都有可能翻開(kāi)單詞本記背一下單詞。因此不管是有道詞典還是金山詞霸都沒(méi)有直接展示“單詞詳情頁(yè)”，而是穿插了一個(gè)類卡片形式的單詞卡片（概覽）頁(yè)，它僅僅展示一個(gè)單詞最重要的信息：拼寫、音標(biāo)與中文含義，最大程度上減輕了用戶查閱單詞本的負(fù)擔(dān)，使產(chǎn)品能夠更好的應(yīng)對(duì)復(fù)雜的用戶使用場(chǎng)景。
本節(jié)要素：
“人們只用一只手操作你的應(yīng)用，只用一只眼睛看屏幕，只用一部分注意力在你精心雕琢的界面上，這和作為設(shè)計(jì)師的你所看到的應(yīng)用可能完全不同?！?
——《觸動(dòng)人心》
2 單詞切換——小問(wèn)題，大思考
請(qǐng)大家注意單詞卡片頁(yè)，有道詞典通過(guò)底欄“上一個(gè)”、“下一個(gè)”按鈕來(lái)實(shí)現(xiàn)單詞切換操作，木柄認(rèn)為這種設(shè)計(jì)方法是失敗的。右上角和右下角是右手操作的用戶最難點(diǎn)擊的區(qū)域，產(chǎn)品設(shè)計(jì)者應(yīng)該把不常用的操作，或者誤點(diǎn)會(huì)造成嚴(yán)重后果的操作（比如不可逆的刪除操作）放在那些地方。而對(duì)于單詞卡片頁(yè)而言，用戶切換到“下一個(gè)”單詞是最常用到的操作，把它放置在用戶最難操作到的右下角，顯然這是一種“反人類”的設(shè)計(jì)。
那么這個(gè)頁(yè)面如何設(shè)計(jì)才是合理的呢？答案是，金山詞霸單詞卡片頁(yè)的做法就值得稱道。從頁(yè)面上看金山詞霸甚至沒(méi)有切換單詞的按鈕，僅僅在主卡片的左右兩側(cè)“故意”露出前一張卡片的右邊緣與后一張卡片的左邊緣，這就是手勢(shì)操作的一種暗示：引導(dǎo)用戶左右滑動(dòng)，而這么做就能實(shí)現(xiàn)卡片的切換。金山詞霸利用兩個(gè)邊緣的“廢料”暗示用戶“左右滑動(dòng)卡片”來(lái)實(shí)現(xiàn)單詞切換的方式完勝有道詞典的“按鈕”切換方式：一方面降低了用戶的操作成本；另一方面利用了“廢料”部分，把“按鈕”的位置節(jié)省下來(lái)了。
當(dāng)然，金山詞霸仍然有值得改進(jìn)的空間，從單詞本單詞列表頁(yè)進(jìn)入具體單詞的卡片頁(yè)已經(jīng)有一個(gè)存在的隱喻：?jiǎn)卧~卡片頁(yè)從下往上覆蓋了單詞列表頁(yè)。那么，相對(duì)地從上往下滑動(dòng)單詞卡片頁(yè)返回先前的單詞列表頁(yè)在邏輯角度上說(shuō)是非常順暢的，但是金山詞霸卻沒(méi)有定義這個(gè)“向下滑動(dòng)返回”的手勢(shì)，這一點(diǎn)是很遺憾的。
本節(jié)要素：
1、不要把常用操作放置在拇指熱區(qū)外。
2、“邊角料”也有大用處——“暗示”用戶。暗示用戶使用手勢(shì)操作，或者強(qiáng)化某些設(shè)計(jì)上的“隱喻”。
3、要利用“覆蓋”、“切換”、“平移”等隱喻為用戶設(shè)置貼心的手勢(shì)操作。
3 真正走進(jìn)用戶背單詞的場(chǎng)景
3.1用戶檢測(cè)自己?jiǎn)卧~掌握狀況場(chǎng)景
用戶會(huì)有檢測(cè)自己?jiǎn)卧~掌握狀況的需求，單詞本應(yīng)用需要在這一點(diǎn)上滿足用戶。金山詞霸的單詞卡片頁(yè)右下方有一個(gè)眼睛狀的按鈕，它可以用來(lái)設(shè)置是否折疊中文釋義，而我們可以觀察到有道詞典的單詞卡片頁(yè)并沒(méi)有相關(guān)的操作。事實(shí)上，有道詞典是有這個(gè)設(shè)置項(xiàng)的，只是被放置在了單詞本的單詞列表頁(yè)，也就是單詞列表頁(yè)的這個(gè)折疊設(shè)置會(huì)在單詞列表頁(yè)與單詞卡片頁(yè)都起作用，下面木柄談?wù)勥@么做的壞處：
首先，在單詞卡片頁(yè)測(cè)試單詞掌握狀況的場(chǎng)景下，用戶才會(huì)有折疊中文的需求，而在這個(gè)場(chǎng)景下的頁(yè)面中，用戶找不到相對(duì)應(yīng)的操作。“當(dāng)用戶意念一動(dòng)的時(shí)候，我們已經(jīng)把他想要的操作放在了手邊”，這是產(chǎn)品用戶體驗(yàn)需要追求的原則，而有道詞典的做法顯然違背了這個(gè)原則。當(dāng)然這個(gè)原則還能衍生出另一個(gè)相對(duì)的原則：“當(dāng)用戶沒(méi)有需要的時(shí)候，這些選項(xiàng)做好隱藏起來(lái)或者蜷縮在角落里，不去對(duì)用戶產(chǎn)生噪聲”。
其次，即使用戶在單詞列表頁(yè)發(fā)現(xiàn)了折疊中文的功能，他們也不可能第一時(shí)間理解到這個(gè)設(shè)置會(huì)在單詞卡片頁(yè)一樣生效。也就是我們盡量要把頁(yè)面用松耦合的方式組織起來(lái)，每個(gè)頁(yè)面都對(duì)自己負(fù)責(zé)，沒(méi)有那些拉扯不清的關(guān)系，這樣即方便了用戶，也方便了設(shè)計(jì)者自己。
最后，即使用戶折騰了一番，理解了有道詞典的設(shè)置模式，這依然還是一個(gè)有問(wèn)題的設(shè)計(jì)。設(shè)想一下這樣的用戶場(chǎng)景：用戶可能會(huì)用不同的模式來(lái)瀏覽單詞卡片頁(yè)，比如第一遍瀏覽顯示中文，第二遍瀏覽折疊中文來(lái)測(cè)試一下自己的掌握程度，第三遍瀏覽再顯示中文做一下復(fù)習(xí)。如果在這個(gè)場(chǎng)景下，用戶使用的是有道詞典，那么他要不斷切回單詞列表頁(yè)設(shè)置中文折疊/顯示，再返回單詞卡片頁(yè)瀏覽，顯然這種來(lái)回切換極大的影響了用戶體驗(yàn)。
3.2睡覺(jué)前背記單詞場(chǎng)景
睡覺(jué)前背一背單詞，這是“單詞本”非常常見(jiàn)的一種用戶場(chǎng)景。金山詞霸貼心的為用戶做了基于這個(gè)場(chǎng)景的設(shè)計(jì)，在單詞卡片頁(yè)的右上角有白天/夜間模式的切換按鈕，其圖標(biāo)為太陽(yáng)/月亮，其隱喻非常容易被用戶理解。而反觀有道詞典，并沒(méi)有對(duì)這個(gè)普遍的用戶場(chǎng)景做出相對(duì)應(yīng)設(shè)計(jì)，這也是對(duì)典型用戶場(chǎng)景理解不足的表現(xiàn)，用戶就會(huì)感覺(jué)產(chǎn)品使用起來(lái)沒(méi)有那么“貼心”。
3.3?小學(xué)語(yǔ)文老師的生詞卡片與單詞卡片內(nèi)容布局
類比于小學(xué)語(yǔ)文老師手中字體又大又粗的生詞卡片，事實(shí)上單詞卡片也需要這樣的視覺(jué)效果，因?yàn)榇执?、?jiǎn)約的卡片設(shè)計(jì)能夠方便用戶的瀏覽與記憶。在這一點(diǎn)上，金山詞霸比有道詞典又要做得好，一方面金山詞霸卡片頁(yè)的字體要比有道詞典的大，行間距也要比有道詞典的寬；另一方面金山詞霸把單詞居中展示，強(qiáng)調(diào)了單詞本身，方便用戶記憶。不過(guò)，木柄對(duì)金山詞霸的單詞卡片也不滿意，盡管它比有道詞典要好一點(diǎn)，木柄認(rèn)為字體與行距可以繼續(xù)擴(kuò)大，更大的字體與行距不但本身能夠方便用戶的記憶，而且只能給出更加少的內(nèi)容（把冗雜的東西交給單詞詳情頁(yè)），從而把用戶瀏覽記憶負(fù)擔(dān)降到最低。總之，“大而簡(jiǎn)”這是理想的單詞卡片設(shè)計(jì)應(yīng)該不斷追求的境界，它一方面給用戶提供了更好的體驗(yàn)效果，另一方面也提升了用戶背記單詞的實(shí)際效率。
本節(jié)要素：
1、設(shè)計(jì)者要深度體會(huì)、感知典型用戶場(chǎng)景（比如本例中“用戶檢測(cè)自己?jiǎn)卧~掌握狀況場(chǎng)景”、“睡覺(jué)前背記單詞場(chǎng)景”），只有這樣才能做出贏得用戶口碑的產(chǎn)品。
2、充分聯(lián)想現(xiàn)實(shí)場(chǎng)景，模擬實(shí)物為app設(shè)計(jì)提供靈感源。比如設(shè)計(jì)單詞卡片的時(shí)候不妨學(xué)習(xí)、借鑒一下小學(xué)語(yǔ)文老師的生詞卡片。
4 單詞詳情頁(yè)——內(nèi)容組織的學(xué)問(wèn)
木柄計(jì)算了一下，有道詞典單詞詳情頁(yè)擁有詞典、釋義、相關(guān)詞匯、例句等類型的小模塊達(dá)12個(gè)之多。而這么多的小模塊居然僅僅通過(guò)簡(jiǎn)單的羅列進(jìn)行呈現(xiàn)，用戶的使用負(fù)擔(dān)可見(jiàn)一斑?！逗?jiǎn)約至上》告訴我們，如果想要有更好的用戶體驗(yàn)，產(chǎn)品一定要滿足簡(jiǎn)約四法則（刪除、組織、隱藏、轉(zhuǎn)移），那么怎么使用簡(jiǎn)約法則改良有道詞典的單詞詳情頁(yè)呢？木柄覺(jué)得，金山詞霸的單詞詳情頁(yè)設(shè)計(jì)就堪稱典范。
第一，刪除不必要的功能。有道詞典單詞詳情頁(yè)羅列的小模塊多達(dá)12個(gè)，單單與例句相關(guān)的就有三個(gè)：雙語(yǔ)例句、權(quán)威例句、原聲例句。其實(shí)，用戶根本不關(guān)心你是什么例句，他只是想在看了單詞釋義后讀上幾個(gè)例句，需要這么“為難”用戶嗎？金山詞霸的做法就很好，它把例句簡(jiǎn)化成一個(gè)獨(dú)立的小模塊，然后在“例句模塊”中簡(jiǎn)單羅列幾個(gè)典型例句，這樣就完成設(shè)計(jì)目標(biāo)了。
第二，金山詞霸單詞詳情頁(yè)根據(jù)普遍性用戶需求對(duì)所需呈現(xiàn)的內(nèi)容進(jìn)行了組織。不同于有道詞典一股腦的簡(jiǎn)單羅列，金山詞霸將內(nèi)容組織成三個(gè)小類：釋義、例句、講解。一般用戶查詞主要是先查看一下釋義，再讀幾個(gè)例句，內(nèi)容歸類方便了用戶的使用，從而提升用戶體驗(yàn)。
第三，金山詞霸單詞詳情頁(yè)使用了tab，一次只能顯示釋義、例句、講解三個(gè)模塊中的其中一個(gè)，對(duì)其他兩個(gè)模塊的內(nèi)容進(jìn)行了隱藏。這是符合用戶體驗(yàn)要求的，“一個(gè)頁(yè)面只做一件事情”，最大的獲取用戶注意力，同時(shí)把使用負(fù)擔(dān)降到最低。
本節(jié)要素：
對(duì)于內(nèi)容復(fù)雜的功能頁(yè)要使用“簡(jiǎn)約至上”四法則進(jìn)行設(shè)計(jì)：
第一，刪除。刪除用戶不關(guān)心的，不重要的功能，以減輕用戶使用負(fù)擔(dān)，突出主要功能。
第二，組織。把元素按照一定的維度組織起來(lái)，分門別類，方便用戶使用。
第三，隱藏。一個(gè)頁(yè)面只有一個(gè)核心，一個(gè)頁(yè)面只做一件事情，把其他分散用戶注意力，導(dǎo)致用戶困惑的內(nèi)容隱藏起來(lái)。
第四，轉(zhuǎn)移。這一部分在本節(jié)探討中沒(méi)有具體體現(xiàn)，在3.3這一節(jié)提出的“把冗雜的東西轉(zhuǎn)移給單詞詳情頁(yè)”，從而簡(jiǎn)化單詞卡片的設(shè)計(jì)，算是“轉(zhuǎn)移”法則的典型。
5 尾聲：
年前木柄在鈦媒體發(fā)表的《APP建?！惶酌枋鯽pp的方法論》中稱要寫“一系列產(chǎn)品方面的純干貨”，那么立足在產(chǎn)品體驗(yàn)上的本文算是這一系列的一篇新作，之后木柄還會(huì)繼續(xù)寫作這一系列的文章。
【木柄的公共號(hào)mubing01，個(gè)人博客www.mubing01.cn期待您的關(guān)注。木柄正處于自由職業(yè)狀態(tài)，如果您能提供靠譜的產(chǎn)品方面的工作也請(qǐng)聯(lián)系我，謝謝。】
技術(shù)控是百度新聞與鈦媒體合作，專門為技術(shù)愛(ài)好者打造的欄目
快報(bào)
根據(jù)《網(wǎng)絡(luò)安全法》實(shí)名制要求，請(qǐng)綁定手機(jī)號(hào)后發(fā)表評(píng)論