APP個(gè)人中心列表頁(yè)研究

2018-07-18 5700 0

隨著互聯(lián)網(wǎng)的發(fā)展,應(yīng)用商城中出現(xiàn)了種類繁多,各式各樣的app,而這些app里面或多或少都會(huì)存在一種界面,我們稱他為列表頁(yè),我比較在意個(gè)人中心列表頁(yè),因?yàn)閭€(gè)人中心是承載著我們的個(gè)人信息,以及在使用app時(shí)留下的數(shù)據(jù)。

個(gè)人中心列表中通用的內(nèi)容有:頭像賬號(hào).余額積分.個(gè)人資料修改.設(shè)置.意見(jiàn)反饋.使用說(shuō)明.服務(wù)條款.關(guān)于我們.

不同類型的app里面?zhèn)€人中心的列表內(nèi)容也會(huì)根據(jù)用戶的需求以及app自身功能而有所不同,我在此篇文章主要從視頻類,音樂(lè),運(yùn)動(dòng),金融,新聞咨詢,財(cái)經(jīng),閱讀,瀏覽器,汽車,城市出行,社交,體育,物流平臺(tái),健康,婚戀,圖像這些類別進(jìn)行系統(tǒng)的分析,每類選擇9款app進(jìn)行分析。

作為一名UI設(shè)計(jì)師,或許應(yīng)在某一方面要研究的透徹點(diǎn),我開(kāi)始從個(gè)人中心列表開(kāi)始研究。


 

4b2458009462a84a0d304f0de3d9.jpg

視頻類目前以廣告.流量.付費(fèi)內(nèi)容為移動(dòng)視頻貨幣化的重要途徑,因此視頻類app的個(gè)人中心除了我說(shuō)的所有app的通用內(nèi)容外,視頻類app還會(huì)有開(kāi)通vip會(huì)員,緩存,觀看歷史,訂閱等內(nèi)容。

從默認(rèn)頭像來(lái)看,愛(ài)奇藝,優(yōu)酷,搜狐,AcFun用了自己設(shè)計(jì)的卡通形象,我覺(jué)得這樣的設(shè)計(jì)能夠提高用戶對(duì)品牌的認(rèn)知。

我們下面再看看列表布局,只有blibli用的宮格布局,其他8個(gè)用的是列表布局,列表布局就是以列表的形式展示具體內(nèi)容,并且能夠根據(jù)數(shù)據(jù)的長(zhǎng)度自適應(yīng)顯示,這也是最快速的app布局方式。宮格導(dǎo)航是將主要入口全部聚合在頁(yè)面,讓用戶做出選擇。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容,選擇壓力較大,采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少,往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。


 

4605580094cba84a0d304f98a962.jpg

音樂(lè)類app的個(gè)人中心除了我說(shuō)的所有app通用內(nèi)容外,還會(huì)有本地歌曲.下載管理.最近播放等通用內(nèi)容。

酷狗音樂(lè).蝦米音樂(lè).咕咪音樂(lè)使用的是抽屜式列表,優(yōu)點(diǎn)是給內(nèi)容區(qū)域留有更大的空間,缺點(diǎn)是可見(jiàn)性較低,在某些平臺(tái)下,和平臺(tái)固有的導(dǎo)航設(shè)計(jì)模式有所沖突,低效,并非一瞥即得。

QQ音樂(lè),酷我音樂(lè),阿里星球運(yùn)用的混合組合列表,當(dāng)用戶需要聚焦內(nèi)容,同時(shí)又需要一些快捷入口能夠連接到某些頁(yè)面時(shí),就可以采用組合列表。組合列表上方用宮格的形式展現(xiàn)快捷入口,這種導(dǎo)航比較靈活,能適應(yīng)架構(gòu)的快速調(diào)整。


 

407d58009518a84a0d304fb23d31.jpg

