feat: 添加分享按钮图片资源和配置
- 在 Images.xcassets 中创建三个新的 Image Set: * shareWechat.imageset - 微信分享按钮图标 * shareQQ.imageset - QQ分享按钮图标 * shareDouyin.imageset - 抖音分享按钮图标 - 为每个 Image Set 配置 Contents.json,支持 @1x/@2x/@3x 多倍率 - 增强 SharePanel.m 按钮样式设置,添加可选的边框和阴影效果 - 添加详细的图片添加指南文档: * images_xcassets_guide.md - Images.xcassets 使用指南 * share_button_guide.md - 分享按钮设计规范 图片规格:60×60pt (@1x), 120×120pt (@2x), 180×180pt (@3x) 支持圆形按钮设计,代码自动处理圆角效果
This commit is contained in:
35
share_button_guide.md
Normal file
35
share_button_guide.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# 分享按钮图片制作指南
|
||||
|
||||
## 快速制作方法
|
||||
|
||||
### 1. 使用在线工具
|
||||
- **Canva**: 创建60×60px圆形图标
|
||||
- **Figma**: 设计矢量图标,导出多倍率PNG
|
||||
|
||||
### 2. 设计规范
|
||||
```
|
||||
尺寸: 60×60pt (多倍率: @1x, @2x, @3x)
|
||||
形状: 正圆形(代码自动处理圆角)
|
||||
背景: 品牌色 + 白色logo
|
||||
边距: 图标留8-12px内边距
|
||||
```
|
||||
|
||||
### 3. 颜色规范
|
||||
```css
|
||||
微信: #07C160
|
||||
QQ: #12B7F5
|
||||
抖音: #FE2C55
|
||||
```
|
||||
|
||||
### 4. 添加步骤
|
||||
1. 制作三套图片(每套包含@1x/@2x/@3x)
|
||||
2. 在Xcode中打开Images.xcassets
|
||||
3. 创建新的Image Set: shareWechat, shareQQ, shareDouyin
|
||||
4. 拖入对应倍率的图片
|
||||
5. 编译运行查看效果
|
||||
|
||||
### 5. 测试检查
|
||||
- [ ] 图片清晰度(特别是@3x高分辨率设备)
|
||||
- [ ] 圆角效果正常
|
||||
- [ ] 色彩还原准确
|
||||
- [ ] 点击区域响应正常
|
||||
Reference in New Issue
Block a user