木柄很早就想寫一篇以用戶體驗要素為核心的文章，只是一直沒有找到合適的切入口。直到有一天，用慣金山詞霸的我心血來潮去研究了有道詞典，關于用戶體驗寫作的構想就一下子清晰了。

在此文中，木柄以 Android 版的金山詞霸 App 與有道詞典 App 作為分析對象，主要研究它們的單詞本功能，從小處切入，闡釋用戶體驗思想的方方面面。 木柄首先明確一下單詞本的功能與組織構架。單詞本是英語詞典應用的重要組成部分，幫助用戶把查詢過的重點詞匯記錄整理起來，以便用戶后續查閱、學習、記憶。從某種意義上來說，單詞本之于詞典應用相當于收藏夾之于提供內容整理功能的普通應用。

一個單詞本的架構組織是這樣的： 第一，單詞本列表頁。用于列出所有的單詞本。 第二，單詞本單詞列表頁。用于列出目標單詞本中的具體單詞。如下圖：

【有道詞典單詞列表頁】 ? ? ? ? ? ?【金山詞霸單詞列表頁】

第三，單詞卡片（概覽）頁。用于呈現一個單詞的核心信息，僅包含單詞、音標、中文含義這幾個方面，方面用戶查看。如下圖：

【有道詞典單詞卡片頁】 ? ? ? ? ? ?【金山詞霸單詞卡片頁】

第四，單詞詳情頁。用于呈現詳細的單詞信息。如下圖：

【有道詞典單詞詳情頁】 ? ? ? ? ? ?【金山詞霸單詞詳情頁】

好了說明了這些基礎概念，下面木柄開始正式分析。

1 為什么要有單詞卡片（概覽）頁

不同于pc端用戶會正兒八經的坐在電腦桌前注意力較為集中的使用軟件，移動端的特點是環境復雜化與時間碎片化。這些特點在單詞本應用上 會體現地更加極致——用戶隨時隨地都有可能翻開單詞本記背一下單詞。因此不管是有道詞典還是金山詞霸都沒有直接展示“單詞詳情頁”，而是穿插了一個類卡片形式的單詞卡片（概覽）頁，它僅僅展示一個單詞最重要的信息：拼寫、音標與中文含義，最大程度上減輕了用戶查閱單詞本的負擔，使產品能夠更好的應對復雜的用戶使用場景。

本節要素： “人們只用一只手操作你的應用，只用一只眼睛看屏幕，只用一部分注意力在你精心雕琢的界面上，這和作為設計師的你所看到的應用可能完全不同?！?——《觸動人心》

2 單詞切換——小問題，大思考

請大家注意單詞卡片頁，有道詞典通過底欄“上一個”、“下一個”按鈕來實現單詞切換操作，木柄認為這種設計方法是失敗的。右上角和右下角是右手操作的用戶最難點擊的區域，產品設計者應該把不常用的操作，或者誤點會造成嚴重后果的操作（比如不可逆的刪除操作）放在那些地方。而對于單詞卡片頁而言，用戶切換到“下一個”單詞是最常用到的操作，把它放置在用戶最難操作到的右下角，顯然這是一種“反人類”的設計。 那么這個頁面如何設計才是合理的呢？答案是，金山詞霸單詞卡片頁的做法就值得稱道。

從頁面上看金山詞霸甚至沒有切換單詞的按鈕，僅僅在主卡片的左右兩側“故意”露出前一張卡片的右邊緣與后一張卡片的左邊緣，這就是手勢操作的一種暗示：引導用戶左右滑動，而這么做就能實現卡片的切換。金山詞霸利用兩個邊緣的“廢料”暗示用戶“左右滑動卡片”來實現單詞切換的方式完勝有道詞典的“按鈕”切換方式：一方面降低了用戶的操作成本；另一方面利用了“廢料”部分，把“按鈕”的位置節省下來了。 當然，金山詞霸仍然有值得改進的空間，從單詞本單詞列表頁進入具體單詞的卡片頁已經有一個存在的隱喻：單詞卡片頁從下往上覆蓋了單詞列表頁。那么，相對地從上往下滑動單詞卡片頁返回先前的單詞列表頁在邏輯角度上說是非常順暢的，但是金山詞霸卻沒有定義這個“向下滑動返回”的手勢，這一點是很遺憾的。

