羚珑智能设计背后的图形处理

1. 羚珑智能设计背后的图形处理王勇京东凹凸实验室 - 前端工程师

2. 2

3. 个人在京东负责过的业务羚珑平台开发广告图千人千面推荐与生成算法参与平台早期版本的开发海量图片实时生成负责图片推荐与智能生成

4. 01 智能设计之物料数字化设计工具 - 效能提升目录 C O N T E N T S 02 智能设计之生成与排版 Ai 设计师 - 机器能不能代替人 03 智能设计之推荐型设计设计画像 - 探索用户审美的规律

5. 01/ 物料数字化

6. 痛点【设计分发效率低】通过下发设计稿件给运营/需求方/开发【设计资源分散化】设计稿件去中心化，未变为公司设计资产【降低设计⻔槛】运营同学经常只需要改下文字却要等设计师排期

7. 解决方案 1 psd / sketch 设计稿件 2 parse 解析器 3 template 结构化数据 4 editor 图层拖拽图片替换文字录入缩放翻转文字效果 ...

8. 01 解析

9. 技术方案开源解决方案 PSD.js 基于 PSD.rb Psdump 比较成熟的方案输出对象太大跨语言，前端不擅⻓

10. 技术方案自研方案 Psd-parser 有追求的程序员支持流式解析支持色彩空间转换支持更复杂的psd （100+图层）输出更优雅的数据结构更灵活

11. 从文档开始二进制文件本文档供第 3 方读取和写入 Photoshop 原生文件格式官方文档 https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/

12. Psd 文件构成宽高、色彩模式、深度、颜色模式颜色模式 icc 信息、路径、历史记录等图层和蒙版信息预览图文件分 5 个部分

13. 流式解析 function* 可中断的 IO 读写流

14. Psd 解析 Signature 0x 4 字节 Version 2 Reserved 6 Chanel 2 Height 4 Width 4 Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4)

15. Psd 解析 Signature 0x 4 字节 Version 2 Reserved 6 Chanel 2 Height 4 Width 4 Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4) const version = yield* reader.readInt16()

16. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 Height 4 Width 4 Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4)

17. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 const channels = yield* reader.readUInt16() Height 4 Width 4 Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4)

18. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 const channels = yield* reader.readUInt16() Height 4 const height = yield* reader.readUInt32() Width 4 Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4)

19. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 const channels = yield* reader.readUInt16() Height 4 const height = yield* reader.readUInt32() Width 4 const width = yield* reader.readUInt32() Depth 2 Color mode 2 const signature = yield* reader.readUtf8(4)

20. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 const channels = yield* reader.readUInt16() Height 4 const height = yield* reader.readUInt32() Width 4 const width = yield* reader.readUInt32() Depth 2 const depth = yield* reader.readUInt16() Color mode 2 const signature = yield* reader.readUtf8(4)

21. Psd 解析 Signature 0x 4 字节 Version 2 const version = yield* reader.readInt16() Reserved 6 yield* reader.skip(6) Chanel 2 const channels = yield* reader.readUInt16() Height 4 const height = yield* reader.readUInt32() Width 4 const width = yield* reader.readUInt32() Depth 2 const depth = yield* reader.readUInt16() Color mode 2 const colorMode = (yield* reader.readUInt16()) as keyof type const signature = yield* reader.readUtf8(4)

22. Psd 解析 Parse Header Parse ColorMode Parse ImageSources Parse LayerMaskInfo Parse ImageData 逐个读取最后输出结构化数据

23. Sketch 解析 sketch是一种zip文件，只是后缀是 .sketch 解压缩 ├── document.json ├── images │ └── 30922da10xxxxxxxxxxxxxxx.png ├── meta.json ├── pages │ └── E591xxxxx.json ├── previews │ └── preview.png └── user.json

24. Sketch 解析 ├── document.json ├── images │ └── 30922da10xxxxxxxxxxxxxxx.png ├── meta.json ├── pages │ └── E591xxxxx.json ├── previews │ └── preview.png └── user.json

25. 色差难题更暗更亮网⻚色彩空间：sRGB 不同色彩空间范围

26. 色差难题优化解决思路是否 sRGB 解析是否给出提示转成 rgb icc profile

27. 02 可视化渲染

28. 图层编辑器 tools 基于 React 开发 redux 组件通讯插拔式设计 nav bar xxx panel config panel render

29. 渲染器 text1 text2 text3 edit layer image 2 image 3 image 4 image 5 Text Layer Edit Layer Image Layer Dom + Canvas

30. 关于字体渲染自研一套字体切片服务支持三种返回格式 TTF CSS Base64 支持提取字型数据 glyphs / ascent / unitsPerEm 缓存强化缓存二进制数据、缓存字型数据、保证唯一性 Opentype.js

