界面設計的好壞直接影響用戶留存率，作為一個內容產品，該如何設計首頁界面呢？對于這個問題，筆者有自己的見解。接下來，筆者將與大家講述：如何設計一個清晰友好的首界面？

去年年末我有幸去十點讀書參加產品經理職位面試，當時十點讀書剛剛開始做移動 APP 項目，APP 也只上線了一個雛形。遺憾的是我沒有通過面試，我將其原因理解為“緣分沒到”，不過我還是很敬佩十點讀書在女性市場中取得的成績和重要地位。

幾個月后，我再次安裝十點讀書 APP，此時這款 APP 已經迭代了幾個版本，上線了一堆功能，我在瀏覽的過程中產生了強烈的想要 Redesign 他們 APP 的想法。

我會先通過幾篇文章寫出我的觀點，最后給出我的設計方案，下面進入正題。

一些人可能對十點讀書并不陌生，尤其是女性朋友們。十點讀書算是從微信公眾號起家的，過去幾年全部的產品和運營活動都以微信公眾號為陣地。十點讀書不僅輸出內容，進行出版活動，同時還嘗試了電商、知識付費等。

在去年的面試中我了解到：十點想要做一款可以將現有的產品和服務集成在一起的APP，那么十點讀書 APP 必然會是包含了多種形式的內容和功能的大體量 APP，這一點在打開APP的一瞬間也能有所體會，因為首屏的包含的東西真的非常多。

十點讀書 APP 首界面

第一屏給人最直接的感受就是東西太多太亂了。

產生“亂感”的原因在于：采用了太多 icon 類的設計，這些 icon 散落在界面的各個地方，相互之間沒有明顯的對比和親密關系，也沒有使用不同底色等方式對不同版塊和重點部分進行視覺上的區分。

可以算作十點 APP 競品的得到 APP 則顯得簡潔、有條理的多；而同樣采用宮格導航設計的支付寶也有視覺重點、區域劃分。

得到 APP 首界面（左）、支付寶首界面（右）

產品設計時，應當盡量減少用戶的決策時間，降低點擊錯誤率，提高用戶獲取信息的效率。

十點 APP 頂部功能區放置了一個條形搜索欄，以及下載管理、 歷史記錄、播放器 3 個 icon，這樣的安排增加了 3 個并列按鈕被誤觸的可能性。

輪播圖片很明顯沒有統一的設計規范，沒有預留可清晰襯托系統狀態欄和頂部功能區的安全區，導致整個頂部區域十分雜亂。在這種亂的狀態中，3 個 icon 又采用較細的線條設計，存在感再次被分散弱化。

十點讀書APP輪播圖

輪播圖下面是宮格式導航，包括 8 個選項。

導航的作用在于向用戶傳遞清晰的場景，提供清晰的線索，讓 APP 內的信息更容易被理解。應該盡量使用用戶熟悉、可理解的方式設置選項，避免給用戶提供太多選擇，使帶有目的的用戶可以快速找到所需的信息。

十點 APP 的導航很明顯并沒有達到上述要求。

• “成長圖書館”、“人物故事館”、“精品有聲書”都屬于聽書系列內容，區別在于“成長”和“人物”有大咖將精華提煉餅讀給你聽，“精品”則是讀完整的書給你聽；
• “課堂名師”是一個由 16 位十點讀書的明星導師組成的列表，點擊名師信息可進入其十點號主頁；
• “治愈電臺”并不是電臺，而是一個主播推薦列表，點擊主播信息進入主播的十點號主頁；
• “深度美文”同樣是一個“薦號”列表，推薦了一些十點號，點擊即可進入對應的十點號主頁；
• “熊爺解憂庫”全稱是“谷聲熊解憂書庫”，說是書庫，其實更像主播讀文章給你聽，用戶可以選擇不同主題的內容收聽；
• “睡前兒童故事”是一個由主播讀的童話故事列表，家里有小朋友的用戶可以陪孩子一起聽故事。

這個導航的問題在于：

選項的迷惑性：

選項即沒有按照內容呈現方式（圖文、有聲書、電臺）設置，也沒有按照內容內在屬性（情感、財經、小說）設置，一個帶著目的的用戶沒辦法通過導航知道自己想要的東西到底在哪里。

選項粒度粗細不同：

如果對現有的選項進行分級的話，“熊爺解憂庫”和“睡前兒童故事”可作為一級菜單，而“成長圖書館”、“人物故事館”、“精品有聲書”應屬于聽書下面的二級菜單，“課堂名師”、“深度美文”、“治愈電臺”則屬于十點號下的二級菜單。

沒有有效展示出所有的內容：

之所以這么說，是因為上劃界面會發現十點APP還有“十點好課“、”十點視頻“等版塊，而這些內容并沒有在導航中體現。

十點讀書 APP 截圖

十點 APP 十分看重自己的自媒體“十點號”，對于“薦號”這件事也是十分執著，比如：“熱門發現”版塊推薦了一排十點號，每個十點號頭像下方都有一個醒目的紅色加號引導用戶加關注。

如今用戶每天被海量的信息包圍，對于“加關注”這件事變得越來越謹慎，在尚未了解的時候下盲目加關注的人不會太多。在這種情況下，紅色的加號變成了一個障礙，即便用戶產生了點開頭像進去看看的想法，也會小心翼翼防止自己失誤點了關注才行。

再說說兩個懸浮在最上層的按鈕：“日簽”這個功能較為常見，但是十點沒有將其放在某個不起眼的固定位置，而是設計成懸浮按鈕放在首屆面的最上層。用戶可以點擊“x”將按鈕關閉，但是同一天再次打開 APP 它依然在那里等著你。

比較尷尬的情況是：一旦關閉了這個懸浮按鈕，APP中再沒有其他地方可以重新找到“日簽”，需要再次重新打開 APP 才行。

十點讀書 APP “日簽”功能

“日簽”作為一個“錦上添花”的非核心功能，展示時的優先級沒有必要如此高。參考其他 APP 的做法，大多數的產品選擇將其放在頂部功能欄，如有需要在每天用戶第一次進入時使用Badge提示即可。

唯物（左）、好好?。ㄖ校?、36kr（右）

另外一個懸浮在界面頂層的是播放器的入口按鈕，除此之外還有一個播放器固定入口在頂部功能區。

十點讀書 APP 截圖

播放器會保留用戶上一次聽的音頻（有聲書、電臺等），當沒有歷史記錄可用時播放器會隨機展示（推薦）一個音頻內容。

也許十點APP真的很擔心用戶找不到播放器在哪里，但是這種功能重復，并導致界面凌亂無序的設計方案在我看來真的沒有必要。

想說的太多了，先寫到這里，下篇再見。

歡迎大家寫下評論與我進行親切友好地切磋，也可加我微信交個朋友。