参考图片的UI设计风格,重新设计一个集短视频、美图、社交于一体… - 图片创意预览

参考图片的UI设计风格,重新设计一个集短视频、美图、社交于一体…

参考图片的UI设计风格,重新设计一个集短视频、美图、社交于一体的APP个人中心页面。整体风格保持粉紫渐变的甜美少女风,圆角卡片设计,浅色系背景。顶部保留用户头像、昵称、ID、粉丝/关注/访客数据。中间

用户头像

白川84485

2026.09.11
移动端小程序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风格,高质量界面设计。