編輯導語：在上一篇文章中，作者詳細介紹了如何創(chuàng)建設計體系，《設計體系 | 如何創(chuàng)建設計體系（四）》；本篇文章里，作者則根據(jù)幾大設計體系總結出了一份資產(chǎn)清查清單，讓我們一起來看一下。

上一篇文章，我講了如何去創(chuàng)建設計體系，這篇文章我提供了一個詳細的資產(chǎn)清單。

對于產(chǎn)品經(jīng)理來說，我們不僅可以對設計體系的具體內(nèi)容進行詳細的了解，輔助我們進行產(chǎn)品設計，也可以考慮根據(jù)Windows、Andriod、iOS、MacOS、WatchOS、TVOS等平臺的輸入、互動、平臺差異提出一些驚艷的產(chǎn)品設計。

我基于對御三家平臺級設計體系（Apple的HIG、Google的MDS、Microsoft的FDS）和國內(nèi)外知名的企業(yè)級設計體系（Salesforce的LDS、Atlassian的ADS、螞蟻金服的AD）的調(diào)查，生成了一份較清晰的清單用于指導清查和后續(xù)的資產(chǎn)建設過程。

在類別劃分上需要提前說明的是這是總結的結果，不同平臺企業(yè)可能出現(xiàn)同一內(nèi)容名稱不一樣、內(nèi)容不同名稱一樣等現(xiàn)象，這是他們根據(jù)自身特色進行的調(diào)整，并且每家都有各自獨特的內(nèi)容（例如Apple為不同產(chǎn)品特別定制操作系統(tǒng)，而Microsoft傾向于使用同一操作系統(tǒng)面向不同產(chǎn)品），因此文中對特別內(nèi)容有所劃分。

如果有不準確的地方，歡迎專業(yè)大佬在評論區(qū)或私信我提出。我在之前的文章中已經(jīng)預先提到了設計的體系的結構，不過我有所更新。

一、設計體系的VGT-RO三層一環(huán)結構

下面是根據(jù)我對理解，提出的設計體系VGT-RO三層一環(huán)結構（和之前的結構可能有所差異，目前以我這篇文字為準）幫助大家理解設計體系。

1. 第一層：愿景與原則（Vision & Principle）

它們作為設計決策的參考，指導前行。

愿景指導原則的生成，原則根據(jù)組織和產(chǎn)品的目的變化，主要作用是建立一種通用的評價標準，指導設計與開發(fā)，幫助使用人員進行評估，以形成相關團隊的決策共識。也有稱設計價值觀、設計語言的。

2. 第二層：指南（Guidelines）

包含樣式指南、模式指南、內(nèi)容指南等需要通過文字、最佳實踐、指示圖像等進行規(guī)則傳達的內(nèi)容。

• 樣式指南（Style Guideline）：樣式指南是對大部分非功能性模塊進行規(guī)范，對如配色、交互狀態(tài)、動畫、排版、間距、圖標樣式、形狀與邊框、插畫、照片、標志、布局、數(shù)據(jù)可視化方式，甚至可能包括品牌身份、設計語言、聲音和語氣、寫作、模式和代碼風格指南等進行描述和定義，提供最佳用例和錯誤用例。它們大部分無法形式單獨組件，但是可以提供代碼。
• 模式指南(Patterns Guideline)：模式是可重用組件的集合，模式指南對功能性模式進行規(guī)則定義，其中包含大量的組件內(nèi)容，但其中的重點是對如何使用組件進行定義。另外除了組件外，還會對互動方式、輸入方式、可用性等等內(nèi)容進行定義。
• 內(nèi)容指南（Content Guideline）：內(nèi)容指南通常無法提供代碼，但能通過描述和用例來對一些難量化的內(nèi)容進行規(guī)范指導。例如語氣和音調(diào)、音效、文案風格等。

3. 第三層：工具與庫（Tools?&?Libraries）

包含組件庫、工具包、協(xié)同工具等可以供體系用戶直接使用的內(nèi)容。

