本文為個人于體驗(yàn)后對此款A(yù)PP首頁內(nèi)容的一些更迭改進(jìn)意見，望各位看官多多提點(diǎn)意見。

前言

學(xué)習(xí)通APP在應(yīng)用寶下載的時候，評論區(qū)的評論信息告訴我，評論數(shù)不多，而且里面還有很不好的評論。但鑒于有身邊人在做這個，很早以前從他的手機(jī)上瞟到過幾眼，因?yàn)檫@是他所在公司的產(chǎn)品，當(dāng)時也沒有下載下來體驗(yàn)，最近萌生了體驗(yàn)一把的念頭。這款A(yù)PP的主要用戶群體集中在各大高校，可以說是一種“校企”性質(zhì)的產(chǎn)物。當(dāng)中最主要的需求該當(dāng)是為師生提供便利的學(xué)習(xí)資料，交流互動。

在正式開始我的改進(jìn)意見敘述前，先給大家講述講述此次對首頁體驗(yàn)的感悟，體驗(yàn)版本3.0。因?yàn)槭歉倪M(jìn)思路，故在此僅說明不太友好的部分，中間也會穿插部分內(nèi)容的整改方案和交互文案。既然是首頁，那就先上一張首頁的截圖，如下圖示：

首頁中不友好的體驗(yàn)總結(jié)

1、下拉刷新出現(xiàn)閃爍白屏

為每個Tab導(dǎo)航的推薦內(nèi)容提供用戶能夠下拉刷新，這一點(diǎn)完全沒有異議，但是在下拉刷新時，頁面發(fā)生短暫的閃爍白屏，對于體驗(yàn)上講，很不舒服。許多的APP啟動頁或者第一次才會出現(xiàn)的引導(dǎo)頁，許多都是直接顯示一張背景圖片，作為一名Android手機(jī)端開發(fā)者出身的我很清楚這一個過程，排除這一情況在產(chǎn)品設(shè)計(jì)時候的需求，其大部分就是為了解決頁面啟動帶來的白屏問題。

2、登錄很不友好

關(guān)于登錄問題，一是登錄頁面的整體設(shè)計(jì)；二是在使用過程中，因?yàn)槭褂糜脩羧后w的設(shè)定，在查閱內(nèi)容時經(jīng)常被迫進(jìn)入登錄頁面。

場景復(fù)現(xiàn)：如上面的首頁截圖，推薦欄目下的內(nèi)容，幾乎（大部分）一點(diǎn)擊想要查看詳情時，直接進(jìn)入登錄頁面。點(diǎn)擊按鈕“收藏”，同樣直接進(jìn)入登錄頁面。

3、APP某些功能對用戶的開放性設(shè)定

通過首頁截圖，一眼可見，權(quán)重較為重的幾個剛需點(diǎn)就是圖示中首頁，消息，課程小組，筆記和書房。其中，首頁可歸納為發(fā)現(xiàn)。

（1）消息

為用戶提供平臺上推送的信息。場景例子——登錄進(jìn)入以后，會自動進(jìn)入一個運(yùn)營人員管理創(chuàng)建的群組，方便運(yùn)營人員為用戶提供幫助，以及同時注冊的人的一些交流，增強(qiáng)互動性。使用群體：登錄用戶。

課程小組，書房和筆記使用的前提條件也是登錄，使用人群必須是登錄用戶。

（2）首頁

除了推薦列表中某些內(nèi)容需要登錄外（大部分的內(nèi)容），其他分類Tab導(dǎo)航推薦的列表沒有發(fā)現(xiàn)需要登錄方可使用這一個條件。也就是說游客瀏覽的內(nèi)容只有首頁，而且對于推薦下的內(nèi)容大多數(shù)也不能瀏覽，由此頁面進(jìn)入的下一級頁面姑且不論。首頁Item中的收藏使用前置條件也必須為登錄用戶狀態(tài)。

如上述內(nèi)容，APP大部分內(nèi)容的用戶使用群體是登錄用戶，換言之，用戶體系對該產(chǎn)品承載相當(dāng)大。那么頁面開放和使用方式是否應(yīng)該進(jìn)行重調(diào)整呢？APP對使用用戶的劃分，那些功能該對那些用戶開放，是否需要重新規(guī)劃？

