紅袖讀書做了一次全新的設(shè)計(jì)升級(jí)，數(shù)據(jù)上漲高達(dá)285%！

「紅袖讀書」2018年全新改版，打造更輕的閱讀體驗(yàn)，更適合女性閱讀的讀書APP。

一、項(xiàng)目背景

「紅袖讀書」APP 原名「紅袖添香」，是閱文旗下一款以女性為主的閱讀產(chǎn)品。作為一款自1999年開(kāi)始運(yùn)營(yíng)至今的老牌女性小說(shuō)閱讀平臺(tái)，在競(jìng)爭(zhēng)日趨激烈的網(wǎng)文環(huán)境下，今年迎來(lái)一次全新的品牌升級(jí)。

二、產(chǎn)品現(xiàn)狀

「紅袖讀書」APP 目前版本存在的問(wèn)題：

三、產(chǎn)品定位

原有產(chǎn)品定位為「適合30歲以上的白領(lǐng)女性閱讀的網(wǎng)文產(chǎn)品」，新產(chǎn)品定位更改為「適合以女性用戶為主閱讀群體的閱讀產(chǎn)品」。為了迎合更廣泛、更年輕用戶群的審美，新產(chǎn)品需要更年輕的視覺(jué)表現(xiàn)。

四、品牌形象

紅袖讀書的品牌形象從1999年創(chuàng)立以來(lái)一直沒(méi)有升級(jí)過(guò)，現(xiàn)有的形象僅在 logo 上出現(xiàn)，未延伸到整個(gè)產(chǎn)品的 UI設(shè)計(jì)中。因圖案過(guò)于抽象，對(duì)品牌形象進(jìn)一步的延伸和 IP化都有一定的阻礙。

五、閱讀體驗(yàn)

原產(chǎn)品的閱讀體驗(yàn)一直是軟肋，一方面缺乏聽(tīng)書功能，流失了一部分有聽(tīng)書需求的老用戶；一方面缺乏適合夜間看書的夜間模式，在現(xiàn)階段越來(lái)越流行「全局夜間模式」的大環(huán)境下，沒(méi)有夜間模式即失去了閱讀產(chǎn)品的競(jìng)爭(zhēng)力。

六、新版目標(biāo)

由此，我們確定了這次的改版目標(biāo)：

• 提升品牌形象，使整體品牌更具象化、年輕化，更輕量。
• 提升閱讀體驗(yàn)，完善聽(tīng)書功能，一鍵切換全局夜間模式，提升夜間閱讀品質(zhì)。

七、LOGO改版

舊版app logo 沿用了 web版紅袖添香的 logo，形象取自「袖」字，因年代久遠(yuǎn)，現(xiàn)在這個(gè)形象看來(lái)已經(jīng)有些「過(guò)時(shí)」，也非為移動(dòng)端的特性量身定做。

新版設(shè)計(jì)目標(biāo)首先是符合移動(dòng)端的設(shè)計(jì)標(biāo)準(zhǔn)，再做出具有更高延展性、可讀性，更具象的 logo。

鑒于以上目標(biāo)，我們一開(kāi)始就敲定了用「文字」或「吉祥物」作為 logo 主體的方案。

方案1：以宋體字為基礎(chǔ)的「紅袖」字體變形，加入古代女子常繪于額頭的花鈿作為點(diǎn)睛之筆，延長(zhǎng)「袖」字的筆畫與「紅」字相接，一是從視覺(jué)上表現(xiàn)「袖」的含義，二是使兩個(gè)字連接形成一個(gè)整體的形狀，合二為一成為一個(gè)完整的 logo。

問(wèn)題：白色的底放在同類產(chǎn)品中不夠突出，因字型較復(fù)雜，筆劃又比較細(xì)，縮小后放在移動(dòng)產(chǎn)品上有辨識(shí)度的問(wèn)題。

方案2：以中國(guó)畫中常表現(xiàn)的「花、鳥、山、水」中的「鳥」作為吉祥物，應(yīng)用在 logo 上。不以傳統(tǒng)的水墨形式展現(xiàn)，而使用簡(jiǎn)單的剪影和漸變來(lái)表現(xiàn)，符合當(dāng)下移動(dòng)端 logo 的流行趨勢(shì)。

問(wèn)題：用吉祥物來(lái)表現(xiàn)的這種形式有些過(guò)于年輕，而且是四個(gè)方案中與主題相距最遠(yuǎn)的。

方案3：在方案1基礎(chǔ)上修改的方案。做方案1的時(shí)候就考慮過(guò)這樣的改變是否與之前的 logo「差別過(guò)大」，而導(dǎo)致上線后用戶的強(qiáng)烈反彈。所以在適當(dāng)調(diào)整了文字與畫面的比例之后，保留原 logo 的紅底方案，形成了這一稿。

