隨著時(shí)間的推移，現(xiàn)代人的生活節(jié)奏越來(lái)愉快，在我們的生活中，不僅僅傳統(tǒng)紙質(zhì)閱讀的體驗(yàn)機(jī)會(huì)越來(lái)越少，即是PC端網(wǎng)頁(yè)閱讀也隨著越來(lái)越碎片化的生活場(chǎng)景變得無(wú)法支撐人們閱讀的需求。

伴隨移動(dòng)互聯(lián)網(wǎng)的到來(lái)和發(fā)展，移動(dòng)端閱讀成為滿足用戶對(duì)碎片化閱讀場(chǎng)景需求的最好的閱讀方式，人們的閱讀方式已經(jīng)從PC時(shí)代的大屏幕閱讀逐漸轉(zhuǎn)移到移動(dòng)端的小屏幕閱讀，而移動(dòng)端天生與桌面端使用場(chǎng)景和用戶人群差異必然促成了在移動(dòng)端閱讀的垂直領(lǐng)域細(xì)分的出現(xiàn)。

• 具有強(qiáng)大社交屬性的【微信讀書】；
• 依托于小米生態(tài)鏈最后獨(dú)立發(fā)展的【多看】；
• 已經(jīng)發(fā)展多年的【掌閱】；
• 推出包月服務(wù)并生產(chǎn)移動(dòng)閱讀硬件的亞馬遜。

……

移動(dòng)端閱讀領(lǐng)域看起來(lái)似乎是一片紅海，但【網(wǎng)易蝸牛讀書】卻在此時(shí)慢慢的游入這片紅海，并且在推出后2個(gè)月獲得2017年App Store的【4月最佳應(yīng)用】，正是因?yàn)樵贏pp Store看到了它，我開始放下用了四五年的【多看】，深度的體驗(yàn)了這款網(wǎng)易推出的【網(wǎng)易蝸牛讀書】。

在撰寫這篇分析的過(guò)程中，我嘗試用產(chǎn)品分析的方式從戰(zhàn)略層、架構(gòu)層和表現(xiàn)層這樣的方式去分析，但這個(gè)過(guò)程是在是太痛苦了。經(jīng)過(guò)反復(fù)幾次的修改，我決定還是從本專業(yè)的角度去進(jìn)行體驗(yàn)和分析。

UI設(shè)計(jì)處在整個(gè)產(chǎn)品設(shè)計(jì)流程最靠后的位置，是最終呈獻(xiàn)給用戶的，一個(gè)優(yōu)秀的用戶界面/視覺設(shè)計(jì)不是憑空而來(lái)的，更不是一個(gè)設(shè)計(jì)師主觀意愿和審美所決定的，它一定是承載了產(chǎn)品在戰(zhàn)略層、架構(gòu)層等底部各方面的訴求。視覺分析是一件比較主觀的事情，視覺本身就是主觀性很強(qiáng)的感受，但如果能夠透過(guò)看似主觀的視覺而觀察到其如何通過(guò)視覺設(shè)計(jì)來(lái)將產(chǎn)品的訴求完美的展現(xiàn)給用戶，相信對(duì)我未來(lái)的設(shè)計(jì)工作以及與產(chǎn)品經(jīng)理協(xié)作有非常大的幫助。

為便于本文的撰寫，本文將【網(wǎng)易蝸牛讀書】簡(jiǎn)寫為【蝸牛】，還望各位讀者見諒。

目錄

1. 我為什么會(huì)使用/喜歡它
2. 產(chǎn)品信息及體驗(yàn)環(huán)境
3. 視覺觀感
4. 視覺設(shè)計(jì)
5. 交互設(shè)計(jì)
6. 結(jié)構(gòu)設(shè)計(jì)
7. 產(chǎn)品分析
8. 總結(jié)

我為什么會(huì)使用/喜歡它

種心錨的蝸牛

“種心錨”是《魔鬼約會(huì)學(xué)》中介紹的一種吸引異性的心理學(xué)或者說(shuō)是技巧，簡(jiǎn)單的來(lái)說(shuō)可以表述為“觸景生情”或者是“條件反射”，更專業(yè)的解釋是“人之內(nèi)心某一心情與行為某一動(dòng)作或表情之鏈接，而產(chǎn)生的條件反射的組合刺激”。換言之，這個(gè)組合刺激依賴于一個(gè)誘因，而【蝸?！渴┮缘恼T因正是網(wǎng)易不斷宣傳的Slogan“每天免費(fèi)讀書一小時(shí)”

下面就從種心錨的五個(gè)要素逐一解釋，【蝸?！渴侨绾瓮ㄟ^(guò)這個(gè)誘因成功的做到了種心錨。

1.必須要使身心處在一種特別的狀態(tài)

當(dāng)前社會(huì)的生活節(jié)奏很快，生活與工作基本上已經(jīng)融為一體，尤其是在中國(guó)的一二線城市。在這些城市中，大部分人的生活節(jié)奏和作息時(shí)間都是比較固定的，同時(shí)大段的工作時(shí)間占據(jù)了人們?nèi)粘Ｉ畹慕^大部分時(shí)間。與這樣長(zhǎng)時(shí)間聚焦于某一件工作的狀態(tài)相比，在碎片化的時(shí)間中的無(wú)聊感，是我們所處的狀態(tài)則是一種特別的狀態(tài)。

2.要在特別狀態(tài)呈現(xiàn)出最強(qiáng)烈的時(shí)候施以誘因

