设计体系丨根据六大设计体系总结出的资产清查清单（五）

龙哩个龙 2023-07-29 10:57:33

上一篇文章，我讲了如何去创建设计体系，这篇文章我提供了一个详细的资产清单。

对于产品经理来说，我们不仅可以对设计体系的具体内容进行详细的了解，辅助我们进行产品设计，也可以考虑根据Windows、Andriod、iOS、MacOS、WatchOS、TVOS等平台的输入、互动、平台差异提出一些惊艳的产品设计。

我基于对御三家平台级设计体系（Apple的HIG、Google的MDS、Microsoft的FDS）和国内外知名的企业级设计体系（Salesforce的LDS、Atlassian的ADS、蚂蚁金服的AD）的调查，生成了一份较清晰的清单用于指导清查和后续的资产建设过程。

在类别划分上需要提前说明的是这是总结的结果，不同平台企业可能出现同一内容名称不一样、内容不同名称一样等现象，这是他们根据自身特色进行的调整，并且每家都有各自独特的内容（例如Apple为不同产品特别定制操作系统，而Microsoft倾向于使用同一操作系统面向不同产品），因此文中对特别内容有所划分。

如果有不准确的地方，欢迎专业大佬在评论区或私信我提出。我在之前的文章中已经预先提到了设计的体系的结构，不过我有所更新。

一、设计体系的VGT-RO三层一环结构

下面是根据我对理解，提出的设计体系VGT-RO三层一环结构（和之前的结构可能有所差异，目前以我这篇文字为准）帮助大家理解设计体系。

1. 第一层：愿景与原则（Vision & Principle）

它们作为设计决策的参考，指导前行。

愿景指导原则的生成，原则根据组织和产品的目的变化，主要作用是建立一种通用的评价标准，指导设计与开发，帮助使用人员进行评估，以形成相关团队的决策共识。也有称设计价值观、设计语言的。

2. 第二层：指南（Guidelines）

包含样式指南、模式指南、内容指南等需要通过文字、最佳实践、指示图像等进行规则传达的内容。

样式指南（Style Guideline）：样式指南是对大部分非功能性模块进行规范，对如配色、交互状态、动画、排版、间距、图标样式、形状与边框、插画、照片、标志、布局、数据可视化方式，甚至可能包括品牌身份、设计语言、声音和语气、写作、模式和代码风格指南等进行描述和定义，提供最佳用例和错误用例。它们大部分无法形式单独组件，但是可以提供代码。
模式指南(Patterns Guideline)：模式是可重用组件的集合，模式指南对功能性模式进行规则定义，其中包含大量的组件内容，但其中的重点是对如何使用组件进行定义。另外除了组件外，还会对互动方式、输入方式、可用性等等内容进行定义。
内容指南（Content Guideline）：内容指南通常无法提供代码，但能通过描述和用例来对一些难量化的内容进行规范指导。例如语气和音调、音效、文案风格等。

3. 第三层：工具与库（Tools & Libraries）

包含组件库、工具包、协同工具等可以供体系用户直接使用的内容。

工具包（Toolkits）：这主要面对设计人员，提供了可供常规设计软件打开，由设计师直接使用的文档。一般直接可以在体系网站或在设计团队内部流传。
组件库（Components Libraries）：这是主要面向前端工程人员的工具，通常是开放的网站或者内部的文件（是文件而非文档）。组件背后是体系中的可重用代码的一部分，它们是应用程序接口的构建块，开发人员可以快捷地使用它们。这里主要是指装载了组件的最终载体形式。
协同工具（Collaborative Tools）：更为前沿的设计体系搭建者，开始提供创建依托于生产力软件的辅助工具，以进一步提升设计与开发者之间进行沟通的效率。如React-Sketch.app、Kitchen等。当然另一方面搭载设计体系的网站或文档也算是一种协作工具。

4. 一环：关系模式与组织流程（Relation Model and Organization Process）

包围着这三层内容，它促进整个设计体系成为一个活的生态系统。

关系模式（Relation Model）：关系模式描述的是设计体系维护团队的职能和构成结构，以及他们与组织的产品的关系。
组织流程(Organization Process)：组织流程描述设计体系如何得到形成、应用、更新和推广，是使设计体系成为鲜活生命体的血液。

二、资产清单

此块资产清单内容包含指南内容和资源与工具两大部分，下面为正式内容。

1. 样式指南

