国产成人一区二区三区免费看,中文字幕亚洲综合久久菠萝蜜,欧美xxxx黑人又粗又长精品

組件相關(guān)
1. icon
就是指圖標(biāo)，比如像app的icon圖標(biāo)，還有在頁面內(nèi)的圖標(biāo)，都能叫做icon 。
icon需要有象征意義，需要有隱喻性，需要讓人能在最短的時(shí)間內(nèi)理解出icon的含義。
問你個(gè)事，抖音的第三個(gè)icon是啥？
2. 穿梭選擇器
也叫穿梭框，一般為左右兩欄，左邊為待選擇項(xiàng) ，右邊為已選項(xiàng) 。
從左邊選到右邊表示已選，從右邊移到左邊，表示取消選擇。
常用在B端產(chǎn)品中，當(dāng)需要多選且選擇項(xiàng)較多時(shí)，就可以使用穿梭選擇器。
當(dāng)可選項(xiàng)很多，大于10個(gè)時(shí) ，可以考慮使用穿梭選擇框。這樣用戶就可以清楚的知道自己選擇了哪些內(nèi)容。
3. 徽標(biāo)（Badge）
徽標(biāo)可以理解為小紅點(diǎn)，就是在圖標(biāo)、文字右上角、或者在頁面某個(gè)地方的紅色小圓點(diǎn) 。常用來表示有新消息或者是為了達(dá)到某種信息提示。
徽標(biāo)的形式不僅只有小紅點(diǎn) ，也有紅圈里加數(shù)字最右app用過的圖標(biāo)，表示新消息數(shù)量。也有直接小紅圈+文字，來更好的傳達(dá)信息。
4. 骨架屏
骨架屏是一種加載狀態(tài) ，也叫做加載占位符，加載時(shí)在頁面上通過灰色塊顯示出大致結(jié)構(gòu) 。
可以有效緩解用戶的等待焦慮感，向用戶表達(dá)出“這個(gè)頁面有這樣的數(shù)據(jù)”的感覺。同時(shí)結(jié)合光澤掠過或者灰色塊來回收縮的動(dòng)畫，來表達(dá)頁面正在加載中。
骨架屏比普通的加載動(dòng)畫能提供更好的視覺效果，能產(chǎn)生加載很快的感覺，對(duì)用戶體驗(yàn)也更好。
相同的響應(yīng)時(shí)間內(nèi)，菊花轉(zhuǎn)轉(zhuǎn)的再快，也比不上骨架屏來的感覺快。
5. 缺省頁/空狀態(tài)頁
是指在頁面內(nèi)沒有數(shù)據(jù)時(shí)顯示出空狀態(tài)效果。避免沒有數(shù)據(jù)時(shí)顯示出空白頁面，讓用戶陷入“到底有沒有數(shù)據(jù)”的困惑。
缺省頁包括網(wǎng)絡(luò)異常，加載失敗、無權(quán)限、搜索無結(jié)果等。
缺省頁不僅是只一個(gè)頁面全是空狀態(tài) ，在頁面中的某個(gè)模塊中也會(huì)有空狀態(tài)，針對(duì)某個(gè)模塊內(nèi)也要添加缺省狀態(tài) 。
沒有數(shù)據(jù)非常影響用戶體驗(yàn)，這時(shí)就靠缺省頁來安慰用戶。添加合適的文案、圖案、引導(dǎo)、動(dòng)效來給用戶一些正向的傳達(dá) 。
比如沒有，我們推薦用戶可的博主。當(dāng)加載失敗時(shí)，可以添加“重新加載”按鈕，讓用戶再次刷新。
缺省頁空狀態(tài)屬于數(shù)據(jù)為空的臨界值，經(jīng)常會(huì)一不小心遺漏，敲黑板，需要注意空狀態(tài) 。
6. tab頁
指標(biāo)簽頁，可以理解為菜單、導(dǎo)航欄。通過不同tab頁聚合不同信息收納在一個(gè)頁面區(qū)域內(nèi) 。
Tab頁分為頂部、底部、側(cè)邊欄。
頂部tab是最常見的，在很多app和網(wǎng)站中都有使用，因?yàn)轫敳縯ab占據(jù)的頁面空間更?。??輩捎沒??男問嬌梢勻菽珊芏鄑ab 。
頂部tab除了有文字，還有圖標(biāo)tab 。
側(cè)邊欄tab有左、右，常見的是左側(cè)欄。如果更想突出內(nèi)容，可以采用右側(cè)邊欄。
tab頁的層級(jí)關(guān)系一般是底部tab＞頂部tab＞側(cè)邊欄tab 。對(duì)于頁面內(nèi)容太多時(shí)，也能互相嵌用。比如頂部tab頁里再套個(gè)二級(jí)左側(cè)邊欄tab 。
在ios里有個(gè) ，叫分段控件，和tab頁很像，都是用來聚合頁面。
不一樣的是，分段控件只能手動(dòng)點(diǎn)擊，不能左右滑動(dòng)切換，而tab頁可以左右滑動(dòng)切換頁面。
分段控件可以是文字分段，也可以是圖標(biāo)，下圖是圖標(biāo)分段控件。
7. 模態(tài)彈窗與非模態(tài)彈窗
模態(tài)彈窗：對(duì)用戶操作做出阻礙的彈窗。用戶必須對(duì)彈窗內(nèi)容做出回應(yīng)才能進(jìn)行下一步操作，在操作確認(rèn)、重要信息提醒時(shí) ，都需要用到模態(tài)彈窗。
對(duì)于用戶使用場(chǎng)景的不同，可以選擇使用不同的模態(tài)彈窗，比如對(duì)話框、氣泡提示、動(dòng)作欄等（這些概念下邊會(huì)說）
非模態(tài)彈窗：不會(huì)阻礙用戶操作的彈窗。像toast提示、通告欄就是非模態(tài)（這些概念下邊會(huì)說）。
8. 氣泡（）
氣泡可以理解為一個(gè)小彈窗，就像氣泡一樣，體積小、重量輕，想往哪飄就往哪飄，剛顯示出來，手指一搓，就bou~的沒有了。
氣泡是種形式，結(jié)合不同場(chǎng)景，常見的有氣泡確認(rèn)框、氣泡卡片、氣泡引導(dǎo)等，特點(diǎn)就是輕、小、靈活。
還有個(gè)大特點(diǎn)就是會(huì)有個(gè)小箭頭，來表示這個(gè)氣泡從哪出來的，能夠突出顯示特定位置的提示。所以在引導(dǎo)用戶時(shí)，就可以大大方方的使用氣泡引導(dǎo) 。
對(duì)于一些不常用功能、或者快捷功能入口，可以采用隱藏的方式，在顯示的時(shí)候就可以通過“氣泡卡片”的形式彈出來。
9. 浮出層（popup）
這里浮出層是指浮出在半透明層上的彈窗窗口，可在浮出層中進(jìn)行操作。通常是點(diǎn)擊頁面某個(gè)區(qū)域后展示出來。
10. 動(dòng)作欄（）
常指從頁面底部彈出的底部列表彈窗，懸浮在半透明蒙版上，不需要進(jìn)行跳轉(zhuǎn)頁面，在當(dāng)前頁面就可以進(jìn)行更多的操作。
11.活動(dòng)視圖（）
這個(gè)概念來自ios ，簡(jiǎn)單理解是指在從底部出現(xiàn)的彈窗，常見的樣式為icon+標(biāo)題，可以讓用戶快速訪問其它功能。
當(dāng)動(dòng)作欄用于分享場(chǎng)景時(shí) ，可以叫做分享面板。
12.Toast
也叫吐司提示、輕提示，是一種非常輕量級(jí)提示。出現(xiàn)后，過幾秒自動(dòng)消失。出現(xiàn)位置有屏幕頂部、中部、底部。
由于出現(xiàn)時(shí)間短、面積小，過幾秒就會(huì)自動(dòng)消失，所以不能添加過多的文字，也不能放重要信息。Toast屬于非模態(tài) 。
13.通告欄（ Bar）
形式一般為在頁面上方顯示的小橫條內(nèi)容 ?？捎脕碜鰻顟B(tài)提示、消息通知。屬于非模態(tài) ，可以提示用戶，但不影響用戶的操作。
通告欄比toast達(dá)到的提示更重，因?yàn)樗黠@；比彈窗提示、氣泡提示達(dá)到的提示輕，因?yàn)樗粫?huì)影響用戶的操作。
通告欄位置通常在頁面上方，也有在頁面下方顯示 ?？梢灾鲃?dòng)消失，也可以常駐。同時(shí)在一個(gè)頁面內(nèi)也可以添加多個(gè)通告欄。
14.提示對(duì)話框（）
可以理解為懸浮在頁面底部的消息通知，可以自動(dòng)消失，也可以常駐，手動(dòng)點(diǎn)擊消失。
的提示強(qiáng)度比Toast強(qiáng)，不影響用戶操作，屬于非模態(tài) 。另外在出現(xiàn)時(shí)可以添加操作按鈕，引導(dǎo)用戶做其它操作。
15.HUD
HUD有幾種說法，我們一個(gè)個(gè)看下。
與toast不同的是，它作為提示出現(xiàn)時(shí) ，都在頁面中部顯示，Toast只有文字，而HUD為圖標(biāo)+文字。
在航空航天、汽車領(lǐng)域HUD指將參數(shù)內(nèi)容投射到頭盔、擋風(fēng)玻璃的一種顯示設(shè)備 ?？梢栽谝暰€中顯示的參數(shù)內(nèi)容，如開車時(shí)不需要看儀表盤，在視野范圍內(nèi)就能看到車速。
16.透明指示層
是指在頁面中顯示出交互操作的指示層，也是種反饋組件，常見的如看視頻的快進(jìn)提示，或者是調(diào)整音量的提示。
有些文章把HUD也叫作透明指示層，正確性我無法判斷，所以在這把透明指示層單獨(dú)說明。
17.工具提示/文字提示（）
常指在鼠標(biāo)懸浮在某個(gè)圖標(biāo)、按鈕、文本等元素上，顯示出來描述或者功能說明，用于輔助用戶了解某個(gè)功能。
18.Chips
有些文章翻譯為紙片，但是我覺得不形象，那么Chips是什么呢？
看下邊的圖，這個(gè)像按鈕的就是chips 。
但是Chips與按鈕是不同的，按鈕的內(nèi)容是固定的，而chips是動(dòng)態(tài)的，根據(jù)支持內(nèi)容不同顯示不同的內(nèi)容。所以chips更像是標(biāo)簽。
將Chips分為4類，分別是輔助chips、過濾chips、輸入chips、建議chips 。
19.步進(jìn)器（）
步進(jìn)器是指通過增、減按鈕對(duì)數(shù)值進(jìn)行控制的組件。常用于小范圍整數(shù)數(shù)值輸入,每次增、減的數(shù)量都是恒定的。
20.滑動(dòng)選擇器
是指通過橫軸中通過滑動(dòng)的方式選擇對(duì)應(yīng)的數(shù)值、區(qū)間。
特點(diǎn)是在橫軸中展示出了最小值與最大值，用戶可以通過滑動(dòng)的方式自己選擇對(duì)應(yīng)數(shù)值。
區(qū)間滑動(dòng)選擇器是指可以選擇最小值與最大值，讓用戶自己選擇區(qū)間范圍，常用于價(jià)格選擇。
21.懸浮按鈕/浮動(dòng)按鈕/Fab
，浮動(dòng)按鈕，就是懸浮按鈕。
常用于主功能入口，如新建。
22.導(dǎo)航欄、狀態(tài)欄
狀態(tài)欄是手機(jī)屏幕上方顯示時(shí)間、電量、手機(jī)信號(hào)的那一欄
導(dǎo)航欄是指狀態(tài)欄下邊的那一欄，導(dǎo)航欄可以是很簡(jiǎn)單的只有一個(gè)標(biāo)題、也可以放搜索框，或者其它操作按鈕，或功能入口。
23.指示器
在圖片或卡片可進(jìn)行左右滑動(dòng)時(shí)，常使用指示器來表達(dá)所在位置。
根據(jù)指示器的樣式不同，有圓點(diǎn)指示器、滑塊指示器、線型指示器、數(shù)字指示器。
24.卡片
卡片是一種容納信息的展示方式，每張卡片內(nèi)承載不同內(nèi)容，不僅能有效處理信息集合，同時(shí)有效的讓用戶聚焦到卡片中的內(nèi)容。
卡片的高效分區(qū)、信息突出在很多產(chǎn)品中都已經(jīng)使用到。
25.泳道
可以橫向左右滑動(dòng)來查看內(nèi)容的方式叫做泳道。
將多個(gè)元素內(nèi)容在一定區(qū)域內(nèi)橫向滑動(dòng)，擴(kuò)展了頁面的橫向空間，一般是手動(dòng)滑動(dòng)查看，并沒有自動(dòng)滑動(dòng) 。
26.
是指出現(xiàn)在頁面中明顯的橫幅圖片，通常作為推薦位、廣告位，如產(chǎn)品推薦、廣告位等。
大家應(yīng)該都清楚這個(gè)
但是根據(jù)樣式不同，還能分為膠囊、瓷片區(qū)、白底，這些名字是否為標(biāo)準(zhǔn)的，我也不清楚，所以如果你不知道描述，可以就按這種名字叫。
27.瓷片區(qū)
將不同矩形塊通過網(wǎng)格布局的方式就組成了瓷片區(qū) 。
特點(diǎn)就是布局很靈活，比占據(jù)的空間小，相同面積能夠放更多的流量入口。
28.金剛區(qū)
是指在首頁中icon+文字通過宮格形式排列的區(qū)域。把多個(gè)功能入口排列的一起，很好的起到了引流的作用，特點(diǎn)還是很靈活。
據(jù)說是“金剛區(qū)”“瓷片區(qū)”這些詞是美團(tuán)造的，“金剛區(qū)”意思為“百變金剛”，靈活多變；“瓷片區(qū)”就像瓷片貼墻上一樣，工工整整。
、金剛區(qū)、瓷片區(qū)被稱為3大運(yùn)營版塊，起著為不同業(yè)務(wù)模塊、不同活動(dòng)引流的作用。
導(dǎo)航相關(guān)
29.抽屜導(dǎo)航
我們先說下抽屜，抽屜是指一種對(duì)組件展示方式的描述，像抽屜一樣進(jìn)行開合，將多余內(nèi)容隱藏，出現(xiàn)的時(shí)候彈出，和浮出層很像。
對(duì)于不常用的功能，將功能入口隱藏起來，用戶需要時(shí)，點(diǎn)擊入口，然后將功能列表顯示出來。
當(dāng)起到導(dǎo)航作用時(shí) ，就叫抽屜導(dǎo)航，也叫溢出菜單、擴(kuò)展菜單、漢堡導(dǎo)航，就是將側(cè)邊欄隱藏起來。
30.宮格導(dǎo)航
先說下宮格，宮格是指一種布局方式，通過icon+文字直接平均排列開，讓用戶直接看到每個(gè)獨(dú)立的模塊入口，自己去點(diǎn)擊。
當(dāng)宮格布局用于導(dǎo)航時(shí)，就可以叫做宮格導(dǎo)航，像金剛區(qū)就是宮格導(dǎo)航。
31.索引導(dǎo)航
索引導(dǎo)航欄是指通過首字母、或者數(shù)字進(jìn)行分類組織內(nèi)容，并進(jìn)行導(dǎo)航的控件。
32.舵式導(dǎo)航
舵式導(dǎo)航是底部tab的變體，常用在上。
對(duì)于app的核心功能、想要用戶操作的功能放在中間，變換下形式，引導(dǎo)用戶去點(diǎn)擊。
通常在UGC社區(qū)中，為了引導(dǎo)用戶發(fā)布內(nèi)容，將入口放在最明顯的位置，通過最短的路徑，引導(dǎo)用戶發(fā)布。
設(shè)計(jì)相關(guān)
33.襯線體、無襯線體
襯線體是指在字的筆畫邊角中有彎彎繞繞的字體，像宋體就是襯線體。
無襯線體與襯線體完全相反，是筆畫線條統(tǒng)一，邊角沒有彎彎繞繞的字體，像微軟雅黑就是無襯線體。
34.容器變換
容器變換是一種動(dòng)效的定義，來自。
通俗的說是指在一個(gè)小卡片的基礎(chǔ)上放大擴(kuò)展到新頁面。如點(diǎn)擊小紅書首頁瀑布流卡片，進(jìn)入到詳情頁面的動(dòng)效，就是容量變換。
容器變換采用過渡的方式，引導(dǎo)用戶的視線，減少使用過程中的頓挫感，提升流暢度。
35.語義色
直接用顏色表示出具體語境含義
如紅色：警告
黃色：提示
綠色：成功
灰色：不支持
藍(lán)色：鏈接色
rex-語義色板
36.內(nèi)容出界
內(nèi)容出界是指讓內(nèi)容溢出畫框的設(shè)計(jì)方式，可以突出氛圍，讓畫面更有沖擊力。
37.Z軸
這個(gè)概念也來自，在二維設(shè)計(jì)的基礎(chǔ)上升到了三維最右app用過的圖標(biāo)，為了表現(xiàn)出頁面中的深度，引進(jìn)了Z軸的概念。
簡(jiǎn)單理解，就是層級(jí)關(guān)系。
通過使用陰影、浮層等來體現(xiàn)出頁面的高度。
其它
38.熱區(qū)
熱區(qū)是指頁面中可以點(diǎn)擊的區(qū)域，點(diǎn)擊熱區(qū)會(huì)觸發(fā)一個(gè)交互事件。
比如說點(diǎn)擊頭像，進(jìn)入個(gè)人主頁，頭像區(qū)域就是個(gè)熱區(qū) 。
熱區(qū)的尺寸范圍也會(huì)影響用戶體驗(yàn)，比如說單選按鈕，為了讓用戶快速選擇，我們可以選擇擴(kuò)大熱區(qū)范圍，將圖標(biāo)+文字作為熱區(qū) 。
39. 熱力圖
熱力圖，也叫熱圖，是指以特殊高亮的形式在頁面中顯示用戶經(jīng)常點(diǎn)擊的區(qū)域，區(qū)域越亮，所以用戶點(diǎn)擊越多。
熱力圖非常直觀的展示出用戶在頁面上的操作，對(duì)于我們分析頁面的合理性，提高頁面轉(zhuǎn)化率都有很好的指導(dǎo)作用。
總結(jié)
以上就是我想介紹的一些組件名稱以及其他名詞，當(dāng)然一些組件的中文名稱通過不同的翻譯方式，在國內(nèi)的叫法各異。
我們不需要去過度糾結(jié)名稱的專業(yè)叫法，只要這個(gè)名稱讓團(tuán)隊(duì)成員有相同的認(rèn)識(shí)，不會(huì)出現(xiàn)誤解，能夠滿足溝通就夠了。
比如微信小程序右上角膠囊按鈕里的三個(gè)點(diǎn)
【必會(huì)的30個(gè)組件】本文到此結(jié)束，希望對(duì)大家有所幫助。