·Light·產(chǎn)品解構(gòu)分析報告

【產(chǎn)品】·Light·

【版本】V 1.0.1

【體驗系統(tǒng)】Flyme OS 5.1.0.2Y

眾所周知志衍,用戶體驗有五要素:戰(zhàn)略層萍聊、范圍層、結(jié)構(gòu)層翼岁、框架層类垫、表現(xiàn)層。產(chǎn)品設(shè)計的流程通常會由戰(zhàn)略層到表現(xiàn)層琅坡,從上而下地執(zhí)行悉患。而用戶感知,卻是自下而上的脑蠕,有時候還會互相穿插购撼。筆者將以體驗產(chǎn)品的正常順序來對Light進行結(jié)構(gòu)和分析跪削。


表現(xiàn)層

整體風格:圓潤谴仙、清新迂求、友好。為什么Light會給人這樣的視覺體驗呢晃跺?筆者將以顏色揩局、排版、輔助圖形掀虎、圖標凌盯、動畫這五個方面解構(gòu)Light的表現(xiàn)層。

顏色

Light主要使用明快的黃色烹玉,大量留白驰怎。而在色彩心理學中,黃色給人輕快二打、透明县忌、充滿希望的心理暗示。而《頭腦特工隊》中的樂樂继效,也是使用黃色代表積極向上症杏。

而對用色進一步解構(gòu)(圖一)。發(fā)現(xiàn)Light使用了三種明度的黃色瑞信,最高明度的黃色用于面積較大的圖形厉颤,像按鈕,圖標等凡简;而明度中等的黃色多用于高亮的文字逼友,或者線型的圖形;而明度最低的黃色在APP中很難發(fā)現(xiàn)秤涩,出現(xiàn)在Web版的高亮文字中翁逞,而該文字有著一個灰色的底色。這三種黃色溉仑,在對產(chǎn)品的日常使用中很難發(fā)現(xiàn)區(qū)別挖函,因為它們都極其接近。而對顏色作出如此微小的調(diào)整浊竟,有可能是因為想保持黃色在不同背景被感知中的一致性怨喘,更低明度的顏色也保證了高亮文字的易讀性。無論如何振定,Light對用色的嚴謹是值得肯定的必怜。

圖一

排版

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

圖二


輔助圖形

在輔助形的使用上膏执,Light大量地使用了圓形和圓弧驻售,圓潤的形狀給人一種友好的感覺。

無論是畫面的分割更米、裝飾圖形欺栗、控件、還是圖標征峦,圓形元素都處處可見迟几。輔助圖形的一致和復用,能夠大大地深化視覺印象栏笆,更有利傳達產(chǎn)品的氣質(zhì)(圖三)类腮。

圖三

圖標

圖標的風格跟Logo和輔助圖形的風格一脈相承,形態(tài)圓潤蛉加,線構(gòu)成的圖案顯得更加輕盈(圖四)蚜枢。

圖四

動畫

Light里面的交互動畫可謂非常豐富,且極具趣味性七婴。無論是加載時祟偷,的裝飾性動畫,還是文章切換下一遍中打厘,控件的提示性動效修肠,都做得非常細致。任意元素的切換基本都有動畫銜接而成户盯。

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

豐富的動畫使得App更具娛樂性吗伤,突出了其好玩的特性。

總結(jié)一下Light的表現(xiàn)層硫眨,假設(shè)筆者是一文不識的文盲足淆,并不能閱讀App里的任何內(nèi)容。但通過體驗App的視覺形式礁阁,其清新友好的風格巧号,也能感知其內(nèi)容應(yīng)該是輕松、幽默風格的文章姥闭,并非嚴謹?shù)牡ず琛烂C的文章。


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

筆者將內(nèi)容歸為范圍層里棚品,因為內(nèi)容本來就是新聞類產(chǎn)品所提供的服務(wù)靠欢。有趣的是廊敌,內(nèi)容是直接能讓用戶感知的,并且感知速度與表現(xiàn)層基本同步门怪,因此范圍層的內(nèi)容部分會在這里先提及骡澈。

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

圖五

再看看內(nèi)容展示的規(guī)則:每天推送2次文章减拭,分別為日報和晚報,每次推送8篇文章区丑∨》啵可以看出Light是主打精品化閱讀的策略,每天推送精選內(nèi)容沧侥,為用戶省去了篩選信息的麻煩可霎。到目前為止,我們基本可以知道宴杀,Light的目前產(chǎn)品定位:服務(wù)于喜歡在碎片時間尋找新鮮癣朗、有趣事物的人群的精品化閱讀器。而筆者也因此產(chǎn)生了一個問題:在這部分人群中旺罢,是否真的需要精品化閱讀旷余?因為像微在、微博扁达、暴走日報等App都是以豐富的信息流來滿足用戶的獵奇心理正卧,而精品化閱讀器像Yahoo News Digest、知乎日報等跪解,則以商業(yè)的炉旷、嚴謹?shù)幕蛑R性強的內(nèi)容為主〔婕ィ可以說窘行,Light的這個定位是比較獨特的,同時也是值得存疑的节吮。


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

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

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

