99久久人妻无码精品系列,日本不卡一区二区三区在线

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

設計體系丨根據六大設計體系總結出的資產清查清單（五）

龍哩個龍

2021-04-22

0 評論 7845 瀏覽 29 收藏

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）