中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：想要更深層地掌握組件設計，只了解每個組件的樣子、用在哪些地方是遠遠不夠的，還需要了解組件的本質，即組件的內在屬性和設計細節。本文作者解析了組件的屬性和類型，一起來看看吧！

大家好，我是Clippp，今天為大家j分享的是「組件設計」。

現在有很多成熟的組件庫，能為設計的規范性帶來更大的便利。

但作為設計師，不僅僅需要了解每個組件的樣子、用在哪些地方，更需要清楚地知道組件的本質，即組件的形狀、行為、狀態等內在屬性和設計細節，才能更深層地掌握組件設計。

一、組件的五種屬性

想要全面了解并學習組件，首先要搞清楚組件具備的屬性：

• 作用：定義組件的用途和作用，明白組件用來做什么的。
• 形狀：不同形狀的組件對產品、對用戶分別有哪些作用。
• 行為：通過用戶點擊或觸摸等動作定義交互行為。
• 狀態：定義并告知用戶當前的狀態。
• 語境：根據組件所屬的場景考慮組件不同的用途。

1. 形狀

通過形狀的差異，我們能快速辨別不同類型的組件。

在設計中，通常采用「文字與圖形」相結合的形式來定義組件的形狀。在設計組件時，要將形狀、顏色、圖標和文字等視覺元素組合在一起，并合理安排組件的層級結構。

例如一個點贊按鈕的設計，看起來很簡單，但是如果我們結合不同的使用場景和吸引用戶注意力的程度去考慮，一個點贊的組件就可以分為下面6種甚至更多的形狀。

所以在設計時，要充分地考慮使用場景和訴求，并對組件的形狀有清晰的認知，在接下來的設計中需要哪種形狀的組件直接對號入座，整個設計過程就會變得很明確。

2. 行為

行為和交互邏輯以及業務邏輯相關，會告訴用戶操作后的結果。用來告知用戶觸發組件時的即時反饋，或者組件當前處于什么狀態。

3. 狀態

通過組件狀態的變化可以告訴用戶當前在進行哪一步操作，有助于用戶了解組件當前的情況。常見的組件狀態包括：正常狀態、聚焦狀態、懸停狀態、激活狀態、加載狀態、禁用狀態。

• 正常狀態(Normal)：是組件最常規的狀態，也是設計師首先設計的狀態，表示這是用戶可以交互的元素。
• 聚焦狀態(Focus)：多用在電腦端中，表示元素已被選中。比如在填寫表單時，點擊鍵盤上的tab鍵，電腦的光標會切換到下一欄，下一欄的輸入框出現聚焦狀態。
• 懸停狀態(Hover)：當鼠標懸停在元素上時，元素會有狀態的上的變化。另外，在移動端和Pad端上的組件不需要懸停狀態。
• 激活狀態 (Active)：點擊組件時，組件的顏色會變深，同時還會出現內陰影等效果。
• 加載狀態(Loading)：表示當前數據仍在加載中，需要等待。
• 禁用狀態(Disabled)：組件置灰狀態，告知用戶當前條件不滿足，無法使用。

4. 語境

組件的用法跟隨場景或環境會發生變化。即使是同一個的組件，在不同的使用場景中也可以有不同的使用方法。

所有的設計元素都是相對的，它們會根據組件的排版位置、一起使用的其他組件元素以及用戶的使用目的等來定義組件的用途。

• 固定/可變：定義大小是可變還是固定。
• 窄/寬：根據空間的寬度定義用途。
• 層級結構：即使是相同的功能也需要根據層級結構定義組件的用法。
• 浮動：定義組件是基于可訪問性浮動還是基于滾動移動。

二、組件的三種類型

組件的類型大致可以分為三類：導航類(用于導航信息的組件)、輸入類(用戶輸入信息時使用的組件)、信息類(用于向用戶傳遞信息的組件)。

1. 導航類組件

做為導航提示或者展示信的組件，包括卡片、列表、網格、輪播、選項卡、菜單欄等組件。

• 卡片：容納信息最常見的方式。
• 列表：用于對同一屬性的信息進行排序，以便于識別。
• 網格列表：用于在兩列中顯示卡片或信息單元。
• 輪播：用于水平滾動而不是垂直滾動。
• 選項卡：用于顯示具有不同類型的信息。
• 菜單：用于顯示難以用選項卡顯示的大量復雜層次結構。

2. 輸入類組件

用于輸入信息或做出選擇的組件。現在很多組件庫中的輸入類組件形狀都很相似，這樣設計的原因是考慮到用戶的使用習慣，避免使用讓用戶感到陌生的組件。

• 復選框：當選擇多個元素時使用。
• 單選按鈕：當只能選擇幾個元素中的一個時使用。
• 文本字段：當用戶輸入文本信息時使用。
• 下拉菜單：打開菜單查看各種信息時使用。
• 按鈕：用于在各種場景下輸入有關用戶決策的信息。
• 切換開關：用于打開/關閉特定狀態。

3. 信息類組件

用來傳遞信息的組件，根據要輸入的信息類型來傳達用戶的選擇。常用的信息類組件包括：

• 指導文字：用于提供指導信息。
• 工具提示：用于展示文字無法傳達的內容。
• 吐司提示：輕量級的提示，在提示過后通常會自動消失。
• 警告：用來向用戶傳達需要清楚了解的重要信息。
• 彈窗：向用戶傳達需要做出選擇的內容。
• 用戶引導：用于傳達用戶不熟悉的頁面內容。

三、結語

以上就是組件的屬性和類型的解析，希望通過這些內容能幫助你對組件有更多的認識和思考。「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注~

#專欄作家#

作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Pexels，基于CC0協議。