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

產(chǎn)品信息

體驗產(chǎn)品：Light

版本：V1.0.1

體驗系統(tǒng)：Flyme OS5.1.0.2Y

表現(xiàn)層

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

顏色

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

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

圖一

排版

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

圖二

輔助圖形

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

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

圖三

圖標(biāo)

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

圖四

動畫

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

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

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

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

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

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

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

圖五

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

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

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

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

圖六

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

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

首屏（精選文章列表頁）

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

圖七

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

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

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

圖八

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

首屏中的Next step

當(dāng)用戶掃完頁面的所有信息后，下一步會做什么？這是一個非常關(guān)鍵的問題，那么就來看看Light是如何回答的：

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

圖九

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

文章詳情頁

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

圖十

文章詳情頁中的Next step

當(dāng)用戶看完了文章后，除了返回外，他還可以有兩選項：點擊頁面的最底部進(jìn)入話題列表；或者向左滑動進(jìn)入下一篇文章。（圖十一）

圖十一

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

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

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

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

導(dǎo)航

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

圖十二

范圍層

我們先來看看Light主要有什么功能（圖十三）：

圖十三

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

評價：可以遠(yuǎn)不止評價

圖十四

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

圖十五

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

管理：重要卻總被忽視

用戶管理模塊是每個App都必要的，但它的曝光率通常都不高。所以都不會引起過多的注意。然而，為什么說它是重要的？因為它記錄著用戶的行為，比如說收藏文章，用戶收藏的文章越多，他就越不能離開App，因為這都是他自己精心篩選的寶貴資源，是他個人的財富?？梢哉f，用戶管理頁是避免用戶流失的最后一道防線。

圖十六

在Light的用戶管理頁中，記錄著分享和收藏文章（圖十六）。奇怪的是，點亮功能怎么就沒有被記錄了呢？可能這是出于降低開發(fā)成本來考慮吧。但筆者認(rèn)為，本著尊重用戶付出的原則，應(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)過。那么用戶就不會有使用你的必性了。所以筆者認(rèn)為，精品必須要有獨家。唯有和獨家或者首發(fā)，才會讓App保持不可替代性。

用戶憑什么不會走？

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

未來，下一步 。

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

最后說幾句：

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

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

作者：Genrry，設(shè)計師。

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