網(wǎng)易Light 安卓版產(chǎn)品解構(gòu)分析報(bào)告

1 評(píng)論 6140 瀏覽 112 收藏 19 分鐘

眾所周知,用戶體驗(yàn)有五要素:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。產(chǎn)品設(shè)計(jì)的流程通常會(huì)由戰(zhàn)略層到表現(xiàn)層,從上而下地執(zhí)行。而用戶感知,卻是自下而上的,有時(shí)候還會(huì)互相穿插。筆者將以體驗(yàn)產(chǎn)品的正常順序來(lái)對(duì)Light進(jìn)行結(jié)構(gòu)和分析。

產(chǎn)品信息

體驗(yàn)產(chǎn)品:Light

版本:V1.0.1

體驗(yàn)系統(tǒng):Flyme OS5.1.0.2Y

表現(xiàn)層

整體風(fēng)格:圓潤(rùn)、清新、友好。為什么Light會(huì)給人這樣的視覺體驗(yàn)?zāi)??筆者將以顏色、排版、輔助圖形、圖標(biāo)、動(dòng)畫這五個(gè)方面解構(gòu)Light的表現(xiàn)層。

顏色

Light主要使用明快的黃色,大量留白。而在色彩心理學(xué)中,黃色給人輕快、透明、充滿希望的心理暗示。而《頭腦特工隊(duì)》中的樂樂,也是使用黃色代表積極向上。

而對(duì)用色進(jìn)一步解構(gòu)(圖一)。發(fā)現(xiàn)Light使用了三種明度的黃色,最高明度的黃色用于面積較大的圖形,像按鈕,圖標(biāo)等;而明度中等的黃色多用于高亮的文字,或者線型的圖形;而明度最低的黃色在APP中很難發(fā)現(xiàn),出現(xiàn)在Web版的高亮文字中,而該文字有著一個(gè)灰色的底色。這三種黃色,在對(duì)產(chǎn)品的日常使用中很難發(fā)現(xiàn)區(qū)別,因?yàn)樗鼈兌紭O其接近。而對(duì)顏色作出如此微小的調(diào)整,有可能是因?yàn)橄氡3贮S色在不同背景被感知中的一致性,更低明度的顏色也保證了高亮文字的易讀性。無(wú)論如何,Light對(duì)用色的嚴(yán)謹(jǐn)是值得肯定的。

色彩

圖一

排版

Light的排版最大的亮點(diǎn)在于其首屏的焦點(diǎn)圖疊加上非常有設(shè)計(jì)感的圖形文字(圖二)。盡管這種風(fēng)格在Web中很常見,但是Light的首屏無(wú)疑也是相當(dāng)驚艷。雖然也被人詬病有參照應(yīng)用Yahoo News Digest,孰優(yōu)孰劣就見仁見智吧。

S60219-142759

圖二

輔助圖形

在輔助形的使用上,Light大量地使用了圓形和圓弧,圓潤(rùn)的形狀給人一種友好的感覺。

無(wú)論是畫面的分割、裝飾圖形、控件、還是圖標(biāo),圓形元素都處處可見。輔助圖形的一致和復(fù)用,能夠大大地深化視覺印象,更有利傳達(dá)產(chǎn)品的氣質(zhì)(圖三)。

圓形

圖三

圖標(biāo)

圖標(biāo)的風(fēng)格跟Logo和輔助圖形的風(fēng)格一脈相承,形態(tài)圓潤(rùn),線構(gòu)成的圖案顯得更加輕盈(圖四)。

圖標(biāo)

圖四

動(dòng)畫

Light里面的交互動(dòng)畫可謂非常豐富,且極具趣味性。無(wú)論是加載時(shí),的裝飾性動(dòng)畫,還是文章切換下一遍中,控件的提示性動(dòng)效,都做得非常細(xì)致。任意元素的切換基本都有動(dòng)畫銜接而成。

