起點讀書APP福利中心設計總結

Sponsor

起點讀書的激勵視頻（用戶通過看視頻廣告獲得章節卡等獎勵）大多散點投放于閱讀頁中的訂閱和章末場景，而在該場景中，觀看視頻廣告可能會中斷用戶的連續閱讀體驗，且入口不穩定，還容易對非目標用戶造成打擾。

福利中心是激勵視頻策略的延伸，希望聚合散落的視頻廣告福利，承接不愿付費但有閱讀訴求的用戶，使其長期保持在平臺活躍，并逐漸向付費轉化。

設計目標

1、激勵用戶觀看視頻廣告獲得福利長期保持活躍。

2、強化頂部氛圍感，通過白澤的情緒變化和活力值水晶球為用戶提供可視化的看視頻反饋，提高用戶對看廣告獲得收益的認知，幫助用戶快速完成任務獲得免費看書的機會。

3、保證差異和識別度，與簽到頁和閱讀包視覺進行一定區分，但整體保持在同一視覺風格中。

01 交互設計

為了激勵用戶觀看視頻廣告獲得福利，長期保持活躍，本項目基于兩條策略展開設計：

一、價值感知：實質利益驅動；

二、情感激勵：白澤活力值機制。

價值感知：實質利益驅動

福利中心希望承接不愿付費但有閱讀訴求的用戶，因此，需要通過實質利益驅動用戶看視頻，讓用戶持續感知到福利中心的價值。在設計上，將全部可得獎勵展示出來，進行排列組合，利用直接利益點觸發用戶自主看視頻廣告獲得福利的行為，在此過程中建立進度反饋和獎勵反饋持續驅動用戶。此外，頂部通過白澤氣泡文案提示用戶在福利中心累計所得獎勵，使用戶產生價值認同感。

用戶領取福利

情感激勵：白澤活力值機制

福利中心建立了一個白澤活力值玩法機制，以培養和激勵用戶看視頻廣告獲得福利的行為習慣。具體而言，活力值表示用戶做任務的活躍程度，滿值為100，一天未做任務降10點活力值，做1次任務恢復10點，活力值降至0后福利頁會鎖定，需看視頻才能解鎖。

白澤會根據不同活力值區間表現出不同的形象狀態和氣泡文案：80-100，對應愉快的白澤；50-79，對應抓狂的白澤；0-49，對應難過的白澤；通過情感化設計對用戶進行激勵。

活力值概念設定

02 視覺設計

福利中心整體設計關注點在氛圍的強化，以及引導用戶進行進行看視頻得福利的操作，培養用戶心智。

活力值可視化

活力值是一個抽象的概念，將活力值概念可視化，活力值體現為用戶看視頻和做任務的頻率，通過白澤的表情變化直觀體現出來，鼓勵用戶多做任務獲得更多獎勵。

數值轉化為表情

獎勵反饋

• 每當用戶看完廣告，白澤會反饋一個驚喜的表情，并在對應可領獎勵位置播放發光背景動效，提示用戶進行獎勵領取。
• 其次活力值水晶球會在白澤表示驚喜的同時進行數值的滾動，水晶球內的波浪也會隨之滾動。
• 用戶看完廣告并領取獎勵后，會給予蓋章的反饋，蓋章形式也經過多輪的推敲，起初選用文字版蓋章，因為該區域內容比較密集，再加上“已領取”顯然會更加擁擠，于是簡化為對鉤標識，整體會更和諧。

領取獎勵反饋

動效實現

蘋果早期使用的CoreAnimation動畫模型是由?CASpring彈簧動畫?構成的，可以在動畫進行時停止、反轉或重新定位，隨后蘋果將其基于duration和dampingRatio封裝到UIKit中，并將response和dampingRatio封裝到SwiftUI中，旨在實現對物理參數的真正控制，同時讓開發者和設計者能夠直觀地感受參數調整的結果。Figma的動效追隨了蘋果的傳統，設置也非常巧妙，使用可視化圖表，直接上手拖拽，十分優雅。

