圖標，例如像app的icon圖標，還有在頁面內的圖標，都可以叫做icon

也叫穿梭框，一般為左右兩欄，左邊為待選擇項，右邊為已選項。從左邊選到右邊表示已選，從右邊移到左邊，表示取消選擇； 常用在B端產品中，需要多選且選擇項較多時，就可以使用穿梭選擇器。 當可選項很多，大於10個時，可以考慮使用穿梭選擇框。這樣用戶就可以清楚的知道自己選擇了哪些內容。

標誌可以理解為小紅點，就是在圖示、文字右上角、或是在頁面某個地方的紅色小圓點。常用來表示有新訊息或是為了達到某種訊息提示。 標誌的形式不僅只有小紅點，還有紅圈裡加數字，表示新訊息數量。也有直接小紅圈 文字，來更好的傳達訊息。

骨架螢幕是一種載入狀態，也叫做載入佔位符，載入時在頁面上透過灰色方塊顯示出大致結構。 骨架螢幕可以有效緩解使用者的等待焦慮感，向使用者表達出「這個頁面有這樣的數據」的感覺。同時結合光澤掠過或灰色方塊來回收縮的動畫，來表達頁面正在載入中。 骨架螢幕比普通的載入loading動畫能提供更好的視覺效果，能產生載入很快的感覺，對使用者體驗也更好。

預設頁/空狀態頁是指頁面內沒有資料時顯示出空狀態效果。避免沒有資料時顯示空白頁面，讓使用者陷入「到底有沒有資料」的困惑。 預設頁包含網路異常，載入失敗、無權限、搜尋無結果等。

預設頁不僅是只有一個頁面全是空狀態，在頁面中的某個模組中也會有空狀態，針對某個模組內也要加入預設狀態。 沒有數據非常影響用戶體驗，這時就靠缺省頁來安慰用戶。加入合適的文案、圖案、引導、動效來給使用者一些正向的傳達。 例如沒有關注，我們推薦用戶可關注的部落客。當載入失敗時，可以新增「重新載入」按鈕，讓使用者再次刷新。 缺省頁空狀態屬於資料為空的臨界值，常會一不小心遺漏，敲黑板，需要注意空狀態。

tab頁指標籤頁，可以理解為選單、導覽列。透過不同tab頁聚合不同資訊收納在一個頁面區域內。

Tab頁分為頂部、底部、側邊欄。 頂部tab是最常見的，在許多app和網站中都有使用，因為頂部tab佔據的頁面空間較小，同時採用滑動的形式可以容納很多tab。 頂部tab除了有文字，還有圖示tab。 側邊欄tab有左、右，常見的是左側欄。如果更想突出內容，可以採用右側邊欄。 tab頁的層級關係一般是底部tab＞頂部tab＞側邊欄tab。對於頁面內容太多時，也能互相嵌用。例如頂部tab頁裡再套個二級左側邊欄tab。

模態彈跳窗：對使用者操作做出阻礙的彈跳窗。使用者必須對彈跳窗內容做出回應才能進行下一步操作，在操作確認、重要資訊提醒時，都需要用到模態彈跳窗。 非模態彈跳窗：不會阻礙使用者操作的彈跳窗。像是toast提示、通告欄就是非模態（這些概念下邊會說）。

子主題

氣泡可以理解為一個小彈窗，就像氣泡一樣，氣泡是一種形式，結合不同場景，常見的有氣泡確認框、氣泡卡、氣泡引導等，特點就是輕、小、靈活。 氣泡特點就是會有個小箭頭，來表示這個氣泡從哪裡來的，能夠突顯特定位置的提示。所以在引導使用者時，就可以大大方方的使用氣泡引導。 對於一些不常用功能、或快速功能入口，可以採用隱藏的方式，在顯示的時候就可以透過「氣泡卡片」的形式彈出來。

浮出層是指浮出在半透明層上的彈窗窗口，可在浮出層中操作。通常是點擊頁面某個區域後展示出來。

動作欄指從頁面底部彈出的底部列表彈窗，懸浮在半透明蒙版上，不需要進行跳轉頁面，在當前頁面就可以進行更多的操作。

活動視圖指在從底部出現的彈跳窗，常見的樣式為icon 標題，可讓使用者快速存取其它功能。

吐司提示、輕提示，是一種非常輕量提示。出現後，過幾秒自動消失。出現位置有螢幕頂部、​​中間、底部。 由於出現時間短、面積小，過幾秒就會自動消失，所以不能添加過多的文字，也不能放重要資訊。 Toast屬於非模態。

形式一般為頁面上方顯示的小橫條內容。可用來做狀態提示、訊息通知。屬於非模態，可以提示用戶，但不影響用戶的操作。

通告欄比toast達到的提示更重，因為它更明顯；比彈跳窗提示、氣泡提示達到的提示輕，因為它不會影響使用者的操作。 通告欄位置通常在頁面上方，也有在頁面下方顯示。可以主動消失，也可以常駐。同時在一個頁面內也可以新增多個通告欄。

懸浮在頁面底部的訊息通知，可以自動消失，也可以常駐，手動點擊消失。

snackbar的提示強度比Toast強，不影響使用者操作，屬於非模態。另外snackbar在出現時可以新增操作按鈕，引導使用者做其它操作。

HUD-輕提示，和上邊的Toast相似。

HUD-抬頭顯示器.全名為Head-up Display。

透明指示層指在頁面中顯示出互動操作的指示層，也是種回饋元件，常見的如看影片的快轉提示，或是調整音量的提示。

