移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pr… - 图片创意预览

移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pr…

移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配

用户头像

1q0nyehsrb2...

2026.05.29
移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:关注页面,顶部页面标题“我的关注”,下方分两类关注列表:品牌官方账号、口腔护理种草博主账号;每个关注用户卡片包含头像、昵称、简介、已关注按钮;页面中部推荐未关注优质账号模块,卡片布局整齐,无繁杂元素,留白干净,底部五栏导航栏完整展示。移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:关注页面,顶部页面标题“我的关注”,下方分两类关注列表:品牌官方账号、口腔护理种草博主账号;每个关注用户卡片包含头像、昵称、简介、已关注按钮;页面中部推荐未关注优质账号模块,卡片布局整齐,无繁杂元素,留白干净,底部五栏导航栏完整展示。
移动端电商小程序UI界面消息通知页面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。消息中心页面,顶部页面标题「消息」,页面分四大消息列表模块:交易物流通知、客服服务提醒、活动优惠通知、好友商家互动消息;每个消息条目为单行圆角卡片,左侧对应轻量化线性图标,中间消息标题+简短内容预览,右侧消息时间、未读小红点标识;页面顶部设置全部已读按钮,背景浅奶白干净底色,底部完整五栏导航。移动端电商小程序UI界面消息通知页面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。消息中心页面,顶部页面标题「消息」,页面分四大消息列表模块:交易物流通知、客服服务提醒、活动优惠通知、好友商家互动消息;每个消息条目为单行圆角卡片,左侧对应轻量化线性图标,中间消息标题+简短内容预览,右侧消息时间、未读小红点标识;页面顶部设置全部已读按钮,背景浅奶白干净底色,底部完整五栏导航。
移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:首页主页,小程序首页,页面顶部放置全屏搜索栏,搜索框内占位文字“搜索纳爱斯牙膏、口腔护理产品”;搜索栏下方横向分类导航栏,导航选项包含推荐、新品、护龈牙膏、抗敏护理、优惠活动;导航栏下方大幅banner轮播图,主视觉为120g清火护龈、140g抗敏护龈两款纳爱斯养龈健齿牙膏产品海报;轮播图下方为商品卡片瀑布流展示区,单张商品卡片展示对应牙膏实物图、产品名称、规格、活动优惠价、加入购物车小按钮;页面最底部为五栏底部导航栏,完整首页电商信息流布局。移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:首页主页,小程序首页,页面顶部放置全屏搜索栏,搜索框内占位文字“搜索纳爱斯牙膏、口腔护理产品”;搜索栏下方横向分类导航栏,导航选项包含推荐、新品、护龈牙膏、抗敏护理、优惠活动;导航栏下方大幅banner轮播图,主视觉为120g清火护龈、140g抗敏护龈两款纳爱斯养龈健齿牙膏产品海报;轮播图下方为商品卡片瀑布流展示区,单张商品卡片展示对应牙膏实物图、产品名称、规格、活动优惠价、加入购物车小按钮;页面最底部为五栏底部导航栏,完整首页电商信息流布局。
移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:直播页面,纳爱斯口腔护理直播页面,页面顶部直播搜索框,下方横向直播分类标签:品牌官方直播、好物种草直播、牙膏专场直播;主体区域为直播卡片网格布局,卡片内展示直播封面(牙膏产品场景图)、直播间标题、在线观看人数、主播头像昵称;卡片右下角放置浅绿色“进入直播间”圆角按钮,底部完整五栏导航。移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:直播页面,纳爱斯口腔护理直播页面,页面顶部直播搜索框,下方横向直播分类标签:品牌官方直播、好物种草直播、牙膏专场直播;主体区域为直播卡片网格布局,卡片内展示直播封面(牙膏产品场景图)、直播间标题、在线观看人数、主播头像昵称;卡片右下角放置浅绿色“进入直播间”圆角按钮,底部完整五栏导航。
移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:登录注册复合页,登录注册二合一页面,顶部放置纳爱斯品牌LOGO,分两个切换标签页:注册页模块包含手机号输入框、短信验证码输入框、获取验证码按钮、注册确认按钮,支持微信第三方登录图标;登录页模块包含账号密码输入框、登录确认按钮、微信第三方登录入口;页面背景浅奶白色,输入框大圆角浅灰色边框,底部放置隐私协议小字链接,整体表单布局居中,留白充足。移动端电商小程序UI界面,画布尺寸严格为iPhone16 Pro手机屏幕尺寸,无外部手机边框,iOS规范页面布局,页面顶部留白舒展柔和;整体视觉风格贴合纳爱斯品牌调性,品牌主色调选用清透草木嫩绿色搭配纯净奶白色为辅色,点缀低饱和浅橘色作为产品强调色,整体画面明亮轻盈、干净通透,充满天然植物自然感、生活温度感,专业洗护氛围但画面不厚重压抑;页面组件全部采用大柔和圆角卡片,阴影轻薄低透明度,信息层级区分清晰;按钮使用品牌草木绿纯色或草木绿到浅绿渐变样式,超大圆角设计,视觉亲和友好;页面分割线为细浅灰色线条,功能图标统一轻量化线性简约图标;中文字体选用现代清晰苹方PingFang SC字体,字号大小层级规范分明;底部导航栏统一采用五栏结构,导航中间位置设置圆形草木绿突出主操作按钮,全页面图标统一线性简约风格;页面融入纳爱斯养龈健齿牙膏产品实拍元素作为主视觉装饰,产品包含120g清火护龈款、140g抗敏护龈两款牙膏实物素材;页面内全部使用通顺合理中文占位文案,完整电商小程序功能逻辑,高品质商用UI设计,高清细腻,无水印,平面2D界面,无立体建模,干净留白充足。本页面为:登录注册复合页,登录注册二合一页面,顶部放置纳爱斯品牌LOGO,分两个切换标签页:注册页模块包含手机号输入框、短信验证码输入框、获取验证码按钮、注册确认按钮,支持微信第三方登录图标;登录页模块包含账号密码输入框、登录确认按钮、微信第三方登录入口;页面背景浅奶白色,输入框大圆角浅灰色边框,底部放置隐私协议小字链接,整体表单布局居中,留白充足。
[商品] 淡斑焕白三次护理分步详解页,保留所有文字内容和排版布局不变;仅更换配色方案。 [画面] 目标:三次护理分步详解页。构图与原版完全一致:左中右三栏纵向卡片式布局,三张圆角信息卡并排,每张卡顶部护理次数+核心重点,中间具体项目列表,底部对应护肤元素小图。仅更换为清新干净风格。 [视觉] 套系策略:风格=极简清新干净风,明亮通透质感;标题字=现代无衬线粗体,圆润饱满(字体不变);正文字=简洁无衬线体(字体不变);主色=薄荷绿+纯白;背景延展=基于薄荷绿和纯白做极浅渐变、干净留白;强调色=浅薄荷绿,仅用于卡片标题和重点词;标题色=深墨绿;正文色=深灰绿;组件=圆角白色信息卡、细线分隔、小图标(形状不变,颜色更换);光影=均匀柔光,卡片轻微投影。 [文字] 所有文字内容、位置、排版、大小与原版完全一致,仅更换文字颜色。顶部主标题「3次护理 层层递进」。三张卡片:左卡「第1次 · 以清为主」内容:清洁 + 补水 + 壬二酸 + 双酶;中卡「第2次 · 清补结合」内容:清补 + 酸 + 古针;右卡「第3次 · 以养收尾」内容:清洁 + 酸 + 水油。每张卡底部小字「15天/次 最佳周期」。文字全部横排。 [规格] 图片比例3:4竖版,4K分辨率,负向提示:避免粉色、玫瑰金、复杂装饰过多、文字位置改变、排版改变、文字内容改变。[商品] 淡斑焕白三次护理分步详解页,保留所有文字内容和排版布局不变;仅更换配色方案。
[画面] 目标:三次护理分步详解页。构图与原版完全一致:左中右三栏纵向卡片式布局,三张圆角信息卡并排,每张卡顶部护理次数+核心重点,中间具体项目列表,底部对应护肤元素小图。仅更换为清新干净风格。
[视觉] 套系策略:风格=极简清新干净风,明亮通透质感;标题字=现代无衬线粗体,圆润饱满(字体不变);正文字=简洁无衬线体(字体不变);主色=薄荷绿+纯白;背景延展=基于薄荷绿和纯白做极浅渐变、干净留白;强调色=浅薄荷绿,仅用于卡片标题和重点词;标题色=深墨绿;正文色=深灰绿;组件=圆角白色信息卡、细线分隔、小图标(形状不变,颜色更换);光影=均匀柔光,卡片轻微投影。
[文字] 所有文字内容、位置、排版、大小与原版完全一致,仅更换文字颜色。顶部主标题「3次护理 层层递进」。三张卡片:左卡「第1次 · 以清为主」内容:清洁 + 补水 + 壬二酸 + 双酶;中卡「第2次 · 清补结合」内容:清补 + 酸 + 古针;右卡「第3次 · 以养收尾」内容:清洁 + 酸 + 水油。每张卡底部小字「15天/次 最佳周期」。文字全部横排。
[规格] 图片比例3:4竖版,4K分辨率,负向提示:避免粉色、玫瑰金、复杂装饰过多、文字位置改变、排版改变、文字内容改变。
[第2屏] 痛点解决对比-桌面杂乱vs收纳后整洁对比图。本屏使用【图2】作为收纳后状态的商品主体。 [氛围/风格] 真实家居场景,左右对比构图,反差鲜明,商业摄影质感。 [元素布局] 画面左右分栏对比,左侧为杂乱桌面:面膜随意堆放、化妆刷散落、护肤品东倒西歪,呈现混乱状态;右侧为整洁桌面:透明面膜收纳盒整齐摆放,面膜分类收纳,化妆刷入筒,护肤品有序排列,突出整理前后的巨大反差;右侧收纳盒结构、材质、分格与输入图完全一致。 [光影质感] 整体暖色调自然光,左侧稍暗突出杂乱感,右侧明亮通透突出整洁感,光影自然柔和。 [配色色系] 全局底色 #FFF8F0 暖米白;左侧偏灰调杂乱,右侧明亮暖白;主色透明+木色桌面。 [视角构图] 正面平视,左右对称分栏构图,中间用竖线或箭头分隔,阅读动线左痛点 → 右解决。 [文字版式] 顶部居中主标题「桌面整洁 护肤更省心」,黑色粗黑体;左侧上方小字标签「杂乱无章 找面膜费时」,右侧上方小字标签「整齐有序 一目了然」;底部配3个短卖点:「告别凌乱」「随手可取」「护肤高效」。 [比例分辨率] 9:16 竖版比例,4K分辨率,文字清晰可辨,高清画质。 [负向提示词] 产品变形,颜色偏差,水印,文字错乱,背景杂乱,过度夸张脏乱,面膜包装文字错误。[第2屏] 痛点解决对比-桌面杂乱vs收纳后整洁对比图。本屏使用【图2】作为收纳后状态的商品主体。
[氛围/风格] 真实家居场景,左右对比构图,反差鲜明,商业摄影质感。
[元素布局] 画面左右分栏对比,左侧为杂乱桌面:面膜随意堆放、化妆刷散落、护肤品东倒西歪,呈现混乱状态;右侧为整洁桌面:透明面膜收纳盒整齐摆放,面膜分类收纳,化妆刷入筒,护肤品有序排列,突出整理前后的巨大反差;右侧收纳盒结构、材质、分格与输入图完全一致。
[光影质感] 整体暖色调自然光,左侧稍暗突出杂乱感,右侧明亮通透突出整洁感,光影自然柔和。
[配色色系] 全局底色 #FFF8F0 暖米白;左侧偏灰调杂乱,右侧明亮暖白;主色透明+木色桌面。
[视角构图] 正面平视,左右对称分栏构图,中间用竖线或箭头分隔,阅读动线左痛点 → 右解决。
[文字版式] 顶部居中主标题「桌面整洁 护肤更省心」,黑色粗黑体;左侧上方小字标签「杂乱无章 找面膜费时」,右侧上方小字标签「整齐有序 一目了然」;底部配3个短卖点:「告别凌乱」「随手可取」「护肤高效」。
[比例分辨率] 9:16 竖版比例,4K分辨率,文字清晰可辨,高清画质。
[负向提示词] 产品变形,颜色偏差,水印,文字错乱,背景杂乱,过度夸张脏乱,面膜包装文字错误。