「紅袖讀書」2018年全新改版，打造更輕的閱讀體驗，更適合女性閱讀的讀書APP。
一、項目背景
「紅袖讀書」APP 原名「紅袖添香」，是閱文旗下一款以女性為主的閱讀產品。作為一款自1999年開始運營至今的老牌女性小說閱讀平臺，在競爭日趨激烈的網文環境下，今年迎來一次全新的品牌升級。
二、產品現狀
「紅袖讀書」APP 目前版本存在的問題：
三、產品定位
原有產品定位為「適合30歲以上的白領女性閱讀的網文產品」，新產品定位更改為「適合以女性用戶為主閱讀群體的閱讀產品」。為了迎合更廣泛、更年輕用戶群的審美，新產品需要更年輕的視覺表現。
四、品牌形象
紅袖讀書的品牌形象從1999年創立以來一直沒有升級過，現有的形象僅在 logo 上出現，未延伸到整個產品的 UI設計中。因圖案過于抽象，對品牌形象進一步的延伸和 IP化都有一定的阻礙。
五、閱讀體驗
原產品的閱讀體驗一直是軟肋，一方面缺乏聽書功能，流失了一部分有聽書需求的老用戶；一方面缺乏適合夜間看書的夜間模式，在現階段越來越流行「全局夜間模式」的大環境下，沒有夜間模式即失去了閱讀產品的競爭力。
六、新版目標
由此，我們確定了這次的改版目標：
- 提升品牌形象，使整體品牌更具象化、年輕化，更輕量。
- 提升閱讀體驗，完善聽書功能，一鍵切換全局夜間模式，提升夜間閱讀品質。
七、LOGO改版
舊版app logo 沿用了 web版紅袖添香的 logo，形象取自「袖」字，因年代久遠，現在這個形象看來已經有些「過時」，也非為移動端的特性量身定做。
新版設計目標首先是符合移動端的設計標準，再做出具有更高延展性、可讀性，更具象的 logo。
鑒于以上目標，我們一開始就敲定了用「文字」或「吉祥物」作為 logo 主體的方案。
方案1：以宋體字為基礎的「紅袖」字體變形，加入古代女子常繪于額頭的花鈿作為點睛之筆，延長「袖」字的筆畫與「紅」字相接，一是從視覺上表現「袖」的含義，二是使兩個字連接形成一個整體的形狀，合二為一成為一個完整的 logo。
問題：白色的底放在同類產品中不夠突出，因字型較復雜，筆劃又比較細，縮小后放在移動產品上有辨識度的問題。
方案2：以中國畫中常表現的「花、鳥、山、水」中的「鳥」作為吉祥物，應用在 logo 上。不以傳統的水墨形式展現，而使用簡單的剪影和漸變來表現，符合當下移動端 logo 的流行趨勢。
問題：用吉祥物來表現的這種形式有些過于年輕，而且是四個方案中與主題相距最遠的。
方案3：在方案1基礎上修改的方案。做方案1的時候就考慮過這樣的改變是否與之前的 logo「差別過大」，而導致上線后用戶的強烈反彈。所以在適當調整了文字與畫面的比例之后，保留原 logo 的紅底方案，形成了這一稿。
問題：為了保留原始 logo 的形式，失去了一部分古典韻味。
方案4：以隸書為基礎的「紅袖」字體變形，這個方案的意圖是運用更多的字型來表現「紅袖」二字，此方案并未過多的加工字體，而是在文字下面增加了書本的剪影達到點題效果，是4個方案中最直白的表現方式。
問題：展現方式過于直白，隸書字型寬扁，與下面書的形狀組合在一起顯得有些散，不夠整體。
討論后首先淘汰掉了「吉祥物」的方案，在確定使用「文字」的方案后，對比了幾個方案的優缺點，最終在方案3的基礎上調整了字重，形成了最終方案：
八、視覺規范
1. 字體
新版本在較多位置使用了思源宋體。這款開源字體在字型設計上的出色表現力已經在業內獲得了廣泛認可，在對比了不同公司出品的幾款宋體后，思源宋體的表現力也依然不輸給這些收費字體公司。因此在字型沒有太大問題的前提下再從使用成本上考量，最終選擇了思源宋體。
漢儀旗黑是一款制作非常完善的 GBK 字庫，與 iOS 的蘋方相比，字型偏扁，但擁有豐富的自重，我們選擇其中50s的自重作為 app 全局字體使用。
2. 顏色
舊版本使用的主題色紅色飽和度非常高，雖然很抓人眼球，但在需要大面積使用主題色的場景下有一定的局限性，因為閱讀類產品以文字為主，圖片很少，并非像電商類產品一樣需要用強烈色彩對比的圖片吸引用戶點擊，在大部分場景都是文字的頁面上，少量的高亮色即可吸引用戶的注意，而一旦出現需要大面積使用主題色的情況，高飽和度的顏色缺少襯托主體，便會非常刺眼。
考慮到以上因素，我們對顏色做出以下優化：
- 仍然保留紅色為品牌主色調，符合女性用戶偏好；
- 適當降低紅色飽和度，把原本接近于正紅色的顏色向紫色偏移，減輕大面積的高飽和度色調對用戶的刺激；
- 在需要大面積使用主題色的地方，使用紅色漸變色降低過于強烈的視覺沖擊力。
3. 圖標
「紅袖讀書」這個名字原本取自于詩句「紅袖添香夜讀書」，在很大程度上，這個名字賦予了整個產品歷史的厚重感，雖然是現代網文閱讀平臺卻也有古風的感覺。
因此在設計新版圖標時，也希望可以加入一些中國傳統元素，以此來「點題」。但如果全局都向古風靠攏的話又會顯得太過于個性，不符合產品需要面向各個階段不同年齡層的女性用戶的初衷，所以最后僅在書城首屏關鍵位置保留了四個這樣的 icon。
九、體驗優化
1. 統一 App Loading 樣式
書城頂部導航采用風推的設計樣式，旨在露出更多內容，更有效的命中目標用戶。為了更流暢的展示每個版塊，在各個欄目間切換時增加整屏 loading。這個 loading 樣式也同時應用于書籍加載等需要較長時間加載的頁面中。
2. 贈送禮物
目前的版本中存在一些表意不太恰當的禮物，如「刀片」。改版時去掉了這些表意不好的禮物，同時升級禮物樣式，增加質感，提升品質。在用戶打賞過程中適當加入動效，更有趣味性以及消費成就感。
3. 一鍵切換，全局夜間模式
不僅是在閱讀頁，為了更好的提升夜間閱讀體驗，本次版本升級加入了全局夜間模式，從此再也不用擔心夜間閱讀「亮瞎眼」。
4. 不一樣的閱讀工具欄
把所有操作集中在頁面底部的閱讀工具欄，更適用于現在越來越大的屏幕操作習慣；功能按鈕按照使用頻率從高到低排列，低頻使用的功能向二三級頁面依次排列。
5. 如同音樂播放器一般的TTS聽書體驗
可以自由跳進跳出的聽書頁面，在聽書的同時還可以瀏覽其他頁面；聽書過程中自由調節章節進度，一秒跳過不喜歡或已經聽過的章節。
十、品牌形象的延伸
為了使整體品牌形象更具象化，新版本首次加入了吉祥物「鳥」。
鳥在中國傳統文化中，經常被運用到詩詞歌賦及繪畫的創作中。在二次元風靡互聯網的當下，依然有它的一席之地，而且換了一個更加萌萌噠的名字——「肥啾」。
「肥啾」其實指代的是鳥類中一種叫做「銀喉長尾山雀」的品種，由于其外型蠢萌深受二次元創作者的喜愛。本次改版的目標之一是「更加年輕的用戶群」，而當下也有越來越多的二次元創作者加入同人或原創小說的創作行列，因此在品牌中加入含有「二次元」標簽的形象「肥啾」我們認為是十分恰當的。
從 IP 化的角度考慮，未來「肥啾」的形象也可以朝擬人化方向發展，形成一套既包含動物形象又有普通和 Q版人物形象的品牌。
1. 更多頁面展示
2. 上線后用戶反饋
改版對于設計師來說既是機遇又是挑戰。新的設計方案可能會讓用戶眼前一亮，但也可能讓部分老用戶感到不適，甚至出現抵觸心理。在新版本上線之前我們已經有了這樣的心理預期，因此在新版本上線之后，看到有來自老用戶的吐槽，我們主要是以安撫情緒為主，針對老用戶贈送一些禮物作為補償，在產品上沒有急于去修改，結合設計目標做全局判斷，有影響到用戶體驗的地方我們及時迭代優化。
隨著時間推移，新用戶持續不斷上漲，我們收到了更多來自新用戶的滿意評價，雖然產品依然存在一些問題，但對視覺上的評價已經開始向正面發展，最近已經不再會收到來自用戶關于視覺上的負面反饋了，原本預計會持續不斷收到負面評價的結果并未真的發生。從長期發展來看，這次的改版給產品帶來了遠高于預期的增值。
新版本上線后從9月份至11月份的數據漲幅：
DAU 上漲率75.3%，Android 上漲率36%，iOS 上漲率285%。
3. 部分用戶反饋
歡迎關注「閱文體驗設計YUX」公眾號：
「讀書APP的細節設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
MJ+SD智能設計
已累計誕生 772 位幸運星
發表評論 為下方 27 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