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

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

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

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

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

如果有不準(zhǔn)確的地方，歡迎專(zhuān)業(yè)大佬在評(píng)論區(qū)或私信我提出。我在之前的文章中已經(jīng)預(yù)先提到了設(shè)計(jì)的體系的結(jié)構(gòu)，不過(guò)我有所更新。

一、設(shè)計(jì)體系的VGT-RO三層一環(huán)結(jié)構(gòu)

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

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

它們作為設(shè)計(jì)決策的參考，指導(dǎo)前行。

愿景指導(dǎo)原則的生成，原則根據(jù)組織和產(chǎn)品的目的變化，主要作用是建立一種通用的評(píng)價(jià)標(biāo)準(zhǔn)，指導(dǎo)設(shè)計(jì)與開(kāi)發(fā)，幫助使用人員進(jìn)行評(píng)估，以形成相關(guān)團(tuán)隊(duì)的決策共識(shí)。也有稱(chēng)設(shè)計(jì)價(jià)值觀、設(shè)計(jì)語(yǔ)言的。

2. 第二層：指南（Guidelines）

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

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

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

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

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

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

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

• 關(guān)系模式（Relation Model）：關(guān)系模式描述的是設(shè)計(jì)體系維護(hù)團(tuán)隊(duì)的職能和構(gòu)成結(jié)構(gòu)，以及他們與組織的產(chǎn)品的關(guān)系。
• 組織流程(Organization Process)：組織流程描述設(shè)計(jì)體系如何得到形成、應(yīng)用、更新和推廣，是使設(shè)計(jì)體系成為鮮活生命體的血液。

二、資產(chǎn)清單

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

1. 樣式指南

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

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

2. 內(nèi)容指南

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

Launch screen 啟動(dòng)頁(yè) \?Sound 聲效 \?Video 視頻 \?Voice and tone 語(yǔ)音語(yǔ)調(diào) \?Writing Style 文案風(fēng)格

3. 模式指南

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

Accessibility 可訪問(wèn)性 \?Communication 溝通 \?Environment 環(huán)境 \?Gesture 手勢(shì) \?Input 輸入 \?Interaction 交互 \?Layout 布局 \?Machine Learning 機(jī)器學(xué)習(xí) \?Motion 動(dòng)效 \?Usability 可用性\?Visualization 可視化

4. 輸入與互動(dòng)Input and?Interaction

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

1）Windows互動(dòng)

Windows平臺(tái)的設(shè)備互動(dòng)復(fù)雜且多樣，相關(guān)咨詢(xún)可以看官方的互動(dòng)與輸入指南：https://docs.microsoft.com/en-us/windows/uwp/design/input/

Pointer Input 指針輸入 \?Gaze interactions 凝視互動(dòng) \?Eye tracking 眼部追蹤 \?Pen and Windows Ink手寫(xiě)筆與Ink?\?Touchpad 觸控板 \?Gamepad and remote control 游戲板和遙控器?\?Mouse 鼠標(biāo)輸入 \?Keyboard 鍵盤(pán) \?Cortana 小娜 \?Speech interactions 語(yǔ)音互動(dòng) \?Controller 控制器

① Windows手勢(shì)

Drag and prop 拖放 \?Optical zoom and resizing 光學(xué)變焦與調(diào)整大小 \?Touch 觸控 \?Panning 平移 \?Rotation 旋轉(zhuǎn) \?Visual feedback 視覺(jué)反饋

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

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

針對(duì)各類(lèi)自家設(shè)備，F(xiàn)luent有專(zhuān)門(mén)進(jìn)行界面的說(shuō)明關(guān)于Windows各類(lèi)設(shè)備的界面設(shè)計(jì)指導(dǎo)：https://docs.microsoft.com/en-us/windows/uwp/design/devices/

2）Andriod互動(dòng)

安卓系統(tǒng)是目前一大統(tǒng)治級(jí)的操作系統(tǒng)之一，主要依靠手勢(shì)等進(jìn)行互動(dòng)，也會(huì)存在智能手機(jī)通用的一些NFC、語(yǔ)音交互、攝像識(shí)別、按鍵互動(dòng)等等。

關(guān)于Android的手勢(shì)說(shuō)明：https://material.io/design/interaction/gestures.html#principles

① Navigational gestures 導(dǎo)航手勢(shì)

Tap 輕敲 \?Scroll and pan 滾動(dòng)和平移 \?Drag 拖 \?Swipe 滑動(dòng) \?Pinch 捏

② Action Gestures 動(dòng)作手勢(shì)

Tap 輕敲 \?Long Press 點(diǎn)按或長(zhǎng)按 \?Swipe 滑動(dòng)