在這個層次上，當(dāng)下的市面上基本就只有三種方式：

• 一類是類似小紅書等進(jìn)入的首頁是用戶登錄頁面，一般提供給用戶注冊，登錄（包括第三方平臺）；
• 一類是類似得到，進(jìn)入頁也是登錄頁面，但有提供游客隨便看看這種通道；
• 最后一類是很多的電商購物類APP，不需要登錄就可以進(jìn)入瀏覽直到有對用戶個人相關(guān)聯(lián)需求操作時提示登錄。

學(xué)習(xí)通采用的方式為游客可用，適時登錄，第二種，個人認(rèn)為應(yīng)當(dāng)在著重思考。當(dāng)一個用戶在使用時，因不是登錄用戶處處受限，開放功能就只有一個模塊，而且其中某些內(nèi)容也不可查看，用起來是否會相當(dāng)累心。本來興高采烈地點(diǎn)擊打算一覽內(nèi)容，出來個登錄頁，委實(shí)扎心了。

小結(jié)：用戶體系對于這款A(yù)PP而言，依賴性極高，建議取消游客瀏覽+登錄模式的設(shè)計(jì)，或者重新評估需求占比，進(jìn)行頁面和功能設(shè)計(jì)。

需改進(jìn)內(nèi)容與改進(jìn)方案

1、當(dāng)用戶未登錄系統(tǒng)時，該Toast提示？還是跳出登錄頁面以供給用戶登錄？還是提供空頁面給用戶選擇？

對于發(fā)生未登錄用戶無法查看詳細(xì)內(nèi)容而直接進(jìn)入登錄頁面的交互方式，個人認(rèn)為這是這款A(yù)PP需要重新考量的內(nèi)容，而且很重要。

與用戶體系相關(guān)的APP，采用何種模式開放給用戶使用體驗(yàn)，相當(dāng)重要。比如這款A(yù)PP中的這一交互——當(dāng)用戶瀏覽列表Item時，點(diǎn)擊去到詳情直接就進(jìn)入了登錄頁。這個交互方式，在這個情況下，個人不敢茍同。原因如下，查看詳情與用戶個人賬戶信息關(guān)聯(lián)性并不大，這是兩個模塊兒的內(nèi)容，類似收藏那種，直接作用于與用戶切身信息相關(guān)的，直接跳到登錄頁面，沒有什么問題，但對于詳情，即便這個詳情內(nèi)容的確設(shè)定了必須作為登錄用戶方可閱覽，而如果點(diǎn)擊后直接進(jìn)入登錄頁面，難免給人一種點(diǎn)不進(jìn)去的感覺，換句話說，用戶當(dāng)下的意愿是要去看個詳情，我們的產(chǎn)品卻給了個登錄頁，我要看詳情，打開的頁和詳情內(nèi)容沒有半毛錢關(guān)系！故而這種交互個人極不推薦使用。

改進(jìn)方案，使用詳情空頁面，供用戶選擇，避免產(chǎn)生“牛頭不對馬嘴”的情況。

改進(jìn)如下圖：

如上圖所示的空頁面，進(jìn)入詳情頁，通過文案告訴用戶這個頁面內(nèi)容需要登錄，給用戶選擇去登錄的按鈕。所以我個人建議在設(shè)計(jì)頁面間的交互時，時常想起空頁面，沒準(zhǔn)它就能夠幫助我們產(chǎn)生更好的解決方案。

問題思考：當(dāng)用戶未登錄系統(tǒng)時，在做產(chǎn)品構(gòu)思時，我們究竟應(yīng)該以Toast提示用戶未登錄？還是進(jìn)入登錄頁給用戶登錄？又或者是提供一個空頁面作為連接載體，讓用戶自行選擇？

