1、什么是设计系统?

  • 设计系统是在某种设计价值观和原则、设计标准指导下的各种共享的设计模式和组件,能够解决品牌体验一致性的问题,提升团队协作效率。
  • 包含设计价值观和原则、设计标准、场景定义以及一套工具包

    2、设计系统的价值

  1. 更加高效省时
  2. 加强了品牌、体验统一性
  3. 成为公司技术资产
  4. 团队协作

    3、如何搭建设计系统

    3.1设计原则

  • 根据产品的定位及价值观来定,公司核心成员通过会议讨论来统一制定。
  • 设计原则是真实而贴切的
  • 设计原则是实用的、可操作的
  • 设计原则是有观点的
  • 设计原则是能产生共鸣、容易让人记住的

案例:
有赞:产品原则:产品定义、产品设计、产品研发、产品运营。设计原则:高效、友好、安全
TED:追求永恒,而不是追求潮流
pinterest:清晰易懂、从满活力、牢不可破
airbnb:统一、通用、风格化的、对话式的
01从0-1搭建设计系统 - 图1

3.2设计语言

包含:栅格、色彩、字体、按钮、投影、图片比例、图片…
通过“情绪版”的方法推导出来:
step1:根据公司的定义、战略来获取一级关键词
step2:根据一级关键词中的视觉映射、心境映射、物化映射(人、事、物)来衍生出二级关键词,通过关键词收集图片。
step3:通过收集到的图片推导出设计语言
01从0-1搭建设计系统 - 图2
01从0-1搭建设计系统 - 图3
01从0-1搭建设计系统 - 图4
01从0-1搭建设计系统 - 图5
01从0-1搭建设计系统 - 图6
01从0-1搭建设计系统 - 图7
01从0-1搭建设计系统 - 图8

3.3设计组件

01从0-1搭建设计系统 - 图9

3.4内容策略(文案规范)

01从0-1搭建设计系统 - 图10
01从0-1搭建设计系统 - 图11
01从0-1搭建设计系统 - 图12
01从0-1搭建设计系统 - 图13
01从0-1搭建设计系统 - 图14

3.5代码、设计和模式库后期同步和维护更新?

01从0-1搭建设计系统 - 图15