百度智能小程序-減減鴨
“減減鴨”是一款為用戶分析壓力情況，并幫助用戶調(diào)節(jié)心情、減輕壓力的工具類(lèi)小程序。它運(yùn)用小程序組件和小程序設(shè)計(jì)原則，創(chuàng)造了輕松愉悅且易于理解的體驗(yàn)風(fēng)格。
本文將從信息架構(gòu)、閱讀體驗(yàn)、色彩系統(tǒng)、LOGO 設(shè)計(jì)、動(dòng)效設(shè)計(jì) 5 個(gè)層面介紹這款智能小程序的設(shè)計(jì)過(guò)程。
信息架構(gòu)
作為輕量型工具應(yīng)用，減減鴨功能簡(jiǎn)潔、結(jié)構(gòu)扁平，因此選用 1 字型的信息架構(gòu)，將三個(gè)功能的入口排布在首?首屏，用戶可通過(guò)最短路徑快速觸達(dá)內(nèi)容；在用戶進(jìn)入功能并結(jié)束使用流程后，減減鴨界面提供直返首頁(yè)、以及進(jìn)入其他功能的快捷通道，形成路徑閉環(huán)。
1. 1字形架構(gòu) 1. 減減鴨首頁(yè)
1. 首頁(yè) 1. 功能模塊
閱讀體驗(yàn)
首頁(yè)布局
減減鴨首頁(yè)沒(méi)有延用移動(dòng)端產(chǎn)品首頁(yè)傳統(tǒng)的“banner大圖& 功能列表”模式，采用了更新穎的布局方式：
突出主體：使用插畫(huà)風(fēng)格頭圖與同色背景，增強(qiáng)背景區(qū)域整體感，讓用戶視線聚焦在前層的主體內(nèi)容上；
明確層次：壓力指數(shù)測(cè)試功能入口使用強(qiáng)化按鈕展示（1）。按鈕嵌入在插畫(huà)頭圖中，高明度的配色使按鈕與背景對(duì)比鮮明，層次清晰；
充分傳達(dá)：手速減壓與放松練習(xí)兩創(chuàng)新功能入口，使用面積較大的卡片展示（2），以承載功能介紹文案及配圖。
功能模塊布局
減減鴨頁(yè)面內(nèi)容層次清晰，從面積、色彩對(duì)比度等方面突出用戶需關(guān)注的功能操作區(qū)，并在部分頁(yè)面加以動(dòng)效指引，用戶無(wú)需探索，上手即用。
此外，減減鴨各功能模塊內(nèi)頁(yè)面布局橫向保持了較高一致性：操作區(qū)面積比例接近，且全部集中在頁(yè)面中下部。良好的一致性使用戶便于操作，且降低了學(xué)習(xí)成本。
1. 壓力指數(shù)測(cè)試 2. 手速減壓 3. 放松練習(xí)
組件運(yùn)用
減減鴨應(yīng)用了多個(gè)小程序組件，并根據(jù)功能場(chǎng)景進(jìn)行了定制，本節(jié)以音頻播放器為例講解。
放松練習(xí)功能中使用了小程序音頻播放器組件，用于放松指導(dǎo)語(yǔ)的播放。為契合放松減壓的應(yīng)用場(chǎng)景，播放器隱藏了常見(jiàn)的容器形態(tài)，與插畫(huà)背景融為一體，僅保留了播放控制按鈕，最大程度地營(yíng)造場(chǎng)景沉浸感。
小程序音頻播放器支持鎖屏播放，用戶可以在放松的狀態(tài)中聆聽(tīng)放松指導(dǎo)語(yǔ)直至結(jié)束，不必?fù)?dān)心設(shè)備鎖屏中斷進(jìn)程。
1. 音頻播放狀態(tài) 2. 音頻暫停狀態(tài)
色彩系統(tǒng)
配色風(fēng)格
減減鴨采用舒緩鎮(zhèn)定的文藝清新色彩搭配，希望傳遞給用戶溫暖、包容、安逸的感受；輔助色選用了一定飽和度、明度范圍內(nèi)的草綠色與橙黃色。
框架使用
小程序提供黑色、白色兩種頂部導(dǎo)航。減減鴨小程序不同頁(yè)面中，根據(jù)界面配色選取了不同的導(dǎo)航，以確保導(dǎo)航顯示清晰合理。
1. 黑色導(dǎo)航 2. 白色導(dǎo)航
LOGO 設(shè)計(jì)
減減鴨小程序 LOGO 設(shè)計(jì)從以下幾個(gè)角度出發(fā)：
表意清晰：用基礎(chǔ)的心形，傳遞釋放心理壓力的含義；
風(fēng)格統(tǒng)一：綠色和黃色，與頁(yè)面色彩風(fēng)格呼應(yīng)；
創(chuàng)意亮點(diǎn)：提取減“壓”的諧音減“鴨”，加深用戶記憶力。
情感化的動(dòng)效設(shè)計(jì)
作為壓力管理應(yīng)用，減減鴨將情感化設(shè)計(jì)的宗旨貫穿始終，希望通過(guò)細(xì)節(jié)之處的創(chuàng)意幫助用戶舒緩壓力、迎來(lái)好心情。
擬態(tài)漣漪的點(diǎn)擊動(dòng)效
手速減壓功能的核心，是希望用戶通過(guò)快速點(diǎn)擊屏幕釋放壓力，因此會(huì)累計(jì)用戶點(diǎn)擊屏幕次數(shù)，并顯示數(shù)值。但是如果用戶點(diǎn)擊屏幕后，數(shù)值直接變化，而沒(méi)有其他的反饋，會(huì)顯得枯燥乏味，缺乏吸引力。
經(jīng)過(guò)聯(lián)想設(shè)計(jì)，減減鴨的點(diǎn)擊操作配合了漣漪狀的反饋，用戶按壓屏幕時(shí)，頁(yè)面會(huì)跟隨手勢(shì)出發(fā)點(diǎn)擴(kuò)散出陣陣漣漪，就像在大自然中輕觸水面，看著層層水波泛起，心中的煩悶也被排解開(kāi)來(lái)。
擬態(tài)水波的播放動(dòng)效
放松練習(xí)功能中音頻播放時(shí)，背景會(huì)緩緩浮現(xiàn)規(guī)律的水波動(dòng)效，節(jié)奏與人的呼吸相近。用戶在聆聽(tīng)放松指導(dǎo)音頻時(shí)，可以讓自己的情緒隨著水波，在一呼一吸中慢慢得到舒緩。
溫馨提示：如果你的瀏覽器無(wú)法正常播放，請(qǐng)嘗試 Chrome 瀏覽器。
總結(jié)
以上是智能小程序“減減鴨”的設(shè)計(jì)思考，更多細(xì)節(jié)設(shè)計(jì)可使用百度 App 掃描下圖二維碼進(jìn)行體驗(yàn)。
評(píng)價(jià)本篇文檔
來(lái)源：百度智能小程序