運(yùn)動(dòng)數(shù)據(jù)豐富度,作為一款運(yùn)動(dòng)App,它的運(yùn)動(dòng)功能是否全面也是一項(xiàng)重要的指標(biāo)。

運(yùn)動(dòng)類app的個(gè)人中心除了我說(shuō)的所有app通用內(nèi)容外,還會(huì)有訓(xùn)練歷史,身體數(shù)據(jù),運(yùn)動(dòng)目標(biāo)等通用內(nèi)容。

悅跑圈使用的是舵式導(dǎo)航,頁(yè)面有處于同一層級(jí)的幾大部分內(nèi)容,同時(shí)又需要一個(gè)非常重要且頻繁操作的入口,就可以采用這種APP導(dǎo)航模式。同時(shí)個(gè)人中心加了小banner位,此baner位的內(nèi)容適用于用戶使用場(chǎng)景,因地制宜,通過(guò)收集悅跑碎片召喚里約探險(xiǎn)記勛章活動(dòng)來(lái)提高用戶對(duì)app的使用率以及停留時(shí)間。

小米運(yùn)動(dòng),咕咚用的是數(shù)據(jù)可視化,讓用戶在個(gè)人列表中直接看到自己之前的運(yùn)動(dòng)記錄。動(dòng)動(dòng)里面用的是進(jìn)度條,讓用戶更直觀的看到自己差多少到達(dá)目標(biāo),并在界面上運(yùn)用了插畫元素,使界面增加了趣味性。

每日瑜伽用的是列表格式,feel,樂(lè)動(dòng)力,悅動(dòng)圈,keep用的是混合組合列表的格式。


 

f4f458009573a84a0d304f855a6f.jpg

金融類app,從用戶需求出發(fā),在選擇投資平臺(tái)上,影響到用戶決策的主要有以下五點(diǎn):安全,收益,資金流動(dòng)性,便捷,用戶體驗(yàn)。

因此站在移動(dòng)APP產(chǎn)品層面,金融類app應(yīng)更好的表現(xiàn)出安全,因此金融類app個(gè)人列表下基本上都是登錄占的比重會(huì)大一些,這是他們表現(xiàn)安全方法之一賬戶安全,目前賬戶安全的內(nèi)容還比較簡(jiǎn)單,有實(shí)名認(rèn)證、保護(hù)手機(jī)和交易密碼可以進(jìn)行設(shè)置。

儲(chǔ)蓄罐做的較為輕松,個(gè)人中心上面有新手有禮,我是土豪,每日簽到的獎(jiǎng)勵(lì)來(lái)吸引新手注冊(cè)


 

83ee580095a8a84a0d304f111058.jpg

移動(dòng)新聞客戶端是在傳統(tǒng)門戶、傳統(tǒng)紙媒等PC時(shí)代演變到現(xiàn)在移動(dòng)時(shí)代的二代產(chǎn)品,帶有傳統(tǒng)門戶用戶獲取最新資訊、了解信息的基本需求,但隨著移動(dòng)時(shí)代的發(fā)展,移動(dòng)設(shè)備的演化,用戶需求逐漸增多,用戶使用產(chǎn)品的場(chǎng)景碎片化、多樣化。

用戶往往在路上、公交車、地鐵上,在晚上睡前,早上醒后,在吃飯時(shí),在上班休息過(guò)程中,在上洗手間等碎片化時(shí)間,這也衍生出了用戶離線閱讀等的需求。如何在短時(shí)間內(nèi)滿足用戶以上這些需求成為新聞?lì)悜?yīng)用需要考慮的問(wèn)題。

騰訊新聞,網(wǎng)易新聞,今日頭條,搜狐新聞,一點(diǎn)資訊,新浪新聞,ZAKER的個(gè)人中心都選用的列表形式,而搜狐個(gè)人中心沒(méi)有賬號(hào)設(shè)置。

