继夫的玩弄H辣文的小说|女人与拘性猛交视频|精品欧美高清不卡高清|一起做亏亏的事情的视频|啦啦啦在线视频观看|望月直播下载ios版本|国产日韩欧美一区二区三区

  1. 首頁 > 生活 > >

必會的30個組件

生活百科導航

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