用戶在使用APP的過程中，如需檢查用戶狀態(tài)，包括登錄狀態(tài)用戶，會員體系中各個級別的狀態(tài)等，是否自動幫助登錄，是否直接進(jìn)入登錄頁面，Toast提示還是空頁面，個人認(rèn)為當(dāng)以用戶當(dāng)前最為直接的操作進(jìn)行判斷，并分析該操作用戶當(dāng)時最迫切的需求心理。比如說，電商中最為常見的加入購物車這一操作行為，不難分析，用戶當(dāng)時最希望的是將商品加進(jìn)購物車?yán)锩嫒?，所以就?yīng)該直接跳登錄頁，在用戶登錄成功后，才方便用戶完成這項(xiàng)操作。

2、登錄頁面——登錄方式的頁面承重比例不合理和登錄方式混亂改進(jìn)思路

這里我就來說說這個登錄頁面的設(shè)計(jì)，個人認(rèn)為有兩處極為不合理。一、登錄方式在頁面中占比不合理；二、登錄方式因?yàn)槲陌缸兊媒豢椈靵y。

登錄頁面的截圖如下：

關(guān)于登錄方式在頁面上的體現(xiàn)。如登錄頁截圖所示，對于登錄，一共三種方式，手機(jī)號獲取驗(yàn)證碼，手機(jī)號/郵箱和密碼，第三方微信和QQ，單位賬號（此處暫將其歸入第三方，算作平級）。這三者在頁面的權(quán)重比例上面基本一致，沒有突出登錄方式上的優(yōu)先。我們應(yīng)當(dāng)通過登錄方式在頁面上一個占比，引導(dǎo)用戶使用我們最希望用戶所使用的登錄方案。

文案提示錯亂，手機(jī)登錄和密碼登錄交錯，兩者登錄模塊不清晰。如登錄頁面截圖示，手機(jī)驗(yàn)證碼和密碼登錄提示文案，二者相互交錯，導(dǎo)致兩種登錄方式也交錯，不夠清晰，造成用戶登錄困擾。

登錄頁面改進(jìn)方案。修改文案，修改登錄方式于頁面上的承重比例，重新歸置手機(jī)和密碼登錄方式，避免交錯。具體如下圖示。

將手機(jī)號和密碼登錄分成兩個模塊，提供切換按鈕的交互給用戶自行選擇登錄方式解決兩種方式混亂問題。將第三方登錄放置至底部，縮小整塊區(qū)域占用頁面面積，以手機(jī)號和密碼登錄這兩種方式作為主打解決主次混淆問題。

交互動效特別說明——用戶點(diǎn)擊頁面切換手機(jī)快捷登錄和用戶密碼登錄時，當(dāng)前登錄方式的帶有輸入框的圓角白色區(qū)域緩慢成半弧形縮小至按鈕位置，另一種登錄方式則在該過程中漸顯。為什么會要有這個交互動效呢？是因?yàn)榘粹o點(diǎn)擊以后，這個按鈕并不是簡單的表示一種功能的不同狀態(tài)，改變顏色這類常用方式就不適用，這個按鈕表示的登錄的兩種方式，所以添加動效，增加視覺體驗(yàn)上的感知。

3、收藏——內(nèi)容偏多時，標(biāo)簽不可小視

對于收藏，用戶一般可在個人信息頁中進(jìn)入，并且快速打開相關(guān)內(nèi)容，而當(dāng)收藏條目越來越多，不得不需要設(shè)計(jì)刷新和加載規(guī)則，用戶需要一頁一頁地向下翻找，這時，自定義收藏標(biāo)簽就很有用，比如微信的收藏，通過標(biāo)簽可以快速地定位到需要重新閱覽的內(nèi)容。

收藏功能改進(jìn)方案。對于原收藏功能，因?yàn)轭悇e較大且每類之下還有子類別，維度較多，建議采用標(biāo)簽式收藏，用戶對內(nèi)容做收藏時，提供用戶自定義標(biāo)簽，在用戶的個人收藏中尋找時提供標(biāo)簽的搜索，減少搜索范圍，更加精準(zhǔn)地搜索到用戶意圖要的結(jié)果。這樣改進(jìn)的緣由，便于用戶快速尋找到內(nèi)容，提高頁面間的轉(zhuǎn)化率，不浪費(fèi)用戶時間。

4、首頁頁面需求分析與改進(jìn)方案

（1）首頁需求分析