還有比較有趣的一點(diǎn)是,分享彈窗的出現(xiàn)軌跡也是一條圓弧,又恰恰能與輔助圖形相呼應(yīng)。

豐富的動(dòng)畫使得App更具娛樂性,突出了其好玩的特性。

總結(jié)一下Light的表現(xiàn)層,假設(shè)筆者是一文不識(shí)的文盲,并不能閱讀App里的任何內(nèi)容。但通過(guò)體驗(yàn)App的視覺形式,其清新友好的風(fēng)格,也能感知其內(nèi)容應(yīng)該是輕松、幽默風(fēng)格的文章,并非嚴(yán)謹(jǐn)?shù)?、?yán)肅的文章。

范圍層(內(nèi)容)

筆者將內(nèi)容歸為范圍層里,因?yàn)閮?nèi)容本來(lái)就是新聞?lì)惍a(chǎn)品所提供的服務(wù)。有趣的是,內(nèi)容是直接能讓用戶感知的,并且感知速度與表現(xiàn)層基本同步,因此范圍層的內(nèi)容部分會(huì)在這里先提及。

Light將內(nèi)容分為12個(gè)話題(圖五),從內(nèi)容的分類、正文內(nèi)容和語(yǔ)言風(fēng)格可以看出,其內(nèi)容是服務(wù)于喜歡輕松幽默的、非嚴(yán)肅的、有趣的文章的年輕用戶。而這內(nèi)容定位正是跟剛剛分析的視覺風(fēng)格是相一致的。

S60221-215951

圖五

再看看內(nèi)容展示的規(guī)則:每天推送2次文章,分別為日?qǐng)?bào)和晚報(bào),每次推送8篇文章??梢钥闯鯨ight是主打精品化閱讀的策略,每天推送精選內(nèi)容,為用戶省去了篩選信息的麻煩。到目前為止,我們基本可以知道,Light的目前產(chǎn)品定位:服務(wù)于喜歡在碎片時(shí)間尋找新鮮、有趣事物的人群的精品化閱讀器。而筆者也因此產(chǎn)生了一個(gè)問題:在這部分人群中,是否真的需要精品化閱讀?因?yàn)橄裎⒃凇⑽⒉?、暴走日?qǐng)?bào)等App都是以豐富的信息流來(lái)滿足用戶的獵奇心理,而精品化閱讀器像Yahoo News Digest、知乎日?qǐng)?bào)等,則以商業(yè)的、嚴(yán)謹(jǐn)?shù)幕蛑R(shí)性強(qiáng)的內(nèi)容為主??梢哉f(shuō),Light的這個(gè)定位是比較獨(dú)特的,同時(shí)也是值得存疑的。

框架層&結(jié)構(gòu)層

由于這兩個(gè)層次密不可分,并且經(jīng)體驗(yàn)后得知Light是一個(gè)輕量的App。因此就一同分析。

先看看Light的產(chǎn)品結(jié)構(gòu)(圖六):

產(chǎn)品結(jié)構(gòu)

圖六

由上圖可見,Light是一個(gè)極為輕量的App。而在一個(gè)常見的App信息架構(gòu)中,都會(huì)由導(dǎo)航系統(tǒng)、組織系統(tǒng)、搜索系統(tǒng)和標(biāo)簽系統(tǒng)組成,而Light卻把搜索和標(biāo)簽省去了,可見其輕量化的程度。而在一個(gè)新生的App當(dāng)中,筆者也非常支持這樣的做法,不僅能大大降低開發(fā)成本,也能大大降低用戶的認(rèn)知成本?;蛟S在后續(xù)的迭代中,剩下的系統(tǒng)會(huì)回歸,或者會(huì)以更巧妙的方法保持App的輕盈,可以拭目以待。

接下來(lái),筆者將挑選幾個(gè)重要的頁(yè)面,一步步解構(gòu)它。

首屏(精選文章列表頁(yè))

