內(nèi)容產(chǎn)品如何設(shè)計(jì)清晰友好的首界面(一)

內(nèi)容產(chǎn)品如何設(shè)計(jì)清晰友好的首界面（一）界面設(shè)計(jì)的好壞直接影響用戶留存率，作為一個(gè)內(nèi)容家電產(chǎn)品，該如何設(shè)計(jì)首頁(yè)界面呢？對(duì)于這個(gè)問(wèn)題，張老師有自己的見解。接下來(lái)，筆者將與大家講述：吻合如何設(shè)計(jì)一個(gè)清晰友好的首界面？去年年末我有幸去十點(diǎn)讀書參加產(chǎn)品經(jīng)理職位，當(dāng)時(shí)十點(diǎn)讀書剛剛開始做移動(dòng)APP項(xiàng)目，APP也僅僅上線了一個(gè)雛形。遺憾的是我沒(méi)有通過(guò)面試，我將其原因在于理解為“緣分沒(méi)到”，不過(guò)我還是很敬佩十點(diǎn)讀書在女性市場(chǎng)中取得這么的成績(jī)和重要地位。幾個(gè)月后，我再次安裝十點(diǎn)讀書APP,此時(shí)這款A(yù)PP已經(jīng)迭代了幾個(gè)版本，上線了一堆功能，寧愿我在瀏覽的過(guò)程中形成了強(qiáng)烈的想要Redesign他們］APP的想法。我會(huì)先通過(guò)幾篇文章寫出我的觀點(diǎn)，最后給出我的設(shè)計(jì)方案，下面進(jìn)入正題。一些人可能對(duì)每周日讀書并不陌生，一方面是女性朋友們。十點(diǎn)讀書算是來(lái)訪者從微信公眾號(hào)起家的，過(guò)去幾年全部的產(chǎn)品和運(yùn)營(yíng)活動(dòng)都以微信公眾號(hào)為灘頭陣地陣地。十點(diǎn)讀書不僅輸出內(nèi)容，進(jìn)行出版活動(dòng)，同時(shí)還嘗試了電商、知識(shí)付費(fèi)等。在去年的面試中所我了解到：十點(diǎn)想要做一款可以將現(xiàn)有的產(chǎn)品和服務(wù)內(nèi)置一站式在一起的APP，那么十點(diǎn)讀書APP必然會(huì)是包含了多種形式比率的內(nèi)容和功能的大體量APP，這一點(diǎn)在打開APP的一瞬間也能略為體會(huì)，因?yàn)槭灼恋陌臇|西真的非常多。十點(diǎn)讀書APP首界面第十第一屏給人則最直接的感受就是東西太多太亂了。產(chǎn)生“亂感”的原因在于：采用了太多icon類的設(shè)計(jì)，這些icon殘存在界面的各個(gè)地方，相互之間沒(méi)有明顯的對(duì)比和親密關(guān)系，也沒(méi)有使用不同底色等方式對(duì)不同版塊和重點(diǎn)部分進(jìn)行視覺上的區(qū)分。

