美妆App引导页设计,竖版9:16,极简高级风格。背景延续米白… - 图片创意预览

美妆App引导页设计,竖版9:16,极简高级风格。背景延续米白…

美妆App引导页设计,竖版9:16,极简高级风格。背景延续米白色到淡玫瑰粉色再到淡紫色的轻柔渐变,细腻柔和。画面顶部是标题区域,居中对齐:主标题"你的妆容,由情绪定义",字体优雅纤细,深玫瑰棕色,字号

用户头像

清欢12646

2026.10.04
美妆App情绪测试页设计,iPhone 12 Pro Max竖屏尺寸,比例约9:19.5,极简高级风格。顶部状态栏显示时间"9:41",左侧信号图标、中间时间、右侧电池和WiFi图标,模拟真实手机状态栏。状态栏下方是页面顶部导航栏:左侧是返回箭头图标(<),中间是页面标题"情绪小测试",字体优雅,深玫瑰棕色;右侧是进度指示"1 / 6",浅灰色小字,或用六个小圆点表示进度,前两个实心深粉色,其余空心。页面中部是问题区域,问题文字"今天你更想成为哪种状态?",字号适中,深灰色,居中或左对齐,上方留有舒适留白。问题下方是四张选项卡片,2x2网格排列,每张卡片为圆角矩形,背景为极浅的米白或淡粉底色,卡片内上方是情绪名称(温柔/清冷/甜酷/松弛),字体稍大,深玫瑰棕色;下方是描述词(柔和·亲近·轻盈 / 安静·克制·疏离 / 个性·自信·有力量 / 自然·舒适·不费力),小字,浅灰色。其中一张卡片(如温柔)为选中状态,边框和背景呈现淡玫瑰粉色高亮,微微浮起带轻阴影。页面底部是主按钮"下一题",圆角矩形,淡玫瑰粉到淡紫渐变填充,白色文字,按钮宽度约占屏幕80%,居中放置,按钮下方留有底部安全区域。整体背景为米白到淡玫瑰粉到淡紫的轻柔渐变,延续品牌调性,版式精美,四边留有充足边距,层级分明,交互感清晰。美妆App情绪测试页设计,iPhone 12 Pro Max竖屏尺寸,比例约9:19.5,极简高级风格。顶部状态栏显示时间"9:41",左侧信号图标、中间时间、右侧电池和WiFi图标,模拟真实手机状态栏。状态栏下方是页面顶部导航栏:左侧是返回箭头图标(<),中间是页面标题"情绪小测试",字体优雅,深玫瑰棕色;右侧是进度指示"1 / 6",浅灰色小字,或用六个小圆点表示进度,前两个实心深粉色,其余空心。页面中部是问题区域,问题文字"今天你更想成为哪种状态?",字号适中,深灰色,居中或左对齐,上方留有舒适留白。问题下方是四张选项卡片,2x2网格排列,每张卡片为圆角矩形,背景为极浅的米白或淡粉底色,卡片内上方是情绪名称(温柔/清冷/甜酷/松弛),字体稍大,深玫瑰棕色;下方是描述词(柔和·亲近·轻盈 / 安静·克制·疏离 / 个性·自信·有力量 / 自然·舒适·不费力),小字,浅灰色。其中一张卡片(如温柔)为选中状态,边框和背景呈现淡玫瑰粉色高亮,微微浮起带轻阴影。页面底部是主按钮"下一题",圆角矩形,淡玫瑰粉到淡紫渐变填充,白色文字,按钮宽度约占屏幕80%,居中放置,按钮下方留有底部安全区域。整体背景为米白到淡玫瑰粉到淡紫的轻柔渐变,延续品牌调性,版式精美,四边留有充足边距,层级分明,交互感清晰。
移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软UI风格,低饱和莫兰迪淡马卡龙配色,主色淡玫瑰粉,辅助色雾感浅灰蓝,中性色米白浅灰,纯白柔和背景。严格8px网格系统,版心左右留白24px。组件规范:卡片圆角20px,按钮圆角12px,小元素圆角8px,极淡柔和软阴影,轻微毛玻璃效果,无粗描边,2px统一线性图标,无衬线字体,信息层级清晰,大量舒适留白,平视正视角,商业级UI展示图,高清精致,无场景透视,无真人手持手机。 页面:美妆情绪体验小程序-虚拟美妆试玩交互页。 顶部:导航栏,左侧返回箭头图标,中间标题「虚拟试玩」,右侧收藏心形图标。 页面最大视觉区(占页面约45%高度):真人感人脸预览窗口,圆角20px,人像自然真实保留面部特征,仅展示虚拟上妆效果不夸张变形,柔和打光。 预览窗口下方:横向可滑动情绪妆容模板卡片,分别是温柔妆、清冷妆、甜酷妆、松弛感妆,小卡片缩略图+名称,选中态淡玫瑰粉高亮边框。 再下方:美妆品类Tab栏,口红、眼影、腮红、眉形、粉底,文字Tab选中态下划线。 Tab下方:横向滑动圆形色卡选择器,多个低饱和柔和色号小圆点,选中色卡放大高亮;下方颜色调节滑块进度条。 底部:大主按钮「一键上妆」淡玫瑰粉填充圆角12px,次按钮「保存妆容」「查看同款」并排浅色描边。 最底部:iPhone安全区留白。 交互暗示清晰,选择组件整齐对齐,没有多余装饰,视觉重心在人脸预览区。整体温柔治愈,干净高级,呼吸感强。UI设计稿,dribbble级界面设计。移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软UI风格,低饱和莫兰迪淡马卡龙配色,主色淡玫瑰粉,辅助色雾感浅灰蓝,中性色米白浅灰,纯白柔和背景。严格8px网格系统,版心左右留白24px。组件规范:卡片圆角20px,按钮圆角12px,小元素圆角8px,极淡柔和软阴影,轻微毛玻璃效果,无粗描边,2px统一线性图标,无衬线字体,信息层级清晰,大量舒适留白,平视正视角,商业级UI展示图,高清精致,无场景透视,无真人手持手机。