乘坐交通工具上下班是在都市工作的人們每天必須經(jīng)歷的，在一個(gè)固定的、擁擠的、嘈雜的環(huán)境中，人的這種特別的狀態(tài)會(huì)呈現(xiàn)的最強(qiáng)烈，尤其是在獨(dú)自外出的時(shí)候，人的社交是無(wú)法滿足，尤其在中國(guó)是很難看到在交通工具上兩個(gè)陌生人突然開始聊的火熱。

誘因的施加方式有兩種，第一種是主動(dòng)施加，第二種是潛移默化的影響。在此處的情景中，【蝸?！康恼T因是第二種方式，因?yàn)椤疚伵！孔鳛橐豢預(yù)PP無(wú)法判斷我在什么時(shí)候處于最強(qiáng)烈的特別狀態(tài)，而簡(jiǎn)單直觀、容易記憶的Slogan在潛移默化中施加到我的身上，嚴(yán)格意義上來(lái)說(shuō)，是我個(gè)人在這種特別狀態(tài)下的潛意識(shí)反應(yīng)。

3.誘因必須獨(dú)特

【蝸?！棵刻烀赓M(fèi)閱讀一小時(shí)，相對(duì)于其他移動(dòng)端閱讀APP是非常獨(dú)特的收費(fèi)模式，對(duì)于讀者來(lái)說(shuō)，免費(fèi)閱讀一小時(shí)更是擊中了人性中的貪。人的本性雖然有貪的成分，但人也會(huì)做出選擇?！疚伵！恐械臅墙?jīng)過(guò)了時(shí)間積累的好書，這也是我堅(jiān)持每天閱讀一小時(shí)的原因。

4.誘因必須重復(fù)連續(xù)

【蝸?！康腟logan中已經(jīng)準(zhǔn)確的描述了一個(gè)代表連續(xù)重復(fù)的詞語(yǔ)“每天”

5.誘因的提供必須相同、準(zhǔn)確

每當(dāng)我坐上公交車，當(dāng)我的身心處在最強(qiáng)烈的特別狀態(tài)的時(shí)候，我就會(huì)打開【蝸牛】因?yàn)槲抑?，每一天只要我打開【蝸牛】就會(huì)有一個(gè)小時(shí)的免費(fèi)閱讀時(shí)長(zhǎng)。

創(chuàng)新的連鎖反應(yīng)

與市面上現(xiàn)有的移動(dòng)端閱讀類APP相比，【蝸牛】最直觀的創(chuàng)新體現(xiàn)在收費(fèi)模式上，【蝸?！坎捎冒凑臻喿x時(shí)長(zhǎng)收費(fèi)的方式，同時(shí)每天贈(zèng)送一小時(shí)的免費(fèi)閱讀時(shí)長(zhǎng)。不按常理出牌，差異化、垂直化競(jìng)爭(zhēng)是網(wǎng)易一貫的風(fēng)格，但通過(guò)我日常的使用和思考，我認(rèn)為【蝸牛】的按時(shí)長(zhǎng)收費(fèi)并不是為了創(chuàng)新而創(chuàng)新，而是為了解決移動(dòng)端閱讀APP用戶的實(shí)際需求而采用的方式，這一方式帶來(lái)了一連串的連鎖反應(yīng)或者說(shuō)是完美的解決了用戶的需求。

給予讀者最大的自由

以【多看】、【QQ閱讀】和【掌閱】等為代表的閱讀APP，均采用了一次性付費(fèi)，允許用戶試讀的方式。在移動(dòng)互聯(lián)網(wǎng)發(fā)展到現(xiàn)在的階段，免費(fèi)試讀給予了用戶選擇圖書的自由，但這種自由依然是有限度的。在我個(gè)人過(guò)往的移動(dòng)閱讀經(jīng)歷中，最典型的場(chǎng)景是：前面看起來(lái)還不錯(cuò)，決定掏錢買，但越看越覺得寫的真不咋地

【蝸牛】按照時(shí)長(zhǎng)收費(fèi)的方式，讓讀者可以最低成本的閱讀完整本書，排除用戶需要堅(jiān)持不懈每天閱讀一小時(shí)的成本以外，讀者成本幾乎可以忽略不計(jì)。在如此幾乎可以忽略不計(jì)的成本之下，讀者就可以隨心所欲的閱讀【蝸?！刻峁┑乃袌D書。

培養(yǎng)讀者建立閱讀計(jì)劃

“屯書如山倒，讀書如抽絲”，想必并不是我一個(gè)人有這樣的感受。不論是PC端還是移動(dòng)端，只要是帶有書城功能的閱讀類APP，都允許用戶將任意書籍加入購(gòu)物車或者書架。但真正的閱讀卻不是點(diǎn)一下“加入購(gòu)物車”這么簡(jiǎn)單，需要花費(fèi)大量的時(shí)間閱讀，而快節(jié)奏的生活和人的惰性極其容易導(dǎo)致書籍就此一直停留在購(gòu)物車中，并沒有閱讀。