問(wèn)題：為了保留原始 logo 的形式，失去了一部分古典韻味。

方案4：以隸書為基礎(chǔ)的「紅袖」字體變形，這個(gè)方案的意圖是運(yùn)用更多的字型來(lái)表現(xiàn)「紅袖」二字，此方案并未過(guò)多的加工字體，而是在文字下面增加了書本的剪影達(dá)到點(diǎn)題效果，是4個(gè)方案中最直白的表現(xiàn)方式。

問(wèn)題：展現(xiàn)方式過(guò)于直白，隸書字型寬扁，與下面書的形狀組合在一起顯得有些散，不夠整體。

討論后首先淘汰掉了「吉祥物」的方案，在確定使用「文字」的方案后，對(duì)比了幾個(gè)方案的優(yōu)缺點(diǎn)，最終在方案3的基礎(chǔ)上調(diào)整了字重，形成了最終方案：

八、視覺(jué)規(guī)范

1. 字體

新版本在較多位置使用了思源宋體。這款開(kāi)源字體在字型設(shè)計(jì)上的出色表現(xiàn)力已經(jīng)在業(yè)內(nèi)獲得了廣泛認(rèn)可，在對(duì)比了不同公司出品的幾款宋體后，思源宋體的表現(xiàn)力也依然不輸給這些收費(fèi)字體公司。因此在字型沒(méi)有太大問(wèn)題的前提下再?gòu)氖褂贸杀旧峡剂浚罱K選擇了思源宋體。

漢儀旗黑是一款制作非常完善的 GBK 字庫(kù)，與 iOS 的蘋方相比，字型偏扁，但擁有豐富的自重，我們選擇其中50s的自重作為 app 全局字體使用。

2. 顏色

舊版本使用的主題色紅色飽和度非常高，雖然很抓人眼球，但在需要大面積使用主題色的場(chǎng)景下有一定的局限性，因?yàn)殚喿x類產(chǎn)品以文字為主，圖片很少，并非像電商類產(chǎn)品一樣需要用強(qiáng)烈色彩對(duì)比的圖片吸引用戶點(diǎn)擊，在大部分場(chǎng)景都是文字的頁(yè)面上，少量的高亮色即可吸引用戶的注意，而一旦出現(xiàn)需要大面積使用主題色的情況，高飽和度的顏色缺少襯托主體，便會(huì)非常刺眼。

考慮到以上因素，我們對(duì)顏色做出以下優(yōu)化：

• 仍然保留紅色為品牌主色調(diào)，符合女性用戶偏好；
• 適當(dāng)降低紅色飽和度，把原本接近于正紅色的顏色向紫色偏移，減輕大面積的高飽和度色調(diào)對(duì)用戶的刺激；
• 在需要大面積使用主題色的地方，使用紅色漸變色降低過(guò)于強(qiáng)烈的視覺(jué)沖擊力。

3. 圖標(biāo)

「紅袖讀書」這個(gè)名字原本取自于詩(shī)句「紅袖添香夜讀書」，在很大程度上，這個(gè)名字賦予了整個(gè)產(chǎn)品歷史的厚重感，雖然是現(xiàn)代網(wǎng)文閱讀平臺(tái)卻也有古風(fēng)的感覺(jué)。

因此在設(shè)計(jì)新版圖標(biāo)時(shí)，也希望可以加入一些中國(guó)傳統(tǒng)元素，以此來(lái)「點(diǎn)題」。但如果全局都向古風(fēng)靠攏的話又會(huì)顯得太過(guò)于個(gè)性，不符合產(chǎn)品需要面向各個(gè)階段不同年齡層的女性用戶的初衷，所以最后僅在書城首屏關(guān)鍵位置保留了四個(gè)這樣的 icon。

九、體驗(yàn)優(yōu)化

1. 統(tǒng)一 App Loading 樣式

書城頂部導(dǎo)航采用風(fēng)推的設(shè)計(jì)樣式，旨在露出更多內(nèi)容，更有效的命中目標(biāo)用戶。為了更流暢的展示每個(gè)版塊，在各個(gè)欄目間切換時(shí)增加整屏 loading。這個(gè) loading 樣式也同時(shí)應(yīng)用于書籍加載等需要較長(zhǎng)時(shí)間加載的頁(yè)面中。

2. 贈(zèng)送禮物

目前的版本中存在一些表意不太恰當(dāng)?shù)亩Y物，如「刀片」。改版時(shí)去掉了這些表意不好的禮物，同時(shí)升級(jí)禮物樣式，增加質(zhì)感，提升品質(zhì)。在用戶打賞過(guò)程中適當(dāng)加入動(dòng)效，更有趣味性以及消費(fèi)成就感。

3. 一鍵切換，全局夜間模式