对视觉内容进行的规则，包含色彩、字体、网格、标志、材质、插画、图标、阴影、形状、版式等内容。

Acrlic 亚克力（Fluent） Branding 品牌推广 Color 色彩 Corner radius 转角半径 Dark Mode 暗黑模式 Fonts 字体 Grid 网格 Icons 图标 Illustrations 插画 Logos 标志 Materials 材质 Shadow 阴影 Shape 形状 Translucency 半透明（HIG-MacOS） Typography 版式

2. 内容指南

此块是一些内容的指南，主要除开常规的视觉外，对文字、文案风格、图片、视频、声效、语音语调等规则定义，可能与样式指南存在一些交集。

Launch screen 启动页 Sound 声效 Video 视频 Voice and tone 语音语调 Writing Style 文案风格

3. 模式指南

通用的指南包含环境、手势、输入方式、交互、动效、可用性、可访问性、可视化定义等内容，在模式指南中会包含大量的组件（包含通用组件、导航、基础输入、菜单与工具条、文本、选择器、数据展示、反馈、状态与讯息等内容）。

Accessibility 可访问性 Communication 沟通 Environment 环境 Gesture 手势 Input 输入 Interaction 交互 Layout 布局 Machine Learning 机器学习 Motion 动效 Usability 可用性 Visualization 可视化

4. 输入与互动Input and Interaction

此部分收集了Microsoft的Windows操作系统、Google的Android操作系统、Apple的iOS、MacOS、watchOS、tvOS等操作系统的输入、交互的定义和差别。

1）Windows互动

产品经理，产品经理网站

Windows平台的设备互动复杂且多样，相关咨询可以看官方的互动与输入指南：https://docs.microsoft.com/en-us/windows/uwp/design/input/

Pointer Input 指针输入 Gaze interactions 凝视互动 Eye tracking 眼部追踪 Pen and Windows Ink手写笔与Ink Touchpad 触控板 Gamepad and remote control 游戏板和遥控器 Mouse 鼠标输入 Keyboard 键盘 Cortana 小娜 Speech interactions 语音互动 Controller 控制器

① Windows手势

Drag and prop 拖放 Optical zoom and resizing 光学变焦与调整大小 Touch 触控 Panning 平移 Rotation 旋转 Visual feedback 视觉反馈

② Windows平台特别产品

Surface系列 Surface Hub MR 混合现实 XBox HoloLens Windows IoTs

针对各类自家设备，Fluent有专门进行界面的说明关于Windows各类设备的界面设计指导：https://docs.microsoft.com/en-us/windows/uwp/design/devices/

2）Andriod互动

产品经理，产品经理网站

安卓系统是目前一大统治级的操作系统之一，主要依靠手势等进行互动，也会存在智能手机通用的一些NFC、语音交互、摄像识别、按键互动等等。

关于Android的手势说明：https://material.io/design/interaction/gestures.html#principles

① Navigational gestures 导航手势

Tap 轻敲 Scroll and pan 滚动和平移 Drag 拖 Swipe 滑动 Pinch 捏

② Action Gestures 动作手势

Tap 轻敲 Long Press 点按或长按 Swipe 滑动

③ Transform Gestures 变换手势

Double tap 双击 Pinch 捏 Compound gestures 复合手势 Pick up and move 拿起并移动

3）iOS互动

iOS作为独特的智能手机交互系统，拥有一些独特的设置。例如与安卓相比，它拥有定义清晰的模态交互，并划分系统级交互和APP级交互。同时是iPadOS的基础系统，他们的相似性非常高。

关于iOS的互动指南说明：https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/3d-touch/

① iOS APP 应用架构

Launching 启动 Onboarding 新手引导 Loading 加载 Modality 模态 Navigation 导航 Requesting Permission 请求允许 Settings 设定

② iOS 互动

3D Touch 3D触控 Apple Pencil and Scribble Apple Pencil与涂鸦 Audio 音频 Authentication 验证 Data Entry 数据输入 Drag and Drop 拖放 Feedback 反馈 File Handling 文件处理 Game Controllers 游戏控制器 Gestures 手势 Haptics 触觉反馈 Near Field Communication 近场通讯 Pointers (iPadOS) 指针 Undo and Redo 撤销与重做 Augmented Reality 增强现实 Siri（HIG-iOS）

③ iOS手势

Tap轻敲 Drag 拖拽 Flick 轻移 Swipe 滑动 Double tap 双击 Pinch 捏 Three-finger pinch 三指缩放 Three-finger swipe 三指滑动 Touch and hold 触控并按住 Rotate 滑动 Shake 摇动

