移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软… - 图片创意预览

移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软…

移动端小程序UI设计稿,iPhone竖屏375pt比例,现代软UI风格,低饱和莫兰迪淡马卡龙配色,主色淡玫瑰粉,辅助色雾感浅灰蓝,中性色米白浅灰,纯白柔和背景。严格8px网格系统,版心左右留白24px

用户头像

清越49755

2026.10.02
移动端小程序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风格,高质量界面设计。
美妆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%,居中放置,按钮下方留有底部安全区域。整体背景为米白到淡玫瑰粉到淡紫的轻柔渐变,延续品牌调性,版式精美,四边留有充足边距,层级分明,交互感清晰。