以这张「美颜设置」截图为基础修改:1)把「预览效果」大图区域里… - 图片创意预览

以这张「美颜设置」截图为基础修改:1)把「预览效果」大图区域里…

以这张「美颜设置」截图为基础修改:1)把「预览效果」大图区域里的人像照片替换成一位中国美女主播的人像写真——年轻女性、皮肤白皙细腻、五官精致、自然淡妆、长发莹亮、甜美微笑,身穿浅色质感上衣,背景是柔和

用户头像

1q0gap0ker-...

2026.10.12
移动端小程序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风格,高质量界面设计。
竖版A3尺寸的UX设计作品集展板,标题为"虚拟美妆间|交互与视觉设计",副标题"Virtual Makeup Studio — Interaction & Visual Design",右上角标注"A3-02 / INTERACTION & VISUAL DESIGN"。整体采用淡玫瑰粉+柔和浅紫配色,现代简约温柔的UI设计风格,与A3-01保持视觉统一。 版面布局如下: 【顶部标题栏】 左侧:虚拟美妆间logo + 主标题"虚拟美妆间|交互与视觉设计" 右侧:A3-02 / INTERACTION & VISUAL DESIGN 【顶部横向区域 - 01 服务流程 SERVICE FLOW】 横向7步流程图,每个节点配线性小图标: ① 产生需求「想尝试新的妆容」 ↓ ② 打开App「首页 / 情绪入口」 ↓ ③ 情绪匹配「温柔|清冷|甜酷|松弛」 ↓ ④ AI/AR试妆「开启摄像头」 ↓ ⑤ 调整妆容「口红/眼影/腮红/眉形」 ↓ ⑥ 对比与决策「原图 VS 试妆效果」 ↓ ⑦ 购买/分享「购买同款/保存/分享」 用圆形节点+箭头连接,步骤编号清晰 【右上第二行 - 02 故事板 STORYBOARD】 4格连续漫画故事板: 01「不知道今天画什么」- 女生准备约会,面对化妆品犹豫 02「打开虚拟美妆间」- 手机屏幕显示「今日情绪:清冷氛围感」 03「虚拟试妆」- 女生用手机AR试妆,显示「低饱和玫瑰眼影、雾感粉色腮红、裸玫瑰唇色」 04「满意并出门」- 女生自信出门,手机显示保存妆容界面 底部配文:「从'不会选'到'敢尝试',让试妆成为决策的一部分」 画风简约扁平插画风格 【中部最大区域 - 03 核心UI展示 KEY UI SCREENS】 5台手机Mockup错落排布,展示真实UI界面: UI 01|首页 - 顶部搜索栏、「美妆情绪·找到属于你的情绪妆容」标题、情绪标签(温柔/清冷/甜酷/松弛感)、热门妆容卡片网格 UI 02|情绪测试 - 标题「今天你更想成为哪种状态?」、四个大选项卡片(温柔/清冷/甜酷/松弛)、底部进度「4 / 6」 UI 03|AR虚拟试妆 - 真人自然人脸居中、底部分类标签(口红|眼影|腮红|眉形|粉底)、色卡选择条、「一键上妆」大按钮 UI 04|妆容精细调节 - 标题「口红 PK02 玫瑰豆沙」、浓度滑块60%、妆感选项(雾面/水光/哑光)、「预览对比」按钮 UI 05|妆容详情/分享 - 完整妆容展示、标签「清冷氛围感」、下方列出口红色号/眼影/腮红/眉形、两个按钮「立即套用·虚拟试妆」和「收藏妆容」 手机采用真实比例,有柔和阴影和轻微立体感 【左下区域 - 04 IP吉祥物 IP / MASCOT】 「美妆小蛋」IP形象展示: 一个淡粉色拟人化美妆蛋,头顶小蝴蝶结,可爱圆润风格 三个状态并排展示: - 开心(完成试妆,笑脸) - 疑惑(不知道选择什么颜色,歪头思考) - 惊艳(发现适合自己的妆容,星星眼) 旁边文字:IP关键词:陪伴 / 情绪 / 美妆 / AI 【IP下方 - 05 图标规范 ICON GUIDELINE】 底部导航图标展示:首页|试妆|发现|我的,每个显示Default和Selected两种状态 功能图标展示:收藏、分享、相机、色号、搜索、消息、购物袋、AI推荐 下方标注规范:2px线性图标 / 8px网格 / 圆角端点 【右下区域 - 06 视觉规范 VISUAL SYSTEM】 Color色彩规范: - Primary #E9A8C5 淡玫瑰粉 - Secondary #B8B1DC 柔和浅紫 - Accent #F3C9DA 淡粉 - Background #FAF7FA 米白 - Text #423B50 深灰紫 每个颜色配色块展示 圆角规范:Card 20px、Button 12px、Small 8px 网格:8px Grid 页面边距:24px 阴影:极淡柔和软阴影 【最底部横向模块 - 07 设计总结 DESIGN SUMMARY】 四个关键词卡片横向排列: 1. AI智能推荐 - 根据肤色、面部特征与偏好进行妆容推荐 2. AR实时试妆 - 降低线下试妆成本,让用户在购买前看到效果 3. 情绪化体验 - 将「今天的情绪」转化为妆容选择 4. 社区分享 - 通过妆容保存、分享与挑战形成持续内容生态 底部大字号总结语:「让美妆从'选择产品',转变为'探索自我、体验妆容与表达情绪'」 整体风格:专业UX作品集展板,淡玫瑰粉+柔和浅紫主色调,米白背景,深灰紫文字,圆角卡片,极淡柔和软阴影,温柔高级的视觉质感,与A3-01展板风格统一协调竖版A3尺寸的UX设计作品集展板,标题为"虚拟美妆间|交互与视觉设计",副标题"Virtual Makeup Studio — Interaction & Visual Design",右上角标注"A3-02 / INTERACTION & VISUAL DESIGN"。整体采用淡玫瑰粉+柔和浅紫配色,现代简约温柔的UI设计风格,与A3-01保持视觉统一。