根據(jù)《第12次中國(guó)國(guó)民閱讀調(diào)查》結(jié)果顯示，中國(guó)人的平均閱讀時(shí)長(zhǎng)僅為18.7分鐘，出現(xiàn)這一情況的原因非常多，但我相信，沒有建立閱讀計(jì)劃是其中一個(gè)重要的原因。從極光大數(shù)據(jù) iAPP 監(jiān)測(cè)得到的2017 年前兩個(gè)月的移動(dòng)閱讀平臺(tái)數(shù)據(jù)，顯示目前占據(jù)市場(chǎng)份額最多的幾款主流移動(dòng)閱讀平臺(tái)平均每日使用時(shí)長(zhǎng)都沒有超過(guò) 1 小時(shí)，甚至在使用時(shí)長(zhǎng)上占據(jù)明顯優(yōu)勢(shì)的QQ閱讀平均每日使用時(shí)長(zhǎng)也只有 51 分鐘。因此，每天免費(fèi)閱讀一小時(shí)能夠滿足絕大多數(shù)用戶的時(shí)間需求?！疚伵！棵刻烀赓M(fèi)一小時(shí)閱讀時(shí)長(zhǎng)的模式，以及前文所述的誘因及組合刺激反應(yīng)，讀者會(huì)每天的碎片時(shí)間閱讀一個(gè)小時(shí)，不知不覺中亦會(huì)建立了一個(gè)固定的閱讀計(jì)劃。

產(chǎn)品分析

在這一章節(jié)，將分析【蝸?！慨a(chǎn)品定位、產(chǎn)品目標(biāo)以及目標(biāo)用戶人群等信息，這些信息是表現(xiàn)層的用戶界面/視覺設(shè)計(jì)的根基，在后面的視覺分析章節(jié)將會(huì)穿插的分析【蝸牛】的設(shè)計(jì)是如何體現(xiàn)和實(shí)現(xiàn)產(chǎn)品的定位，如何服務(wù)產(chǎn)品的目標(biāo)人群及核心功能。

產(chǎn)品信息及體驗(yàn)環(huán)境

• 產(chǎn)品版本：1.1.1
• 系統(tǒng)平臺(tái)：iOS 10.3
• 設(shè)備：iPhone 6Plus 64G

目標(biāo)用戶

休閑型閱讀用戶

使用場(chǎng)景：在日常的臨時(shí)性場(chǎng)景中無(wú)預(yù)期目的的閱讀

需求：在碎片化的時(shí)間里通過(guò)盡可能小的閱讀成本來(lái)打法無(wú)聊時(shí)間和自我提升

目的型閱讀用戶

使用場(chǎng)景：在特定的場(chǎng)景中有明確目的的閱讀

需求：閱讀也優(yōu)質(zhì)出版物，快速找到優(yōu)質(zhì)出版物，學(xué)習(xí)和自我提升

領(lǐng)讀人（大V）

使用場(chǎng)景：發(fā)布讀書動(dòng)態(tài)，整理推薦書單

需求：實(shí)現(xiàn)自我價(jià)值，并建立自我品牌

產(chǎn)品目標(biāo)

網(wǎng)易蝸牛讀書致力于為熱愛閱讀的用戶提供沉浸、簡(jiǎn)潔的電子閱讀體驗(yàn)，并希望與用戶一起構(gòu)建起立體化、全方位的移動(dòng)閱讀社區(qū)，滿足不同閱讀層次用戶的個(gè)性化閱讀需求。

核心功能

領(lǐng)讀/領(lǐng)讀人

利用KOL（關(guān)鍵意見領(lǐng)袖）的閱讀量、知名度和信任度打造精品書單、深度筆記和優(yōu)質(zhì)書摘幫助讀者高效找書，讓不同層次的用戶找到合適的領(lǐng)讀人。同時(shí)領(lǐng)讀人與讀者，讀者與讀者之間建立了交流閱讀心得，建立連接的機(jī)會(huì)。

書桌

直接顯示在讀的圖書（最多展示三本）和已加入書桌的合集。從讀者讀書的行為路徑和流程來(lái)說(shuō)，這一方式是最短的，能夠降低讀者的使用成本，快速開始閱讀的行為。

主要功能

分類

分類是讀者在使用【蝸?！繒r(shí)尋找書籍的最直觀的入口，與其他閱讀類APP的“商城”或者“書店”的形式類似?！胺诸悺边@個(gè)詞語(yǔ)，符合【蝸?！康暮诵倪\(yùn)營(yíng)模式，因?yàn)椤疚伵！恐械膱D書不是一次性購(gòu)買而是通過(guò)購(gòu)買閱讀時(shí)長(zhǎng)獲得，那就不適宜使用偏商業(yè)的詞語(yǔ)，同時(shí)“分類”也只管的通過(guò)字面意思告知讀者點(diǎn)擊后可能會(huì)看到的內(nèi)容。

早期【蝸?！縿偵暇€的時(shí)候，分類功能中僅僅是簡(jiǎn)單的羅列了互聯(lián)網(wǎng)、財(cái)新、科技等價(jià)值閱讀領(lǐng)域的分類?！疚伵！吭?.1.0版本迭代中加入在讀榜，和新書榜，目的也是為讀者尋找書籍提供更多的維度。

寫書評(píng)

【蝸?！康漠a(chǎn)品目標(biāo)之一是希望與用戶一起構(gòu)建立體化、全方位的移動(dòng)閱讀社區(qū)。領(lǐng)讀解決了社區(qū)呈現(xiàn)的問(wèn)題，那么寫書評(píng)則是社區(qū)創(chuàng)建的另外一個(gè)重要的問(wèn)題-書評(píng)的UGC。

寫書評(píng)為“用戶一起構(gòu)建起立體化、全方位的移動(dòng)閱讀社區(qū)”提供了入口，讓更多的普通讀者也有機(jī)會(huì)實(shí)現(xiàn)自我的價(jià)值，與其他讀者建立連接。

視覺觀感

