設(shè)計(jì)體系丨根據(jù)六大設(shè)計(jì)體系總結(jié)出的資產(chǎn)清查清單（五）上一篇文章，我講了如何去創(chuàng)建設(shè)計(jì)體系，這篇文章我供應(yīng)了一個(gè)具體的資產(chǎn)清單。

對(duì)于產(chǎn)品經(jīng)理來說，我們不僅可以對(duì)設(shè)計(jì)體系的詳細(xì)內(nèi)容進(jìn)行具體的了解，幫助我們進(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）和國內(nèi)外知名的企業(yè)級(jí)設(shè)計(jì)體系（Salesforce的LDS、Atlassian的ADS、螞蟻金服的AD）的調(diào)查，生成了一份較清楚的清單用于指導(dǎo)清查和后續(xù)的資產(chǎn)建設(shè)過程。

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

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

一、設(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)）關(guān)心大家理解設(shè)計(jì)體系。

1.第一層：愿景與原則（VisionPrinciple）

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

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

2.其次層：指南（Guidelines）

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

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

Libraries）

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

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

OrganizationProcess）

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

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

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

1.樣式指南

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

Acrlic亞克力（Fluent）\

Branding品牌推廣\

Color顏色\

Cornerradius轉(zhuǎn)角半徑\

DarkMode暗黑模式\

Fonts字體\

Grid網(wǎng)格\

Icons圖標(biāo)\

Illustrations插畫\

Logos標(biāo)志\

Materials材質(zhì)\

Shadow陰影\

Shape外形\

Translucency半透亮?????（HIG-MacOS）\

Typography版式

2.內(nèi)容指南

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

Launchscreen啟動(dòng)頁\

Sound聲效\

Video視頻\

Voiceandtone語音語調(diào)\

WritingStyle文案風(fēng)格

3.模式指南

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

Accessibility可訪問性\

Communication溝通\

Environment環(huán)境\

Gesture手勢(shì)\

Input輸入\

Interaction交互\

Layout布局\

MachineLearning機(jī)器學(xué)習(xí)\

Motion動(dòng)效\

Usability可用性\

Visualization可視化

4.輸入與互動(dòng)Inputand

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)簡(jiǎn)單且多樣，相關(guān)詢問可以看官方的互動(dòng)與輸入指南：/en-us/windows/uwp/design/input/

PointerInput指針輸入\

Gazeinteractions注視互動(dòng)\

Eyetracking眼部追蹤\

PenandWindowsInk手寫筆與Ink

\

Touchpad觸控板\

Gamepadandremotecontrol嬉戲板和遙控器

\

Mouse鼠標(biāo)輸入\

Keyboard鍵盤\

Cortana小娜\

Speechinteractions語音互動(dòng)\

Controller掌握器

①Windows手勢(shì)

Dragandprop拖放\

Opticalzoomandresizing光學(xué)變焦與調(diào)整大小\

Touch觸控\

Panning平移\

Rotation旋轉(zhuǎn)\

Visualfeedback視覺反饋

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

Surface系列\(zhòng)

SurfaceHub\

MR混合現(xiàn)實(shí)\

XBox\

HoloLens\

WindowsIoTs

針對(duì)各類自家設(shè)備，F(xiàn)luent有特地進(jìn)行界面的說明關(guān)于Windows各類設(shè)備的界面設(shè)計(jì)指導(dǎo)：/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、語音交互、攝像識(shí)別、按鍵互動(dòng)等等。

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

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

Tap小扣\

Scrollandpan滾動(dòng)和平移\

Drag拖\

Swipe滑動(dòng)\

Pinch捏

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

Tap小扣\

LongPress點(diǎn)按或長(zhǎng)按\

Swipe滑動(dòng)

③TransformGestures變換手勢(shì)

Doubletap雙擊\

Pinch捏\

Compoundgestures復(fù)合手勢(shì)\

Pickupandmove拿起并移動(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)指南說明：/design/human-interface-guidelines/ios/user-interaction/3d-touch/

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

Launching啟動(dòng)\

Onboarding新手引導(dǎo)\

Loading加載\

Modality模態(tài)\

Navigation導(dǎo)航\

RequestingPermission懇求允許\

Settings設(shè)定

②iOS互動(dòng)

3DTouch3D觸控\

ApplePencilandScribbleApplePencil與涂鴉\

Audio音頻\

Authentication驗(yàn)證\

DataEntry數(shù)據(jù)輸入\

DragandDrop拖放\

Feedback反饋\

FileHandling文件處理\

GameControllers嬉戲掌握器\

Gestures手勢(shì)\

Haptics觸覺反饋\

NearFieldCommunication近場(chǎng)通訊\

Pointers(iPadOS)指針\

UndoandRedo撤銷與重做\

AugmentedReality增加現(xiàn)實(shí)\

Siri（HIG-iOS）

③iOS手勢(shì)

Tap小扣\

Drag拖拽\

Flick輕移\

Swipe滑動(dòng)\

Doubletap雙擊\

Pinch捏\

Three-fingerpinch三指縮放\

Three-fingerswipe三指滑動(dòng)\

Touchandhold觸控并按住\

Rotate滑動(dòng)\

Shake搖動(dòng)

關(guān)于iOS的手勢(shì)說明：/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í)甚至開創(chuàng)了獨(dú)特的觸控條交互，拓展了互動(dòng)體驗(yàn)。

①M(fèi)acOSAPP應(yīng)用架構(gòu)

Full-ScreenMode全屏模式\

Loading加載\

Modality模態(tài)\

Onboarding新手引導(dǎo)\

Preferences首選項(xiàng)\

RestoringState恢復(fù)狀態(tài)\

Security平安

②MacOS互動(dòng)

