背單詞App | 第一公里

這是背單詞App體驗報告 功能模塊 的第一部分。

產品設計第一公里

根據創意分享社區Behance創始人Scott Belsky 分享的觀點 ，產品設計的第一公里是產品團隊極易忽略實則卻很重要的一部分，在產品發展越來越快的時候，這個部分的設計應當引起我們的注意，以下引用了他的原話。

In a world of moving fast and pushing out a “minimum viable product,” the first mile of a product’s user experience is almost always an afterthought. The welcome/tour, the onboarding, the explanatory copy, the empty states, and the defaults of your product make up the first mile.

譯：在這個快速迭代并且推行最小可行性產品的時代，產品體驗的第一公里幾乎總是事后才考量。歡迎頁、引導頁、解釋性文案、空白狀態、默認設置這些部分共同構成了你的產品第一公里。

結合本文所選產品模塊，涉及到的產品第一公里包含了： ①啟動與引導頁、②解釋性文案、③單詞書選擇 。其中啟動與引導頁是連接用戶與產品的第一關口，帳號的建立就在此時， 可參見我個人對帳號的認知 。

1. 啟動與引導頁

所選的六款背單詞產品在這一步分為了三個類型，如下圖所示，但需要注意的是，即使是同一種結構，產品引導頁的設計也有細節上的差異，后續產出的效果也很不同，此處，第一種類型中的兩款設計是最精干的，簡潔且有力。

先來簡單思考一下，引導頁實際上跟制作幻燈片有同樣的應用理念，同屬于「信息傳達」的場景，幻燈片大體分為給人直接看（數據報告）與給人講輔助（演講、產品發布會），形式上的不同背后是同一個核心目標，即將既有的信息有效傳達給受眾，受眾與場合的不同才導致了表面上的差異。

因而，設計引導頁，作為產品方我們也應當考量此處的受眾、目標、場合。

毫無疑問，受眾主要針對新用戶，目標是將產品的核心亮點放出來，用戶要感受到產品的魅力繼而產生使用的動力，而場合主要考慮有無其他傳播載體的輔助，例如QQ新版引導頁使用了視頻的形式，一方面視頻的信息傳送效率高且吸引力大，另一方面在圖文的形式基礎上加入了動畫與聲音這種高緯度的傳播載體。

綜上，引導頁的設計雖然短小，但也需要細心考量，受眾類型、真實目標。

重要性：以背單詞App生命周期來看，新用戶是不斷涌進來的，用戶的一大組成部分是在校學生，再細分到大學生里面，每年大學都會有新生，而這其中有一大部分是沒有使用手機學習習慣的用戶，新市場的開辟仍然有著現實意義，因而，背單詞產品需要重視第一公里。

Part01 主登錄注冊入口

這一類型沒有使用滑動引導頁，單頁的流程大幅縮短了用戶的操作路徑，對應地用戶理解內容也更輕松。

扇貝是一張簡單的圖 五個核心詞，助記、拼寫、英解、詞根，這部分是扇貝特有的英語學習內容，放在首頁會給用戶一種“專業”的印象，同時東西少形式合適造就了高轉化率。

百詞斬首先是首頁進入快速切進入口頁，結構上可以認為與扇貝是一致的，但展示的內容不同，百詞斬除了登錄注冊按鈕，頁面的核心在于“品牌展示”，即logo 動畫助手，用戶無視覺壓力，同時暗示了游戲化的風格，這是文化的滲透。

綜上，這兩款產品使用了簡潔的設計，簡潔但不簡單，頁面信息傳達效率較高，操作流暢，提供的體驗帳號入口也增加了用戶友好度。

這一類型乍一看，泡單詞與樂詞的設計幾乎是一樣的，但我給泡單詞的設計打差評，而樂詞是中評。

差異在于，同樣是產品主要內容的展示，泡單詞直接使用了頁面截圖 兩行文字解釋，而樂詞則是重做的圖，一方面泡單詞選用的信息來源不符合此處的信息傳達目標，以用戶視角來看，這完全就是應用內部的主結構而不是用戶期盼可以幫自己背好單詞的亮點功能，另一方面頁面過多，長時操作會導致用戶對內容理解程度的下降，因而，這種設計不利于產品方。

除此之外，還有另外一個槽點，泡單詞的產品經理為用戶在右下角添加了跳過引導的按鈕，但這個按鈕是為老用戶設計的，新用戶首先不一定能看到（顏色形狀均不突出），看到之后按下反饋并不好（KPI悲劇？），此處的體驗優化可以參考「小米視頻」廣告啟動頁跳過按鈕的案例。