可以算作十點(diǎn)APP競(jìng)品的得到APP則顯得簡(jiǎn)潔、有條理的多；而同樣宮格導(dǎo)航設(shè)計(jì)的支付寶也有視覺重點(diǎn)、區(qū)域劃分。得到APP首界面（左）、得到APP首界面（左）、支付寶首界面（右）產(chǎn)品設(shè)計(jì)時(shí)，應(yīng)當(dāng)降低風(fēng)險(xiǎn)用戶的時(shí)間決策時(shí)間，降低點(diǎn)擊錯(cuò)誤率，提高用戶獲取信息的使用效率。十點(diǎn)APP頂部功能區(qū)放置了一個(gè)條形搜索邊欄，以及下載管理、歷史記錄、播放器3個(gè)icon，這樣的統(tǒng)一安排增加了3個(gè)并列按鈕被誤觸的可能性。輪播圖片很明顯沒(méi)有統(tǒng)一的設(shè)計(jì)規(guī)范，沒(méi)有預(yù)留可清晰襯托系統(tǒng)狀態(tài)欄和頂部功能區(qū)的安全區(qū)，雜亂導(dǎo)致全個(gè)頂部區(qū)域十分雜亂。在這種亂的狀態(tài)中均，3個(gè)icon又采用較細(xì)的線條設(shè)計(jì)，存在感第三度被分散弱化。十點(diǎn)讀書APP輪播圖十點(diǎn)讀書APP輪播圖filK*導(dǎo)***愫臣*K，一 MM24Llft—■■CXXl-*--EL*J-+ 1F+3輪播圖下面是宮格式導(dǎo)航，包括8個(gè)選項(xiàng)。導(dǎo)航的作用在于向用戶傳遞清晰的場(chǎng)景，提供清晰的線索，讓APP內(nèi)的信息更容易被理解。應(yīng)該盡量添加用戶熟悉、可理解的方式設(shè)置關(guān)鍵詞，避免給用戶提供貸款太多選擇，使帶有目的的用戶可以快速尋到所需的信息。十點(diǎn)APP的導(dǎo)航明顯很明顯并沒(méi)有達(dá)到該些要求。這個(gè)導(dǎo)航的風(fēng)險(xiǎn)問(wèn)題在于：選項(xiàng)的迷惑性：關(guān)鍵詞即沒(méi)有按照內(nèi)容方式呈現(xiàn)方式（圖文、有聲書、電臺(tái)）設(shè)置，也沒(méi)有按照內(nèi)容內(nèi)在特性（情感、財(cái)經(jīng)、小說(shuō)）設(shè)置，一個(gè)帶著目的的用戶沒(méi)辦法通過(guò)導(dǎo)航知道自己想要的東西到底在哪里。選項(xiàng)粒度粗細(xì)有所不同：如果現(xiàn)階段對(duì)現(xiàn)有的選項(xiàng)進(jìn)行分級(jí)的話，“熊爺解憂庫(kù)”和“睡前兒童故事”可作為一級(jí)菜單，而“成長(zhǎng)圖書館”、“人物故事館”、“精品有聲書”應(yīng)屬于聽書下面的二類菜單，“課堂名師”、“深度美文”、“治愈電臺(tái)”則屬于十點(diǎn)號(hào)下的二級(jí)菜單。沒(méi)有精準(zhǔn)展示出所有的內(nèi)容：之所以這么說(shuō)，是因?yàn)樯蟿澖缑鏁?huì)發(fā)現(xiàn)十點(diǎn)APP還有“十點(diǎn)好課“、”十點(diǎn)視頻“等版塊，而這些內(nèi)容并沒(méi)有在導(dǎo)航中體現(xiàn)。非于印用船座值段馬.'I中引「星非于印用船座值段馬.'I中引「星U三：皆: 噸出圖書?卜亨多二圖件Hl工"抬彳-十點(diǎn)讀書APP截圖十點(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)用戶加。如今用戶每天被海量的信息每星期包圍，對(duì)于“加關(guān)注”這件事變得越來(lái)越謹(jǐn)慎，在尚未了解的時(shí)候下盲目加關(guān)注的人不會(huì)太多。在這種情況下，黑色的加號(hào)缺憾變成了一個(gè)障礙，即便應(yīng)用程序用戶產(chǎn)生了點(diǎn)開頭像進(jìn)去看看的想法，也會(huì)小心翼翼防止自己失誤點(diǎn)了關(guān)注錯(cuò)判才行。再說(shuō)說(shuō)兩個(gè)懸浮在最上層的按鈕：“日簽”這個(gè)功能較為常見，但是十一點(diǎn)沒(méi)有將其放在某個(gè)不起眼的固定位置，最上層而是設(shè)計(jì)成懸浮按鈕放在首屆面的最上層。用戶可以點(diǎn)擊“x”將按鈕關(guān)閉，但是同一時(shí)間再次打開APP它仍舊在那里等著你。比較尷尬的情況是：一旦關(guān)閉了這個(gè)懸浮按鈕，APP當(dāng)中再?zèng)]有其他地方找出可以重新找到“日簽”，需要再次重新打開APP才行。

26忖事晟mill旬大海的反ti.miM花薛的懶人瘦身法趣門發(fā)現(xiàn)26忖事晟mill旬大海的反ti.miM花薛的懶人瘦身法趣門發(fā)現(xiàn)唱不曲討AfeHVB#*&■ 力電4古am?ElA■曲.LU區(qū)亂十點(diǎn)讀書APP“日簽”功能“日簽”作為一個(gè)“錦上添花”的非核心功能，展示時(shí)的優(yōu)先級(jí)無(wú)必要如此高。參考其他APP的做法，大多數(shù)的產(chǎn)品選擇將其放在頂部功能，如有需要在每天用戶第一次進(jìn)入用到時(shí)使用Badge提示即可。臥變沒(méi)哂虺梟球不耳竟唯物（左）、好好?。ㄖ校?6kr臥變沒(méi)哂虺梟球不耳竟唯物（左）、好好住（中）、36kr（右）3?也”十國(guó)方行可常坤弟/苛西秋眼蒞”Mm作另外一個(gè)懸浮播放器在界面頂層的是隨身聽的入口按鈕，除此之外還有一個(gè)播放器固定入口碟片在頂部示范區(qū)。

十點(diǎn)讀書APP截圖播放器會(huì)保留用戶上一次聽的音頻（有聲書、電臺(tái)等），當(dāng)沒(méi)有歷史記錄可用時(shí)播放器會(huì)隨機(jī)展示（推薦）一個(gè)音