Youth Design

August 06, 2020

作品信息

  • 制作日期: 2018 年 2月 ~ 6月
  • 设计师: 我 / @情缘 / @田老师
  • 简介: Youth Design 是一个多平台的设计语言。以青春、未来、科学为设计理念,服务于 YMFE 的众多移动端、PC 端框架。
  • 背景:

    • 在 YMFE 开发与维护的众多项目中,由于成员更迭、缺少 UI 设计、技术栈不统一等因素,出现了各式各样的页面风格。我们希望编写一套设计规范,统一团队项目的前端 UI 设计,屏蔽设计的差异;统一 LOGO 形式、配色、文案等,以提升团队品牌形象,为团队众多项目注入灵魂。
    • 我们希望创造一个多平台设计语言,统一团队项目的前端 UI 设计。并探寻前沿的交互形式,力求为用户提供卓越的 WEB 应用使用体验。
  • 技术: react / react-sketchapp / styled-components
  • 产出工具:

    • 设计规范生成器:使用 React 输出设计规范的一个工具,用于制作定制化的项目设计规范。修改配置文件中的变量,就可以轻松修改设计规范中的配色、文本字号、排版信息,并可以一键导出设计规范及组件库的 sketch 模板文件。
    • iconfont sketch 插件:使用 skpm 开发,让设计师们更方便地使用内网的图标库。

设计语言内容

1. 设计语言

  1. 以图例的形式解释了四大基本设计原则(亲密性、对比、对齐、重复)在 UI 设计中的使用方式
  2. 提供色彩使用规范,防止过度使用色彩
  3. 提供文本规范,包括字体家族、文字排版、无障碍设计
  4. 提供布局规范,布局方案分为 PC 端布局、移动端布局、响应式设计、栅格系统
  5. 提供组件库的 UI 设计,包含通用(跨平台)组件设计,PC 端组件设计与移动端组件设计

2. 代码

  1. 提供组件库,包括移动端组件(公司内部的 React-Native、Hybrid 框架)与 PC 端组件(基于 Ant Design 封装的一套 PC 端组件)
  2. 提供样式代码、色板生成算法对比度算法,项目中可以直接使用
  3. 设计规范生成器(命令行工具),通过配置生成 项目设计规范skech 模板包

3. Sketch

  1. skech 模板包(PC 端 & 移动端),提高设计稿产出效率
  2. iconfont skech 插件,方便设计师使用内网图标库

LOGO 设计

使用 React-Sketchapp 导出的 sketch 文件展示:

调色板:

项目色彩规范:

文字规范:

UI Kit (Mobile):

UI Kit (PC):