同樣的結構類型，知米背單詞為其他二者做了一個良好示范，首先是頁面數量不多但夠用，夠用的意思是，知米選取了其產品核心功能來做展示，用戶記得住帶出使用欲望這就夠了，其次是展示形式，配合其競技場功能游戲化的風格，插畫與文字風格統一，圖文表達內容一致，結果就是用戶記得住，在信息傳達的場景下，用戶記得住是第一目標。

除此之外，末頁下方對于用戶類型按鈕的文案設計出眾，無形中給了用戶一種歸屬感，對于新用戶來說也會有一種想要加入這個大家庭的感覺。（無數據支撐，個人感受）

綜上，滑動引導頁的結構是可以用的，可以參考知米的設計，該結構與第一種類型思路是一致的，內容信息的傳達率與用戶視角是關鍵。

滬江開心詞場是唯一一個在第一環節就被我刷下去的產品，他使用的結構幾乎是上述所有產品的合體，準確描述應該為臃腫的合體。

首先，用戶的操作路徑過長，圖中紅色圈住的頁面其實將這個過程分為了兩部分，用戶在順利登錄的情況下終于松了一口氣到了產品內部，緊接著看到的卻是四個功能引導頁，即使可以跳過，對于互聯網新手用戶來說，這個過程氛圍過于緊張了。

其次，頁面設計略臃腫，可以查看登錄框頁面，下半部分是同種頁面設計的楷模，上半部分就成了反例，表現為邏輯過多，頁面的跳轉按鈕入口過多，不同賬戶類型之間的關系過多，這些均屬于移動產品可以隱藏掉的細節，我的理由是，頁面的“復雜邏輯”無須向用戶展示，產品只需要給出精簡的入口即可，如此設計會增加用戶的迷惑感與不友好度。

在進入開心詞場產品內部后，不難發現其信息結構遠不夠清晰，動漫風格無關痛癢，用戶很難獲知其主要功能的去向，位于UX五要素中的結構層與框架層表現都很糟糕，簡言之，導航混亂、信息復雜，本環節將其刷下去有理有據。

Part02 體驗帳號入口

引導頁的設計除了Part01中提到的注冊登錄主流程，頁面中還有一個細節處理，百詞斬與扇貝單詞二者都提供了試用或者體驗的入口，在我看來，這是一種對用戶友好的設計。

場景類似于消費者商場購物，本質上產品也是商品（因為需要盈利），新用戶在第一次面對標準化商品時（個性化的產品例外），商家根據成本以及預估回頭率來建立與用戶間的聯系，此時， 產品試用就是很好的一個方法。

二者的流程處理邏輯不同，如上圖，表現為：百詞斬點擊試用入口直接到選單詞書流程，進而進入到主頁，帳號的驗證留到了App內部，我推測百詞斬對自家產品質量有信心才選擇這么做，而扇貝單詞點擊體驗的入口，選單詞書后進入到「背單詞」流程頁面，用戶可以體會到使用App背幾十個單詞的感受，頁面提供了返回到注冊登錄的按鈕。

細心觀察，百詞斬的文案為“試用一下”，而扇貝單詞的文案為“體驗一下”，端倪就在此處，產品功能的差異與文案相呼應，將產品比作500ml洗發水，百詞斬選擇讓用戶體驗500ml，而扇貝選擇讓用戶試用50ml袋裝，孰優孰劣需要根據兩方面判斷。

一方面是數據，數據可以反映用戶真實的動作路徑，另一方面是產品運營策略，市場推廣與口碑均有差異，放映到此處的設計也就自然不同，因此，合適自家產品的就是最好的。

試用體驗入口的設計我為兩者打好評，因為提高了對用戶的友好度，細節方面的差異我推測產生于各家用戶的不同。

綜上，啟動引導頁的設計，扇貝單詞 百詞斬 知米背單詞處于第一梯隊，提供了試用或體驗入口更是體現了設計友好，分析見上。

2. 解釋性文案

產品設計第一公里不僅限于注冊登錄頁面，進入App后用戶也需要引導，最明顯的就是 用戶面對產品新功能的場景 ，iOS與Android都有相應的設計規范，其中已經對已有控件甚至是設計原理有所規范，但多樣化的產品需要有自己個性化的設計，個性化的設計就需要對用戶進行文案或者其他形式的解釋（特別是面對新用戶），本文就來看看部分文案。

