1 changed files with 548 additions and 0 deletions
@ -0,0 +1,548 @@ |
|||||
|
半径里 Design System v1.0 |
||||
|
|
||||
|
以后所有页面全部遵循。 |
||||
|
|
||||
|
一、设计关键词(整个项目的灵魂) |
||||
|
|
||||
|
这是最重要的。 |
||||
|
|
||||
|
关键词: |
||||
|
|
||||
|
青春 |
||||
|
轻松 |
||||
|
省钱 |
||||
|
校园 |
||||
|
成长 |
||||
|
呼吸感 |
||||
|
未来感 |
||||
|
游戏化 |
||||
|
高级感 |
||||
|
治愈 |
||||
|
|
||||
|
绝不能: |
||||
|
|
||||
|
❌ 商务后台风 |
||||
|
❌ 微信工具风 |
||||
|
❌ 支付宝风 |
||||
|
❌ Android Material风 |
||||
|
❌ 表格风 |
||||
|
❌ 信息流风 |
||||
|
❌ 卡片堆叠风 |
||||
|
|
||||
|
一句话: |
||||
|
|
||||
|
像任天堂,而不是像企业OA。 |
||||
|
|
||||
|
二、视觉DNA |
||||
|
|
||||
|
整个项目只能出现这一套语言。 |
||||
|
|
||||
|
页面背景 |
||||
|
|
||||
|
永远不是纯白。 |
||||
|
|
||||
|
统一: |
||||
|
|
||||
|
#F8FCFA |
||||
|
|
||||
|
再加: |
||||
|
|
||||
|
超浅绿色 |
||||
|
|
||||
|
超浅蓝色 |
||||
|
|
||||
|
超浅橙色 |
||||
|
|
||||
|
渐变光斑 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
左上: |
||||
|
|
||||
|
绿色 |
||||
|
|
||||
|
右下: |
||||
|
|
||||
|
橙色 |
||||
|
|
||||
|
透明度10% |
||||
|
|
||||
|
非常淡。 |
||||
|
|
||||
|
不能明显。 |
||||
|
|
||||
|
就是苹果官网那种。 |
||||
|
|
||||
|
三、圆角规范 |
||||
|
|
||||
|
统一。 |
||||
|
|
||||
|
一级卡片 |
||||
|
|
||||
|
32rpx |
||||
|
|
||||
|
二级卡片 |
||||
|
|
||||
|
24rpx |
||||
|
|
||||
|
按钮 |
||||
|
|
||||
|
999rpx |
||||
|
|
||||
|
Tag |
||||
|
|
||||
|
999rpx |
||||
|
|
||||
|
头像 |
||||
|
|
||||
|
24rpx |
||||
|
|
||||
|
不要今天16 |
||||
|
|
||||
|
明天30 |
||||
|
|
||||
|
后天50 |
||||
|
|
||||
|
统一。 |
||||
|
|
||||
|
四、阴影 |
||||
|
|
||||
|
整个项目: |
||||
|
|
||||
|
只允许一种阴影。 |
||||
|
|
||||
|
0 12rpx 40rpx rgba(30,80,60,.06) |
||||
|
|
||||
|
不能: |
||||
|
|
||||
|
box-shadow: |
||||
|
|
||||
|
0 10 20 |
||||
|
|
||||
|
0 4 8 |
||||
|
|
||||
|
0 30 60 |
||||
|
|
||||
|
到处乱写 |
||||
|
五、留白规范(最重要) |
||||
|
|
||||
|
你现在最大的毛病: |
||||
|
|
||||
|
所有东西挤一起。 |
||||
|
|
||||
|
统一: |
||||
|
|
||||
|
页面左右: |
||||
|
|
||||
|
32rpx |
||||
|
|
||||
|
模块之间: |
||||
|
|
||||
|
28rpx |
||||
|
|
||||
|
卡片内部: |
||||
|
|
||||
|
24rpx |
||||
|
|
||||
|
文字: |
||||
|
|
||||
|
16rpx |
||||
|
|
||||
|
永远不要: |
||||
|
|
||||
|
4 |
||||
|
|
||||
|
6 |
||||
|
|
||||
|
8 |
||||
|
|
||||
|
10 |
||||
|
|
||||
|
|
||||
|
那种密密麻麻。 |
||||
|
|
||||
|
六、字体层级 |
||||
|
|
||||
|
整个项目只能四种字号。 |
||||
|
|
||||
|
一级标题 |
||||
|
|
||||
|
48rpx |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
今天22:00瓜分现金 |
||||
|
|
||||
|
—————————— |
||||
|
|
||||
|
二级标题 |
||||
|
|
||||
|
36rpx |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
学院荣耀榜 |
||||
|
|
||||
|
—————————— |
||||
|
|
||||
|
正文 |
||||
|
|
||||
|
28rpx |
||||
|
|
||||
|
—————————— |
||||
|
|
||||
|
说明 |
||||
|
|
||||
|
22rpx |
||||
|
|
||||
|
不能出现: |
||||
|
|
||||
|
21 |
||||
|
|
||||
|
23 |
||||
|
|
||||
|
25 |
||||
|
|
||||
|
27 |
||||
|
|
||||
|
31 |
||||
|
|
||||
|
33 |
||||
|
|
||||
|
|
||||
|
乱。 |
||||
|
|
||||
|
七、颜色体系 |
||||
|
|
||||
|
主色: |
||||
|
|
||||
|
#34C8A0 |
||||
|
|
||||
|
辅助: |
||||
|
|
||||
|
#FFA63D |
||||
|
|
||||
|
危险: |
||||
|
|
||||
|
#FF6464 |
||||
|
|
||||
|
成功: |
||||
|
|
||||
|
#22C55E |
||||
|
|
||||
|
文字: |
||||
|
|
||||
|
#202124 |
||||
|
|
||||
|
二级: |
||||
|
|
||||
|
#70757A |
||||
|
|
||||
|
三级: |
||||
|
|
||||
|
#A8B0B8 |
||||
|
|
||||
|
整个项目不要超过: |
||||
|
|
||||
|
6种颜色。 |
||||
|
|
||||
|
八、按钮规范 |
||||
|
|
||||
|
整个项目只允许: |
||||
|
|
||||
|
三种按钮。 |
||||
|
|
||||
|
一级按钮 |
||||
|
|
||||
|
橙色 |
||||
|
|
||||
|
胶囊 |
||||
|
|
||||
|
立即拼团 |
||||
|
|
||||
|
立即下注 |
||||
|
|
||||
|
立即助推 |
||||
|
|
||||
|
高度: |
||||
|
|
||||
|
88rpx |
||||
|
二级按钮 |
||||
|
|
||||
|
绿色 |
||||
|
|
||||
|
描边 |
||||
|
|
||||
|
查看 |
||||
|
|
||||
|
领取 |
||||
|
|
||||
|
进入 |
||||
|
三级按钮 |
||||
|
|
||||
|
纯文字 |
||||
|
|
||||
|
更多>> |
||||
|
|
||||
|
查看全部 |
||||
|
|
||||
|
禁止: |
||||
|
|
||||
|
灰按钮 |
||||
|
|
||||
|
蓝按钮 |
||||
|
|
||||
|
紫按钮 |
||||
|
|
||||
|
九、卡片规范 |
||||
|
|
||||
|
整个项目: |
||||
|
|
||||
|
卡片只有三类。 |
||||
|
|
||||
|
数据卡 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
余额 |
||||
|
|
||||
|
中奖率 |
||||
|
|
||||
|
订单 |
||||
|
|
||||
|
收入 |
||||
|
|
||||
|
特点: |
||||
|
|
||||
|
数字巨大。 |
||||
|
|
||||
|
下面说明。 |
||||
|
|
||||
|
功能卡 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
兼职主页 |
||||
|
|
||||
|
商家后台 |
||||
|
|
||||
|
钱包 |
||||
|
|
||||
|
左: |
||||
|
|
||||
|
ICON |
||||
|
|
||||
|
右: |
||||
|
|
||||
|
箭头 |
||||
|
|
||||
|
中间: |
||||
|
|
||||
|
说明 |
||||
|
|
||||
|
游戏卡 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
学院荣耀榜 |
||||
|
|
||||
|
白嫖星球 |
||||
|
|
||||
|
PK |
||||
|
|
||||
|
幸运盲盒 |
||||
|
|
||||
|
特点: |
||||
|
|
||||
|
一定有: |
||||
|
|
||||
|
奖励 |
||||
|
|
||||
|
倒计时 |
||||
|
|
||||
|
进度 |
||||
|
|
||||
|
按钮 |
||||
|
|
||||
|
动态。 |
||||
|
|
||||
|
十、ICON规范 |
||||
|
|
||||
|
绝不能: |
||||
|
|
||||
|
emoji。 |
||||
|
|
||||
|
统一: |
||||
|
|
||||
|
线性图标。 |
||||
|
|
||||
|
风格: |
||||
|
|
||||
|
苹果SF Symbols。 |
||||
|
|
||||
|
全部: |
||||
|
|
||||
|
2px。 |
||||
|
|
||||
|
统一粗细。 |
||||
|
|
||||
|
十一、首页规范 |
||||
|
|
||||
|
首页只能: |
||||
|
|
||||
|
三级结构。 |
||||
|
|
||||
|
① Hero |
||||
|
|
||||
|
↓ |
||||
|
|
||||
|
② 今日重点 |
||||
|
|
||||
|
↓ |
||||
|
|
||||
|
③ 更多玩法 |
||||
|
|
||||
|
不能: |
||||
|
|
||||
|
30个入口。 |
||||
|
|
||||
|
十二、个人中心规范 |
||||
|
|
||||
|
一定不是菜单。 |
||||
|
|
||||
|
而是: |
||||
|
|
||||
|
身份中心。 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
我是普通用户 |
||||
|
|
||||
|
↓ |
||||
|
|
||||
|
我是配送员 |
||||
|
|
||||
|
↓ |
||||
|
|
||||
|
我是商家 |
||||
|
|
||||
|
↓ |
||||
|
|
||||
|
校园生活 |
||||
|
|
||||
|
每一个: |
||||
|
|
||||
|
像一个身份空间。 |
||||
|
|
||||
|
不是: |
||||
|
|
||||
|
菜单。 |
||||
|
|
||||
|
十三、所有页面都必须有"重点" |
||||
|
|
||||
|
每一个页面: |
||||
|
|
||||
|
第一屏: |
||||
|
|
||||
|
只能有一个重点。 |
||||
|
|
||||
|
例如: |
||||
|
|
||||
|
钱包: |
||||
|
|
||||
|
余额。 |
||||
|
|
||||
|
白嫖: |
||||
|
|
||||
|
今晚奖金。 |
||||
|
|
||||
|
学院: |
||||
|
|
||||
|
排名。 |
||||
|
|
||||
|
配送: |
||||
|
|
||||
|
今日收入。 |
||||
|
|
||||
|
不要: |
||||
|
|
||||
|
第一屏: |
||||
|
|
||||
|
十几个数字。 |
||||
|
|
||||
|
十四、动画规范(重点) |
||||
|
|
||||
|
整个项目: |
||||
|
|
||||
|
不能死。 |
||||
|
|
||||
|
必须: |
||||
|
|
||||
|
所有页面都有: |
||||
|
|
||||
|
hover |
||||
|
|
||||
|
缩放 |
||||
|
|
||||
|
渐变 |
||||
|
|
||||
|
数字滚动 |
||||
|
|
||||
|
呼吸 |
||||
|
|
||||
|
倒计时 |
||||
|
|
||||
|
领奖动画 |
||||
|
|
||||
|
金币飞入 |
||||
|
|
||||
|
星球券飞入 |
||||
|
|
||||
|
但是: |
||||
|
|
||||
|
都很轻。 |
||||
|
|
||||
|
不要: |
||||
|
|
||||
|
炫酷。 |
||||
|
|
||||
|
十五、游戏化规范 |
||||
|
|
||||
|
所有页面: |
||||
|
|
||||
|
尽量回答: |
||||
|
|
||||
|
今天还能干什么? |
||||
|
|
||||
|
还能赚什么? |
||||
|
|
||||
|
还能省多少钱? |
||||
|
|
||||
|
还能拿什么奖励? |
||||
|
|
||||
|
而不是: |
||||
|
|
||||
|
功能入口。 |
||||
|
十六、最重要的一句话(Cursor必须遵守) |
||||
|
|
||||
|
以后所有Prompt第一句: |
||||
|
|
||||
|
严格遵循《半径里 Design System v1.0》。 |
||||
|
|
||||
|
这是一个面向18-25岁中国大学生的校园平台。 |
||||
|
|
||||
|
视觉目标不是工具软件,而是: |
||||
|
Nintendo + Apple + 小红书 + 微信小程序的结合体。 |
||||
|
|
||||
|
整体体验必须满足: |
||||
|
|
||||
|
① 呼吸感(大量留白) |
||||
|
② 游戏化(成长感) |
||||
|
③ 高级感(不过度装饰) |
||||
|
④ 校园青春感(轻松、有生命力) |
||||
|
⑤ 信息一眼就懂(3秒理解页面) |
||||
|
⑥ 一个页面只有一个视觉中心 |
||||
|
⑦ 每个模块都有明确层级,不允许菜单式堆砌 |
||||
|
⑧ 所有卡片都要有温度,避免后台管理系统风格 |
||||
|
⑨ 优先优化布局和视觉节奏,而不是增加装饰元素 |
||||
|
⑩ 不允许自由发挥新的设计语言,所有页面必须保持统一设计体系。 |
||||
Loading…
Reference in new issue