31. 关于版权常规的防护方法：暗水印高级的防护方法：区块链技术

32. 关于编辑器极致的体验，向 figma 致敬升级开发成本低速度更快灵活性更高善于处理大量元素像素级图像处理更强的兼容性

33. 数字化成果【过去】这样保存设计稿【现在】所⻅即所得

34. 数字化成果线上设计资产输出设计作品百万级百亿级

35. 02/ 生成与排版

36. 业界方案：基于数据驱动的生成算法完全以数据驱动，需要的训练样本量非常大，成本会非常高数据驱动训练的模型的泛化能力缺乏精准性结论：不可行

37. 业界方案：基于规则驱动的生成算法基于简单知识规则库的演绎方法缺乏推理迁移的能力，生成出的图片大多千篇一律，缺乏内容的丰富性与层次感结论：不够丰富

38. 规则驱动 x 数据驱动

39. 智能创意引擎流程设计生成海量图片噪声器对抗训练生成器样本集审核下采样训练生成器的图片效果接近合格样本判别器判别器对海量的图片判别与评价生成器负责合图的构图、配色、场景构建,因此生成器决定了合图的层次丰富程度，起关键作用。判别器负责评价优化。

40. 智能创意引擎元素库第三方素材自有素材背景文案形状渐变曲线纹理复合素材背景商品装饰素材建档算法素材按钮类型：边元素/漂浮元素/商品主题：几何/抽象/立体/线条

41. 智能创意引擎元素库素材建档类型：边元素/漂浮元素主题：几何/抽象/立体/线条氛围：热烈/静谧/神秘树叶树叶边元素浮动元素右边大小大小绿色颜色春天春天实物实物

42. 智能创意引擎生成器参数生成尺寸文案商品⻛格构图排版逻辑确认图元类型集确认⻛格推理场景构建配色素材档案搜索选择图元配色推理渲染图片合成图元尺寸调整与生成智能配色

43. 智能创意引擎元素生成支持解析svg 对其二次编辑并导出实现路径和图层功能矢量素材生成器支持从0到1制作矢量图

44. 智能创意引擎元素生成不规则边界规则形状圆形分散波

45. 智能创意引擎元素生成

46. 智能创意引擎文字排版

47. 智能创意引擎商品排版

48. 广告图合成效果展示

49. 广告图合成效果展示

50. 03/ 推荐型设计

51. 我们面临的疑问

52. 【设计画像】探索不同人对设计的偏好

53. 设计画像是不同用户的审美差异雍正的审美偏向极简，他走的是淡雅隽永⻛乾隆的审美则脱离了高冷的范畴，喜庆热闹、富丽堂皇

54. 设计偏好建模实践详细步骤按钮便好颜色偏好人群偏好布局偏好⻛格偏好字体偏好 1 用户个体行为建模 2 群体偏好建模 3 群体/个体融合

55. 个体偏好建模问题定义利用用户历史N-180天的平台行为，去预测用户未来N天对某类特征的广告图是否会产生点击特征工程模型训练用户点击广告图的行为数据基于统计学计算用户对商品的行为数据行为类型权重值 × 次数 × 时间衰减

56. 群体偏好建模人群划分群体偏好计算同一人群具有相似的偏好 TGI指数性别*年龄*婚姻*省份 *教育*职业目标群体中具有某一特征的群体所占比例 / 总体中具有相同特征的群体所占比例

57. 群体/个体融合行为丰富的用户行为稀疏的用户个人偏好数据群体偏好数据用户设计画像

58. 覆盖数亿用户 16W 用户群近x亿活跃用户橘橙橘紫小镇⻘年小镇中年小镇中产小镇家庭学生一族粉橙⻩蓝橙红都市Z世代都市中产都市蓝领都市家庭银发一族金紫浅粉红男|26-35岁|研究生|金融从男|16-25岁|未婚|大学|学男|36-45岁|已婚|农⺠|蓝女|26-35岁|未婚|大学|白女|36-45岁|已婚|大学|白业者|土豪生|高级白领领领|高级白领领|高级白领十 3000W 大 8000W 人 9000W 蓝群 X 20+ 色系原子细分人群

59. 基于设计画像合成广告图设计画像引擎智能创意引擎用户

60. The next 头图 ‣ [广告图内容] 内容是否与用户相关？ ‣ [广告图设计] 设计手法是否符合用户审美偏好？ ‣ [楼层动线] 用户更关注「楼层A」还是「楼层B」？楼层A ‣ [UI 组件内容] 内容是否包含用户最关注的信息？ ‣ [UI 组件设计] 元素排版是否让用户产生点击欲望？组件A 广告图千人千面色彩⻛格千人千面楼层动线千人千面组件B 楼层B UI组件千人千面简约型组件从众型组件

61. LING.JD.COM 在线设计平台营销设计好帮手

62.