亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

作為公司的產(chǎn)品老油條,大小也面了不下 50 個(gè)產(chǎn)品,產(chǎn)品經(jīng)驗(yàn)橫跨 0~3 年、3~5 年。這么多次面試中,我每次都喜歡問一個(gè)問題"你大概了解幾種 UI 組件(前端組件)呢,能舉例說明一下嗎?"

然而每次給我的答復(fù) 80% 是"什么是組件?"有時(shí)我會(huì)繼續(xù)說"在頁面內(nèi)的所有內(nèi)容都可以稱為組件"候選人給我的反饋,還是一臉懵逼。

剩余的 20% 能答出"輪播、對(duì)話框、列表"等常見組件,就算產(chǎn)品基礎(chǔ)能力一般的了。

我真的很想問他們,難道你在設(shè)計(jì)原型的時(shí)候,連自己做的是什么都不知道嗎?那你的頁面是怎么設(shè)計(jì)出來的?后續(xù)的一系列交互反饋,又是依據(jù)什么進(jìn)行設(shè)計(jì)?

一、什么是組件?

創(chuàng)新,是在一系列約束條件下,對(duì)基礎(chǔ)元素的排列組合。

一些愛偷懶的產(chǎn)品,發(fā)現(xiàn)了產(chǎn)品設(shè)計(jì)的套路,他們熟知不同的大廠組件庫,了解 50+ 組件樣式和組件類型,再依據(jù)不同功能、場(chǎng)景、需求,將各種組件進(jìn)行排列、組合,完成頁面、功能、乃至模塊的高效設(shè)計(jì)。

那什么是組件呢?組件(Component)常見于互聯(lián)網(wǎng)的設(shè)計(jì)和開發(fā)工作中。

用于 UI 設(shè)計(jì)時(shí),組件是界面的組成部分,包含了不同的類型、行為和狀態(tài)。而在開發(fā)領(lǐng)域,組件指的是對(duì)數(shù)據(jù)和功能的簡(jiǎn)單封裝。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

如圖為京東首頁,你認(rèn)得幾種組件呢

我對(duì)組件的理解是,組件是具有特定樣式和用途的內(nèi)容組合。

多個(gè)頁面基本元素(例如文本、字體、字色、形狀等)組成了組件,而多個(gè)組件又能組合成不同的頁面。

簡(jiǎn)單來說,頁面內(nèi)的任意內(nèi)容,都可稱作組件。

二、組件的五種類型

我們可以把大多數(shù)組件,歸類為五種常見類型:基礎(chǔ)、導(dǎo)航、輸入、展示、反饋。

  1. 基礎(chǔ):基礎(chǔ)元素
  2. 導(dǎo)航:位置指引
  3. 輸入:數(shù)據(jù)錄入
  4. 展示:數(shù)據(jù)顯示
  5. 反饋:數(shù)據(jù)交互

如圖為有贊的 vant 組件庫,大致包含了 5 種類型,約 70+ 個(gè)組件,不同的組件有各自的樣式和用途。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

基礎(chǔ)

基礎(chǔ)組件是一些常見的頁面基礎(chǔ)元素。

基礎(chǔ)組件主要有:圖標(biāo)、文本、按鈕、圖片、單元格、遮罩層、彈出層等。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

導(dǎo)航

導(dǎo)航類組件,主要幫助用戶了解當(dāng)前位置和指引各個(gè)頁面跳轉(zhuǎn)。

該類組件包括宮格、導(dǎo)航欄、標(biāo)簽欄、索引欄、分頁器等。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

輸入

輸入類組件一般用于數(shù)據(jù)錄入,例如選擇內(nèi)容、輸入文本等操作。

常見的輸入類組件有:?jiǎn)芜x框、復(fù)選框、輸入框、表單、選擇器等。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

展示

展示類組件,主要用于顯示相關(guān)數(shù)據(jù)內(nèi)容。

頭像、徽標(biāo)、標(biāo)簽、列表、通知欄等組件都屬于展示類組件。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

反饋

用戶進(jìn)行操作后,引發(fā)的一系列數(shù)據(jù)交互,即為反饋類組件。數(shù)據(jù)交互可以是內(nèi)容提示、狀態(tài)過渡、數(shù)據(jù)錄入等。

常見的反饋組件包含了對(duì)話框、吐司提示、氣泡提示、動(dòng)作面板、下拉刷新等。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

三、一些大廠的相關(guān)組件庫

1. Ant Design

Ant Design 是螞蟻集團(tuán)(體驗(yàn)技術(shù)部)基于大量業(yè)務(wù)實(shí)踐和項(xiàng)目總結(jié),抽象構(gòu)建出的企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系。Ant Design 基于自然、確定性、意義感、生長(zhǎng)性四大設(shè)計(jì)價(jià)值觀,通過模塊化解決方案,降低冗余的生產(chǎn)成本,讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

2. Zan Design

Zan Design 是有贊出品的一套服務(wù)于產(chǎn)品設(shè)計(jì)的設(shè)計(jì)模式和實(shí)踐方法。

它主要由產(chǎn)品原則、設(shè)計(jì)原則、內(nèi)容策略、布局與模式、視覺、動(dòng)效、資源、組件等幾大部分組成。Zan Design 的組件庫支持桌面端、移動(dòng)端、小程序等多端組件。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

3. Arco Design

Arco Design 是字節(jié)跳動(dòng) UED 團(tuán)隊(duì)出品的企業(yè)級(jí)設(shè)計(jì)系統(tǒng),字節(jié)旗下的今日頭條、番茄小說、頭條號(hào)、火山引擎等優(yōu)秀產(chǎn)品都使用了 Arco Design,同時(shí)它還支持多國語言、定制主題等特性。

2000 字快速入門!產(chǎn)品小白必懂的 5 種組件類型

4. 其他組件庫

除了上述的組件庫之外,還有:

  1. 小程序組件:微信、支付寶、百度、字節(jié)、360 等;
  2. 后臺(tái)組件:Element、Semi Design、King Design、58 同城 matrix 等;
  3. web 組件:NutUI、Cube UI、VUX UI 等;
  4. 綜合組件:Taro、UView UI。

總結(jié)

組件,是具有特定樣式和用途的內(nèi)容組合,主要有五種類型:基礎(chǔ)、導(dǎo)航、輸入、展示、反饋。

  1. 基礎(chǔ):基礎(chǔ)組件是一些常見的頁面基礎(chǔ)元素,例如圖標(biāo)、文本;
  2. 導(dǎo)航:主要幫助用戶了解當(dāng)前位置和指引各個(gè)頁面跳轉(zhuǎn);
  3. 輸入:一般用于數(shù)據(jù)錄入,例如選擇內(nèi)容、輸入文本等操作;
  4. 展示:主要用于顯示相關(guān)數(shù)據(jù)內(nèi)容;
  5. 反饋:用戶進(jìn)行操作后,將會(huì)引發(fā)一系列數(shù)據(jù)交互。

不懂上述基礎(chǔ)組件,產(chǎn)品設(shè)計(jì)就像是盲人摸象。只能依靠以往的產(chǎn)品經(jīng)驗(yàn)、或找?guī)讉€(gè)競(jìng)品功能抄抄完事,下次遇到新需求又得重頭思考。所以,掌握組件概念,已經(jīng)成為初級(jí)產(chǎn)品的必備知識(shí)。

作者:產(chǎn)品之外

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/19343.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。