APP個人中心列表頁研究

2018-07-18 5653 0

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

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

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

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


 

4b2458009462a84a0d304f0de3d9.jpg

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

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

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


 

4605580094cba84a0d304f98a962.jpg

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

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

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


 

407d58009518a84a0d304fb23d31.jpg

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

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

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

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

每日瑜伽用的是列表格式,feel,樂動力,悅動圈,keep用的是混合組合列表的格式。


 

f4f458009573a84a0d304f855a6f.jpg

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

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

儲蓄罐做的較為輕松,個人中心上面有新手有禮,我是土豪,每日簽到的獎勵來吸引新手注冊


 

83ee580095a8a84a0d304f111058.jpg

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

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

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

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


 

fa7e58009601a84a0d304f91871d.jpg

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

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

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

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

9de258009644a84a0d304fc52886.jpg

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

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


 

994058009676a84a0e282bbc3b50.jpg

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

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


 

779b5800969ea84a0e282b2895a2.jpg

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

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

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


 

91c858009734a84a0d304f6c2b94.jpg

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

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


 

434f58009768a84a0d304ff7beca.jpg

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

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


 

dc3358009793a84a0e282b76f8ff.jpg

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

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


 

14ac580097c7a84a0d304fdc8c90.jpg

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

物流app同金融類app一樣應(yīng)更好的表現(xiàn)出安全,因此物流類app個人列表下基本上都是登錄占的比重會大一些,這是他們表現(xiàn)安全方法之一賬戶安全,目前賬戶安全的內(nèi)容還比較簡單,有實(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提到過的列表形式我在這就不重提了,想必大家自己現(xiàn)在也能看出上圖app的列表都用了哪些形式。在這單獨(dú)提一下輕加吧。輕加整個app的設(shè)計(jì)風(fēng)格是小清新,簡潔大方,而個人中心一點(diǎn)開的登錄頁面的用圖向用戶暗示了輕加會提供高品質(zhì)的健康減肥產(chǎn)品、運(yùn)動器材和裝備的服務(wù)。提高用戶忠實(shí)度,并突出品牌基調(diào)。


 

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

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


 

1da958009aa4a84a0e282bfe3ec7.jpg

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

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


 


 

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


 


34
評論區(qū)(0)
正在加載評論...