③ Transform Gestures 變換手勢(shì)

Double tap 雙擊 \?Pinch 捏 \?Compound gestures 復(fù)合手勢(shì) \?Pick up and move 拿起并移動(dòng)

3）iOS互動(dòng)

iOS作為獨(dú)特的智能手機(jī)交互系統(tǒng)，擁有一些獨(dú)特的設(shè)置。例如與安卓相比，它擁有定義清晰的模態(tài)交互，并劃分系統(tǒng)級(jí)交互和APP級(jí)交互。同時(shí)是iPadOS的基礎(chǔ)系統(tǒng)，他們的相似性非常高。

關(guān)于iOS的互動(dòng)指南說(shuō)明：https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/3d-touch/

① iOS APP 應(yīng)用架構(gòu)

Launching 啟動(dòng) \?Onboarding 新手引導(dǎo) \?Loading 加載 \?Modality 模態(tài) \?Navigation 導(dǎo)航 \?Requesting Permission 請(qǐng)求允許 \?Settings 設(shè)定

② iOS 互動(dòng)

3D Touch 3D觸控 \?Apple Pencil and Scribble Apple Pencil與涂鴉 \?Audio 音頻 \?Authentication 驗(yàn)證 \?Data Entry 數(shù)據(jù)輸入 \?Drag and Drop 拖放 \?Feedback 反饋 \?File Handling 文件處理 \?Game Controllers 游戲控制器 \?Gestures 手勢(shì) \?Haptics 觸覺(jué)反饋 \?Near Field Communication 近場(chǎng)通訊 \?Pointers (iPadOS) 指針 \?Undo and Redo 撤銷(xiāo)與重做 \?Augmented Reality 增強(qiáng)現(xiàn)實(shí) \?Siri（HIG-iOS）

③ iOS手勢(shì)

Tap輕敲 \?Drag 拖拽 \?Flick 輕移 \?Swipe 滑動(dòng) \?Double tap 雙擊 \?Pinch 捏 \?Three-finger pinch 三指縮放 \?Three-finger swipe 三指滑動(dòng) \?Touch and hold 觸控并按住 \?Rotate 滑動(dòng) \?Shake 搖動(dòng)

關(guān)于iOS的手勢(shì)說(shuō)明：https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/gestures/

4）MacOS互動(dòng)

與Windows系統(tǒng)平分天下的電腦系統(tǒng)，擁有獨(dú)特的設(shè)置，并且單獨(dú)拆分出的電腦系統(tǒng)，針對(duì)電腦場(chǎng)景做更多體驗(yàn)設(shè)計(jì)。同時(shí)甚至開(kāi)創(chuàng)了獨(dú)特的觸控條交互，拓展了互動(dòng)體驗(yàn)。

① MacOS APP 應(yīng)用架構(gòu)

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

② MacOS 互動(dòng)

Authentication 驗(yàn)證 \?Data Entry 數(shù)據(jù)輸入 \?Drag and Drop 拖放 \?File Handling 文件處理 \?Game Controllers 游戲控制器 \?Help 幫助 \?Keyboard 鍵盤(pán) \?Mouse and Trackpad 鼠標(biāo)與觸控板 \?Providing User Feedback 提供用戶(hù)反饋 \?Requesting Permission 請(qǐng)求允許

③ MacOS 觸控條組件

Buttons 按鈕 \?Candidate Lists 候選列表 \?Character Pickers 角色選擇 \?Color Pickers 拾色器 \?Labels 標(biāo)簽 \?Popovers 氣泡卡片 \?Scrubbers （未找到準(zhǔn)確翻譯）瀏覽刷 \?Segmented Controls 分段控件 \?Sharing Service Pickers 共享服務(wù)選擇器 \?Sliders 滑條 \?Steppers 步進(jìn)器

關(guān)于觸控條的互動(dòng)說(shuō)明：https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-overview/

5）watchOS互動(dòng)

Apple Watch是體驗(yàn)非常不錯(cuò)的智能可穿戴設(shè)備，Apple也為其打造一套獨(dú)有操作系統(tǒng)。

Accelerometer and Gyroscope 加速度計(jì)與陀螺儀 \?Digital Crown 表冠 \?Gestures 手勢(shì) \?Haptics 觸覺(jué)反饋 \?Modality 模態(tài) \?Navigation 導(dǎo)航 \?Workout 鍛煉

watchOS手勢(shì)

Tap 點(diǎn)擊 \?Drag 拖拽 \?Swipe 滑動(dòng) \?Edge swipe 側(cè)邊互動(dòng) \?Firm press and long press 按下并長(zhǎng)按