关于iOS的手势说明：https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/

4）MacOS互动

产品经理，产品经理网站

与Windows系统平分天下的电脑系统，拥有独特的设置，并且单独拆分出的电脑系统，针对电脑场景做更多体验设计。同时甚至开创了独特的触控条交互，拓展了互动体验。

① MacOS APP 应用架构

Full-Screen Mode 全屏模式 Loading 加载 Modality 模态 Onboarding 新手引导 Preferences 首选项 Restoring State 恢复状态 Security 安全

② MacOS 互动

Authentication 验证 Data Entry 数据输入 Drag and Drop 拖放 File Handling 文件处理 Game Controllers 游戏控制器 Help 帮助 Keyboard 键盘 Mouse and Trackpad 鼠标与触控板 Providing User Feedback 提供用户反馈 Requesting Permission 请求允许

③ MacOS 触控条组件

Buttons 按钮 Candidate Lists 候选列表 Character Pickers 角色选择 Color Pickers 拾色器 Labels 标签 Popovers 气泡卡片 Scrubbers （未找到准确翻译）浏览刷 Segmented Controls 分段控件 Sharing Service Pickers 共享服务选择器 Sliders 滑条 Steppers 步进器

关于触控条的互动说明：https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-overview/

5）watchOS互动

产品经理，产品经理网站

Apple Watch是体验非常不错的智能可穿戴设备，Apple也为其打造一套独有操作系统。

Accelerometer and Gyroscope 加速度计与陀螺仪 Digital Crown 表冠 Gestures 手势 Haptics 触觉反馈 Modality 模态 Navigation 导航 Workout 锻炼

watchOS手势

Tap 点击 Drag 拖拽 Swipe 滑动 Edge swipe 侧边互动 Firm press and long press 按下并长按

watchiOS互动指南说明：https://developer.apple.com/design/human-interface-guidelines/watchos/interaction/digital-crown/

6）tvOS互动

产品经理，产品经理网站

Apple为其TV系统也打造了操作系统，因为未来的家场景中，智能电视将作为智能家的互动核心之一，因此各大厂商都会跟进智能电视的设计。

由于屏幕的扩大，这块的交互设计通常较为简单，以触控和遥控操作为核心。

Remote 遥控器 Game Controllers 游戏控制器

遥控器手势

Swipe 滑动 Click 点击 Tap 轻敲 Button 实体按钮

遥控器的互动说明：https://developer.apple.com/design/human-interface-guidelines/tvos/remote-and-controllers/remote/

5. 布局 Layout

此块部分主要是布局相关的规范指南，其中比较重要的是关于响应式布局的说明。

Alignment 对齐 Divider 分割线 Grid 栅格 Layout 布局 Margin 边距 Padding 填充 Responsive Layout 响应式布局 Space 间距

关于响应式布局方法，Fluent中有详细说明：https://docs.microsoft.com/en-us/windows/uwp/design/layout/responsive-design#reposition

关于屏幕尺寸和响应断点的说明：https://docs.microsoft.com/en-us/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design

6. 动画 Animation

Connected animation 连接动画 Directionality and gravity 方向性与重力 Page transitions 页面过渡 Parallax 视差 Timing and easing 时间与缓动

7. 组件 Component

组件是系统中可重用代码的一部分，是API的构建单位。组件的重用性越高，就越容易维持和拓展。基于组件的开发通过重用代码降低技术负担。

此块内容收集了大量的组件，包括通用组件、导航、基础输入、菜单与工具条、文本、选择器、数据展示、反馈、状态与讯息等组件内容清单，内容比较多，就不一一放图说明了，感兴趣的请自己进行搜索查询。

1）通用组件

Button 按钮 Button group 按钮组 Repeat button 重复按钮 Hyperlink button 超链接按钮 Dropdown button 下拉按钮 Split button 拆分按钮 Help button 帮助按钮 Logo 标志 Icon 图标 Typography 排版 Z-depth Z轴深度 Media players媒体播放器

2）导航