在首屏中,給我們推送了8篇的精選文章,并以卡片的形式展現(xiàn)(圖七)。而卡片式的布局也很好的挽回了少內(nèi)容的尷尬。

卡片

圖七

再進(jìn)一步解構(gòu)每張卡片,主要信息包括:題圖、標(biāo)題、副標(biāo)、點(diǎn)亮數(shù),算是中規(guī)中矩。然而有三點(diǎn)細(xì)節(jié),可以說(shuō)說(shuō):

1. 副標(biāo)是完整的一句話,而且不一定是正文中的第一句話,而文章內(nèi)容是第三方提供的。那就說(shuō)明了,這一信息是后臺(tái)管理者自己編輯的。而其它的非自生產(chǎn)內(nèi)容新聞?lì)悜?yīng)用,它們的做法大都是直接去掉副標(biāo)或者用機(jī)器提取正文的第一段話。而正因?yàn)榉亲陨a(chǎn)內(nèi)容,Light能左右閱讀量的信息除了標(biāo)題就是副標(biāo)了,所以筆者認(rèn)為,自己編輯副標(biāo)是一個(gè)非常正確的做法。(這應(yīng)該是范圍層的內(nèi)容,順帶在這一提)

2. 點(diǎn)亮數(shù),是激發(fā)用戶閱讀重要數(shù)據(jù)。然而燈泡圖標(biāo)顯然是不夠直觀,小白用戶很可能會(huì)迷惑,這一串?dāng)?shù)字表示的是什么。而筆者認(rèn)為直接用“點(diǎn)亮”二字替代會(huì)更好,因?yàn)椤包c(diǎn)亮”二字有在其他頁(yè)面出現(xiàn)過(guò)(圖八),且更能傳達(dá)文章效用這一信息。

點(diǎn)亮

圖八

3. 分享操作直接出現(xiàn)在文章列表頁(yè)上??梢圆聹y(cè)的是,分享對(duì)于Light來(lái)說(shuō)是一個(gè)比較重要的功能。然而直接出現(xiàn)在列表頁(yè)上又有何意義?用戶會(huì)沒看過(guò)內(nèi)容就去分享嗎?還是說(shuō),用戶曾經(jīng)看過(guò)這章,再次看見它時(shí)回想起內(nèi)容不錯(cuò)就直接分享出去?因?yàn)橄氩怀鲆粋€(gè)合適的場(chǎng)景,筆者對(duì)此是比較疑惑的。更淺層的入口是否真的有利于轉(zhuǎn)化呢?可能這就得用數(shù)據(jù)說(shuō)話了。

首屏中的Next step

當(dāng)用戶掃完頁(yè)面的所有信息后,下一步會(huì)做什么?這是一個(gè)非常關(guān)鍵的問題,那么就來(lái)看看Light是如何回答的:

在首屏(精選文章列表頁(yè))的底部,有一個(gè)文章導(dǎo)航。這個(gè)導(dǎo)航會(huì)顯示你已經(jīng)閱讀了多少文章,并可以導(dǎo)航到你還沒閱讀的文章詳情頁(yè)。(圖九)

底部導(dǎo)航

圖九

筆者認(rèn)為,從業(yè)務(wù)的角度來(lái)說(shuō),這是一個(gè)非常聰明的Nest step。當(dāng)用戶掃到了底部,發(fā)現(xiàn)一篇文章都沒有看過(guò)的時(shí)候,他會(huì)不甘心的心理,于是就會(huì)返回選擇一兩篇來(lái)看來(lái)喂飽自己的求知欲,當(dāng)用戶把所有文章都看完的時(shí)候,他又會(huì)有一種完成任務(wù)的滿足感。加上一句其感性的文案誘導(dǎo),能有效地提高文章的閱讀率。

文章詳情頁(yè)

