组件库命名

sketch组件的命名逻辑为: 分类 / 模块 / 组织 / 分子 / 原子，命名依次是从大到小

**

Atoms 原子层：单一可工作的原子组件

• Typographic styles 字体样式
• Color swatches 颜色色板
• Icons 图标
• Radio buttons 单选按钮
• Checkboxes 多选框
• Sliders 滑杆
• Toggles 切换按钮
• Profile pictures placeholders个人资料图片占位符
• Product pictures placeholders 产品资料图片占位符
• Buttons 按钮
• Links 链接
• Input fields (without labels) 无标识输入栏
• Tabs 标签文字型按钮（常见导航）
• Pills 药丸型按钮（常见热门，历史搜索关键字）
• Badges 提醒小红点或数字（常见微信未读提示）
• Tags 标签
• Tooltips 信息提示框
• Loading Bar/Circle 加载条/加载圈

Molecules 分子层：1-3个不同的原子组成的简单UI功能组件

• Dropdown menus 下拉菜单
• Radio buttons inside regular buttons 普通按钮里嵌套单选按钮
• Dropdown buttons 下拉按钮
• Date pickers 日期选择器
• Search components 搜索组件
• Blockquotes 引用组件
• Breadcrumbs 面包屑导航栏
• Card/Tile components 卡片/长条卡片组件
• Collapsible group items 可收缩群组
• Input fields (with labels) 带标识输入栏
• Media uploaders 上传组件（选文件按钮+标题）
• Loading components 加载模块（进度条+X+名称）
• Interactive Notifications/Pop-ups/Modal 1-2个按钮的简单提示框/弹窗/状态窗 (cookie提示接受/拒绝）
• Pagination 页面页数选择栏
• Media objects 媒体组件（产品小图+标题+内容简介）

Organisms 有机体：由多个分子组件组成

• Navigation/Tab bars 导航栏
• Video/Music players 视频/音乐播放器
• Media grids 媒体表单（卡片组成的媒体库表单）
• Tables 信息表格（常见小长条卡片组成）
• Carousels 轮播形式（常见卡片+选择箭头/…)
• Forms 信息表单

06 利用原子设计提升设计团队

啥，原子设计不是只针对设计系统么，为啥还会牵扯到设计团队？是的，没错。除了原子设计的5层级概念，Brad还提出了一个叫Single Responsibility Principle （单一职责原则）的概念，如果是学编程的小伙伴就会了解这个概念是说一个系统有不同的模块，每个模块只负责一个功能，模块和模块之间的连带性较小，所以这样的系统鲁棒性更强。
基于这个理念，如果设计系统的分子组件结构相对简单，这样组件可复用性和连接整个系统时就更加容易。基于这个理念，Peter Merholz在他的一书Org Design for Design Orgs中提到了一种全新的设计团队管理方式。大意是现在设计，产品，开发团队的组合大部分是基于最有效的开发流程，根据单一职责原则，让整个产品的每一环可以单独开发运作。
举个例子，假设产品是一个线上购物网站，如果将购物系统分解为浏览商品，添加到购物车以及付款完成购物这3个简单环节，则团队会安排每一环节一个设计师，一个产品经理和几个开发人员，因为这样产品和工程方面的管理会相对容易，但是对于设计师来讲，因为单个人仅负责设计中的一环，个人产出也是受制于局部有限的设计功能，这与设计一直强调的完整的用户体验流程或用户旅程图相左因为你不可能去设计别的设计师负责的模块。这也就是为啥大家有时喜欢去创业公司因为你有更多机会负责整个产品闭环的设计。
基于Peter的理论，那么如果设计师都是一个个原子，其实可以把多个原子更松散的安插在多个流程环节中而不仅仅是只局限于其中一环。