當(dāng)我們?cè)诳吹揭粋€(gè)事物之后會(huì)產(chǎn)生感想和印象，這就是觀感。一個(gè)APP在沒有具體使用其功能和進(jìn)行深入探索之前，UI設(shè)計(jì)會(huì)給觀者帶來(lái)非常強(qiáng)烈的先入為主的感受，以下是【蝸牛】的核心功能界面和主要功能界面的視覺設(shè)計(jì)截圖。

簡(jiǎn)潔、優(yōu)雅

相比市面上其他移動(dòng)閱讀APP，【蝸?！靠梢哉f(shuō)是這閱讀類APP中的一股清流，整體風(fēng)格和諧，沒有視覺噪點(diǎn)的干擾，讓人更容易集中注意力，核心界面呈現(xiàn)出的簡(jiǎn)潔、優(yōu)雅的觀感。這一簡(jiǎn)潔、優(yōu)雅的視覺設(shè)計(jì)，為用戶提供了沉浸、簡(jiǎn)潔的用戶體驗(yàn)和視覺感受。

疏密有致

隨意點(diǎn)擊底部導(dǎo)航欄的四個(gè)選項(xiàng)，每一個(gè)選項(xiàng)對(duì)應(yīng)的目標(biāo)界面在設(shè)計(jì)布局上進(jìn)行了疏密有致的排序，如果按照從左到右的順序依次點(diǎn)擊，你能更加明顯的感受到界面布局的疏密變化，而這一點(diǎn)和中國(guó)畫以及西方速寫的“疏可走馬，密不透風(fēng)”有異曲同工之妙。這一疏密有致的界面布局同時(shí)是為用戶提供一種視覺的辨識(shí)度，用戶可以不用關(guān)注底部圖標(biāo)到底是什么圖形以及下面的功能標(biāo)題，通過(guò)這種疏密有致且明顯布局有差異的界面布局就能下意識(shí)的判斷出當(dāng)前所處的頁(yè)面，使用一段時(shí)間后完全可以做到無(wú)意識(shí)操作。

層級(jí)分明的信息

【蝸?！吭诤诵捻?yè)面的設(shè)計(jì)中都能看出設(shè)計(jì)師在處理信息設(shè)計(jì)的時(shí)候進(jìn)行了比較嚴(yán)格的信息層級(jí)劃分，每一個(gè)頁(yè)面的信息都按照功能的重點(diǎn)進(jìn)行了優(yōu)先級(jí)排序。例如，領(lǐng)讀優(yōu)先級(jí)最高的信息就是書評(píng)的標(biāo)題，而在書桌則是將書名作為信息的最高優(yōu)先級(jí)。明確的信息層級(jí)讓用戶在使用過(guò)程中，通過(guò)視覺比重的區(qū)別來(lái)判斷頁(yè)面中的信息層級(jí)，讓信息保持有序，進(jìn)一步的也為產(chǎn)品帶來(lái)了簡(jiǎn)潔的視覺觀感。

視覺設(shè)計(jì)

功能大于形式的性冷淡風(fēng)格

【蝸?！康恼w視覺風(fēng)格緊隨目前主流的“NormCore”風(fēng)格，也可以說(shuō)是叫做“性冷淡”風(fēng)格。這是一種泛指中性化、簡(jiǎn)約、舒適、單色調(diào)的，弱化品牌存在感的視覺風(fēng)格。NormCore存在的時(shí)間很長(zhǎng)，從知名度而言可以追溯到田中一光創(chuàng)建的MUJI，單純從時(shí)間維度上來(lái)說(shuō)能夠追溯更久遠(yuǎn)的時(shí)間，現(xiàn)在更是“極簡(jiǎn)主義”風(fēng)格的延續(xù)。

雖然我們不會(huì)去刻意的注意到一些視覺風(fēng)格，但某些風(fēng)格卻在我們的生活中無(wú)處不在，NormCore就是這樣。在這一股風(fēng)潮的推動(dòng)下，在UI領(lǐng)域大量的被實(shí)踐被使用。NormCore風(fēng)格在UI領(lǐng)域比較知名的代表是換個(gè)Logo都能引發(fā)業(yè)界廣泛討論的Instagram以及Airbnb（關(guān)于Instagram和Airbnb在UI領(lǐng)域引領(lǐng)的這一股風(fēng)潮本文不在贅述，有興趣的可以自行搜索相關(guān)的文章）。

UI設(shè)計(jì)領(lǐng)域從擬物化設(shè)計(jì)到扁平化設(shè)計(jì)一直走到現(xiàn)在的極簡(jiǎn)主義占據(jù)絕對(duì)位置，其進(jìn)化的原因在我看來(lái)除了視覺審美的變化以外，回歸功能，解決問(wèn)題的功能主義也是其中重要的原因之一。在這個(gè)越來(lái)越碎片化的時(shí)代，移動(dòng)應(yīng)用的使用場(chǎng)景也更加的不可預(yù)測(cè)和多變，在復(fù)雜環(huán)境中幫助用戶聚焦問(wèn)題，快速解決問(wèn)題，滿足自身的需求是各類移動(dòng)端產(chǎn)品關(guān)注的核心點(diǎn)了。

【蝸牛】在整體視覺設(shè)計(jì)中的配色方案、圖標(biāo)、界面設(shè)計(jì)及信息設(shè)計(jì)都體現(xiàn)出了NormCore設(shè)計(jì)的原則，正是這一整體視覺風(fēng)格為【蝸牛】的呈現(xiàn)出了“簡(jiǎn)潔、優(yōu)雅”的觀感，同時(shí)整個(gè)產(chǎn)品更加輕量化，結(jié)構(gòu)清晰，其核心的功能可見性更高，更易用。

