儀表板
介面詞典
看到喜歡的樣子,就能知道它叫什麼、怎麼跟別人描述。點預覽試試看。
34 個詞條
- 導覽側邊欄Sidebar導覽固定在畫面一側,隨時看得到所有主要入口。看說明
- 導覽頂部導覽列Top navigation把主要入口橫排在頁面最上方。看說明
商品
- 導覽底部分頁列Bottom tab bar手機畫面底部固定的幾個圖示入口,單手拇指就點得到。看說明
首頁
- 導覽漢堡選單Hamburger menu用三條橫線的圖示把導覽收起來,點了才展開。看說明首頁
- 導覽麵包屑Breadcrumb用一條路徑顯示你現在在第幾層,每一層都能點回去。看說明
運動鞋
- 導覽分頁標籤Tabs在同一個頁面內,切換幾塊並列的內容。看說明
- 內容展開側邊抽屜Drawer從畫面邊緣滑出的面板,背後的頁面還在。看說明
- 內容展開對話框Modal在頁面上方蓋一層視窗,要先處理完才能繼續。看說明
- 內容展開手風琴Accordion點標題展開或收起內容。看說明
訂單金額達門檻就免運費。
收到商品後七天內可以退貨。
可以來信,或使用線上留言。
- 內容展開彈出提示框Popover / Tooltip靠近某個元素,浮出一小塊說明或選項。看說明128這個數字是過去七天的平均。
- 輸入單頁表單Single-page form所有欄位在同一頁,一次填完送出。看說明
- 輸入分步驟精靈Stepper / Wizard把長表單切成幾步,一次只填一小塊。看說明
- 1
- 2
- 3
- 4
第 1 步,共 4 步
帳號
- 輸入行內編輯Inline editing直接點內容就能改,不用另外開表單。看說明
專案名稱
- 輸入自動儲存Autosave改完就自動存起來,不用按儲存鈕。看說明無標題文件
- 資料呈現表格Table用列與欄整齊列出同類型的資料,方便掃視與比較。看說明
客戶 A 已付款 120 客戶 B 待處理 45 客戶 C 已出貨 310 客戶 D 已付款 78 - 資料呈現卡片格Card grid每筆資料一張卡片,排成整齊的格子。看說明
- 資料呈現主從式Master-detail左邊清單、右邊內容,點清單項目,右邊就換成對應的詳情。看說明
訊息 1
- 資料呈現看板Kanban用欄位代表狀態,把卡片在欄位間拖動來改變狀態。看說明
待辦 2
任務 A任務 B進行中 1
任務 C完成 1
任務 D - 回饋吐司提示Toast操作後短暫浮出一則訊息,過幾秒自己消失。看說明已儲存
- 回饋行內錯誤訊息Inline validation在有問題的欄位旁邊,直接說明哪裡錯、怎麼改。看說明
- 回饋空狀態Empty state沒有資料時顯示的畫面,說明原因並引導下一步。看說明
還沒有專案
建立第一個專案,就能開始使用。
- 載入骨架畫面Skeleton內容還沒載入時,先畫出灰色的版面輪廓。看說明我的
客戶 A
- 載入分頁Pagination很多筆資料時,切成一頁一頁,用頁碼和上一頁、下一頁來翻。看說明
搜尋結果
- 項目 1
- 項目 2
- 項目 3
- 項目 4
- 載入下拉重新整理Pull to refresh在手機上把清單往下拉,放開就重新載入。看說明動態下拉重新整理
動態 3
動態 2
動態 1
- 選取與控制下拉選單Dropdown menu點一個按鈕,底下展開一排可以選的動作或選項。看說明訂單 1042
- 選取與控制開關Toggle switch一個滑動的開關,在「開」和「關」兩種狀態之間切換,而且立刻生效。看說明
- 電子郵件通知開
- 推播通知關
- 選取與控制可搜尋選取Combobox (searchable select)一個輸入框,邊打字邊篩出符合的選項,再點選其中一個。看說明
- 選取與控制日期選擇器Date picker點開一個月曆,直接點選日期,不用自己打字。看說明入住日期
- 輸入檔案上傳File upload一塊虛線區域,把檔案拖進去或點一下選檔,並顯示上傳進度。看說明
- 內容展開提示氣泡Tooltip滑鼠移上去或用鍵盤聚焦時,旁邊跳出一小段說明文字。看說明粗體斜體連結
- 內容展開底部抽屜Bottom sheet手機上從畫面底部滑出一塊面板,放幾個選項或簡短內容。看說明
分享到
- 載入進度條Progress bar用一條逐漸填滿的橫條,顯示一件事做到哪了。看說明
- 載入無限捲動Infinite scroll捲到底就自動載入更多內容,沒有分頁按鈕。看說明
動態 1
動態 2
動態 3
動態 4
動態 5
動態 6
動態 7
動態 8
- 導覽指令面板Command palette按快捷鍵叫出一個搜尋框,打字就能跳到頁面或執行動作。看說明