Figma 中的動畫是三種基礎設置的混合：timing（定時），curve（曲線），parameter（參數）；

Figma中的彈簧動畫可以作用于每個獨立的元素，只要將命名和層級位置保持一致即可完成過渡。

此處涉及到的活力值數值變化、白澤的表情切換以及白澤動效很多都可以通過figma自身的?prototype?來實現，這樣通過兩個簡單的圖形切換就可以獲得理想的視差效果，并提升頁面的流暢度。

白澤表情反饋 – 愉快

白澤表情反饋 – 難過

水晶球的數值變換通過數字的由下而上滾動所得，水晶球內的波浪也會隨之起伏，并伴隨熒光隨機躍動，這些效果都可以利用figma自身的彈簧動效實現的，如下圖的水晶球內的波浪起伏，是通過下圖中的組件切換和內部元素水平位移實現。

每個元素自身都可以完成一段動效，且是獨立進行的，最后整合成完整的一段動效，無論想要修改哪里都可以隨時進行，開發同學也可以對參數一目了然。

使用figma自身的動效工具相較于AE等傳統工具優勢主要有三點：

1. 最重大的意義不在于效果有多彈而在于可以將手勢交互的速度引入變量，使屏幕內的動畫表現和屏幕外的物理操作建立連接，形成生動的效果。
2. figma自身的動效更接近UI的需求，不會出現特異的運動曲線，為app的整體動效建立了良好的一致性基礎。
3. 在demo演示中可以隨時修改動效，只需要將動效進行組件化，就可以在demo中隨意選擇合適的動效方案。便捷性和自由度都是所有工具中最高的。

03 場景拓展

福利中心是一個聚散為整的項目，將散零散的廣告視頻整合在一起不但可以減少對用戶閱讀體驗的破壞，還可以成為一個用戶增長工具。

原來：視頻廣告散點投放在端內各個角落，雖然可以幫助用戶應急獲得一些免費閱讀時長，但是非常打擾閱讀體驗，且功能上十分單一，既無樂趣也無新意。

現在：視頻廣告聚合為一個福利中心，降低用戶獲取免費閱讀的成本，想要獲得免費閱讀的用戶可以直接來這里做任務，同時福利中心可以為大型活動承接新用戶，將初次使用起點讀書的用戶留下來，逐漸培養閱讀習慣，轉化為付費用戶。

04 思考&總結

• 氛圍感營造：引導用戶進行某件事的完成關鍵在于氛圍感的營造，通過營造良好的氛圍感，可以吸引用戶的注意力，并且讓用戶感覺舒適、愉悅，從而促進用戶完成任務。用戶來到福利中心的情緒和目標比較一致，大都是為了盡快獲得免費讀書的機會。因此背景選用歡快的橙色主基調，通過白澤的表情和對話來幫助用戶了解福利中心的機制和任務目標等，從而幫助用戶快速做出決策。
• 抽象概念可視化呈現：這里的活力值對用戶來說是比較抽象陌生的，我們通過兩個階段的可視化來幫助用戶進行理解，首先是通過活力水晶的動效表現活力值的數值變化，其次通過白澤的表情情緒和對話框進一步傳達數值所對應的結果。
• 交互細節：在福利中心設置了很多交互細節，例如每次進入頁面水晶球會刷新數值，并播放一段動畫，以此提醒用戶當前的活力值；在看視頻的任務列表模塊之間設置了箭頭，指示任務走向，并在用戶完成任務可領取獎勵時加上了背景動效，引導用戶進行獎勵領??；在用戶領完獎勵后會通過白澤的驚喜表情給予反饋，這些交互細節雖然會增加頁面的復雜度，但會使用戶在完成任務的過程中獲得更多樂趣。

參與名單

交互設計：阿哲
視覺設計：佳偉
來源：閱文體驗設計YUX（ID：YUX_design）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。