如文章開頭的首頁截圖，通過在體驗(yàn)過程中，思考估量得到了首頁的幾個需求。請看下圖需求LIST。

根據(jù)這些需求和首頁截圖，選取當(dāng)中兩個主要功能需求模塊進(jìn)行改進(jìn)，一為搜索，二為推薦。

（2）搜索改進(jìn)方案

首先搜索的使用的用戶群體為全部用戶，那么當(dāng)中對已經(jīng)有搜索內(nèi)容關(guān)鍵詞，搜索目的的用戶相對比較能夠起到很大作用。原搜索，不管頂部搜索框還是如下圖Tab下面的搜索圖標(biāo)，全部都進(jìn)入到一個全局搜索式的頁面提供用戶搜索。這種方式不夠精確，精確性對搜索到詳情內(nèi)容頁面的轉(zhuǎn)化率極具重要性。所以，個人認(rèn)為當(dāng)用戶點(diǎn)擊分類Tab下的搜索圖標(biāo)（如下圖），此時，用戶想要搜索的應(yīng)當(dāng)只是這個類別中的內(nèi)容，在搜索時，完全可以經(jīng)過一道篩選，精確維度。

首頁的分類導(dǎo)航，其實(shí)也是在為用戶怎樣才能搜索到其想要的內(nèi)容提供的另一種方案，本質(zhì)上依然可歸于搜索。

對于搜索的改進(jìn)方案，先上原型圖，如下：

交互文案說明及改進(jìn)理由（僅挑選部分需要講明的交互設(shè)計(jì)的原因）：

① 原“首頁”需求權(quán)重應(yīng)為搜索（針對有搜索需求的用戶，主要是用戶已有對需搜索的相關(guān)內(nèi)容的一部分了解，能夠提供關(guān)鍵詞）和首頁展示各類別推薦（游客，全部用戶）。

② 頂部導(dǎo)航欄包括”首頁”標(biāo)題文案提示,登錄狀態(tài)以用戶頭像方式提示,未登錄顯示默認(rèn)未登錄狀態(tài)的占位頭像,已登錄顯示用戶頭像或者第三方頭像,如無,顯示默認(rèn)登錄狀態(tài)頭像。

——修改原因：不同狀態(tài)的頭像可直觀地讓用戶知曉當(dāng)前自己的狀態(tài)。

③ 頭像點(diǎn)擊交互，前置條件為已登錄，左側(cè)滑出用戶基本信息頁面至手機(jī)屏幕百分之八十，原頁面輕度透明灰色蒙蔽。

④ 搜索需求處理：頂部搜索欄目（全局搜索），點(diǎn)擊進(jìn)入可全局搜頁面，下部分分類欄目為各分類搜索頁入口（分類導(dǎo)航，進(jìn)入后的二級頁面默認(rèn)經(jīng)過此分類篩選，且頁面中提供的所有搜索內(nèi)容的范圍同樣經(jīng)過此類別篩選），顯示分類名。

——修改原因：分類導(dǎo)航不特定在Tab之下，便于用戶實(shí)時性地挑選查閱內(nèi)容。

⑤ 以上部分頂部導(dǎo)航欄和搜索，分類搜索模塊兒設(shè)置統(tǒng)一背景色，并將手機(jī)狀態(tài)欄也設(shè)置為同一色值（沉浸式）。

——修改原因：保證搜索框不論何種情況都對用戶透明可視。

交互后關(guān)于頂部搜索和導(dǎo)航欄的原型圖如下：

用戶可點(diǎn)擊切換到定制類別下，只查看對應(yīng)的類別所推薦的內(nèi)容。

用戶能夠點(diǎn)擊分類導(dǎo)航圖標(biāo)，查看所有分類，并且能夠進(jìn)入對應(yīng)分類的頁面中。

⑥ 定制推薦：為用戶提供發(fā)現(xiàn)頁展示區(qū)各個已經(jīng)經(jīng)過定制的分類的推薦內(nèi)容，若無，則采用默認(rèn)推薦類別的內(nèi)容。于頁面上“定制首頁 >>”告知用戶此功能?！倪M(jìn)原因：將原來的“+”圖標(biāo)改為文字交互提示，用戶可較快接收并做操作。