百度新聞?dòng)玫氖浅閷鲜搅斜?,而快?bào)個(gè)人中心強(qiáng)調(diào)賬號(hào)登錄想要進(jìn)個(gè)人界面,首先需要登錄,而我個(gè)人不喜歡這樣做的app,通常我想先看看里面的內(nèi)容好不好,我才選擇登陸,如果事先看不到你面內(nèi)容的情況出現(xiàn)我會(huì)選擇卸載這個(gè)app,要是理財(cái)類,財(cái)經(jīng)類的話我會(huì)考慮下先登錄。


 

fa7e58009601a84a0d304f91871d.jpg

財(cái)經(jīng)是指財(cái)政、金融、經(jīng)濟(jì)。2015年中國(guó)移動(dòng)互聯(lián)網(wǎng)市場(chǎng)規(guī)模將達(dá)23134.3億元,增幅達(dá)到72.2%。未來(lái)三到五年,移動(dòng)互聯(lián)網(wǎng)規(guī)模將繼續(xù)保持高增長(zhǎng)態(tài)勢(shì)。面對(duì)這一市場(chǎng),各行各業(yè)爭(zhēng)相進(jìn)入移動(dòng)應(yīng)用搶占市場(chǎng),財(cái)經(jīng)也不例外。

新浪財(cái)經(jīng)個(gè)人中心整體用的是列表布局,列表下有分組,分為用戶,交易,觀點(diǎn),問(wèn)答,題材等模塊,與重要的子集(A股,港美股)呈現(xiàn)在同一個(gè)頁(yè)面,而不放到二級(jí)頁(yè)面里,顯得更一目了然,并減少了用戶的學(xué)習(xí)成本以及點(diǎn)擊次數(shù)。

自選股點(diǎn)擊資源管理以及活動(dòng)中心,系統(tǒng)設(shè)計(jì),吐個(gè)槽右邊的查看更多按鈕,內(nèi)容是下拉展示,而不是跳轉(zhuǎn)到下一個(gè)頁(yè)面,例圖上我點(diǎn)開(kāi)了活動(dòng)中心將A股大賽,活動(dòng)精選,私募精選給展示出來(lái)。這樣的展示方式有一個(gè)好處是使子集和父集的關(guān)聯(lián)性增強(qiáng),減少了用戶對(duì)跳轉(zhuǎn)頁(yè)面內(nèi)容的記憶。而這個(gè)頁(yè)面有個(gè)地方做的不太好,從交互形式上考慮,向右指向的箭頭,是跳轉(zhuǎn)二級(jí)頁(yè)面的按鈕,所以我覺(jué)得這個(gè)頁(yè)面所有向右指向的箭頭都應(yīng)該改為指向向下的肩頭。

360股票和牛股王app在登錄button的背景上放上了banner,充分利用了展示位,而這個(gè)banner的內(nèi)容是吸引用戶主動(dòng)登錄的。

9de258009644a84a0d304fc52886.jpg

一本書一杯茶,悠閑的坐在窗前藤椅上慢慢品讀,已經(jīng)成為一種奢侈的享受。快節(jié)奏的生活、碎片化的時(shí)間,驅(qū)使人們逐漸適應(yīng)新的生活方式,所以現(xiàn)在人們經(jīng)常會(huì)在等人或等車的間隙,忙里偷閑的掏出手機(jī)瀏覽新聞或看小說(shuō),而手機(jī)儼然變成了移動(dòng)書房。

大多數(shù)閱讀類app的個(gè)人中心用的是抽屜式列表,可能他們需要給內(nèi)容區(qū)域留有更大的空間,內(nèi)容為主。上邊的掌閱iReader,QQ閱讀,咪咕閱讀,多看閱讀,塔讀文學(xué),都用了抽屜式。我發(fā)現(xiàn)他們還有一個(gè)特征就是基本上每個(gè)app的個(gè)人中心都突出了充值按鈕。


 

994058009676a84a0e282bbc3b50.jpg