不僅是在閱讀頁(yè)，為了更好的提升夜間閱讀體驗(yàn)，本次版本升級(jí)加入了全局夜間模式，從此再也不用擔(dān)心夜間閱讀「亮瞎眼」。

4. 不一樣的閱讀工具欄

把所有操作集中在頁(yè)面底部的閱讀工具欄，更適用于現(xiàn)在越來(lái)越大的屏幕操作習(xí)慣；功能按鈕按照使用頻率從高到低排列，低頻使用的功能向二三級(jí)頁(yè)面依次排列。

5. 如同音樂(lè)播放器一般的TTS聽(tīng)書體驗(yàn)

可以自由跳進(jìn)跳出的聽(tīng)書頁(yè)面，在聽(tīng)書的同時(shí)還可以瀏覽其他頁(yè)面；聽(tīng)書過(guò)程中自由調(diào)節(jié)章節(jié)進(jìn)度，一秒跳過(guò)不喜歡或已經(jīng)聽(tīng)過(guò)的章節(jié)。

十、品牌形象的延伸

為了使整體品牌形象更具象化，新版本首次加入了吉祥物「鳥」。

鳥在中國(guó)傳統(tǒng)文化中，經(jīng)常被運(yùn)用到詩(shī)詞歌賦及繪畫的創(chuàng)作中。在二次元風(fēng)靡互聯(lián)網(wǎng)的當(dāng)下，依然有它的一席之地，而且換了一個(gè)更加萌萌噠的名字——「肥啾」。

「肥啾」其實(shí)指代的是鳥類中一種叫做「銀喉長(zhǎng)尾山雀」的品種，由于其外型蠢萌深受二次元?jiǎng)?chuàng)作者的喜愛(ài)。本次改版的目標(biāo)之一是「更加年輕的用戶群」，而當(dāng)下也有越來(lái)越多的二次元?jiǎng)?chuàng)作者加入同人或原創(chuàng)小說(shuō)的創(chuàng)作行列，因此在品牌中加入含有「二次元」標(biāo)簽的形象「肥啾」我們認(rèn)為是十分恰當(dāng)?shù)摹?/p>

從 IP 化的角度考慮，未來(lái)「肥啾」的形象也可以朝擬人化方向發(fā)展，形成一套既包含動(dòng)物形象又有普通和 Q版人物形象的品牌。

1. 更多頁(yè)面展示

2. 上線后用戶反饋

改版對(duì)于設(shè)計(jì)師來(lái)說(shuō)既是機(jī)遇又是挑戰(zhàn)。新的設(shè)計(jì)方案可能會(huì)讓用戶眼前一亮，但也可能讓部分老用戶感到不適，甚至出現(xiàn)抵觸心理。在新版本上線之前我們已經(jīng)有了這樣的心理預(yù)期，因此在新版本上線之后，看到有來(lái)自老用戶的吐槽，我們主要是以安撫情緒為主，針對(duì)老用戶贈(zèng)送一些禮物作為補(bǔ)償，在產(chǎn)品上沒(méi)有急于去修改，結(jié)合設(shè)計(jì)目標(biāo)做全局判斷，有影響到用戶體驗(yàn)的地方我們及時(shí)迭代優(yōu)化。

隨著時(shí)間推移，新用戶持續(xù)不斷上漲，我們收到了更多來(lái)自新用戶的滿意評(píng)價(jià)，雖然產(chǎn)品依然存在一些問(wèn)題，但對(duì)視覺(jué)上的評(píng)價(jià)已經(jīng)開(kāi)始向正面發(fā)展，最近已經(jīng)不再會(huì)收到來(lái)自用戶關(guān)于視覺(jué)上的負(fù)面反饋了，原本預(yù)計(jì)會(huì)持續(xù)不斷收到負(fù)面評(píng)價(jià)的結(jié)果并未真的發(fā)生。從長(zhǎng)期發(fā)展來(lái)看，這次的改版給產(chǎn)品帶來(lái)了遠(yuǎn)高于預(yù)期的增值。

新版本上線后從9月份至11月份的數(shù)據(jù)漲幅：

DAU 上漲率75.3%，Android 上漲率36%，iOS 上漲率285%。

3. 部分用戶反饋

歡迎關(guān)注「閱文體驗(yàn)設(shè)計(jì)YUX」公眾號(hào)：

「讀書APP的細(xì)節(jié)設(shè)計(jì)」

• 《上億人使用的起點(diǎn)讀書APP，背后的改版設(shè)計(jì)實(shí)錄！》
• 《超過(guò)5000字的產(chǎn)品筆記，揭秘微信讀書是如何讓人上癮的！》
• 《那些特別好用的App是如何設(shè)計(jì)的？首期揭秘：網(wǎng)易蝸牛讀書》