watchiOS互動(dòng)指南說(shuō)明：https://developer.apple.com/design/human-interface-guidelines/watchos/interaction/digital-crown/

6）tvOS互動(dòng)

Apple為其TV系統(tǒng)也打造了操作系統(tǒng)，因?yàn)槲磥?lái)的家場(chǎng)景中，智能電視將作為智能家的互動(dòng)核心之一，因此各大廠商都會(huì)跟進(jìn)智能電視的設(shè)計(jì)。

由于屏幕的擴(kuò)大，這塊的交互設(shè)計(jì)通常較為簡(jiǎn)單，以觸控和遙控操作為核心。

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

遙控器手勢(shì)

Swipe 滑動(dòng) \?Click 點(diǎn)擊 \?Tap 輕敲 \?Button 實(shí)體按鈕

遙控器的互動(dòng)說(shuō)明：https://developer.apple.com/design/human-interface-guidelines/tvos/remote-and-controllers/remote/

5. 布局 Layout

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

Alignment 對(duì)齊 \?Divider 分割線 \?Grid 柵格 \?Layout 布局 \?Margin 邊距\?Padding 填充 \?Responsive Layout 響應(yīng)式布局 \?Space 間距

關(guān)于響應(yīng)式布局方法，F(xiàn)luent中有詳細(xì)說(shuō)明：https://docs.microsoft.com/en-us/windows/uwp/design/layout/responsive-design#reposition

關(guān)于屏幕尺寸和響應(yīng)斷點(diǎn)的說(shuō)明：https://docs.microsoft.com/en-us/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design

6. 動(dòng)畫(huà) Animation

Connected animation 連接動(dòng)畫(huà) \?Directionality and gravity 方向性與重力 \?Page transitions 頁(yè)面過(guò)渡 \?Parallax 視差 \?Timing and easing 時(shí)間與緩動(dòng)

7. 組件 Component

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

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

1）通用組件

Button 按鈕 \ Button group 按鈕組 \?Repeat button 重復(fù)按鈕 \?Hyperlink button 超鏈接按鈕 \?Dropdown button 下拉按鈕 \?Split button 拆分按鈕 \?Help button 幫助按鈕 \?Logo 標(biāo)志 \?Icon 圖標(biāo) \?Typography 排版 \?Z-depth Z軸深度 \?Media players媒體播放器

2）導(dǎo)航

Affix 固釘 \?Anchor 錨點(diǎn) \?App bar 應(yīng)用條 \?App launcher 應(yīng)用啟動(dòng)器 \?BackTop回到頂部 \?Bottom navigation 底部導(dǎo)航 \?Breadcrumb 面包屑\?Buttons: floating action 浮動(dòng)按鈕 \?Content link 內(nèi)容鏈接 \?Map 地址 \?Navigation bars 導(dǎo)航欄 \?Navigation drawer 導(dǎo)航抽屜 \?Navigation rail 側(cè)邊導(dǎo)航欄 \?Page header 頁(yè)頭 \?Page Controls 頁(yè)面控件 \?Pagination 分頁(yè) \?Path 路徑條 \?Pivot 樞軸視圖 \?Rich edit box 富文本編輯框 \?Scroll viewer 滾動(dòng)查看器 \?Search 搜索 \?Semantic zoom 語(yǔ)義變焦 \?Steps 步驟條 \?Trial bar 試用條 \?Vertical navigation 垂直導(dǎo)航欄

3）基礎(chǔ)輸入

Cascader 級(jí)聯(lián)選擇 \?Chat 聊天欄 \?Checkbox Toggle 多選框開(kāi)關(guān) \?Checkbox 多選框（復(fù)選框） \?Combobox 組合框 \?Counter 計(jì)數(shù)器 \?Form 表單 \?Input 輸入框 \?Lookups 搜索組合框 \?Panels 面板 \?Picklist 選擇列表 \?Radio Button Group 單選按鈕組 \?Radio Group 單選框組 \?Radio 單選框 \?Rate 評(píng)分 \?Rich text editor 富文本編輯器 \?Select 選擇器 \?Slider 滑動(dòng)輸入條 \?Switch 開(kāi)關(guān) \?Toggle 切換 \?Transfer 穿梭框 \?TreeSelect 樹(shù)選擇 \?Upload 上傳

4）菜單與工具條