HSB大法好（配色方案）

性冷淡的標(biāo)志色

【蝸?！康恼w視覺設(shè)計(jì)中，白色被大范圍使用，所以在本文的【蝸牛】配色方案中，將白色認(rèn)定為配色方案的主色。除了白色以外，黑色和灰色也是大量被應(yīng)用在Tab Bar圖標(biāo)的狀態(tài)切換色和Navigation Bar圖標(biāo)的配色。黑、白和灰三種顏色沒有太過(guò)于明顯的色彩傾向，既不屬于冷色系也不屬于暖色系，被稱為無(wú)色彩系，通常被稱為中性色。中性色的配色是NormCore風(fēng)格的標(biāo)志性配色。

與非NormCore風(fēng)格的配色方案相比，【蝸?！颗渖桨钢械妮o助色除了應(yīng)用于APP內(nèi)的召喚按鈕和核心操作的配色以外，也是整個(gè)產(chǎn)品的品牌色，應(yīng)用于Launcher的圖形設(shè)計(jì)。在大面積中性色的色彩應(yīng)用中，輔助色在某種程度上來(lái)說(shuō)也是主色。

Saturation的妙用

如果你在Behance或是Pinterest看過(guò)很多設(shè)計(jì)師做的Showcase（包裝案例），你會(huì)發(fā)現(xiàn)上圖中的配色方案中使用的色彩模式不是常見的RGB模式，而是HSB模式。RGB原本就是顯示器的色彩模式，UI設(shè)計(jì)師在完成配色方案的時(shí)候使用RGB模式無(wú)可厚非，早期工作中我也是一直使用RGB模式。在實(shí)踐和學(xué)習(xí)中，我逐漸發(fā)現(xiàn)了HSB模式的優(yōu)勢(shì)，在此處不展開說(shuō)，后期會(huì)專門有文章講解為什么是HSB大法好。

NormCore風(fēng)格在UI中通常都會(huì)使用有色彩傾向的顏色作為配色中的輔助色和強(qiáng)調(diào)色，在【蝸?！颗渖桨钢?，輔助色和強(qiáng)調(diào)色有一個(gè)共同之處，就在于他們的純度值。下面這張圖能夠更直觀的看出，這三個(gè)色彩的Saturation值（飽和度）非常近似。

Saturation的數(shù)值是0-100，當(dāng)顏色的Brightness（明度，數(shù)值越靠近100給人感覺越明亮，越靠近0，越暗）數(shù)值近似的時(shí)候，Saturation（飽和度）數(shù)值越靠近100，色彩越強(qiáng)烈艷麗，對(duì)視覺刺激是迅速的，醒目的效果，但不易于長(zhǎng)時(shí)間的觀看。越靠近0，色彩越灰，越不易察覺，當(dāng)數(shù)值為0的時(shí)候?yàn)榘咨?/p>

在【蝸牛】的配色方案中，強(qiáng)調(diào)色的飽和度為60，處于中間值；輔助色的飽和度色值為37，相對(duì)強(qiáng)調(diào)色的飽和度要低，原因在于輔助色使用的方式與強(qiáng)調(diào)色不同，下圖能夠更直觀的感受到為什么會(huì)不同。

即使飽和度較低的色彩，如果以填充色的方式使用，也會(huì)在視覺上造成強(qiáng)烈的視覺沖擊，尤其是在【蝸?！恳园咨鳛橹魃呐渖桨钢校@種視覺反差會(huì)更加強(qiáng)烈，所以【蝸?！康妮o助色使用的是飽和度更低的色彩。反觀強(qiáng)調(diào)色，多數(shù)使用在文本信息之中，不論中文還是英文給人的視覺感受都是線條感而非輪廓感，相對(duì)來(lái)說(shuō)使用較高飽和度的色彩不會(huì)導(dǎo)致強(qiáng)烈的視覺反差。較低的飽和度避免了在使用和閱讀的過(guò)程中給用戶帶來(lái)視覺疲勞，同時(shí)對(duì)沉浸式的閱讀體驗(yàn)更好。

Hues的搭配

在【蝸牛】的配色方案中除了明顯的相同的飽和度以外，另外一個(gè)特點(diǎn)在Hues（色相）的搭配上選擇了補(bǔ)色。與很多常見的補(bǔ)色配色方案不同，【蝸?！康难a(bǔ)色配色不是用在主色與輔助色上，而是用在了兩種強(qiáng)調(diào)色上。因?yàn)橹魃{(diào)為中性色，而中性色是不存在補(bǔ)色的，從上圖中可以看到，【蝸?！康膬蓚€(gè)強(qiáng)調(diào)色取用了輔助色兩側(cè)的色相，同時(shí)在色環(huán)相對(duì)的位置。

本文將（189，65，70）作為主強(qiáng)調(diào)色，將（7，60，100）作為輔助強(qiáng)調(diào)色是根據(jù)使用者兩個(gè)色彩的元素出現(xiàn)的方式是主動(dòng)出現(xiàn)還是被動(dòng)的用戶操作后出現(xiàn)來(lái)作區(qū)分。在圖2-3中可以明顯看出，主強(qiáng)調(diào)色是作為書籍作者、用戶昵稱的配色，是無(wú)需用戶主動(dòng)觸發(fā)的；相反輔助強(qiáng)調(diào)色是作為書籍閱讀進(jìn)度、APP內(nèi)部通知角標(biāo)的配色，均為由于用戶與APP進(jìn)行交互后才會(huì)觸發(fā)。

配色方案是APP視覺設(shè)計(jì)在色彩上的指導(dǎo)原則，雖然不可能涵蓋到所有UI元素的色彩使用，但在【蝸?！康慕缑嬷衅渌谂渖桨钢袥]有呈現(xiàn)的色彩也均是從兩個(gè)強(qiáng)調(diào)色和輔助色在色環(huán)上形成的夾角中取色，整體風(fēng)格依然保持偏黃色的感受。