• 工具包（Toolkits）：這主要面對設計人員，提供了可供常規(guī)設計軟件打開，由設計師直接使用的文檔。一般直接可以在體系網(wǎng)站或在設計團隊內(nèi)部流傳。
• 組件庫（Components Libraries）：這是主要面向前端工程人員的工具，通常是開放的網(wǎng)站或者內(nèi)部的文件（是文件而非文檔）。組件背后是體系中的可重用代碼的一部分，它們是應用程序接口的構建塊，開發(fā)人員可以快捷地使用它們。這里主要是指裝載了組件的最終載體形式。
• 協(xié)同工具（Collaborative Tools）：更為前沿的設計體系搭建者，開始提供創(chuàng)建依托于生產(chǎn)力軟件的輔助工具，以進一步提升設計與開發(fā)者之間進行溝通的效率。如React-Sketch.app、Kitchen等。當然另一方面搭載設計體系的網(wǎng)站或文檔也算是一種協(xié)作工具。

4. 一環(huán)：關系模式與組織流程（Relation Model and?Organization Process）

包圍著這三層內(nèi)容，它促進整個設計體系成為一個活的生態(tài)系統(tǒng)。

• 關系模式（Relation Model）：關系模式描述的是設計體系維護團隊的職能和構成結構，以及他們與組織的產(chǎn)品的關系。
• 組織流程(Organization Process)：組織流程描述設計體系如何得到形成、應用、更新和推廣，是使設計體系成為鮮活生命體的血液。

二、資產(chǎn)清單

此塊資產(chǎn)清單內(nèi)容包含指南內(nèi)容和資源與工具兩大部分，下面為正式內(nèi)容。

1. 樣式指南

對視覺內(nèi)容進行的規(guī)則，包含色彩、字體、網(wǎng)格、標志、材質、插畫、圖標、陰影、形狀、版式等內(nèi)容。

Acrlic 亞克力（Fluent） \?Branding 品牌推廣 \?Color 色彩 \?Corner radius 轉角半徑 \?Dark Mode 暗黑模式 \?Fonts 字體 \?Grid 網(wǎng)格 \?Icons 圖標 \?Illustrations 插畫 \?Logos 標志 \?Materials 材質 \?Shadow 陰影 \?Shape 形狀 \?Translucency 半透明（HIG-MacOS） \?Typography 版式

2. 內(nèi)容指南

此塊是一些內(nèi)容的指南，主要除開常規(guī)的視覺外，對文字、文案風格、圖片、視頻、聲效、語音語調(diào)等規(guī)則定義，可能與樣式指南存在一些交集。

Launch screen 啟動頁 \?Sound 聲效 \?Video 視頻 \?Voice and tone 語音語調(diào) \?Writing Style 文案風格

3. 模式指南

通用的指南包含環(huán)境、手勢、輸入方式、交互、動效、可用性、可訪問性、可視化定義等內(nèi)容，在模式指南中會包含大量的組件（包含通用組件、導航、基礎輸入、菜單與工具條、文本、選擇器、數(shù)據(jù)展示、反饋、狀態(tài)與訊息等內(nèi)容）。

Accessibility 可訪問性 \?Communication 溝通 \?Environment 環(huán)境 \?Gesture 手勢 \?Input 輸入 \?Interaction 交互 \?Layout 布局 \?Machine Learning 機器學習 \?Motion 動效 \?Usability 可用性\?Visualization 可視化

4. 輸入與互動Input and?Interaction

此部分收集了Microsoft的Windows操作系統(tǒng)、Google的Android操作系統(tǒng)、Apple的iOS、MacOS、watchOS、tvOS等操作系統(tǒng)的輸入、交互的定義和差別。

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 光學變焦與調(diào)整大小 \?Touch 觸控 \?Panning 平移 \?Rotation 旋轉 \?Visual feedback 視覺反饋

② Windows平臺特別產(chǎn)品

Surface系列 \?Surface Hub \?MR 混合現(xiàn)實 \?XBox \?HoloLens \?Windows IoTs

針對各類自家設備，F(xiàn)luent有專門進行界面的說明關于Windows各類設備的界面設計指導：https://docs.microsoft.com/en-us/windows/uwp/design/devices/

2）Andriod互動

安卓系統(tǒng)是目前一大統(tǒng)治級的操作系統(tǒng)之一，主要依靠手勢等進行互動，也會存在智能手機通用的一些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作為獨特的智能手機交互系統(tǒng)，擁有一些獨特的設置。例如與安卓相比，它擁有定義清晰的模態(tài)交互，并劃分系統(tǒng)級交互和APP級交互。同時是iPadOS的基礎系統(tǒng)，他們的相似性非常高。

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

① iOS APP 應用架構

