本文的后續(xù)第二篇鏈接在這里 ???內(nèi)容產(chǎn)品如何設(shè)計(jì)清晰友好的首頁（二）
去年年末我有幸去十點(diǎn)讀書參加產(chǎn)品經(jīng)理職位面試氢拥，當(dāng)時(shí)十點(diǎn)讀書剛剛開始做移動(dòng) APP 項(xiàng)目丐巫，APP 也只上線了一個(gè)雛形。遺憾的是我沒有通過面試斤斧，我將其原因理解為“緣分沒到”（圍笑）早抠，不過我還是很敬佩十點(diǎn)讀書在女性市場中取得的成績和重要地位。
幾個(gè)月后我再次安裝十點(diǎn)讀書 APP撬讽，此時(shí)這款 APP 已經(jīng)迭代了幾個(gè)版本蕊连，上線了一堆功能悬垃，我在瀏覽的過程中產(chǎn)生了強(qiáng)烈的想要 Redesign 他們 APP 的想法。
我會(huì)先通過幾篇文章寫出我的觀點(diǎn)甘苍，最后給出我的設(shè)計(jì)方案尝蠕。
下面進(jìn)入正題。
一些人可能對(duì)十點(diǎn)讀書并不陌生载庭，尤其是女性朋友們看彼。十點(diǎn)讀書算是從微信公眾號(hào)起家的，過去幾年全部的產(chǎn)品和運(yùn)營活動(dòng)都以微信公眾號(hào)為陣地囚聚。十點(diǎn)讀書不僅輸出內(nèi)容靖榕，進(jìn)行出版活動(dòng)，同時(shí)還嘗試了電商顽铸、知識(shí)付費(fèi)等序矩。
在去年的面試中我了解到，十點(diǎn)想要做一款可以將現(xiàn)有的產(chǎn)品和服務(wù)集成在一起的APP跋破，那么十點(diǎn)讀書 APP 必然會(huì)是包含了多種形式的內(nèi)容和功能的大體量 APP簸淀，這一點(diǎn)在打開APP的一瞬間也能有所體會(huì)，因?yàn)槭灼恋陌臇|西真的非常多毒返。
第一屏給人最直接的感受就是東西太多太亂了租幕。
產(chǎn)生“亂感”的原因在于采用了太多 icon 類的設(shè)計(jì)，這些 icon 散落在界面的各個(gè)地方拧簸，相互之間沒有明顯的對(duì)比和親密關(guān)系劲绪，也沒有使用不同底色等方式對(duì)不同版塊和重點(diǎn)部分進(jìn)行視覺上的區(qū)分。
可以算作十點(diǎn) APP 競品的得到 APP 則顯得簡潔盆赤、有條理的多贾富；而同樣采用宮格導(dǎo)航設(shè)計(jì)的支付寶也有視覺重點(diǎn)、區(qū)域劃分牺六。
產(chǎn)品設(shè)計(jì)時(shí)應(yīng)當(dāng)盡量減少用戶的決策時(shí)間，降低點(diǎn)擊錯(cuò)誤率淑际，提高用戶獲取信息的效率畏纲。
十點(diǎn) APP 頂部功能區(qū)放置了一個(gè)條形搜索欄，以及下載管理春缕、 歷史記錄盗胀、播放器 3 個(gè) icon，這樣的安排增加了 3 個(gè)并列按鈕被誤觸的可能性锄贼。
輪播圖片很明顯沒有統(tǒng)一的設(shè)計(jì)規(guī)范票灰，沒有預(yù)留可清晰襯托系統(tǒng)狀態(tài)欄和頂部功能區(qū)的安全區(qū)，導(dǎo)致整個(gè)頂部區(qū)域十分雜亂。在這種亂的狀態(tài)中屑迂，3 個(gè) icon 又采用較細(xì)的線條設(shè)計(jì)强品，存在感再次被分散弱化。
輪播圖下面是宮格式導(dǎo)航屈糊，包括 8 個(gè)選項(xiàng)。
導(dǎo)航的作用在于向用戶傳遞清晰的場景琼了，提供清晰的線索逻锐，讓 APP 內(nèi)的信息更容易被理解；應(yīng)該盡量使用用戶熟悉雕薪、可理解的方式設(shè)置選項(xiàng)昧诱，避免給用戶提供太多選擇，使帶有目的的用戶可以快速找到所需的信息所袁。
十點(diǎn) APP 的導(dǎo)航很明顯并沒有達(dá)到上述要求盏档。
- “成長圖書館”、“人物故事館”燥爷、“精品有聲書”都屬于聽書系列內(nèi)容蜈亩，區(qū)別在于“成長”和“人物”有大咖將精華提煉餅讀給你聽，“精品”則是讀完整的書給你聽前翎；
- “課堂名師”是一個(gè)由 16 位十點(diǎn)讀書的明星導(dǎo)師組成的列表稚配，點(diǎn)擊名師信息可進(jìn)入其十點(diǎn)號(hào)主頁；
- “治愈電臺(tái)”并不是電臺(tái)港华，而是一個(gè)主播推薦列表道川，點(diǎn)擊主播信息進(jìn)入主播的十點(diǎn)號(hào)主頁；
- “深度美文”同樣是一個(gè)“薦號(hào)”列表立宜，推薦了一些十點(diǎn)號(hào)冒萄，點(diǎn)擊即可進(jìn)入對(duì)應(yīng)的十點(diǎn)號(hào)主頁；
- “熊爺解憂庫”全稱是“谷聲熊解憂書庫”橙数，說是書庫尊流，其實(shí)更像主播讀文章給你聽，用戶可以選擇不同主題的內(nèi)容收聽灯帮；
- “睡前兒童故事”是一個(gè)由主播讀的童話故事列表奠旺，家里有小朋友的用戶可以陪孩子一起聽故事。
這個(gè)導(dǎo)航的問題在于：
1. 選項(xiàng)的迷惑性施流。選項(xiàng)即沒有按照內(nèi)容呈現(xiàn)方式（圖文响疚、有聲書、電臺(tái)）設(shè)置瞪醋，也沒有按照內(nèi)容內(nèi)在屬性（情感忿晕、財(cái)經(jīng)、小說）設(shè)置银受，一個(gè)帶著目的的用戶沒辦法通過導(dǎo)航知道自己想要的東西到底在哪里践盼。
2. 選項(xiàng)粒度粗細(xì)不同鸦采。如果對(duì)現(xiàn)有的選項(xiàng)進(jìn)行分級(jí)的話，“熊爺解憂庫”和“睡前兒童故事”可作為一級(jí)菜單咕幻，而“成長圖書館”渔伯、“人物故事館”、“精品有聲書”應(yīng)屬于聽書下面的二級(jí)菜單肄程，“課堂名師”锣吼、“深度美文”、“治愈電臺(tái)”則屬于十點(diǎn)號(hào)下的二級(jí)菜單蓝厌。
3. 沒有有效展示出所有的內(nèi)容玄叠。之所以這么說，是因?yàn)樯蟿澖缑鏁?huì)發(fā)現(xiàn)十點(diǎn)APP還有“十點(diǎn)好課“拓提、”十點(diǎn)視頻“等版塊读恃，而這些內(nèi)容并沒有在導(dǎo)航中體現(xiàn)。
十點(diǎn) APP 十分看重自己的自媒體“十點(diǎn)號(hào)”代态，對(duì)于“薦號(hào)”這件事也是十分執(zhí)著寺惫。比如“熱門發(fā)現(xiàn)”版塊推薦了一排十點(diǎn)號(hào)，每個(gè)十點(diǎn)號(hào)頭像下方都有一個(gè)醒目的紅色加號(hào)引導(dǎo)用戶加關(guān)注蹦疑。
如今用戶每天被海量的信息包圍肌蜻，對(duì)于“加關(guān)注”這件事變得越來越謹(jǐn)慎，在尚未了解的時(shí)候下盲目加關(guān)注的人不會(huì)太多必尼。在這種情況下蒋搜，紅色的加號(hào)變成了一個(gè)障礙，即便用戶產(chǎn)生了點(diǎn)開頭像進(jìn)去看看的想法判莉，也會(huì)小心翼翼防止自己失誤點(diǎn)了關(guān)注才行豆挽。
再說說兩個(gè)懸浮在最上層的按鈕。
“日簽”這個(gè)功能較為常見券盅，但是十點(diǎn)沒有將其放在某個(gè)不起眼的固定位置帮哈，而是設(shè)計(jì)成懸浮按鈕放在首屆面的最上層。用戶可以點(diǎn)擊“x”將按鈕關(guān)閉锰镀，但是同一天再次打開 APP 它依然在那里等著你娘侍。比較尷尬的情況是，一旦關(guān)閉了這個(gè)懸浮按鈕泳炉，APP中再?zèng)]有其他地方可以重新找到“日簽”憾筏，需要再次重新打開 APP 才行。
“日簽”作為一個(gè)“錦上添花”的非核心功能花鹅，展示時(shí)的優(yōu)先級(jí)沒有必要如此高氧腰。參考其他 APP 的做法，大多數(shù)的產(chǎn)品選擇將其放在頂部功能欄，如有需要在每天用戶第一次進(jìn)入時(shí)使用Badge提示即可古拴。
另外一個(gè)懸浮在界面頂層的是播放器的入口按鈕紧帕，除此之外還有一個(gè)播放器固定入口在頂部功能區(qū)。
播放器會(huì)保留用戶上一次聽的音頻（有聲書桅打、電臺(tái)等）是嗜，當(dāng)沒有歷史記錄可用時(shí)播放器會(huì)隨機(jī)展示（推薦）一個(gè)音頻內(nèi)容。
也許十點(diǎn)APP真的很擔(dān)心用戶找不到播放器在哪里油额，但是這種功能重復(fù)，并導(dǎo)致界面凌亂無序的設(shè)計(jì)方案在我看來真的沒有必要刻帚。
想說的太多了潦嘶，先寫到這里，下篇再見崇众。
歡迎大家寫下評(píng)論與我進(jìn)行親切友好地切磋掂僵，也可加我微信交個(gè)朋友。
本文的后續(xù)第二篇鏈接在這里 ???內(nèi)容產(chǎn)品如何設(shè)計(jì)清晰友好的首頁（二）
