杦千平小程序设计风格详解

一、整体风格定位

风格名称

自然轻奢 (Natural Luxury)

风格关键词

• 自然、温润、克制
• 轻奢、精致、品质感
• 简约、留白、呼吸感

目标用户画像

• 25-40岁都市女性
• 注重生活品质
• 追求简约而不简单的生活美学
• 有一定消费能力，注重衣物管理

二、色彩风格

主色调：森林绿 (#1F513F)

• 意象：森林、自然、沉稳、高级
• 心理感受：安静、可靠、品质感
• 应用：品牌标识、主按钮、重点强调

背景色：暖白 (#FAF6F1)

• 意象：棉麻、纸张、天然织物
• 心理感受：温暖、舒适、亲和
• 应用：页面背景，营造"呼吸感"

辅助色系

色彩比例

三、版式风格

圆角语言

• 大圆角 (32rpx)：卡片、弹窗、大按钮
• 特点：圆润、柔和、无攻击性
• 设计意图：营造亲和力，弱化界面冰冷感

间距节奏

• 宽松留白：40rpx 页面边距
• 呼吸空间：区块间 48rpx 间距
• 设计意图：减少视觉压迫感，让用户浏览时感到轻松

阴影使用

• 极轻阴影：0 2rpx 8rpx rgba(0,0,0,0.04)
• 特点：若隐若现，不抢眼
• 设计意图：通过微妙层次感提升品质，而非强烈立体感

四、字体风格

字体选择

• 系统默认字体（微信小程序环境）
• 无衬线体，清晰易读

字重层级

文字颜色

• 主文字 (#1C1917)：近黑色，非纯黑，更柔和
• 次要文字 (#78716C)：暖灰色，与背景协调

五、图形语言

图标风格

• 线性图标：2px 线宽
• 圆角端点：与整体圆润风格一致
• 单色填充：简洁，无渐变

图标容器

• 圆角方形容器：24rpx 圆角
• 淡色背景：各分类功能色的 10% 透明度
• 设计意图：图标不孤立，有"归属感"

图片处理

• 衣物卡片：1:1 正方形，32rpx 大圆角
• 背景处理：#EDE8E2 暖灰底色
• 无边框：干净利落

六、交互风格

动效特点

• 柔和缓动：ease-out / ease-in-out
• 适中时长：200-300ms
• 微妙反馈：scale(0.98)、opacity(0.9)

反馈原则

• 即时响应：点击立即有反馈
• 轻柔过渡：无突兀跳转
• 状态明确：选中/未选中清晰区分

手势交互

• 横向滑动浏览
• 长按进入编辑模式
• 下拉刷新
• 上拉加载

七、情感设计

欢迎体验

• 进入首页显示用户昵称
• "Hi, [用户名]，欢迎回来"
• 目的：建立个人归属感

空状态设计

• 插画风格图标
• 温和引导文案
• 避免：冷冰冰的"暂无数据"

成功反馈

• 轻量提示 Toast
• 绿色主色确认感
• 避免：弹窗打断流程

八、品牌元素

品牌名：杦千平

• 字体：700 粗体
• 字号：44rpx (22px)
• 颜色：#1F513F 森林绿
• 位置：顶部居中

品牌调性

• 内敛不张扬：品牌名小而精致
• 品质感：通过色彩和留白传递
• 专业感：功能布局清晰有序

九、设计原则总结

1. 少即是多

• 每屏信息精简
• 功能聚焦核心
• 视觉元素克制

2. 自然材质感

• 暖白如棉麻
• 森林绿如植物
• 圆润如鹅卵石

3. 舒适优先

• 大间距不拥挤
• 柔和色不刺眼
• 圆角不尖锐

4. 品质细节

• 微妙阴影层次
• 精准对齐网格
• 一致的设计语言

十、风格对比参考

十一、设计情绪板 (Mood Board)

意象关键词

质感参考

• 磨砂玻璃的半透明
• 亚麻布的纹理感
• 哑光陶瓷的温润
• 原木的自然气息

这套设计风格让用户在使用衣橱管理工具时，感受到的不是冰冷的效率工具，而是一个温暖、有品质、让人愿意停留的个人空间。

杦千平小程序 - 核心色值

全局绿色（主色）

背景底图色（暖白）

快速复制

这两个是整个小程序的核心色系，其他所有颜色都是围绕这两个色值衍生的。