Accordion 折疊菜單 \?Action Sheets 操作列表 \?Activity Views 活動(dòng)視圖 \?Builder header 構(gòu)建器標(biāo)題欄 \?Command bar flyout彈出式命令欄?\ Command bar 命令欄 \?Context menu 情境菜單（右鍵菜單） \?Dropdown 下拉菜單 \?Edit Menus 編輯菜單 \?Menu 導(dǎo)航菜單/菜單 \?Pull-Down Menus 下拉菜單（HIG-iOS） \?Search bars 搜索欄 \?Sheets: bottom 底部操作列表 \?Sheets: side 側(cè)邊操作列表 \?Sidebars 側(cè)邊欄 \?Toolbars 工具欄 \?Segmented Controls 分段控件

5）文本

AutoComplete 自動(dòng)完成(Ant) \?Auto-suggest box 自動(dòng)建議框 \?Predictive text entry 預(yù)測(cè)文本輸入 \?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 日期與時(shí)間選擇器 \?Time picker 時(shí)間選擇器 \?Date pickers 日期選擇器 \?Calendar bate picker 日歷日期選擇器 \?Calendar view 日歷視圖 \?Steppers 步進(jìn)器（HIG-iOS） \?Path Controls 路徑控制（HIG-MacOS）

7）數(shù)據(jù)展示

Avatar Group 頭像組 \?Avatar 頭像 \?Backdrop 背景幕布 \?Badges 徽標(biāo)數(shù) \?Brand Bond 品牌帶 \?Calendar 日歷 \?Chart 圖表（Ant） \?Chips 卡片\?Collapse 折疊面包 \?Collections 館藏 \?Comment 評(píng)論 \?Date Tables 數(shù)據(jù)表格 \?Descriptions 描述列表 \?Empty 空狀態(tài) \?Faces 手表面盤(pán)（HIG-watchOS） \?Image 圖片 \?List/details 列表/詳細(xì)信息 \?Pages 頁(yè)面 \?Popvers 氣泡卡片/氣泡彈窗 \?Publishers 發(fā)布 \?Scoped Tabs 檢查標(biāo)簽頁(yè) \?Scroll Views 滾動(dòng)視圖 \?Split Views 分割視圖 \?Statistic 統(tǒng)計(jì)數(shù)值 \?Status Bars 狀態(tài)欄 \?Stickers 貼紙（HIG-iOS） \?Summary Detail 摘要詳細(xì)信息 \?Table 表格 \?Tabs 標(biāo)簽頁(yè)/選項(xiàng)卡 \?Tag 標(biāo)簽/Pills 藥丸標(biāo)簽 \?Thumbnails 縮略圖 \?Tiles 磁貼 \?Timeline 時(shí)間軸 \?Tree 樹(shù)形控件 \?Vertical Tabs 垂直標(biāo)簽頁(yè) \?Widgets 小部件（HIG-iOS）

8）反饋

Alert 警告提示 \?Banners 橫幅提示框 \?Drawer 抽屜 \?Message 全局提示 \?Modal dialog 模態(tài)對(duì)話(huà)框 \?Dialog （非模態(tài)）對(duì)話(huà)框 \?Notification 通知提醒框 \?Flag 旗幟（未找到準(zhǔn)確翻譯） \?Scoped notifications 檢查通知 \?Toast 吐司提示 \?Section message 選擇信息 \?Inline message 內(nèi)聯(lián)信息 \?Popconfirm 氣泡確認(rèn)框 \?Prompt 提示通知 \?Result 結(jié)果 \?Setup assistant 設(shè)置助理 \?Skeleton 骨架屏 \?Spinners 加載中 \?Split View 視圖拆分 \?Snackbars （未找到準(zhǔn)確翻譯，來(lái)自Material）底部輕量提示框 \?ConfigProvider 全局化配置 \?Flyouts （未找到準(zhǔn)確翻譯，來(lái)自Fluent）飛出彈窗 \?Messaging 訊息傳遞

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

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

8. 可用性 Usability

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

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

三、資源與工具

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

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

面向設(shè)計(jì)的資源通常會(huì)提供面向不同軟件的資源，且更新程度不一。

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

軟件資源廣度來(lái)說(shuō)：平臺(tái)系體系主要面向Figma、Sketch、Adobe XD提供資源。Apple提供的設(shè)計(jì)資源也較廣，囊括了多數(shù)較多數(shù)軟件。而國(guó)內(nèi)的Ant Design則會(huì)根據(jù)國(guó)內(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

面向開(kāi)發(fā)的指導(dǎo)來(lái)說(shuō)，平臺(tái)御三家對(duì)開(kāi)發(fā)者也有詳盡的文檔提供:

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

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

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

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

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

作者：龍哩個(gè)龍 。公眾號(hào)：LONG說(shuō)設(shè)計(jì)

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

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