本節要素： 1、不要把常用操作放置在拇指熱區外。 2、“邊角料”也有大用處——“暗示”用戶。暗示用戶使用手勢操作，或者強化某些設計上的“隱喻”。 3、要利用“覆蓋”、“切換”、“平移”等隱喻為用戶設置貼心的手勢操作。

3 真正走進用戶背單詞的場景

3.1用戶檢測自己單詞掌握狀況場景

用戶會有檢測自己單詞掌握狀況的需求，單詞本應用需要在這一點上滿足用戶。金山詞霸的單詞卡片頁右下方有一個眼睛狀的按鈕，它可以用來設置是否折疊中文釋義，而我們可以觀察到有道詞典的單詞卡片頁并沒有相關的操作。事實上，有道詞典是有這個設置項的，只是被放置在了單詞本的單詞列表頁，也就是單詞列表頁的這個折疊設置會在單詞列表頁與單詞卡片頁都起作用，下面木柄談談這么做的壞處。

首先，在單詞卡片頁測試單詞掌握狀況的場景下，用戶才會有折疊中文的需求，而在這個場景下的頁面中，用戶找不到相對應的操作?！爱斢脩粢饽钜粍拥臅r候，我們已經把他想要的操作放在了手邊”，這是產品用戶體驗需要追求的原則，而有道詞典的做法顯然違背了這個原則。當然這個原則還能衍生出另一個相對的原則：“當用戶沒有需要的時候，這些選項做好隱藏起來或者蜷縮在角落里，不去對用戶產生噪聲”。

其次，即使用戶在單詞列表頁發現了折疊中文的功能，他們也不可能第一時間理解到這個設置會在單詞卡片頁一樣生效。也就是我們盡量要把頁面用松耦合的方式組織起來，每個頁面都對自己負責，沒有那些拉扯不清的關系，這樣即方便了用戶，也方便了設計者自己。

最后，即使用戶折騰了一番，理解了有道詞典的設置模式，這依然還是一個有問題的設計。設想一下這樣的用戶場景：用戶可能會用不同的模式來瀏覽單詞卡片頁，比如第一遍瀏覽顯示中文，第二遍瀏覽折疊中文來測試一下自己的掌握程度，第三遍瀏覽再顯示中文做一下復習。如果在這個場景下，用戶使用的是有道詞典，那么他要不斷切回單詞列表頁設置中文折疊/顯示，再返回單詞卡片頁瀏覽，顯然這種來回切換極大的影響了用戶體驗。

3.2睡覺前背記單詞場景

睡覺前背一背單詞，這是“單詞本”非常常見的一種用戶場景。金山詞霸貼心的為用戶做了基于這個場景的設計，在單詞卡片頁的右上角有白天/夜間模式的切換按鈕，其圖標為太陽/月亮，其隱喻非常容易被用戶理解。而反觀有道詞典，并沒有對這個普遍的用戶場景做出相對應設計，這也是對典型用戶場景理解不足的表現，用戶就會感覺產品使用起來沒有那么“貼心”。

3.3 小學語文老師的生詞卡片與單詞卡片內容布局

