命名规范

December 11, 2021 · View on GitHub

产品的设计开发离不开团队协作。设计资源的新增与使用会难以避免地缺乏规划性,解决方案时常被重复地定义。

所以在 TDesign 设计体系,我们必须确保所有人对于这些标准的定义及运用方式有着一致的认知,通过标准化的协作语言来进行工作。

命名规范

用途中文英文
服务于互联网产品设计中具有内在关联性的、组织有序的设计资产和辅助工具设计体系Design System
设计体系品牌名称暂无TDesign
提供给设计师和前端工程师可复用的界面组成要素,功能流程与交互行为等资产Design Assets
提供给设计师使用的规范文档设计指南Design Guideline
设计资产包含的 UIkit,页面模版等设计师使用的部分设计资源Component Library
设计资产包含的开发同学使用的代码组件,开发文档组件库
组件库中提供的不同开发语言的版本

React for Web 

Vue for Mobile

TDesign 提供的是通用的界面组成要素,例如文本标签,输入框,按钮等基础组件
由基础组件结合业务属性,通常为某内垂直行业定制的组件行业组件
由组件结合的要素模块
由模块和模块组合构成的界面页面模版
不同的设备端口

桌面端

移动端

Web

Mobile

设计资产控件命名及分类规范

设计资产中的涉及到基础组件/高阶组件和组件库是一一对应关系,两者命名和分类保持一致,确保设计师使用的任何控件,在组件库内可以找到对应的代码。

具体的控件规范,设计师请参考设计指南;开发工程师请参考组件库。

组件的命名

按照设计师和前端工程师的共同认知进行命名和归类

基础(Basic)布局(Layout)导航(Navigations)数据类(Data)沟通类(Notice)输入类(Input)其他 Others
色彩 Color布局 Layout选项卡 Tabs图表 Diagram全局提醒 Message输入框 Input模态抽屉 Drawer
字体 Fonts栅格 Grid步骤条 Steps列表 List文字提示 Tootip日期选择器 DatePicker锚点 Anchor
图标 Icon卡片 Card面包屑 Breadcrumb表格 Table加载中 Loading时间选择器 TimePicker标签 Tag
动效 Motion走马灯 Carousel分页 Pagination表单 Form警告提示 Alert单选框 Radio
按钮 Button分割线 Divider导航菜单 Menu树 Tree徽标数 Badge多选框 Checkbox
用户引导 Onboarding搜索框 Search
气泡确认 Popconfirm穿梭框 Transfer
对话框 Dialog下拉菜单 Dropdown
消息通知 Notification树选择 TreeSelect
上传 Upload
开关 Switch
选择器 Select