Launching 啟動 \?Onboarding 新手引導 \?Loading 加載 \?Modality 模態(tài) \?Navigation 導航 \?Requesting Permission 請求允許 \?Settings 設定

② iOS 互動

3D Touch 3D觸控 \?Apple Pencil and Scribble Apple Pencil與涂鴉 \?Audio 音頻 \?Authentication 驗證 \?Data Entry 數(shù)據(jù)輸入 \?Drag and Drop 拖放 \?Feedback 反饋 \?File Handling 文件處理 \?Game Controllers 游戲控制器 \?Gestures 手勢 \?Haptics 觸覺反饋 \?Near Field Communication 近場通訊 \?Pointers (iPadOS) 指針 \?Undo and Redo 撤銷與重做 \?Augmented Reality 增強現(xiàn)實 \?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系統(tǒng)平分天下的電腦系統(tǒng)，擁有獨特的設置，并且單獨拆分出的電腦系統(tǒng)，針對電腦場景做更多體驗設計。同時甚至開創(chuàng)了獨特的觸控條交互，拓展了互動體驗。

① MacOS APP 應用架構

Full-Screen Mode 全屏模式 \?Loading 加載 \?Modality 模態(tài) \?Onboarding 新手引導 \?Preferences 首選項 \?Restoring State 恢復狀態(tài) \?Security 安全

② MacOS 互動

Authentication 驗證 \?Data Entry 數(shù)據(jù)輸入 \?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也為其打造一套獨有操作系統(tǒng)。

Accelerometer and Gyroscope 加速度計與陀螺儀 \?Digital Crown 表冠 \?Gestures 手勢 \?Haptics 觸覺反饋 \?Modality 模態(tài) \?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系統(tǒng)也打造了操作系統(tǒng)，因為未來的家場景中，智能電視將作為智能家的互動核心之一，因此各大廠商都會跟進智能電視的設計。

由于屏幕的擴大，這塊的交互設計通常較為簡單，以觸控和遙控操作為核心。

Remote 遙控器 \?Game Controllers 游戲控制器

遙控器手勢

Swipe 滑動 \?Click 點擊 \?Tap 輕敲 \?Button 實體按鈕

遙控器的互動說明：https://developer.apple.com/design/human-interface-guidelines/tvos/remote-and-controllers/remote/

5. 布局 Layout

此塊部分主要是布局相關的規(guī)范指南，其中比較重要的是關于響應式布局的說明。

Alignment 對齊 \?Divider 分割線 \?Grid 柵格 \?Layout 布局 \?Margin 邊距\?Padding 填充 \?Responsive Layout 響應式布局 \?Space 間距

關于響應式布局方法，F(xiàn)luent中有詳細說明：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

組件是系統(tǒng)中可重用代碼的一部分，是API的構建單位。組件的重用性越高，就越容易維持和拓展?；诮M件的開發(fā)通過重用代碼降低技術負擔。

此塊內(nèi)容收集了大量的組件，包括通用組件、導航、基礎輸入、菜單與工具條、文本、選擇器、數(shù)據(jù)展示、反饋、狀態(tài)與訊息等組件內(nèi)容清單，內(nèi)容比較多，就不一一放圖說明了，感興趣的請自己進行搜索查詢。

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 內(nèi)容鏈接 \?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 級聯(lián)選擇 \?Chat 聊天欄 \?Checkbox Toggle 多選框開關 \?Checkbox 多選框（復選框） \?Combobox 組合框 \?Counter 計數(shù)器 \?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數(shù)字框 \?Password box 密碼框 \?Rich Edit box富文本編輯框 \?Rich Text block 富文本區(qū)塊 \?Text box 文本框 \?Token Fields 令牌字段區(qū)（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）數(shù)據(jù)展示