Brightness的控制

【蝸?！颗渖桨钢械乃蓄伾?，除了Tab icon的inavtive狀態(tài)使用了低明度（27）以外，在Brightness（明度）上亦大多使用相同的數(shù)值：70-100。強(qiáng)調(diào)色及輔助色使用這個(gè)范圍內(nèi)的數(shù)值的配色給人帶來(lái)的感受是明亮的、清新的，有朝氣的感覺；Navigation Bar及Tool Bar中的操作按鈕使用這個(gè)范圍的數(shù)值能夠盡可能降低UI元素對(duì)用戶的干擾。

為閱讀，保護(hù)視力

誠(chéng)然，【蝸?！吭谂渖桨钢胁捎昧薔ormCore風(fēng)格作為指導(dǎo)原則，但并不是為了性冷淡而性冷淡，【蝸?！渴且豢铋喿x應(yīng)用，以中性色作為主色能夠?yàn)樽x者帶來(lái)近似閱讀紙質(zhì)書籍的感受，明亮但飽和度適中的強(qiáng)調(diào)色與記號(hào)筆的色彩如出一轍，讓讀者能夠?qū)⑹褂糜浱?hào)筆的心理感知和APP內(nèi)重要提醒元素的感知相結(jié)合；UI元素大量使用飽和度為中間數(shù)值的色彩保護(hù)了讀者的視力，同時(shí)亦是確保了UI元素的可辨識(shí)度，避免使讀者在使用過(guò)程中產(chǎn)生視覺疲憊。

圖標(biāo)

高辨識(shí)度核心操作圖標(biāo)

每個(gè)產(chǎn)品都有自己的核心功能和核心操作（Core Action），在【蝸?！窟@款A(yù)PP中的核心操作則是“做筆記”、“寫書評(píng)”和“寫評(píng)論”。統(tǒng)一的輔助色表明了這三個(gè)圖標(biāo)在整個(gè)APP內(nèi)是處于同一重要層級(jí)的操作。這三個(gè)圖標(biāo)所承載的功能都是編輯和輸入，所以都采用了“筆”這一視覺形象作為圖標(biāo)。

雖然使用了相同的視覺形象，但三者在具體的視覺樣式有很大的區(qū)別。三個(gè)圖標(biāo)，使用了三種不同的視覺樣式：

• 做筆記：輔助色背景上的極簡(jiǎn)白色填充圖標(biāo)
• 寫書評(píng)：輔助色填充的寫實(shí)圖標(biāo)
• 寫評(píng)論：輔助色描邊的極簡(jiǎn)圖標(biāo)

在統(tǒng)一的輔助色基礎(chǔ)上，核心操作圖標(biāo)依靠視覺樣式在辨識(shí)度上做出了明顯的區(qū)分

UI設(shè)計(jì)有一條原則，叫做一致性。粗略看來(lái)，【蝸?！康暮诵牟僮鲌D標(biāo)的設(shè)計(jì)并沒有嚴(yán)格遵循一致性的原則，但正是這種求同存異的感受，無(wú)形中幫助用戶建立了視覺記憶，在用戶使用的過(guò)程中，每個(gè)圖標(biāo)對(duì)應(yīng)的功能會(huì)在用戶腦海中逐漸鞏固，在后期的使用中用戶可以做到無(wú)意識(shí)操作，即需要執(zhí)行某項(xiàng)操作的時(shí)候無(wú)需過(guò)多思考圖標(biāo)的意義。

跳躍的視覺比重

與大多數(shù)APP一樣，【蝸?！渴窃趇OS和Android上運(yùn)行的跨平臺(tái)APP，但其Tab Bar Icons的設(shè)計(jì)與HIG和Material Design Guidelines兩大平臺(tái)設(shè)計(jì)規(guī)范要求不一致（此處并不是說(shuō)一定要嚴(yán)格按照規(guī)范進(jìn)行設(shè)計(jì)），下圖為iOS、Android設(shè)計(jì)規(guī)范建議的自定義圖標(biāo)和【蝸?！繄D標(biāo)對(duì)比

【蝸牛】的Tab Bar Icons在Active狀態(tài)下是圖標(biāo)的部分使用了狀態(tài)切換色填充，而不是整個(gè)圖標(biāo)都進(jìn)行了填充；同時(shí)Inactive狀態(tài)下的圖標(biāo)使用的是純色填充而不是Material Design建議的降低透明度或者iOS建議的使用1pt行程描邊的視覺樣式。

【蝸牛】的4個(gè)Tab Bar Icon在設(shè)計(jì)上采用的是圖形組合的方式，同時(shí)圖形的形狀和大小不一致，在Active狀態(tài)下就為圖標(biāo)創(chuàng)造不同的視覺比重提供了可能。盡管iOS和Android建議

在用戶通過(guò)Tab Bar探索APP的時(shí)候，Tab Bar Icons不同的視覺比重在用戶隨意點(diǎn)擊的時(shí)候會(huì)形成跳躍感，尤其在用戶的眼睛聚焦在Tab Bar的時(shí)候，這一感受會(huì)更加強(qiáng)烈。同時(shí)不同的視覺比重有利于建立視覺記憶，經(jīng)過(guò)一段時(shí)間的使用，即使用戶沒有聚焦于Tab Bar，也能夠根據(jù)視覺比重和圖形判斷出自己是否點(diǎn)擊了自己期望點(diǎn)擊的圖標(biāo)。