直白說明：1微信不強依賴操作（用戶已度過適應期），其功能的實現不需要進行多余的說明解釋，2而本次體驗的背單詞App中，部分功能就切入了用戶使用新功能的解釋場景，下面通過幾款App涉及到的細節來進行說明。

App內部的引導部分，扇貝單詞通過優化使用流程棄用了文案提示，這一手段有效祛除了用戶的困擾（一年前我開始用的時候流程會有不清晰的細節，如下一步該點哪里），因而扇貝選擇了合適的方案，解釋性文案涉及不多。

知米《競技場模塊》的下載建立在一個前提下：必須更新才能使用該模塊。這樣一種由不恰當的技術架構帶來的產品設計是對用戶不友好的，當然我猜測可能有廣電對游戲內容限制的原因，在不改變這個前提情況下我對流程與頁面做了改善，如下圖。

我對樂詞已有的解釋性文案錯誤在下圖已有標示，對解釋文案在同種通知場景下采用不統一且不合理的字體，我判定為設計故障，同時結合我后期對樂詞App的體驗，我認為樂詞的這些特點不適合繼續評測：

1. 其定位并非純粹的「背單詞App」，我理解其為新東方英語學習的電子資源站（帶背單詞功能）；
2. 針對移動產品的設計犯了與開心詞場同樣的錯誤，細節冗余，信息結構不夠清晰，功能繁瑣；
3. 我個人理解不了樂詞中的“樂”設計，趣味性的功能用戶感知度不高；

因而，后續的體驗報告撰寫不再考慮樂詞，這一環節將其刷下。

而最后的泡單詞，簡單體驗后我已經有所察覺，這款產品還處于幼年期，信息架構即為簡易，甚至某環節有小瑕疵（具體會在后續的功能模塊有所說明），或許這正是其還沒有做搜索優化的最大原因，而涉及到本部分的解釋性文案，泡單詞App只有系統推送，其表現較穩健，個人感覺并沒有什么可圈可點之處。

綜上，通過圖文的形式進行了對所選產品解釋性文案的說明，結論為：百詞斬表現最全面最優，扇貝文案涉及少但出色，知米表現良好，部分細節我個人做了優化，樂詞由于故障被刷下，泡單詞無可圈可點之處，通過這些案例也可以看出這部分設計對產品有著用戶層面的影響。

3. 單詞書選擇

對于一款「背單詞App」來說，在產品第一公里階段，單詞書的選擇是大家必將面對的一個環節（背單詞為主功能，單詞書為功能內容），下面就對這個選擇流程進行簡單分析。

在四款產品中，大體的思路是一致的，即先選類別，再選具體的詞庫（詞書），方向上表現為不斷縮小范圍，各家的分類有細節上的差異，而這個差異我推斷來源于兩點：01自家單詞書資源上的不同02各家用戶數據不同。

扇貝與知米的設計我個人感覺是最好的，選類別的時候用戶看不到具體的詞書，此時用戶只需要專心選擇大類別即可，無任何心理壓力以及視覺干擾，這種設計理念讓我想起了iOS與macOS，但是扇貝優于知米，原因在于視覺設計不同，扇貝更加巧妙地使用了圖片與色彩。

而百詞斬與泡單詞結構上都是樹形菜單，優點在于層與層間的邏輯關系一目了然，用戶選擇過程同樣很順暢。

除此之外，泡單詞使用了默認用戶自己來設置背單詞計劃的細則，即每天完成量與完成天數，同樣根據Scott Belsky 分享的觀點 ，這個細節不太妥當，因為系統完全可以自動設置，參考其他產品也是選擇了自動的方案，因而，泡單詞這個細節可以改善一下，產品內部留有再次修改的入口即可。

綜上，這個環節中，至于泡單詞的一個細節拖了后腿，其他設計各有優劣。

小結

以上，我完成了背單詞App體驗報告第一個功能模塊的撰寫，產品第一公里的設計對于新用戶體驗來說至關重要，具體表述請參考此文: 譯 | 匠心打造產品第一公里 ，而本次的產品中涉及到了三點： ①啟動與引導頁、②解釋性文案、③單詞書選擇 ，具體的對比請參照上文，每一步中各自優劣有所不同。

但整體而言，百詞斬是最強的一款，這也側面印證了其市場數據方面的強悍，通過這樣的結果，作為產品經理，我們也深知，產品對于運營、市場等商業元素的影響是客觀存在的。

最后，讓我們重視產品的第一公里，向百詞斬這種產品學習。

完