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