有序的圖標(biāo)庫(kù)

圖標(biāo)是GUI的重要組成部分，是功能的標(biāo)識(shí)，伴隨著計(jì)算機(jī)界面圖形化的發(fā)展和移動(dòng)應(yīng)用在GUI的發(fā)展，用戶對(duì)圖標(biāo)的辨識(shí)度已經(jīng)越來(lái)越高，圖標(biāo)的表意性越來(lái)越明確，也已經(jīng)形成了很多約定俗稱的圖標(biāo)，例如分享、編輯和返回等。

盡管圖標(biāo)是功能的標(biāo)識(shí)，但一個(gè)應(yīng)用即是再簡(jiǎn)單也是有核心功能和主要功能的區(qū)下圖為【蝸牛】的產(chǎn)品功能分級(jí)。

【蝸?！繄D標(biāo)庫(kù)中的圖標(biāo)不像大多數(shù)APP一樣使用相同的視覺樣式去設(shè)計(jì)，而是通過(guò)不同的視覺樣式對(duì)圖標(biāo)從視覺上進(jìn)行了優(yōu)先級(jí)的區(qū)別。

首先，通過(guò)輔助色和填充樣式將核心功能的視覺優(yōu)先級(jí)提升到最頂端，在【蝸牛】圖標(biāo)庫(kù)中與主要功能、其他功能的圖標(biāo)明確區(qū)分。

隨后，在相同的描邊樣式基礎(chǔ)上，使用同色像明度差異將主要功能和其他功能區(qū)分開。

• Tab Bar 0，0，27
• Navigation Bar 0，0，70

界面設(shè)計(jì)

在閱讀類APP中，就打開率、停留時(shí)長(zhǎng)而言除了閱讀界面以外，書籍詳情界面是整個(gè)APP中第二重要的頁(yè)面。在確定了配色和圖標(biāo)后，界面設(shè)計(jì)最為核心的就是信息設(shè)計(jì)和版式設(shè)計(jì)。

不論是UI設(shè)計(jì)還是視覺傳達(dá)設(shè)計(jì)亦或是其他使用了文字或圖形的設(shè)計(jì)，都是在傳達(dá)信息，而一個(gè)讓人覺得混亂、有不愉快的感受的頁(yè)面，除了視覺設(shè)計(jì)以外，信息設(shè)計(jì)的不合理，版式布局的不合理是其本質(zhì)的原因。在UI設(shè)計(jì)或者說(shuō)整個(gè)產(chǎn)品設(shè)計(jì)領(lǐng)域，UCD（以用戶為中心的設(shè)計(jì)）是大家經(jīng)常掛在嘴邊的詞語(yǔ)，在UCD設(shè)計(jì)中有一個(gè)比較淺顯的道理，那就是設(shè)計(jì)要符合用戶的心智模型。通常在使用某個(gè)功能或即將進(jìn)入某個(gè)界面之前，用戶已經(jīng)非?？焖俚母鶕?jù)過(guò)往的經(jīng)歷和自身的需求創(chuàng)建出了自己的心智模型。

下面列舉一個(gè)場(chǎng)景，講述用戶（以我個(gè)人為例）探索到書籍詳情頁(yè)的典型場(chǎng)景和心智模型：

在和一位朋友聊天的時(shí)候，他告訴我最近在看一本Google出的書，叫做《設(shè)計(jì)沖刺》，推薦我去看。復(fù)制了這本書的名字后，我打開【蝸?！吭谒阉骺蛑苯诱迟N書名，在展示的搜索結(jié)果中點(diǎn)擊打開《設(shè)計(jì)沖刺：谷歌風(fēng)投如何5天完成產(chǎn)品迭代》

【蝸?！吭谒阉鞯臅r(shí)候展示的信息只有兩個(gè)，第一個(gè)是書名，第二個(gè)是作者。在上面的這個(gè)場(chǎng)景中，這兩個(gè)信息我已經(jīng)接收到，短時(shí)間內(nèi)我是不會(huì)忘記，即使是在其他場(chǎng)景，如通過(guò)書評(píng)和排行榜看到這本書，我獲得的信息依然是這兩個(gè)。當(dāng)我點(diǎn)擊進(jìn)入書籍詳情的時(shí)候，我更多的期望能夠看到關(guān)于這本書的簡(jiǎn)介和其他人的評(píng)論，通過(guò)這兩個(gè)維度來(lái)幫助我決定是否開始閱讀這本書或者是加入書桌。

上圖中的書籍詳情界面整體風(fēng)格與領(lǐng)讀、書桌等界面風(fēng)格保持一致，整體界面由書籍封面、書籍相關(guān)信息和功能按鈕組成。書籍封面作為整個(gè)界面唯一的圖像，原本是應(yīng)該最容易吸引人的視覺注意力，但在進(jìn)入這個(gè)界面前我們已經(jīng)看到過(guò)書籍封面，在此時(shí)反而書籍封面是不太容易再吸引用戶注意了。而書籍簡(jiǎn)介正文在統(tǒng)一的字體、字號(hào)下，利用更小的字間距和長(zhǎng)文本的特性形成了“面”，在整個(gè)界面中提升了書籍簡(jiǎn)介正文的視覺比重。

上圖為同類型APP閱讀詳情頁(yè)對(duì)比圖（從左到右依次為【蝸?！俊径嗫础亢汀揪〇|閱讀】

