首頁(yè) 資訊【案例分析】薄荷健康A(chǔ)PP設(shè)計(jì)思路深入解析

【案例分析】薄荷健康A(chǔ)PP設(shè)計(jì)思路深入解析

來源：泰然健康網(wǎng) 時(shí)間：2025年05月31日 12:17

靜電說：又到了APP案例復(fù)盤欄目的時(shí)間了，今天我們?yōu)榇蠹医馕龅氖潜『山】颠@款應(yīng)用。這款應(yīng)用是一款健康管理應(yīng)用，可以搜索食材卡路里，奶茶，食譜等等，也可通過分析個(gè)人的健康記錄，如喝水，體重，睡眠等等，給出使用者合理的健康建議。另一方面，這款應(yīng)用設(shè)計(jì)風(fēng)格獨(dú)特美觀。那么，來一起看看吧！

001.品牌與主題色

薄荷健康的Logo文字，是精心設(shè)計(jì)過的，靜電也反復(fù)強(qiáng)調(diào)，Logo和文字都一定要經(jīng)過精心設(shè)計(jì)，不能直接搞個(gè)字體打字打出來放那就完事兒，這會(huì)讓你的設(shè)計(jì)完完全全的沒有品牌感。而應(yīng)用的Logo也是直接沿用“薄荷”兩個(gè)字來展示。頁(yè)面的主色調(diào)也沿用這樣清爽的薄荷綠色，給人以健康的感覺。

002.菜單設(shè)置

靜電說過，菜單設(shè)置并不是隨意的，而是基于產(chǎn)品的功能和場(chǎng)景的考量，薄荷健康的菜單如下“首頁(yè)”，“發(fā)現(xiàn)”，“記錄”，“商店”，“我的”，除了我的這個(gè)基本所有應(yīng)用都必備的欄目外，菜單布置兼顧推薦>個(gè)性化>變現(xiàn)（商店）+會(huì)員，這樣一個(gè)順序，也符合用戶使用APP的場(chǎng)景化需求。

003.首頁(yè)設(shè)計(jì)

如果想凸顯品牌，應(yīng)用左上角放一個(gè)Logo效果很不錯(cuò)，也可以讓你的應(yīng)用更加具有品牌和設(shè)計(jì)感。薄荷健康的首頁(yè)就是這樣設(shè)計(jì)的。首頁(yè)采用低飽和度更清爽的顏色構(gòu)建了金剛區(qū)圖標(biāo)，將常用功能用按鈕形式展示出來，這也是這款應(yīng)用的特色功能，所以必須放在更顯著的位置。另外薄荷健康沒有采用傳統(tǒng)的輪播圖+金剛區(qū)的形式，而是全部用卡片方式來展示信息，獨(dú)樹一幟。

004.發(fā)現(xiàn)欄目設(shè)計(jì)

發(fā)現(xiàn)欄目的主要功能是提供更多內(nèi)容，幫助提升用戶存留，讓用戶花更多的時(shí)間呆在應(yīng)用中，所以互動(dòng)就至關(guān)重要，也是app運(yùn)營(yíng)的必爭(zhēng)之地。薄荷健康的發(fā)現(xiàn)頁(yè)面采用Tab+輪播圖+話題+動(dòng)態(tài)的設(shè)計(jì)方式，并加入了一些藍(lán)色圓點(diǎn)的點(diǎn)綴，更有設(shè)計(jì)感。下方版塊均采用灰色背景加上白色卡片的設(shè)計(jì)，區(qū)分度更好。

005.記錄欄目設(shè)計(jì)

靜電首先發(fā)現(xiàn)的就是右下角的FAB按鈕，同樣的設(shè)計(jì)和位置，讓用戶形成使用習(xí)慣。在這個(gè)欄目中，將不同的模塊使用瓷片區(qū)的方式進(jìn)行區(qū)分，讓用戶更好的操作和理解，簡(jiǎn)單直觀。

006.“我的”模塊設(shè)計(jì)

我的模塊的重要內(nèi)容是用戶的個(gè)人信息以及一些常用的工具入口，設(shè)計(jì)師在這里采用了更寬松的排版，卡片也更加圓潤(rùn)，另外更高更寬的列表，方便用戶點(diǎn)擊和查看，同時(shí)輔以薄荷綠色的icon，點(diǎn)睛色分布在應(yīng)用的所有頁(yè)面中，讓頁(yè)面更有特色。

007.品牌塑造

薄荷健康的設(shè)計(jì)緊貼薄荷這樣的植物，頁(yè)面中充分營(yíng)造出簡(jiǎn)單清爽健康的生活方式，讓用戶刨除多余的無用信息干擾，更專注于頁(yè)面功能本身。而LOGO文字也是充分設(shè)計(jì)過的，這是很多初級(jí)設(shè)計(jì)師最容易忽視的設(shè)計(jì)點(diǎn)，重頁(yè)面排版不重品牌塑造，這樣就造成頁(yè)面風(fēng)格薄弱，就像一個(gè)沒有名字的孩子一樣，在別人眼中缺少足夠的印象。