版面布局如下:

【顶部标题栏】
左侧:虚拟美妆间logo + 主标题"虚拟美妆间|交互与视觉设计"
右侧:A3-02 / INTERACTION & VISUAL DESIGN

【顶部横向区域 - 01 服务流程 SERVICE FLOW】
横向7步流程图,每个节点配线性小图标:
① 产生需求「想尝试新的妆容」
↓
② 打开App「首页 / 情绪入口」
↓
③ 情绪匹配「温柔|清冷|甜酷|松弛」
↓
④ AI/AR试妆「开启摄像头」
↓
⑤ 调整妆容「口红/眼影/腮红/眉形」
↓
⑥ 对比与决策「原图 VS 试妆效果」
↓
⑦ 购买/分享「购买同款/保存/分享」
用圆形节点+箭头连接,步骤编号清晰

【右上第二行 - 02 故事板 STORYBOARD】
4格连续漫画故事板:
01「不知道今天画什么」- 女生准备约会,面对化妆品犹豫
02「打开虚拟美妆间」- 手机屏幕显示「今日情绪:清冷氛围感」
03「虚拟试妆」- 女生用手机AR试妆,显示「低饱和玫瑰眼影、雾感粉色腮红、裸玫瑰唇色」
04「满意并出门」- 女生自信出门,手机显示保存妆容界面
底部配文:「从'不会选'到'敢尝试',让试妆成为决策的一部分」
画风简约扁平插画风格

【中部最大区域 - 03 核心UI展示 KEY UI SCREENS】
5台手机Mockup错落排布,展示真实UI界面:
UI 01|首页 - 顶部搜索栏、「美妆情绪·找到属于你的情绪妆容」标题、情绪标签(温柔/清冷/甜酷/松弛感)、热门妆容卡片网格
UI 02|情绪测试 - 标题「今天你更想成为哪种状态?」、四个大选项卡片(温柔/清冷/甜酷/松弛)、底部进度「4 / 6」
UI 03|AR虚拟试妆 - 真人自然人脸居中、底部分类标签(口红|眼影|腮红|眉形|粉底)、色卡选择条、「一键上妆」大按钮
UI 04|妆容精细调节 - 标题「口红 PK02 玫瑰豆沙」、浓度滑块60%、妆感选项(雾面/水光/哑光)、「预览对比」按钮
UI 05|妆容详情/分享 - 完整妆容展示、标签「清冷氛围感」、下方列出口红色号/眼影/腮红/眉形、两个按钮「立即套用·虚拟试妆」和「收藏妆容」
手机采用真实比例,有柔和阴影和轻微立体感

【左下区域 - 04 IP吉祥物 IP / MASCOT】
「美妆小蛋」IP形象展示:
一个淡粉色拟人化美妆蛋,头顶小蝴蝶结,可爱圆润风格
三个状态并排展示:
- 开心(完成试妆,笑脸)
- 疑惑(不知道选择什么颜色,歪头思考)
- 惊艳(发现适合自己的妆容,星星眼)
旁边文字:IP关键词:陪伴 / 情绪 / 美妆 / AI

【IP下方 - 05 图标规范 ICON GUIDELINE】
底部导航图标展示:首页|试妆|发现|我的,每个显示Default和Selected两种状态
功能图标展示:收藏、分享、相机、色号、搜索、消息、购物袋、AI推荐
下方标注规范:2px线性图标 / 8px网格 / 圆角端点

【右下区域 - 06 视觉规范 VISUAL SYSTEM】
Color色彩规范:
- Primary #E9A8C5 淡玫瑰粉
- Secondary #B8B1DC 柔和浅紫
- Accent #F3C9DA 淡粉
- Background #FAF7FA 米白
- Text #423B50 深灰紫
每个颜色配色块展示

圆角规范:Card 20px、Button 12px、Small 8px
网格:8px Grid
页面边距:24px
阴影:极淡柔和软阴影

【最底部横向模块 - 07 设计总结 DESIGN SUMMARY】
四个关键词卡片横向排列:
1. AI智能推荐 - 根据肤色、面部特征与偏好进行妆容推荐
2. AR实时试妆 - 降低线下试妆成本,让用户在购买前看到效果
3. 情绪化体验 - 将「今天的情绪」转化为妆容选择
4. 社区分享 - 通过妆容保存、分享与挑战形成持续内容生态

底部大字号总结语:「让美妆从'选择产品',转变为'探索自我、体验妆容与表达情绪'」

整体风格:专业UX作品集展板,淡玫瑰粉+柔和浅紫主色调,米白背景,深灰紫文字,圆角卡片,极淡柔和软阴影,温柔高级的视觉质感,与A3-01展板风格统一协调