⑦ 用戶向上滑動頁面交互：用戶上滑頁面，原全局搜索框在不可視時，頂部導(dǎo)航欄的”首頁“由中部向左右延伸，變化成為搜索框，此過程應(yīng)在下邊的類別模塊兒由可視至不可視時完成，當(dāng)類別模塊兒不可視時，邀請碼左側(cè)出現(xiàn)可查看類別搜索入口的按鈕。

⑧ 發(fā)現(xiàn)頁推薦展示區(qū)內(nèi)容為原體驗(yàn)版本中推薦、專題、共讀、書和期刊等展示內(nèi)容構(gòu)成，采用混合方式呈現(xiàn)，一段推薦夾著其他類別內(nèi)容，以此排列方式依次加載提供給用戶瀏覽。每個Item中需有來源那個類目的Flag。每次加載的條目數(shù)應(yīng)為至少每個定制類別的1倍之和。每個類別的推薦項(xiàng)中需包含“查看全部”的入口。

每次加載條目數(shù)設(shè)計(jì)為每種定制類別的1倍之和，為了方便用戶在瀏覽時可以通過“查看全部”進(jìn)入具體類別二級頁面。

備注說明。

1. 作為推薦，則顯示的列表item中的內(nèi)容，都必須作為可進(jìn)入下一級頁面的入口，即此處應(yīng)該去掉部分內(nèi)容須為登錄用戶方可使用的前置條件，或者由運(yùn)營人員控制，登錄用戶使用判斷必須改為詳情頁中比如“收藏”等操作時進(jìn)行。
2. 原列表Item上的“收藏”按鈕可考慮直接取消，此頁面不需要該需求，在詳情頁使用。場景：用戶點(diǎn)擊列表查閱詳情，返回后進(jìn)行收藏（誤操作情形不論，現(xiàn)存詳情頁收藏返回列表沒刷新的bug不論）。收藏較為私人，偏向于占為己用的概念，提供用戶對歷史瀏覽的便捷打開進(jìn)行二次瀏覽。收藏的最小單位在該Item和詳情頁基本確定為一個，皆為“內(nèi)容”，故Item中可考慮取消。取消的代價是將會造成收藏?cái)?shù)量的減少，但個人依舊建議取消。

（3）推薦條目Item改進(jìn)方案

如文章開頭，首頁截圖，Item顯示內(nèi)容單一，且整個Item特別窄，顯示不夠大氣。

推薦的數(shù)據(jù)來源總結(jié)。

一些電商APP，用戶搜索過某種類型的商品，點(diǎn)擊過某種類型的商品，都有相當(dāng)精準(zhǔn)地在用戶刷新數(shù)據(jù)或者加載數(shù)據(jù)的時候給予首要的推薦，還有愛奇藝中的“熱點(diǎn)”欄目，同樣根據(jù)用戶播放記錄推給用戶數(shù)據(jù)。這類型的推薦精確至個人，某一個用戶，當(dāng)然這是需要某些算法作為支撐的。

另一類推薦，通過所有的互動產(chǎn)生推薦內(nèi)容，比如點(diǎn)贊數(shù)，筆記數(shù)，還有收藏?cái)?shù)等，收藏?cái)?shù)不太推薦，它代表的是某個用戶對某項(xiàng)內(nèi)容的態(tài)度，和點(diǎn)贊數(shù)不同，點(diǎn)贊數(shù)多，很大程度上能夠代表了大多數(shù)用戶對該項(xiàng)內(nèi)容的喜好，發(fā)表過態(tài)度。

以上都是通過數(shù)據(jù)記錄，程序得出的推薦。那么還有由運(yùn)營人員控制的推薦。

對學(xué)習(xí)通APP各個定制類別的推薦內(nèi)容，個人也沒有看出是如何得出？就暫且不說。那就談?wù)劷换ド系氖聝?，Item展示的內(nèi)容有圖片，名稱標(biāo)題，和一行簡介（這個簡介也會是幾個Flag）。那么這幾個內(nèi)容是否足夠吸引到用戶了呢？是否能夠提高Item到詳情頁的轉(zhuǎn)化量了呢？