與【蝸?！坎煌?，其他兩款A(yù)PP均為一次性付費(fèi)購(gòu)買書籍，尤其京東濃濃的電商基因在【京東閱讀】依然通過(guò)強(qiáng)烈的召喚按鈕體現(xiàn)的淋漓盡致。根據(jù)之前的使用場(chǎng)景，【多看】和【京東閱讀】在信息層級(jí)上均沒有強(qiáng)化書籍簡(jiǎn)介，更多的是在通過(guò)視覺的方式刺激用戶去購(gòu)買書籍。

交互設(shè)計(jì)

【蝸?！康慕换ピO(shè)計(jì)屬于比較中規(guī)中矩的，也是現(xiàn)在APP設(shè)計(jì)中比較常見的，在此就不過(guò)多就交互細(xì)節(jié)進(jìn)行分析，我主要從功能流程方面進(jìn)行了梳理。交互設(shè)計(jì)的核心目標(biāo)是解決用戶的需求，而一個(gè)成熟的產(chǎn)品會(huì)將用戶需求凝練為產(chǎn)品的目標(biāo)及定位當(dāng)中，眾多的需求通過(guò)凝練，到最后可能就是一兩句話。

“為熱愛閱讀的用戶提供沉浸、簡(jiǎn)潔的電子閱讀體驗(yàn)”

【蝸?！慨a(chǎn)品目標(biāo)中這簡(jiǎn)單的一句話則成為了【蝸?！拷换ピO(shè)計(jì)的指導(dǎo)性原則，在隨后三個(gè)交互流程案例中均體現(xiàn)了其以這個(gè)原則為指導(dǎo)的設(shè)計(jì)思路?！疚伵！吭趯ふ視?、閱讀書籍和寫書評(píng)等核心功能和流程的設(shè)計(jì)上非常簡(jiǎn)潔，通過(guò)盡可能短的任務(wù)完成路徑避免了過(guò)多的操作，過(guò)長(zhǎng)的路徑破壞了用戶沉浸閱讀的體驗(yàn)，同時(shí)也是符合用戶的心智模型和心理預(yù)期的。

尋找書籍

不同的用戶在尋找書籍的時(shí)候會(huì)有不同的心理預(yù)期和已經(jīng)習(xí)慣的尋找方式，在【蝸?！康挠脩羧巳褐?，休閑閱讀用戶往往是沒有明確搜索目標(biāo)的用戶，即使是目的型閱讀用戶也有可能會(huì)產(chǎn)生懶惰或者會(huì)在某些場(chǎng)景下不會(huì)去使用精準(zhǔn)的搜索，因?yàn)樗麄冏约阂矘O有可能不知道想閱讀什么書籍。

為幫助用戶高效找到優(yōu)質(zhì)書籍，【蝸?！客ㄟ^(guò)有無(wú)明確目標(biāo)做為判斷節(jié)點(diǎn)，設(shè)計(jì)了兩條任務(wù)路徑（流程）。對(duì)于沒有明確目標(biāo)的用戶，領(lǐng)讀中的書評(píng)可以讓用戶在無(wú)目的的探索中對(duì)某一本書產(chǎn)生興趣，進(jìn)而開始閱讀；對(duì)目的比較明確的用戶，分類和搜索的功能可以幫助用戶快速的尋找到書籍。

閱讀書籍

作為一款閱讀類APP，【蝸牛】將閱讀書籍的入口在核心功能頁(yè)面均提供了明顯的入口。當(dāng)用戶進(jìn)入到APP中，不論其目的如何，均可以快速的開始閱讀。

寫書評(píng)

結(jié)構(gòu)設(shè)計(jì)

信息架構(gòu)

【蝸?！康男畔⒓軜?gòu)將產(chǎn)品的核心功能直觀的展示給用戶，其功能的使用流程從信息架構(gòu)中也是路徑最短，在后面的交互設(shè)計(jì)中會(huì)從幾個(gè)例子簡(jiǎn)單展示其核心功能的使用流程?！疚伵！康男畔⒓軜?gòu)設(shè)計(jì)亦是建立在【蝸?！俊疤峁┏两?、簡(jiǎn)潔的電子閱讀體驗(yàn)”的產(chǎn)品定位上。

總結(jié)

形式追隨定位

“形式追隨功能”的觀點(diǎn)是普及度比較高的觀點(diǎn)，但在我仔細(xì)的體驗(yàn)和感受【蝸?！康倪^(guò)程中，尤其是將【蝸牛】所有的UI控件從視覺界面中剝離出來(lái)分析，再將其糅合，結(jié)合產(chǎn)品所宣傳的定位和愿景，我開始意識(shí)到，形式是追隨定位的。

產(chǎn)品核心的定位就決定了視覺風(fēng)格是需要體現(xiàn)其定位，并且是通過(guò)一致性的設(shè)計(jì)，在細(xì)微處體現(xiàn)產(chǎn)品的核心定位。

從產(chǎn)品的角度思考視覺設(shè)計(jì)

當(dāng)產(chǎn)品的核心定位確定，產(chǎn)品的功能亦是去實(shí)現(xiàn)其核心定位，最終的產(chǎn)出物就是界面設(shè)計(jì)。在設(shè)計(jì)的過(guò)程中，對(duì)產(chǎn)品信息架構(gòu)、交互設(shè)計(jì)以及產(chǎn)品定位的理解程度，最終會(huì)讓設(shè)計(jì)更出彩，更合理，更優(yōu)雅。

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