Affix 固钉 Anchor 锚点 App bar 应用条 App launcher 应用启动器 BackTop回到顶部 Bottom navigation 底部导航 Breadcrumb 面包屑 Buttons: floating action 浮动按钮 Content link 内容链接 Map 地址 Navigation bars 导航栏 Navigation drawer 导航抽屉 Navigation rail 侧边导航栏 Page header 页头 Page Controls 页面控件 Pagination 分页 Path 路径条 Pivot 枢轴视图 Rich edit box 富文本编辑框 Scroll viewer 滚动查看器 Search 搜索 Semantic zoom 语义变焦 Steps 步骤条 Trial bar 试用条 Vertical navigation 垂直导航栏

3）基础输入

Cascader 级联选择 Chat 聊天栏 Checkbox Toggle 多选框开关 Checkbox 多选框（复选框） Combobox 组合框 Counter 计数器 Form 表单 Input 输入框 Lookups 搜索组合框 Panels 面板 Picklist 选择列表 Radio Button Group 单选按钮组 Radio Group 单选框组 Radio 单选框 Rate 评分 Rich text editor 富文本编辑器 Select 选择器 Slider 滑动输入条 Switch 开关 Toggle 切换 Transfer 穿梭框 TreeSelect 树选择 Upload 上传

4）菜单与工具条

Accordion 折叠菜单 Action Sheets 操作列表 Activity Views 活动视图 Builder header 构建器标题栏 Command bar flyout弹出式命令栏 Command bar 命令栏 Context menu 情境菜单（右键菜单） Dropdown 下拉菜单 Edit Menus 编辑菜单 Menu 导航菜单/菜单 Pull-Down Menus 下拉菜单（HIG-iOS） Search bars 搜索栏 Sheets: bottom 底部操作列表 Sheets: side 侧边操作列表 Sidebars 侧边栏 Toolbars 工具栏 Segmented Controls 分段控件

5）文本

AutoComplete 自动完成(Ant) Auto-suggest box 自动建议框 Predictive text entry 预测文本输入 Mentions 提及 Number box数字框 Password box 密码框 Rich Edit box富文本编辑框 Rich Text block 富文本区块 Text box 文本框 Token Fields 令牌字段区（HIG-MacOS）

6）选择器

Color picker 拾色器 Color Wells 拾色器（HIG-iOS） Date and time picker 日期与时间选择器 Time picker 时间选择器 Date pickers 日期选择器 Calendar bate picker 日历日期选择器 Calendar view 日历视图 Steppers 步进器（HIG-iOS） Path Controls 路径控制（HIG-MacOS）

7）数据展示

Avatar Group 头像组 Avatar 头像 Backdrop 背景幕布 Badges 徽标数 Brand Bond 品牌带 Calendar 日历 Chart 图表（Ant） Chips 卡片 Collapse 折叠面包 Collections 馆藏 Comment 评论 Date Tables 数据表格 Descriptions 描述列表 Empty 空状态 Faces 手表面盘（HIG-watchOS） Image 图片 List/details 列表/详细信息 Pages 页面 Popvers 气泡卡片/气泡弹窗 Publishers 发布 Scoped Tabs 检查标签页 Scroll Views 滚动视图 Split Views 分割视图 Statistic 统计数值 Status Bars 状态栏 Stickers 贴纸（HIG-iOS） Summary Detail 摘要详细信息 Table 表格 Tabs 标签页/选项卡 Tag 标签/Pills 药丸标签 Thumbnails 缩略图 Tiles 磁贴 Timeline 时间轴 Tree 树形控件 Vertical Tabs 垂直标签页 Widgets 小部件（HIG-iOS）

8）反馈

Alert 警告提示 Banners 横幅提示框 Drawer 抽屉 Message 全局提示 Modal dialog 模态对话框 Dialog （非模态）对话框 Notification 通知提醒框 Flag 旗帜（未找到准确翻译） Scoped notifications 检查通知 Toast 吐司提示 Section message 选择信息 Inline message 内联信息 Popconfirm 气泡确认框 Prompt 提示通知 Result 结果 Setup assistant 设置助理 Skeleton 骨架屏 Spinners 加载中 Split View 视图拆分 Snackbars （未找到准确翻译，来自Material）底部轻量提示框 ConfigProvider 全局化配置 Flyouts （未找到准确翻译，来自Fluent）飞出弹窗 Messaging 讯息传递

9）状态与讯息

Progress indicator 进度指示器 Progress tracker 进度追踪器 Progress bar 进度条 Progress ring 进度环 Indeterminate progress 不确定进度 Determinate progress 确定进度 Tooltip 文字提示 Lozenge 状态提示 Infobar 信息条 Level indicators （未找到准确翻译）级别指示器（HIG-MacOS）