创意预览图

移动端小程序我的页面UI设计,温馨生活风,暖橙色调。顶部是用户信息区域,渐变暖橙色背景,左侧圆形用户头像,右侧显示用户名和"会员等级:黄金会员"标识,下方有"编辑资料"按钮。用户信息区下方是积分/订单

用户头像

GD176642723

2026.08.14
微信小程序「美居装修社」的「我的」个人中心页面,手机竖版UI界面设计,现代简约温暖质感家装风格。配色方案:背景色米白色#F7F5F0,主色调暖橙色#E8873B,辅助色深棕色#5C4A3A,文字主色深灰色#333,次要文字浅灰色#999。页面布局从上到下:1.顶部个人信息区:渐变暖橙色背景从#E8873B到#F0A060,左侧白色圆形头像框内灰色默认人像图标,右侧白色文字昵称「微信用户」和手机号后四位,右上角白色消息铃铛图标带红色数字角标。2.我的订单卡片:白色圆角16px卡片,标题栏「我的订单」深棕色加粗,右侧「查看全部」橙色文字带箭头;下方4列网格布局,每列一个橙色线条图标+灰色12px文字:待付款(钱包图标)、待发货(货车图标)、待收货(包裹图标)、待评价(星星图标)。3.装修服务卡片:白色圆角16px卡片,标题栏「我的装修」深棕色加粗,右侧「全部工单」橙色文字带箭头;下方横向5个状态胶囊按钮:待量房、设计中、施工中、待验收、已完成,浅米色背景#F5F0E8,深棕色文字,圆角20px。4.常用功能列表:白色圆角16px卡片,4行功能入口,每行左侧橙色圆形图标背景+白色线性图标,中间功能名称深棕色文字,最右侧灰色箭头;4个功能分别是:预约记录(日历图标)、收藏案例(心形图标)、专属客服(耳机图标,带绿色在线小圆点)、意见反馈(气泡图标)。底部导航栏:白色背景顶部细线分隔,4个Tab等分——首页、商城、安装工、我的;未选中图标灰色#CCC,选中态图标和文字均为暖橙色#E8873B,当前「我的」为选中状态。设计规范:页面左右边距16px,卡片圆角16px,卡片间距12px,卡片内边距16px;标题字体16px加粗,正文14px常规,辅助文字12px;整体留白充足,视觉层次清晰,扁平化设计,高清商用UI设计稿,iPhone手机屏幕比例微信小程序「美居装修社」的「我的」个人中心页面,手机竖版UI界面设计,现代简约温暖质感家装风格。配色方案:背景色米白色#F7F5F0,主色调暖橙色#E8873B,辅助色深棕色#5C4A3A,文字主色深灰色#333,次要文字浅灰色#999。页面布局从上到下:1.顶部个人信息区:渐变暖橙色背景从#E8873B到#F0A060,左侧白色圆形头像框内灰色默认人像图标,右侧白色文字昵称「微信用户」和手机号后四位,右上角白色消息铃铛图标带红色数字角标。2.我的订单卡片:白色圆角16px卡片,标题栏「我的订单」深棕色加粗,右侧「查看全部」橙色文字带箭头;下方4列网格布局,每列一个橙色线条图标+灰色12px文字:待付款(钱包图标)、待发货(货车图标)、待收货(包裹图标)、待评价(星星图标)。3.装修服务卡片:白色圆角16px卡片,标题栏「我的装修」深棕色加粗,右侧「全部工单」橙色文字带箭头;下方横向5个状态胶囊按钮:待量房、设计中、施工中、待验收、已完成,浅米色背景#F5F0E8,深棕色文字,圆角20px。4.常用功能列表:白色圆角16px卡片,4行功能入口,每行左侧橙色圆形图标背景+白色线性图标,中间功能名称深棕色文字,最右侧灰色箭头;4个功能分别是:预约记录(日历图标)、收藏案例(心形图标)、专属客服(耳机图标,带绿色在线小圆点)、意见反馈(气泡图标)。底部导航栏:白色背景顶部细线分隔,4个Tab等分——首页、商城、安装工、我的;未选中图标灰色#CCC,选中态图标和文字均为暖橙色#E8873B,当前「我的」为选中状态。设计规范:页面左右边距16px,卡片圆角16px,卡片间距12px,卡片内边距16px;标题字体16px加粗,正文14px常规,辅助文字12px;整体留白充足,视觉层次清晰,扁平化设计,高清商用UI设计稿,iPhone手机屏幕比例