推薦內(nèi)容，我們至少應(yīng)該準(zhǔn)備這幾個問題的解決方案。平臺要推薦給誰？推薦什么，在一眼之間，傳達(dá)到用戶視覺系統(tǒng)乃至大腦中的信息是什么？為什么推薦的數(shù)據(jù)是“他們”？怎樣推薦？

從現(xiàn)在的體驗(yàn)中，平臺推薦的各個類別內(nèi)容的對象是所有用戶，沒有精細(xì)化至某一類用戶或者某一個用戶。為什么推薦這些數(shù)據(jù)？上面說了，暫且不論。怎樣推薦，頁面呈現(xiàn)方式。所以我能夠做的改進(jìn)就剩下推薦什么了。

大家再觀察一些紙質(zhì)雜志，小說之類的書刊，封面的設(shè)計(jì)上除卻圖片的吸引力，雜志類的一般會有其中幾篇文章的標(biāo)題和里邊感人肺腑的幾句語錄，小說類也會有語錄，還會出現(xiàn)其他的著名作家的推薦用語，這就是“名人效應(yīng)”，還有一個很重要的點(diǎn)——數(shù)據(jù)。

我曾經(jīng)買過一本書，是那本書作者的第一本小說。那么，我為什么會購買它呢？首先要說明一下，因?yàn)檫@本書當(dāng)時沒法撕掉外層的封訂，只能看到書的封面和書的背面。這兩面就足夠引誘我買下了它，我其實(shí)也猶豫很久。第一個原因，書的簡要，從介紹上，它的內(nèi)容是我當(dāng)時想要看的；第二個原因，就是名人對這本書的評價；第三個點(diǎn)，這本書影響了多少多少人，多少多少的閱讀量，在多少多少個城市風(fēng)靡，數(shù)據(jù)的誘點(diǎn)。大約就是這三個主要的誘因讓我跳進(jìn)了坑，最后這本書我其實(shí)沒看完，當(dāng)中發(fā)生的事情的敘述的手法，不是自己所習(xí)慣的方式，理解起來往往連貫不上前述。

所以對于展示什么內(nèi)容在Item上給用戶，個人認(rèn)為書畫類，人物類全部轉(zhuǎn)化成人物類，圖片和著作，著名學(xué)術(shù)吸引力較大，專題的時候，每個專題主題名稱必須有，要簡明扼要，而簡述就不需要了，一般專題通過標(biāo)題就能夠大概知道講述的內(nèi)容大致是個什么方向，這個時候就可以把簡介的描述添加一些這個專題的比較特色的內(nèi)容，如誰誰誰對這個專題內(nèi)容評說了什么經(jīng)典名言等。

對于數(shù)據(jù)，最好可以使用一個閱讀量和筆記量。Item中簡要描述設(shè)置最多三行，至少讓用戶可以從中讀到一個內(nèi)容，一行確實(shí)不容易猜到內(nèi)容走向。由于對各個分類中后臺數(shù)據(jù)來源，運(yùn)營那塊不清楚，具體的Item原型圖這里就不進(jìn)行設(shè)計(jì)，建議就遵循顯示內(nèi)容要與具體的產(chǎn)品（如書籍，理論等）掛上鉤，這個時候不用太在意用戶需要什么，而要多考慮，推薦的內(nèi)容該如何吸引到用戶點(diǎn)開它。還有Item中圖片建議改到右側(cè)，文字居左，原因是人們對于書籍的閱讀方式已經(jīng)習(xí)慣從左往右。頁面的布局，各個元素的大小最好再由設(shè)計(jì)進(jìn)行規(guī)整。

寫在文末

以上闡述了本人本次對學(xué)習(xí)通3.0首頁的全部改進(jìn)方案和相關(guān)交互說明。

另，關(guān)于以文字為主的互聯(lián)網(wǎng)產(chǎn)品，為提高用戶興趣度和轉(zhuǎn)化率，各位如有經(jīng)驗(yàn)和想法，還望多多交流。

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

題圖來自 Pexels，基于 CC0 協(xié)議