內(nèi)容產(chǎn)品:如何設(shè)計清晰友好的首界面(一)
界面設(shè)計的好壞直接影響用戶留存率,作為一個內(nèi)容產(chǎn)品,該如何設(shè)計首頁界面呢?對于這個問題,筆者有自己的見解。接下來,筆者將與大家講述:如何設(shè)計一個清晰友好的首界面?
去年年末我有幸去十點讀書參加產(chǎn)品經(jīng)理職位面試,當(dāng)時十點讀書剛剛開始做移動 APP 項目,APP 也只上線了一個雛形。遺憾的是我沒有通過面試,我將其原因理解為“緣分沒到”,不過我還是很敬佩十點讀書在女性市場中取得的成績和重要地位。
幾個月后,我再次安裝十點讀書 APP,此時這款 APP 已經(jīng)迭代了幾個版本,上線了一堆功能,我在瀏覽的過程中產(chǎn)生了強烈的想要 Redesign 他們 APP 的想法。
我會先通過幾篇文章寫出我的觀點,最后給出我的設(shè)計方案,下面進(jìn)入正題。
一些人可能對十點讀書并不陌生,尤其是女性朋友們。十點讀書算是從微信公眾號起家的,過去幾年全部的產(chǎn)品和運營活動都以微信公眾號為陣地。十點讀書不僅輸出內(nèi)容,進(jìn)行出版活動,同時還嘗試了電商、知識付費等。
在去年的面試中我了解到:十點想要做一款可以將現(xiàn)有的產(chǎn)品和服務(wù)集成在一起的APP,那么十點讀書 APP 必然會是包含了多種形式的內(nèi)容和功能的大體量 APP,這一點在打開APP的一瞬間也能有所體會,因為首屏的包含的東西真的非常多。
十點讀書 APP 首界面
第一屏給人最直接的感受就是東西太多太亂了。
產(chǎn)生“亂感”的原因在于:采用了太多 icon 類的設(shè)計,這些 icon 散落在界面的各個地方,相互之間沒有明顯的對比和親密關(guān)系,也沒有使用不同底色等方式對不同版塊和重點部分進(jìn)行視覺上的區(qū)分。
可以算作十點 APP 競品的得到 APP 則顯得簡潔、有條理的多;而同樣采用宮格導(dǎo)航設(shè)計的支付寶也有視覺重點、區(qū)域劃分。
得到 APP 首界面(左)、支付寶首界面(右)
產(chǎn)品設(shè)計時,應(yīng)當(dāng)盡量減少用戶的決策時間,降低點擊錯誤率,提高用戶獲取信息的效率。
十點 APP 頂部功能區(qū)放置了一個條形搜索欄,以及下載管理、 歷史記錄、播放器 3 個 icon,這樣的安排增加了 3 個并列按鈕被誤觸的可能性。
輪播圖片很明顯沒有統(tǒng)一的設(shè)計規(guī)范,沒有預(yù)留可清晰襯托系統(tǒng)狀態(tài)欄和頂部功能區(qū)的安全區(qū),導(dǎo)致整個頂部區(qū)域十分雜亂。在這種亂的狀態(tài)中,3 個 icon 又采用較細(xì)的線條設(shè)計,存在感再次被分散弱化。
十點讀書APP輪播圖
輪播圖下面是宮格式導(dǎo)航,包括 8 個選項。
導(dǎo)航的作用在于向用戶傳遞清晰的場景,提供清晰的線索,讓 APP 內(nèi)的信息更容易被理解。應(yīng)該盡量使用用戶熟悉、可理解的方式設(shè)置選項,避免給用戶提供太多選擇,使帶有目的的用戶可以快速找到所需的信息。
十點 APP 的導(dǎo)航很明顯并沒有達(dá)到上述要求。
- “成長圖書館”、“人物故事館”、“精品有聲書”都屬于聽書系列內(nèi)容,區(qū)別在于“成長”和“人物”有大咖將精華提煉餅讀給你聽,“精品”則是讀完整的書給你聽;
- “課堂名師”是一個由 16 位十點讀書的明星導(dǎo)師組成的列表,點擊名師信息可進(jìn)入其十點號主頁;
- “治愈電臺”并不是電臺,而是一個主播推薦列表,點擊主播信息進(jìn)入主播的十點號主頁;
- “深度美文”同樣是一個“薦號”列表,推薦了一些十點號,點擊即可進(jìn)入對應(yīng)的十點號主頁;
- “熊爺解憂庫”全稱是“谷聲熊解憂書庫”,說是書庫,其實更像主播讀文章給你聽,用戶可以選擇不同主題的內(nèi)容收聽;
- “睡前兒童故事”是一個由主播讀的童話故事列表,家里有小朋友的用戶可以陪孩子一起聽故事。
這個導(dǎo)航的問題在于:
選項的迷惑性:
選項即沒有按照內(nèi)容呈現(xiàn)方式(圖文、有聲書、電臺)設(shè)置,也沒有按照內(nèi)容內(nèi)在屬性(情感、財經(jīng)、小說)設(shè)置,一個帶著目的的用戶沒辦法通過導(dǎo)航知道自己想要的東西到底在哪里。
選項粒度粗細(xì)不同:
如果對現(xiàn)有的選項進(jìn)行分級的話,“熊爺解憂庫”和“睡前兒童故事”可作為一級菜單,而“成長圖書館”、“人物故事館”、“精品有聲書”應(yīng)屬于聽書下面的二級菜單,“課堂名師”、“深度美文”、“治愈電臺”則屬于十點號下的二級菜單。
沒有有效展示出所有的內(nèi)容:
之所以這么說,是因為上劃界面會發(fā)現(xiàn)十點APP還有“十點好課“、”十點視頻“等版塊,而這些內(nèi)容并沒有在導(dǎo)航中體現(xiàn)。
十點讀書 APP 截圖
十點 APP 十分看重自己的自媒體“十點號”,對于“薦號”這件事也是十分執(zhí)著,比如:“熱門發(fā)現(xiàn)”版塊推薦了一排十點號,每個十點號頭像下方都有一個醒目的紅色加號引導(dǎo)用戶加關(guān)注。
如今用戶每天被海量的信息包圍,對于“加關(guān)注”這件事變得越來越謹(jǐn)慎,在尚未了解的時候下盲目加關(guān)注的人不會太多。在這種情況下,紅色的加號變成了一個障礙,即便用戶產(chǎn)生了點開頭像進(jìn)去看看的想法,也會小心翼翼防止自己失誤點了關(guān)注才行。
再說說兩個懸浮在最上層的按鈕:“日簽”這個功能較為常見,但是十點沒有將其放在某個不起眼的固定位置,而是設(shè)計成懸浮按鈕放在首屆面的最上層。用戶可以點擊“x”將按鈕關(guān)閉,但是同一天再次打開 APP 它依然在那里等著你。
比較尷尬的情況是:一旦關(guān)閉了這個懸浮按鈕,APP中再沒有其他地方可以重新找到“日簽”,需要再次重新打開 APP 才行。
十點讀書 APP “日簽”功能
“日簽”作為一個“錦上添花”的非核心功能,展示時的優(yōu)先級沒有必要如此高。參考其他 APP 的做法,大多數(shù)的產(chǎn)品選擇將其放在頂部功能欄,如有需要在每天用戶第一次進(jìn)入時使用Badge提示即可。
唯物(左)、好好住(中)、36kr(右)
另外一個懸浮在界面頂層的是播放器的入口按鈕,除此之外還有一個播放器固定入口在頂部功能區(qū)。
十點讀書 APP 截圖
播放器會保留用戶上一次聽的音頻(有聲書、電臺等),當(dāng)沒有歷史記錄可用時播放器會隨機展示(推薦)一個音頻內(nèi)容。
也許十點APP真的很擔(dān)心用戶找不到播放器在哪里,但是這種功能重復(fù),并導(dǎo)致界面凌亂無序的設(shè)計方案在我看來真的沒有必要。
想說的太多了,先寫到這里,下篇再見。
歡迎大家寫下評論與我進(jìn)行親切友好地切磋,也可加我微信交個朋友。
本文由@Jalyn 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)允許,禁止轉(zhuǎn)載。
題圖來自Unspalsh, 基于CC0協(xié)議。
加個微信. xljakmc
加個微信
支付寶不應(yīng)該是工具類產(chǎn)品嗎?這里舉支付寶的例子是否合適?
舉支付寶的例子只是為了說明界面整潔···
我覺得如果要做簽到,就做的有誠意一點
干嘛還讓用戶點一次呢
通過技術(shù)手段是可以知道用戶是否今天打開了APP
至于要給用戶看什么,或者留住用戶
那不是簽到要干的事情~
十點讀書的“日簽”不是簽到,是一張圖 一句話,用戶可以分享的那種。具體可看下第一篇。
sorry,我沒看清,這就是第一篇…
咦
??