页面:美妆情绪体验小程序-虚拟美妆试玩交互页。
顶部:导航栏,左侧返回箭头图标,中间标题「虚拟试玩」,右侧收藏心形图标。
页面最大视觉区(占页面约45%高度):真人感人脸预览窗口,圆角20px,人像自然真实保留面部特征,仅展示虚拟上妆效果不夸张变形,柔和打光。
预览窗口下方:横向可滑动情绪妆容模板卡片,分别是温柔妆、清冷妆、甜酷妆、松弛感妆,小卡片缩略图+名称,选中态淡玫瑰粉高亮边框。
再下方:美妆品类Tab栏,口红、眼影、腮红、眉形、粉底,文字Tab选中态下划线。
Tab下方:横向滑动圆形色卡选择器,多个低饱和柔和色号小圆点,选中色卡放大高亮;下方颜色调节滑块进度条。
底部:大主按钮「一键上妆」淡玫瑰粉填充圆角12px,次按钮「保存妆容」「查看同款」并排浅色描边。
最底部:iPhone安全区留白。

交互暗示清晰,选择组件整齐对齐,没有多余装饰,视觉重心在人脸预览区。整体温柔治愈,干净高级,呼吸感强。UI设计稿,dribbble级界面设计。
移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软UI风格,低饱和莫兰迪淡马卡龙配色,主色淡玫瑰粉,辅助色雾感浅灰蓝,中性色米白浅灰,纯白柔和背景。严格8px网格系统,版心左右留白舒适。组件规范:卡片圆角20px,按钮圆角12px,小元素圆角8px,极淡柔和软阴影,轻微毛玻璃效果,无粗描边,2px统一线性图标,无衬线字体,信息层级清晰,大量舒适留白,平视正视角,商业级UI展示图,高清精致,无场景透视,无真人手持手机。 页面结构:美妆情绪体验小程序首页。 顶部:状态栏+导航栏,居中标题「美妆情绪」,右侧消息图标、搜索图标。 Banner区:柔和淡玫瑰粉渐变背景,情绪主题标语「找到属于你的情绪妆容」,下方「立即试玩」圆角按钮。 第二区:横向可滑动情绪分类标签:温柔|清冷|甜酷|松弛感|氛围感,胶囊形状标签,选中态淡玫瑰粉填充。 第三区:2列网格卡片布局,妆容推荐卡片,每张卡片是精致妆容预览缩略图+妆容名称+情绪小标签,卡片悬浮轻微软阴影。 第四区:「热门妆容」「新品色号」两个横向滑动列表模块,小圆角缩略图排列。 底部:标签导航栏:首页|试妆|发现|我的,毛玻璃效果底栏。 整体氛围温柔治愈,干净高级,不拥挤,视觉呼吸感强。UI设计稿,dribbble风格,高质量界面设计。移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软UI风格,低饱和莫兰迪淡马卡龙配色,主色淡玫瑰粉,辅助色雾感浅灰蓝,中性色米白浅灰,纯白柔和背景。严格8px网格系统,版心左右留白舒适。组件规范:卡片圆角20px,按钮圆角12px,小元素圆角8px,极淡柔和软阴影,轻微毛玻璃效果,无粗描边,2px统一线性图标,无衬线字体,信息层级清晰,大量舒适留白,平视正视角,商业级UI展示图,高清精致,无场景透视,无真人手持手机。