移動(dòng)互聯(lián)網(wǎng)瀏覽器不再是唯一上網(wǎng)入口,應(yīng)用占據(jù)了越來(lái)越多的用戶時(shí)間。相較而言,手機(jī)瀏覽器具有“覆蓋廣泛,快速到達(dá)”的核心優(yōu)勢(shì),幾乎可以到達(dá)移動(dòng)互聯(lián)網(wǎng)絕大多數(shù)服務(wù),所以對(duì)于解決長(zhǎng)尾需求而言,手機(jī)瀏覽器始終是必備,難以被取代,搜索則是滿足用戶在長(zhǎng)尾里找內(nèi)容的方式。

瀏覽器類app大多個(gè)人中心選擇點(diǎn)擊后從底部彈出的方式,這種方式不但界面設(shè)計(jì)上看上去簡(jiǎn)潔,功能上還可以快速切換到個(gè)人中心。


 

779b5800969ea84a0e282b2895a2.jpg

對(duì)于所有汽車人而言,各色汽車類APP必然占據(jù)手機(jī)的重要位置,無(wú)論是資訊類,養(yǎng)車類,還是考駕照類。

汽車報(bào)價(jià)大全和易車app由于是一家的產(chǎn)品,所以登錄模塊基本上做的一致,它突出了登錄的方式,是用戶知道有快速登錄的方式,使用戶不會(huì)對(duì)登陸產(chǎn)生排斥心理。

愛(ài)卡汽車的個(gè)人中心的入口很獨(dú)特,他把個(gè)人中心放在了核心的位置。


 

91c858009734a84a0d304f6c2b94.jpg

中國(guó)的城市經(jīng)濟(jì)正在飛速發(fā)展,但與此同時(shí)也帶來(lái)了許多嚴(yán)重的交通問(wèn)題。一時(shí)間,出行難成為了各大中小城市市民共同面臨的難題,城市交通O2O的興起卻 在某種程度上極大緩解了出行難的問(wèn)題。各類出行app涌現(xiàn)。

這里面談下神州租車的個(gè)人中心,未登錄時(shí)點(diǎn)擊入口icon,會(huì)彈出登錄頁(yè)面,頁(yè)面用通欄的圖片作為背景。提升視覺(jué)表現(xiàn)力度,又豐富了App情感化元素,但這種設(shè)計(jì)方法,對(duì)字體和排版設(shè)計(jì)要求更高,難度也多,但極容易渲染氣氛。


 

434f58009768a84a0d304ff7beca.jpg

移動(dòng)社交具有人機(jī)交互、實(shí)時(shí)場(chǎng)景等特點(diǎn),能夠讓用戶隨時(shí)隨地的創(chuàng)造并分享內(nèi)容,讓網(wǎng)絡(luò)最大程度地服務(wù)于個(gè)人的現(xiàn)實(shí)生活。

社交類app個(gè)人列表中心都會(huì)有提醒信息數(shù)量的小icon,這樣可以使用戶不漏掉信息,以及像我這種強(qiáng)迫癥的人,看到這個(gè)提示我就會(huì)點(diǎn),增加了app的點(diǎn)擊率。


 

dc3358009793a84a0e282b76f8ff.jpg

現(xiàn)在廣大球迷使用體育類app了解比賽資訊,觀看比賽直播已經(jīng)成為一種普遍現(xiàn)象。

體育類app中體育瘋設(shè)計(jì)個(gè)人列表較為獨(dú)特,他把個(gè)人中心做成標(biāo)簽欄,這樣可以隨時(shí)下注,做任務(wù),看排行,簡(jiǎn)單、便捷、易操作。他瘋的社區(qū)屬性,讓一批喜歡籃球、足球的人聚集在了一起,無(wú)所不談。


 

14ac580097c7a84a0d304fdc8c90.jpg