常指在滑鼠懸浮在某個圖示、按鈕、文字等元素上，顯示出來描述或功能說明，用於輔助使用者了解某個功能。

Material Design將Chips分為4類，分別是輔助chips、過濾chips、輸入chips、建議chips。 輔助chips：可以跨越多個app的智慧或自動化操作，例如購買電影票後把看電影的時間加到日曆上。 過濾chips：用於篩選，可用於單選與多重選擇。 輸入chips：使用者輸入的資訊聚合，例如發送電子郵件輸入收件者後，後邊有個「×」。 建議chips：動態產生的建議來幫助縮小使用者的意圖。

步進器是指透過增、減按鈕對數值進行控制的組件。常用於小範圍整數數值輸入,每次增、減的數量都是恆定的。

滑動選擇器是指透過橫軸中透過滑動的方式選擇對應的數值、區間。 特點是在橫軸中展示出了最小值與最大值，使用者可以透過滑動的方式自行選擇對應數值。 區間滑動選擇器是指可以選擇最小值與最大值，讓使用者自行選擇區間範圍，常用於價格選擇。

Floating action buttons ，浮動按鈕，就是懸浮按鈕。常用於主功能入口，如新建。

狀態列是手機螢幕上方顯示時間、電量、手機訊號的那一欄 導覽列是指狀態列下邊的那一欄，導覽列可以是很簡單的只有一個標題、也可以放搜尋框，或者其它操作按鈕，或功能入口。

圖片或卡片可進行左右滑動時，常使用指示器來表示所在位置。 根據指示器的樣式不同，有圓點指示器、滑塊指示器、線型指示器、數位指示器。

卡片是一種容納資訊的展示方式，每張卡片內承載不同內容，不僅能有效處理資訊集合，同時有效的讓使用者聚焦在卡片中的內容。 卡片的高效分區、資訊突出在許多產品中都已經使用到。

泳道指可以橫向左右滑動來查看內容的方式 將多個元素內容在一定區域內橫向滑動，擴展了頁面的橫向空間，通常是手動滑動查看，並沒有自動滑動。

Banner是指出現在頁面中明顯的橫幅圖片，通常作為推薦位、廣告位，如產品推薦、廣告位等。依樣式不同，還能分為膠囊banner、瓷片區banner、白底banner

將不同矩形塊通過網格佈局的方式就組成了瓷片區。 特點就是佈局很靈活，比banner佔據的空間小，相同面積能夠放更多的流量入口。

金剛區是指在首頁中icon 文字透過宮格形式排列的區域。把多個功能入口排列的一起，很好的起到了引流的作用，特點還是很靈活。

Banner、金剛區、瓷片區被稱為3大營運版塊，扮演不同業務模組、不同活動引流的角色。

抽屜是指一種對組件展示方式的描述，像抽屜一樣進行開合，將多餘內容隱藏，出現的時候彈出，和浮出層很像。 對於不常用的功能，將功能入口隱藏起來，當使用者需要時，點擊入口，然後將功能清單顯示出來。 起到導航作用時，就叫抽屜導航，也叫溢出選單、擴充選單、漢堡導航，就是將側邊欄隱藏起來。

宮格是指一種佈局方式，透過icon 文字直接平均排列開，讓使用者直接看到每個獨立的模組入口，自己去點擊。 當宮格佈局用於導航時，就可以叫做宮格導航，像金剛區就是宮格導航。

索引導覽列是指透過首字母、或數字進行分類組織內容，並進行導覽的控制項。

舵式導覽是底部tab的變體，常用在Apptabbar上。 對於app的核心功能、想要使用者操作的功能放在中間，變換下形式，引導使用者去點擊。

通常在UGC社群中，為了引導使用者發佈內容，將入口放在最明顯的位置，透過最短的路徑，引導使用者發布。

襯線體是指在字的筆畫邊角中有彎彎繞繞的字體，像宋體就是襯線體。 無襯線體與襯線體完全相反，是筆畫線條統一，邊角沒有彎彎繞繞的字體，像微軟雅黑就是無襯線體。

容器變換是一種動態的定義，來自 Material Design。 通俗的說是指在一個小卡片的基礎上放大擴展到新頁面。如點擊小紅書首頁瀑布流卡片，進入到詳情頁面的動效，就是容量變換。 容器變換採用過渡的方式，引導使用者的視線，減少使用過程中的頓挫感，提升流暢度。

直接用顏色表示出具體語境意義 如紅色：警告 黃色：提示 綠色：成功 灰色：不支持 藍色：連結色

內容出界是指讓內容溢出畫框的設計方式，可以突顯氛圍，讓畫面更有衝擊力。

這個概念來自Material Design，在二維設計的基礎上升到了三維，為了展現頁面中的深度，引進了Z軸的概念。 簡單理解，就是層級關係。 透過使用陰影、浮層等來體現出頁面的高度。

熱區是指頁面中可以點選的區域，點選熱區會觸發一個互動事件。 比如說點擊頭像，進入個人主頁，頭像區域就是熱區。

熱區的尺寸範圍也會影響使用者體驗，例如單選按鈕，為了讓使用者快速選擇，可以選擇擴大熱區範圍，將圖示 文字作為熱區。

熱力圖，也叫熱圖，是指以特殊高亮的形式在頁面中顯示用戶經常點擊的區域，區域越亮，所以用戶點擊越多。 熱力圖非常直觀的展示出使用者在頁面上的操作，對於我們分析頁面的合理性，提高頁面轉換率都有很好的指導作用。