页面结构:美妆情绪体验小程序首页。
顶部:状态栏+导航栏,居中标题「美妆情绪」,右侧消息图标、搜索图标。
Banner区:柔和淡玫瑰粉渐变背景,情绪主题标语「找到属于你的情绪妆容」,下方「立即试玩」圆角按钮。
第二区:横向可滑动情绪分类标签:温柔|清冷|甜酷|松弛感|氛围感,胶囊形状标签,选中态淡玫瑰粉填充。
第三区:2列网格卡片布局,妆容推荐卡片,每张卡片是精致妆容预览缩略图+妆容名称+情绪小标签,卡片悬浮轻微软阴影。
第四区:「热门妆容」「新品色号」两个横向滑动列表模块,小圆角缩略图排列。
底部:标签导航栏:首页|试妆|发现|我的,毛玻璃效果底栏。

整体氛围温柔治愈,干净高级,不拥挤,视觉呼吸感强。UI设计稿,dribbble风格,高质量界面设计。
[第3屏] 核心卖点成分功效展示,乔妃恋黑耀凝时持妆气垫,本屏不需要绑定产品图,以成分信息展示为主。 [氛围/风格] 专业科研成分风,简约干净的设计感,信息层级清晰,符合美妆成分党阅读习惯。 [元素布局] 页面分为三行网格布局,每个卖点占一行,左侧放圆形图标,右侧放卖点名称和解释,顶部预留主标题,底部留出空白,整体疏密有致。三个卖点分别是:高遮瑕粉体、持妆因子、服帖成膜技术。每个区域都用浅灰色细线做分割,保持整洁。 [光影质感] 整体均匀柔光,信息区域清晰明亮,没有刺眼高光和死黑阴影,阅读舒适。 [配色色系] 全局底色:#FFFFFF(纯白);主文字#1A1A1A深灰黑,辅助文字#888888中灰,图标和主标题用玫瑰金#D4A574点缀。 [视角构图] 竖向通栏排版,从上到下主标题+三个卖点网格,信息动线清晰。 [文字版式] 顶部主标题"核心配方 持妆秘诀",玫瑰金加粗居中;第一行:图标+标题"高遮瑕粉体"+说明"隐匿毛孔痘印 柔焦磨皮";第二行:图标+标题"持妆因子"+说明"减少出油脱妆 长效在线";第三行:图标+标题"透气成膜"+说明"轻薄不闷痘 贴肤不卡粉";每个卖点说明字号小于标题,颜色浅一级,层级分明。 [比例分辨率] 9:16竖版,1080×1920像素,4K分辨率,文字清晰可辨。 [负向提示词] 文字错乱,信息重叠,颜色刺眼,变形,水印,虚假功效承诺,极限词[第3屏] 核心卖点成分功效展示,乔妃恋黑耀凝时持妆气垫,本屏不需要绑定产品图,以成分信息展示为主。
[氛围/风格] 专业科研成分风,简约干净的设计感,信息层级清晰,符合美妆成分党阅读习惯。
[元素布局] 页面分为三行网格布局,每个卖点占一行,左侧放圆形图标,右侧放卖点名称和解释,顶部预留主标题,底部留出空白,整体疏密有致。三个卖点分别是:高遮瑕粉体、持妆因子、服帖成膜技术。每个区域都用浅灰色细线做分割,保持整洁。
[光影质感] 整体均匀柔光,信息区域清晰明亮,没有刺眼高光和死黑阴影,阅读舒适。
[配色色系] 全局底色:#FFFFFF(纯白);主文字#1A1A1A深灰黑,辅助文字#888888中灰,图标和主标题用玫瑰金#D4A574点缀。
[视角构图] 竖向通栏排版,从上到下主标题+三个卖点网格,信息动线清晰。
[文字版式] 顶部主标题"核心配方 持妆秘诀",玫瑰金加粗居中;第一行:图标+标题"高遮瑕粉体"+说明"隐匿毛孔痘印 柔焦磨皮";第二行:图标+标题"持妆因子"+说明"减少出油脱妆 长效在线";第三行:图标+标题"透气成膜"+说明"轻薄不闷痘 贴肤不卡粉";每个卖点说明字号小于标题,颜色浅一级,层级分明。
[比例分辨率] 9:16竖版,1080×1920像素,4K分辨率,文字清晰可辨。
[负向提示词] 文字错乱,信息重叠,颜色刺眼,变形,水印,虚假功效承诺,极限词
[商品] 使用【图2】亚洲模特手持deardahlia乐园双面彩妆盘的场景;保留模特五官、妆容、卷发造型与蜜桃粉调妆面,保留彩妆盘八角形粉白外壳、玫瑰金扣、双层双色结构;修复产品边缘清晰,增强妆面通透光泽与产品质感。 [画面] 目标:真人效果展示,呈现上脸后的清透蜜桃氛围感。构图:半身氛围型,模特肩部以上占画面约65%,脸部微侧展示腮红+高光妆效;彩妆盘由模特手持于右下侧;左侧留白放编号卖点。前中后景:中景模特与产品,前景柔焦花瓣/光斑,后景粉白渐变柔影背景。 [视觉] 套系策略:风格=韩系清透高级彩妆商业摄影;标题字=纤细优雅衬线粗体;正文字=简洁无衬线体;主色=柔雾蜜桃粉;背景延展=基于蜜桃粉做深浅渐变、柔雾质感与同色系光斑层次;强调色=玫瑰金,仅用于小面积图标、引线和装饰线条;标题色=深棕粉;正文色=暖灰粉;组件=圆角半透明粉白信息卡、细线玫瑰金引线;光影=左前侧暖柔光,面部与产品带柔和轮廓光。 [文字] 左上主标题「上脸即氛围感」,副标题「清透蜜桃妆 一抹好气色」;左侧3条编号体验卖点:「① 腮红:自然红晕 显白提气」「② 高光:碎钻细闪 立体轮廓」「③ 眼影:温柔打底 消肿深邃」;文字不遮挡模特眼部与产品主体。 [规格] 国内电商详情页3:4竖版,4K分辨率,负向提示:避免变形、错字、文字过小、冷蓝背景、模特脸部失真、产品结构改变、绝对化用语、医疗功效表述。[商品] 使用【图2】亚洲模特手持deardahlia乐园双面彩妆盘的场景;保留模特五官、妆容、卷发造型与蜜桃粉调妆面,保留彩妆盘八角形粉白外壳、玫瑰金扣、双层双色结构;修复产品边缘清晰,增强妆面通透光泽与产品质感。
[画面] 目标:真人效果展示,呈现上脸后的清透蜜桃氛围感。构图:半身氛围型,模特肩部以上占画面约65%,脸部微侧展示腮红+高光妆效;彩妆盘由模特手持于右下侧;左侧留白放编号卖点。前中后景:中景模特与产品,前景柔焦花瓣/光斑,后景粉白渐变柔影背景。
[视觉] 套系策略:风格=韩系清透高级彩妆商业摄影;标题字=纤细优雅衬线粗体;正文字=简洁无衬线体;主色=柔雾蜜桃粉;背景延展=基于蜜桃粉做深浅渐变、柔雾质感与同色系光斑层次;强调色=玫瑰金,仅用于小面积图标、引线和装饰线条;标题色=深棕粉;正文色=暖灰粉;组件=圆角半透明粉白信息卡、细线玫瑰金引线;光影=左前侧暖柔光,面部与产品带柔和轮廓光。
[文字] 左上主标题「上脸即氛围感」,副标题「清透蜜桃妆 一抹好气色」;左侧3条编号体验卖点:「① 腮红:自然红晕 显白提气」「② 高光:碎钻细闪 立体轮廓」「③ 眼影:温柔打底 消肿深邃」;文字不遮挡模特眼部与产品主体。
[规格] 国内电商详情页3:4竖版,4K分辨率,负向提示:避免变形、错字、文字过小、冷蓝背景、模特脸部失真、产品结构改变、绝对化用语、医疗功效表述。