Authentication驗(yàn)證\

DataEntry數(shù)據(jù)輸入\

DragandDrop拖放\

FileHandling文件處理\

GameControllers嬉戲掌握器\

Help關(guān)心\

Keyboard鍵盤\

MouseandTrackpad鼠標(biāo)與觸控板\

ProvidingUserFeedback供應(yīng)用戶反饋\

RequestingPermission懇求允許

③MacOS觸控條組件

Buttons按鈕\

CandidateLists候選列表\

CharacterPickers角色選擇\

ColorPickers拾色器\

Labels標(biāo)簽\

Popovers氣泡卡片\

Scrubbers（未找到精確?????翻譯）掃瞄刷\

SegmentedControls分段控件\

SharingServicePickers共享服務(wù)選擇器\

Sliders滑條\

Steppers步進(jìn)器

關(guān)于觸控條的互動(dòng)說明：/design/human-interface-guidelines/macos/touch-bar/touch-bar-overview/

5）watchOS互動(dòng)

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

AccelerometerandGyroscope加速度計(jì)與陀螺儀\

DigitalCrown表冠\

Gestures手勢(shì)\

Haptics觸覺反饋\

Modality模態(tài)\

Navigation導(dǎo)航\

Workout熬煉

watchOS手勢(shì)

Tap點(diǎn)擊\

Drag拖拽\

Swipe滑動(dòng)\

Edgeswipe側(cè)邊互動(dòng)\

Firmpressandlongpress按下并長(zhǎng)按

watchiOS互動(dòng)指南說明：/design/human-interface-guidelines/watchos/interaction/digital-crown/

6）tvOS互動(dòng)

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

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

Remote遙控器\

GameControllers嬉戲掌握器

遙控器手勢(shì)

Swipe滑動(dòng)\

Click點(diǎn)擊\

Tap小扣\

Button實(shí)體按鈕

遙控器的互動(dòng)說明：/design/human-interface-guidelines/tvos/remote-and-controllers/remote/

5.布局Layout

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

Alignment對(duì)齊\

Divider分割線\

Grid柵格\

Layout布局\

Margin邊距\

Padding填充\

ResponsiveLayout響應(yīng)式布局\

Space間距

關(guān)于響應(yīng)式布局方法，F(xiàn)luent中有具體說明：/en-us/windows/uwp/design/layout/responsive-design#reposition

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

6.動(dòng)畫Animation

Connectedanimation連接動(dòng)畫\

Directionalityandgravity方向性與重力\

Pagetransitions頁面過渡\

Parallax視差\

Timingandeasing時(shí)間與緩動(dòng)

7.組件Component

組件是系統(tǒng)中可重用代碼的一部分，是API的構(gòu)建單位。組件的重用性越高，就越簡(jiǎn)單維持和拓展。基于組件的開發(fā)通過重用代碼降低技術(shù)負(fù)擔(dān)。

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

1）通用組件

Button按鈕\Buttongroup按鈕組\

Repeatbutton重復(fù)按鈕\

Hyperlinkbutton超鏈接按鈕\

Dropdownbutton下拉按鈕\

Splitbutton拆分按鈕\

Helpbutton關(guān)心按鈕\

Logo標(biāo)志\

Icon圖標(biāo)\

Typography排版\

Z-depthZ軸深度\

Mediaplayers媒體播放器

2）導(dǎo)航

Affix固釘\

Anchor錨點(diǎn)\

Appbar應(yīng)用條\

Applauncher應(yīng)用啟動(dòng)器\

BackTop回到頂部\

Bottomnavigation底部導(dǎo)航\

Breadcrumb面包屑\

Buttons:floatingaction浮動(dòng)按鈕\

Contentlink內(nèi)容鏈接\

Map地址\

Navigationbars導(dǎo)航欄\

Navigationdrawer導(dǎo)航抽屜\

Navigationrail側(cè)邊導(dǎo)航欄\

Pageheader頁頭\

PageControls頁面控件\

Pagination分頁\

Path路徑條\

Pivot樞軸視圖\

Richeditbox富文本編輯框\

Scrollviewer滾動(dòng)查看器\

Search搜尋\

Semanticzoom語義變焦\

Steps步驟條\

Trialbar試用條\

Verticalnavigation垂直導(dǎo)航欄

3）基礎(chǔ)輸入

Cascader級(jí)聯(lián)選擇\

Chat談天欄\

CheckboxToggle多選框開關(guān)\

Checkbox多選框（復(fù)選框）\

Combobox組合框\

Counter計(jì)數(shù)器\

Form表單\

Input輸入框\

Lookups搜尋組合框\

Panels面板\

Picklist選擇列表\

RadioButtonGroup單選按鈕組\

RadioGroup單選框組\

Radio單選框\

Rate評(píng)分\

Richtexteditor富文本編輯器\

Select選擇器\

Slider滑動(dòng)輸入條\

Switch開關(guān)\

Toggle切換\

Transfer穿梭框\

TreeSelect樹選擇\

Upload上傳

4）菜單與工具條

Accordion折疊菜單\

ActionSheets操作列表\

ActivityViews活動(dòng)視圖\

Builderheader構(gòu)建器標(biāo)題欄\

Commandbarflyout彈出式命令欄

\Commandbar命令欄\

Contextmenu情境菜單（右鍵菜單）\

Dropdown下拉菜單\

EditMenus編輯菜單\

Menu導(dǎo)航菜單/菜單\

Pull-DownMenus下拉菜單（HIG-iOS）\

Searchbars搜尋欄\

Sheets:bottom底部操作列表\

Sheets:side側(cè)邊操作列表\

Sidebars側(cè)邊欄\

Toolbars工具欄\

SegmentedControls分段控件

5）文本