這個(gè)頁(yè)面的結(jié)構(gòu)比較簡(jiǎn)單。值得一說(shuō)的是那點(diǎn)亮的交互,通過(guò)拖動(dòng)懸浮求或者長(zhǎng)按文字,能夠?qū)渥舆M(jìn)行點(diǎn)亮。交互方式比較創(chuàng)新,且易用,同時(shí)也成為了整個(gè)App的交互特色,有利于對(duì)品牌塑造。比較相似的例子是Flip board,其翻頁(yè)交互也是它最大的特色。(圖十)

點(diǎn)亮2

圖十

文章詳情頁(yè)中的Next step

當(dāng)用戶看完了文章后,除了返回外,他還可以有兩選項(xiàng):點(diǎn)擊頁(yè)面的最底部進(jìn)入話題列表;或者向左滑動(dòng)進(jìn)入下一篇文章。(圖十一)

導(dǎo)航2

圖十一

而這樣的方式是否合理呢?

從業(yè)務(wù)的角度,利益相關(guān)者當(dāng)然是希望內(nèi)容能更多地暴露在用戶面前。而內(nèi)容分類的入口被收在了抽屜導(dǎo)航里不易被發(fā)現(xiàn),所以在文章底部露出的方法無(wú)疑很好地解決了問題。但從用戶的角度,這種方式可能會(huì)存在打斷用戶閱讀流的風(fēng)險(xiǎn),讓用戶迷失在頁(yè)面內(nèi)。

對(duì)比其他新聞?lì)怉pp,在底部推薦相關(guān)文章是最常見不過(guò)的手法。然而Light并沒有標(biāo)簽系統(tǒng),并不能做到精準(zhǔn)推薦,所以也只能放置一個(gè)分類的入口。由此看來(lái),這只是一個(gè)權(quán)宜之計(jì)。

回歸到需求上來(lái)說(shuō),Light所服務(wù)的用戶是更傾向于閱讀完所推薦的文章還是更傾向于找自己更感興趣的文章呢?這是一個(gè)問題。

導(dǎo)航

剛剛已經(jīng)說(shuō)過(guò),Light是一個(gè)極為輕量的App,除了它本來(lái)的結(jié)構(gòu)簡(jiǎn)單外,還因?yàn)樗捎昧顺閷鲜降膶?dǎo)航欄(或者說(shuō)漢堡包導(dǎo)航)。這種導(dǎo)航方式的優(yōu)勢(shì)在于,讓一些次要的功能隱藏在一個(gè)抽屜里,使用戶更加專注于當(dāng)前屏幕的內(nèi)容。而缺點(diǎn)在于,被隱藏的功能很難被訪問到。所以放在抽屜里的只能是必要的且不重要的東西。那再來(lái)看看Light的抽屜頁(yè):收藏的Tab有精選、話題、設(shè)置和我(圖十二)。精選Tab是首屏,主要給用戶快速返回首頁(yè)。話題Tab剛剛提過(guò),有一個(gè)更明顯的入口,所以抽屜式導(dǎo)航這樣的設(shè)計(jì)還是比較合理的。

S60219-152204

圖十二

范圍層

我們先來(lái)看看Light主要有什么功能(圖十三):

功能模塊

圖十三

內(nèi)容部分在上文已經(jīng)說(shuō)過(guò),下面筆者將挑一些比較特別的功能模塊說(shuō)說(shuō):

評(píng)價(jià):可以遠(yuǎn)不止評(píng)價(jià)

評(píng)價(jià)

圖十四

在文章的底部,有一些對(duì)文章評(píng)價(jià)的按鈕(圖十四)??梢哉f(shuō)這是點(diǎn)贊的升級(jí)版,最早見于一些Web論壇的帖子。筆者認(rèn)為,如果只把它當(dāng)做一次評(píng)價(jià)的話,那么這行為的數(shù)據(jù)就白白浪費(fèi)了。因?yàn)檫@部分的數(shù)據(jù)已經(jīng)把文章定性了。而定性的文章就可以做一些更加好玩的事情,比如說(shuō)個(gè)性化的服務(wù),運(yùn)營(yíng)也可以拿這些數(shù)據(jù)作為依據(jù)篩選內(nèi)容。而微在的做法也是值得借鑒(圖十五):

