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

0 评论 5756 浏览 12 收藏 27 分钟

编辑导语:在上一篇文章中,作者详细介绍了如何创建设计体系,《设计体系 | 如何创建设计体系(四)》;本篇文章里,作者则根据几大设计体系总结出了一份资产清查清单,让我们一起来看一下。

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

对于产品经理来说,我们不仅可以对设计体系的具体内容进行详细的了解,辅助我们进行产品设计,也可以考虑根据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)

8. 可用性 Usability

可用性部分主要针可用性方面内容进行规范和说明。这些可用性定义也是重要的部分,因为经过可用性测试的组件或内容,不仅支持多种设备的性能要求,也能支撑良好的体验传达和体验的包容性传达。

Accessibility 可访问性 \ In-app help 应用内帮助 \ Globalization and localization 全球化与本地化

三、资源与工具

资源与工具是设计体系提供给使用者的快捷使用内容,一般会涵盖一些可视化的组件部分,但缺乏对规则的直接定义、不可视内容的定义等,因此只能是辅助作用,但未来将可能占据主导。

而这方面的清查,我们需要了解设计用资源、开发用资源、辅助工具、协同工具、说明文档、支持流程等等相关资源和工具。

面向设计的资源通常会提供面向不同软件的资源,且更新程度不一。

更新程度来说:目前设计资源比较更新的是Apple,最近更新在2021年1月28日,而我们需要了解我们的设计规范更新程度如何?落后了多久的版本了?

软件资源广度来说:平台系体系主要面向Figma、Sketch、Adobe XD提供资源。Apple提供的设计资源也较广,囊括了多数较多数软件。而国内的Ant Design则会根据国内的情况提供一些特别资源,例如墨刀

Apple HIG:Sketch、Adobe XD、Adobe Photoshop、Keynote

Fluent Design System:Figma、Sketch、Adobe XD

Material Design System:Adobe XD、Figma、Sketch

Ant Design:Figma、Sketch

面向开发的指导来说,平台御三家对开发者也有详尽的文档提供:

  • Apple开发:https://developer.apple.com/develop/
  • Microsoft开发:https://docs.microsoft.com/en-us/windows/uwp/develop/
  • Google开发:https://material.io/develop

而其他体系由于也是御三家的平台用户,自己的生态平台不大,因此较缺失对开发人员的内容。下面有些关于开发者也其他的一些规则定义,目前的了解还较为有限,暂不过多展开:

Naming 命名 \ Date Formats 数据格式 \ Tutorials 教程 \ Design Tokens 设计令牌 \ Templates 模板

教程学习方面,目前只有Microsoft除了常规文档之外建立了学习平台,帮助使用者学习各个内容。

辅助工具与协同工具方面,御三家平台级设计体系有自己特别的代码开发,一些较大的设计体系都会开发一些提效的辅助工具,有单独的产品态(inVision的DSM)的,也有插件型的(如Airbnb DLS的React-Sketch.app、Ant Design 的Kitchen)。

 

作者:龙哩个龙 。公众号:LONG说设计

本文由 @龙哩个龙 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
2人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!