隨著淘寶、京東等電子商務(wù)網(wǎng)站的快速崛起,越來(lái)越多的人選擇進(jìn)行網(wǎng)上購(gòu)物,線上購(gòu)物交易額連連上漲。物流作為連接電商和網(wǎng)購(gòu)用戶的中介,也受到越來(lái)越多的關(guān)注。

物流app同金融類app一樣應(yīng)更好的表現(xiàn)出安全,因此物流類app個(gè)人列表下基本上都是登錄占的比重會(huì)大一些,這是他們表現(xiàn)安全方法之一賬戶安全,目前賬戶安全的內(nèi)容還比較簡(jiǎn)單,有實(shí)名認(rèn)證、保護(hù)手機(jī)和交易密碼可以進(jìn)行設(shè)置。


 

61a958009897a84a0d304ff4bbc1.jpg

隨著智能手機(jī)的普及及手機(jī)上網(wǎng)用戶的不斷增多,醫(yī)療類app也呈現(xiàn)出欣欣向榮的繁榮盛景.大部分醫(yī)療類APP都集中于健康、飲食和鍛煉等領(lǐng)域,僅四分之一的APP集中于疾病管理與治療。但二分之一的APP功能有限,大都是信息咨詢類為主。

在之前那些類別的app提到過(guò)的列表形式我在這就不重提了,想必大家自己現(xiàn)在也能看出上圖app的列表都用了哪些形式。在這單獨(dú)提一下輕加吧。輕加整個(gè)app的設(shè)計(jì)風(fēng)格是小清新,簡(jiǎn)潔大方,而個(gè)人中心一點(diǎn)開(kāi)的登錄頁(yè)面的用圖向用戶暗示了輕加會(huì)提供高品質(zhì)的健康減肥產(chǎn)品、運(yùn)動(dòng)器材和裝備的服務(wù)。提高用戶忠實(shí)度,并突出品牌基調(diào)。


 

ee8f58009a3da84a0e282ba043cf.jpg互聯(lián)網(wǎng)時(shí)代,人們開(kāi)始習(xí)慣把一切事物都往手機(jī)上搬,每次拍完照之后,看著沒(méi)有修飾照片,沒(méi)有勇氣發(fā)出去?所以圖像美化app就這樣流行起來(lái)。我點(diǎn)開(kāi)了上面9款app,發(fā)現(xiàn)沒(méi)有社交屬性的此類app,基本上都沒(méi)有單獨(dú)制作個(gè)人中心這個(gè)模塊,他們只有他們本身修圖的功能。

in的個(gè)人中心設(shè)計(jì)的清新,細(xì)致,功能齊全,并充分利用界面位置,怎么著我也的加個(gè)banner,盈利。獨(dú)特的是VSCO他的個(gè)人賬號(hào)直接放在首頁(yè)頂部,而且用的那么顯眼的藍(lán)色,來(lái)提醒我們登錄和注冊(cè)。足跡個(gè)人列表下的切換導(dǎo)航下面的小卡通形象是一個(gè)亮點(diǎn)。


 

1da958009aa4a84a0e282bfe3ec7.jpg

適婚群體遭遇到婚戀方面的現(xiàn)實(shí)阻礙,單身群體不斷延遲婚戀時(shí)間,且數(shù)量不斷增大?;閼傩袠I(yè)迎來(lái)了新的促進(jìn)機(jī)會(huì)。龐大的單身人口數(shù)量奠定了婚戀交友市場(chǎng)的基礎(chǔ)。

婚戀類app一般以實(shí)名制來(lái)注冊(cè),而且注冊(cè)時(shí)肯定會(huì)問(wèn)你男女,年齡等,所以我目前就停留在登錄頁(yè)面來(lái)做分析,婚戀類我覺(jué)得走的是情感路線,所以我覺(jué)得這類app的登錄頁(yè)面走大背景比較好,選圖像珍愛(ài)網(wǎng),微愛(ài)那樣烘托情感,使用戶也能感受到這種情感。


 


 

感謝大家觀看,歡迎點(diǎn)贊


 


34
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