類比于小學語文老師手中字體又大又粗的生詞卡片，事實上單詞卡片也需要這樣的視覺效果，因為粗大、簡約的卡片設計能夠方便用戶的瀏覽與記憶。在這一點上，金山詞霸比有道詞典又要做得好，一方面金山詞霸卡片頁的字體要比有道詞典的大，行間距也要比有道詞典的寬；另一方面金山詞霸把單詞居中展示，強調了單詞本身，方便用戶記憶。不過，木柄對金山詞霸的單詞卡片也不滿意，盡管它比有道詞典要好一點，木柄認為字體與行距可以繼續擴大，更大的字體與行距不但本身能夠方便用戶的記憶，而且只能給出更加少的內容（把冗雜的東西交給單詞詳情頁），從而把用戶瀏覽記憶負擔降到最低?？傊?，“大而簡”這是理想的單詞卡片設計應該不斷追求的境界，它一方面給用戶提供了更好的體驗效果，另一方面也提升了用戶背記單詞的實際效率。

本節要素： 1、設計者要深度體會、感知典型用戶場景（比如本例中“用戶檢測自己單詞掌握狀況場景”、“睡覺前背記單詞場景”），只有這樣才能做出贏得用戶口碑的產 品。 2、充分聯想現實場景，模擬實物為app設計提供靈感源。比如設計單詞卡片的時候不妨學習、借鑒一下小學語文老師的生詞卡片。

4 單詞詳情頁——內容組織的學問

木柄計算了一下，有道詞典單詞詳情頁擁有詞典、釋義、相關詞匯、例句等類型的小模塊達12個之多。而這么多的小模塊居然僅僅通過簡單的羅列進行呈現，用戶的使用負擔可見一斑?！逗喖s至上》告訴我們，如果想要有更好的用戶體驗，產品一定要滿足簡約四法則（刪除、組織、隱藏、轉移），那么怎么使用簡約法則改良有道詞典的單詞詳情頁呢？木柄覺得，金山詞霸的單詞詳情頁設計就堪稱典范。 第一，刪除不必要的功能。有道詞典單詞詳情頁羅列的小模塊多達12個，單單與例句相關的就有三個：雙語例句、權威例句、原聲例句。其實，用戶根本不關心你是什么例句，他只是想在看了單詞釋義后讀上幾個例句，需要這么“為難”用戶嗎？金山詞霸的做法就很好，它把例句簡化成一個獨立的小模塊，然后在“例句模塊”中簡單羅列幾個典型例句，這樣就完成設計目標了。 第二，金山詞霸單詞詳情頁根據普遍性用戶需求對所需呈現的內容進行了組織。不同于有道詞典一股腦的簡單羅列，金山詞霸將內容組織成三個小類：釋義、例句、 講解。一般用戶查詞主要是先查看一下釋義，再讀幾個例句，內容歸類方便了用戶的使用，從而提升用戶體驗。 第三，金山詞霸單詞詳情頁使用了tab，一次只能顯示釋義、例句、講解三個模塊中的其中一個，對其他兩個模塊的內容進行了隱藏。這是符合用戶體驗要求的， “一個頁面只做一件事情”，最大的獲取用戶注意力，同時把使用負擔降到最低。

本節要素： 對于內容復雜的功能頁要使用“簡約至上”四法則進行設計： 第一，刪除。刪除用戶不關心的，不重要的功能，以減輕用戶使用負擔，突出主要功能。 第二，組織。把元素按照一定的維度組織起來，分門別類，方便用戶使用。 第三，隱藏。一個頁面只有一個核心，一個頁面只做一件事情，把其他分散用戶注意力，導致用戶困惑的內容隱藏起來。 第四，轉移。這一部分在本節探討中沒有具體體現，在3.3這一節提出的“把冗雜的東西轉移給單詞詳情頁”，從而簡化單詞卡片的設計，算是“轉移”法則的典 型。

5 尾聲：

木柄正在寫“一系列產品方面”的純干貨（立足在產品體驗上的本文算是這一系列的一篇新作），大家不要錯過了，木柄的公共號mubing01，個人博客www.mubing01.cn期待您的關注。木柄正處于自由職業狀態，如果您能提供靠譜的產品方面的工作也請聯系我，謝謝。

文/木柄

來源：極客公園