圖六

由上圖可見翘骂,Light是一個極為輕量的App壁熄。而在一個常見的App信息架構(gòu)中,都會由導航系統(tǒng)碳竟、組織系統(tǒng)草丧、搜索系統(tǒng)和標簽系統(tǒng)組成,而Light卻把搜索和標簽省去了莹桅,可見其輕量化的程度昌执。而在一個新生的App當中,筆者也非常支持這樣的做法诈泼,不僅能大大降低開發(fā)成本懂拾,也能大大降低用戶的認知成本☆泶铮或許在后續(xù)的迭代中岖赋,剩下的系統(tǒng)會回歸,或者會以更巧妙的方法保持App的輕盈瓮孙,可以拭目以待唐断。

接下來,筆者將挑選幾個重要的頁面杭抠,一步步解構(gòu)它脸甘。

首屏(精選文章列表頁)

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

圖七

再進一步解構(gòu)每張卡片菩混,主要信息包括:題圖忿墅、標題、副標沮峡、點亮數(shù)疚脐,算是中規(guī)中矩。然而有三點細節(jié)邢疙,可以說說:

1.副標是完整的一句話棍弄,而且不一定是正文中的第一句話,而文章內(nèi)容是第三方提供的疟游。那就說明了呼畸,這一信息是后臺管理者自己編輯的。而其它的非自生產(chǎn)內(nèi)容新聞類應(yīng)用颁虐,它們的做法大都是直接去掉副標或者用機器提取正文的第一段話蛮原。而正因為非自生產(chǎn)內(nèi)容,Light能左右閱讀量的信息除了標題就是副標了另绩,所以筆者認為儒陨,自己編輯副標是一個非常正確的做法花嘶。(這應(yīng)該是范圍層的內(nèi)容,順帶在這一提)

2.點亮數(shù)蹦漠,是激發(fā)用戶閱讀重要數(shù)據(jù)椭员。然而燈泡圖標顯然是不夠直觀,小白用戶很可能會迷惑笛园,這一串數(shù)字表示的是什么隘击。而筆者認為直接用“點亮”二字替代會更好,因為“點亮”二字有在其他頁面出現(xiàn)過(圖八)研铆,且更能傳達文章效用這一信息埋同。

圖八

3.分享操作直接出現(xiàn)在文章列表頁上⊙劣。可以猜測的是莺禁,分享對于Light來說是一個比較重要的功能留量。然而直接出現(xiàn)在列表頁上又有何意義窄赋?用戶會沒看過內(nèi)容就去分享嗎?還是說楼熄,用戶曾經(jīng)看過這章忆绰,再次看見它時回想起內(nèi)容不錯就直接分享出去?因為想不出一個合適的場景可岂,筆者對此是比較疑惑的错敢。更淺層的入口是否真的有利于轉(zhuǎn)化呢?可能這就得用數(shù)據(jù)說話了缕粹。

首屏中的Next step

當用戶掃完頁面的所有信息后稚茅,下一步會做什么?這是一個非常關(guān)鍵的問題平斩,那么就來看看Light是如何回答的:

在首屏(精選文章列表頁)的底部亚享,有一個文章導航。這個導航會顯示你已經(jīng)閱讀了多少文章绘面,并可以導航到你還沒閱讀的文章詳情頁欺税。(圖九)

圖九

筆者認為,從業(yè)務(wù)的角度來說揭璃,這是一個非常聰明的Nest step晚凿。當用戶掃到了底部,發(fā)現(xiàn)一篇文章都沒有看過的時候瘦馍,他會不甘心的心理歼秽,于是就會返回選擇一兩篇來看來喂飽自己的求知欲,當用戶把所有文章都看完的時候情组,他又會有一種完成任務(wù)的滿足感燥筷。加上一句其感性的文案誘導扛吞,能有效地提高文章的閱讀率。

文章詳情頁

這個頁面的結(jié)構(gòu)比較簡單荆责。值得一說的是那點亮的交互滥比,通過拖動懸浮求或者長按文字,能夠?qū)渥舆M行點亮做院。交互方式比較創(chuàng)新盲泛,且易用,同時也成為了整個App的交互特色键耕,有利于對品牌塑造寺滚。比較相似的例子是Flip board,其翻頁交互也是它最大的特色屈雄。(圖十)

圖十

文章詳情頁中的Next step

當用戶看完了文章后村视,除了返回外,他還可以有兩選項:點擊頁面的最底部進入話題列表酒奶;或者向左滑動進入下一篇文章蚁孔。(圖十一)

圖十一

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

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

對比其他新聞類App温艇,在底部推薦相關(guān)文章是最常見不過的手法。然而Light并沒有標簽系統(tǒng)堕汞,并不能做到精準推薦勺爱,所以也只能放置一個分類的入口。由此看來臼朗,這只是一個權(quán)宜之計邻寿。

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