定性

圖十五

文章被定性的數(shù)據(jù),會(huì)在列表頁(yè)直接顯示。用戶就可以更好地預(yù)判文章的內(nèi)容。

管理:重要卻總被忽視

用戶管理模塊是每個(gè)App都必要的,但它的曝光率通常都不高。所以都不會(huì)引起過(guò)多的注意。然而,為什么說(shuō)它是重要的?因?yàn)樗涗浿脩舻男袨?,比如說(shuō)收藏文章,用戶收藏的文章越多,他就越不能離開App,因?yàn)檫@都是他自己精心篩選的寶貴資源,是他個(gè)人的財(cái)富??梢哉f(shuō),用戶管理頁(yè)是避免用戶流失的最后一道防線。

S60219-145233

圖十六

在Light的用戶管理頁(yè)中,記錄著分享和收藏文章(圖十六)。奇怪的是,點(diǎn)亮功能怎么就沒有被記錄了呢?可能這是出于降低開發(fā)成本來(lái)考慮吧。但筆者認(rèn)為,本著尊重用戶付出的原則,應(yīng)該把點(diǎn)亮的行為也記錄下來(lái),而且點(diǎn)亮是Light的一大特色,應(yīng)該將這一特色貫徹到底。

總結(jié)

經(jīng)過(guò)在表現(xiàn)層、框架層、結(jié)構(gòu)層、和范圍層不同層次的分析。我們都能看出Light是一個(gè)比較出色的應(yīng)用,雖然在幾個(gè)地方筆者會(huì)產(chǎn)生一些疑問,但瑕不掩瑜。而筆者在這有幾點(diǎn)的想法想要分享一下:

用戶為什么要用?

Light的內(nèi)容是源于第三方的,然而作為一個(gè)精品化閱讀器,這顯然不夠。因?yàn)閮?nèi)容少量,你的內(nèi)容很容易在其他地方出現(xiàn)過(guò)。那么用戶就不會(huì)有使用你的必性了。所以筆者認(rèn)為,精品必須要有獨(dú)家。唯有和獨(dú)家或者首發(fā),才會(huì)讓App保持不可替代性。

用戶憑什么不會(huì)走?

互動(dòng),是增強(qiáng)用戶粘度的有效途徑。例如,評(píng)論,點(diǎn)贊都是屬于互動(dòng)的手法。然而目前Light的互動(dòng)機(jī)制還不夠,評(píng)論入口隱藏很深,僅有的點(diǎn)亮并沒有多大的互動(dòng)性。

未來(lái),下一步 。

假設(shè),Light的產(chǎn)品定位是正確的話。那么它就占據(jù)了這部分人群的內(nèi)容入口,從而能拓展出更多的精品化服務(wù)。比如,基于地理位置推薦精品活動(dòng),當(dāng)然這也是很Low的玩法。也相信Light團(tuán)隊(duì)能在這方面探索出更加新鮮、有逼格的玩法。

最后說(shuō)幾句:

筆者是一設(shè)計(jì)師,而Light的設(shè)計(jì)無(wú)疑是教科書級(jí)別的,產(chǎn)品設(shè)計(jì)和前端執(zhí)行都非常到位,細(xì)節(jié)豐富,給筆者上了重要的一課。而本文是筆者的第一篇產(chǎn)品分析報(bào)告,文筆拙劣、想法稚嫩,希望前輩們能點(diǎn)評(píng)點(diǎn)評(píng)、求輕噴。

感謝閱讀。(*^﹏^*)

 

作者:Genrry,設(shè)計(jì)師。

本文由 @Genrry 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好!請(qǐng)問light現(xiàn)在主要的競(jìng)品app有哪些呢?前輩能否指點(diǎn)一二?

    來(lái)自湖南 回復(fù)