Avatar Group 頭像組 \?Avatar 頭像 \?Backdrop 背景幕布 \?Badges 徽標數(shù) \?Brand Bond 品牌帶 \?Calendar 日歷 \?Chart 圖表（Ant） \?Chips 卡片\?Collapse 折疊面包 \?Collections 館藏 \?Comment 評論 \?Date Tables 數(shù)據(jù)表格 \?Descriptions 描述列表 \?Empty 空狀態(tài) \?Faces 手表面盤（HIG-watchOS） \?Image 圖片 \?List/details 列表/詳細信息 \?Pages 頁面 \?Popvers 氣泡卡片/氣泡彈窗 \?Publishers 發(fā)布 \?Scoped Tabs 檢查標簽頁 \?Scroll Views 滾動視圖 \?Split Views 分割視圖 \?Statistic 統(tǒng)計數(shù)值 \?Status Bars 狀態(tài)欄 \?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 模態(tài)對話框 \?Dialog （非模態(tài)）對話框 \?Notification 通知提醒框 \?Flag 旗幟（未找到準確翻譯） \?Scoped notifications 檢查通知 \?Toast 吐司提示 \?Section message 選擇信息 \?Inline message 內(nèi)聯(lián)信息 \?Popconfirm 氣泡確認框 \?Prompt 提示通知 \?Result 結果 \?Setup assistant 設置助理 \?Skeleton 骨架屏 \?Spinners 加載中 \?Split View 視圖拆分 \?Snackbars （未找到準確翻譯，來自Material）底部輕量提示框 \?ConfigProvider 全局化配置 \?Flyouts （未找到準確翻譯，來自Fluent）飛出彈窗 \?Messaging 訊息傳遞

9）狀態(tài)與訊息

Progress indicator 進度指示器 \?Progress tracker 進度追蹤器 \?Progress bar 進度條 \?Progress ring 進度環(huán) \?Indeterminate progress 不確定進度 \?Determinate progress 確定進度 \?Tooltip 文字提示 \?Lozenge 狀態(tài)提示\?Infobar 信息條 \?Level indicators （未找到準確翻譯）級別指示器（HIG-MacOS）

8. 可用性 Usability

可用性部分主要針可用性方面內(nèi)容進行規(guī)范和說明。這些可用性定義也是重要的部分，因為經(jīng)過可用性測試的組件或內(nèi)容，不僅支持多種設備的性能要求，也能支撐良好的體驗傳達和體驗的包容性傳達。

Accessibility 可訪問性 \?In-app help 應用內(nèi)幫助 \?Globalization and localization 全球化與本地化

三、資源與工具

資源與工具是設計體系提供給使用者的快捷使用內(nèi)容，一般會涵蓋一些可視化的組件部分，但缺乏對規(guī)則的直接定義、不可視內(nèi)容的定義等，因此只能是輔助作用，但未來將可能占據(jù)主導。

而這方面的清查，我們需要了解設計用資源、開發(fā)用資源、輔助工具、協(xié)同工具、說明文檔、支持流程等等相關資源和工具。

面向設計的資源通常會提供面向不同軟件的資源，且更新程度不一。

更新程度來說：目前設計資源比較更新的是Apple，最近更新在2021年1月28日，而我們需要了解我們的設計規(guī)范更新程度如何？落后了多久的版本了？

軟件資源廣度來說：平臺系體系主要面向Figma、Sketch、Adobe XD提供資源。Apple提供的設計資源也較廣，囊括了多數(shù)較多數(shù)軟件。而國內(nèi)的Ant Design則會根據(jù)國內(nèi)的情況提供一些特別資源，例如墨刀

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

面向開發(fā)的指導來說，平臺御三家對開發(fā)者也有詳盡的文檔提供:

• Apple開發(fā)：https://developer.apple.com/develop/
• Microsoft開發(fā)：https://docs.microsoft.com/en-us/windows/uwp/develop/
• Google開發(fā)：https://material.io/develop

而其他體系由于也是御三家的平臺用戶，自己的生態(tài)平臺不大，因此較缺失對開發(fā)人員的內(nèi)容。下面有些關于開發(fā)者也其他的一些規(guī)則定義，目前的了解還較為有限，暫不過多展開：

Naming 命名 \?Date Formats 數(shù)據(jù)格式 \?Tutorials 教程 \?Design Tokens 設計令牌 \?Templates 模板

教程學習方面，目前只有Microsoft除了常規(guī)文檔之外建立了學習平臺，幫助使用者學習各個內(nèi)容。

輔助工具與協(xié)同工具方面，御三家平臺級設計體系有自己特別的代碼開發(fā)，一些較大的設計體系都會開發(fā)一些提效的輔助工具，有單獨的產(chǎn)品態(tài)（inVision的DSM）的，也有插件型的（如Airbnb DLS的React-Sketch.app、Ant Design 的Kitchen）。

作者：龍哩個龍 。公眾號：LONG說設計

本文由 @龍哩個龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議