導航

剛剛已經(jīng)說過,Light是一個極為輕量的App挡毅,除了它本來的結(jié)構(gòu)簡單外蒜撮,還因為它采用了抽屜式的導航欄(或者說漢堡包導航)。這種導航方式的優(yōu)勢在于,讓一些次要的功能隱藏在一個抽屜里段磨,使用戶更加專注于當前屏幕的內(nèi)容取逾。而缺點在于,被隱藏的功能很難被訪問到苹支。所以放在抽屜里的只能是必要的且不重要的東西砾隅。那再來看看Light的抽屜頁:收藏的Tab有精選、話題债蜜、設(shè)置和我(圖十二)晴埂。精選Tab是首屏,主要給用戶快速返回首頁寻定。話題Tab剛剛提過儒洛,有一個更明顯的入口,所以抽屜式導航這樣的設(shè)計還是比較合理的狼速。

圖十二


范圍層

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

圖十三

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

評價:可以遠不止評價

圖十四

在文章的底部,有一些對文章評價的按鈕(圖十四)向胡∧张睿可以說這是點贊的升級版,最早見于一些Web論壇的帖子捷枯。筆者認為滚秩,如果只把它當做一次評價的話,那么這行為的數(shù)據(jù)就白白浪費了淮捆。因為這部分的數(shù)據(jù)已經(jīng)把文章定性了。而定性的文章就可以做一些更加好玩的事情本股,比如說個性化的服務(wù)攀痊,運營也可以拿這些數(shù)據(jù)作為依據(jù)篩選內(nèi)容。而微在的做法也是值得借鑒(圖十五):

圖十五

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

管理:重要卻總被忽視

用戶管理模塊是每個App都必要的躬审,但它的曝光率通常都不高棘街。所以都不會引起過多的注意。然而承边,為什么說它是重要的遭殉?因為它記錄著用戶的行為,比如說收藏文章博助,用戶收藏的文章越多险污,他就越不能離開App,因為這都是他自己精心篩選的寶貴資源,是他個人的財富蛔糯≌可以說,用戶管理頁是避免用戶流失的最后一道防線蚁飒。

圖十六

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


總結(jié)

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

用戶為什么要用网杆?

Light的內(nèi)容是源于第三方的羹饰,然而作為一個精品化閱讀器,這顯然不夠碳却。因為內(nèi)容少量队秩,你的內(nèi)容很容易在其他地方出現(xiàn)過。那么用戶就不會有使用你的必性了昼浦。所以筆者認為馍资,精品必須要有獨家。唯有和獨家或者首發(fā)关噪,才會讓App保持不可替代性鸟蟹。

用戶憑什么不會走?

互動使兔,是增強用戶粘度的有效途徑建钥。例如,評論火诸,點贊都是屬于互動的手法锦针。然而目前Light的互動機制還不夠,評論入口隱藏很深,僅有的點亮并沒有多大的互動性奈搜。

未來悉盆,下一步 。

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


最后說幾句:

筆者是一設(shè)計師崇堰,而Light的設(shè)計無疑是教科書級別的沃于,產(chǎn)品設(shè)計和前端執(zhí)行都非常到位,細節(jié)豐富海诲,給筆者上了重要的一課繁莹。而本文是筆者的第一篇產(chǎn)品分析報告,文筆拙劣特幔、想法稚嫩咨演,希望前輩們能點評點評、求輕噴蚯斯。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市溉跃,隨后出現(xiàn)的幾起案子村刨,更是在濱河造成了極大的恐慌,老刑警劉巖撰茎,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異打洼,居然都是意外死亡龄糊,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門募疮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炫惩,“玉大人,你說我怎么就攤上這事阿浓∷拢” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長筋蓖。 經(jīng)常有香客問我卸耘,道長,這世上最難降的妖魔是什么粘咖? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任蚣抗,我火速辦了婚禮,結(jié)果婚禮上瓮下,老公的妹妹穿的比我還像新娘翰铡。我一直安慰自己,他們只是感情好讽坏,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布锭魔。 她就那樣靜靜地躺著,像睡著了一般路呜。 火紅的嫁衣襯著肌膚如雪迷捧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天拣宰,我揣著相機與錄音党涕,去河邊找鬼。 笑死巡社,一個胖子當著我的面吹牛膛堤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播晌该,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼肥荔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了朝群?” 一聲冷哼從身側(cè)響起燕耿,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎姜胖,沒想到半個月后誉帅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡右莱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年蚜锨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片慢蜓。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡亚再,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出晨抡,到底是詐尸還是另有隱情氛悬,我是刑警寧澤则剃,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站如捅,受9級特大地震影響棍现,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜伪朽,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一轴咱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧烈涮,春花似錦朴肺、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至讶舰,卻和暖如春鞍盗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跳昼。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工般甲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鹅颊。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓敷存,卻偏偏與公主長得像,于是被迫代替她去往敵國和親堪伍。 傳聞我的和親對象是個殘疾皇子锚烦,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內(nèi)容