常用組件的專業認識

0 評論 1470 瀏覽 15 收藏 7 分鐘

在產品設計過程中,我們會經常用到一些小組件、模塊,但你知道這些組件叫什么名字嗎?這篇文章,我們來解決下這個問題。

我看身邊有很多小伙伴對很多組件有一種“看著很熟,自己設計原型時也會使用,但是卻不知道叫啥”的情況,這樣就會影響產品內部以及和技術小伙伴的工作溝通。

所以基于以上情況,本次專門整理了一些常用組件的專業知識,分享給不太關注組件專業術名的“產品老手”以及根本就沒用過相關組件的“產品新手”~

Popup 彈出層:彈出層容器,用于展示彈窗、信息提示等內容,支持多個彈出層疊加展示。支持頂部,底部,左側,右側不同位置的彈出。

toast輕提示:在頁面中間彈出黑色半透明提示,用于消息通知、加載提示、操作結果提示等場景。分為文字提示、加載提示、成功提示、失敗提示、動態更新提示;可以頂部展示或者底部展示。

snackbar:比toast稍微重一點的輕量型反饋方式,包含一行與進行中的操作相關的文案&(最多)一個操作,并且snackbar不能包含使其消息的“取消”操作。

注:很多組件庫中沒有該組件,需要技術小伙伴自己來寫(例如技術常用的vant3就沒有~)

Calendar 日歷:日歷組件用于選擇日期或日期區間??蛇x擇單個日期,多個日期,日期區間。

級聯選擇框:用于多層級數據的選擇,典型場景為省市區選擇。

時間選擇器:支持日期、年月、時分等維度,通常與彈出層件配合使用。

Picker 選擇器:提供多個選項集合供用戶選擇,支持單列選擇和多列級聯,通常與彈出層組件配合使用。

Rate 評分:用于對事物進行評級操作。

Slider 滑塊:滑動輸入條,用于在給定的范圍內選擇一個值。

Stepper 步進器:由增加按鈕、減少按鈕和輸入框組成,用于在一定范圍內輸入、調整數字。

Badge 徽標:在右上角展示徽標數字或小紅點。

NoticeBar 通知欄:用于循環播放展示一組消息通知??伤娇纱怪睗L動。

Popover 氣泡彈出框:彈出式的氣泡菜單

Tag 標簽:用于標記關鍵詞和概括主要內容。

ActionBar 動作欄:用于為頁面相關操作提供便捷交互。

Tab 標簽頁:選項卡組件,用于在不同的內容區域之間進行切換。

Tabbar 標簽欄:底部導航欄,用于在不同頁面之間進行切換

TreeSelect 分類選擇:用于從一組相關聯的數據集合中進行選擇。支持單選和多選模式

此次分享到此結束,歡迎小伙伴留言分享其他常用但是很多小伙伴不容易叫上名字的組件~

本文由 @Grace 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!