起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何從零構建UI組件及設計規范（四）：基礎組件
《如何從零構建UI組件及設計規范》共分為5個系列，分別為：介紹篇、設計原則、全局樣式、基礎組件、通用模版。本篇介紹了九曳供應鏈平臺經常使用到的22個組件，總結了平臺對于這些組件的定義、組成、使用規則、使用場景及注意事項，以及產品在設計時所要遵循的規范。
Ps. 本文約11000個字，90張圖片，內容較多，建議收藏后閱讀。
- Button 按鈕
- Link 鏈接
- Radio 單選框
- Checkbox 復選框
- Input 輸入框
- Select 選擇
- Switch 開關
- DateTime 日期時間
- Upload 上傳
- Transfer 穿梭框
- Form 表單
- Table 表格
- Tag 標簽
- Pagination 分頁
- Message 輕提示
- Notification 警告通知
- Modal 彈窗
- Dropdown 下拉菜單
- Tabs 標簽頁
- Steps 步驟
- Tooltip 文字提示
- Special 特殊組件
1. Button 按鈕
按鈕主要用于操作，表示交互時發生的動作，比如添加、保存、刪除和注冊等。
1.1 常用按鈕
常見的按鈕有很多種，九曳系統常見的按鈕有5類，如下：
1.2 一般規則
據研究，次要按鈕和主要按鈕的左右差異可以忽略不計，但是保持產品、系統的一致性更為重要。
按鈕位置：主按鈕在右側，所有的輔助按鈕顯示在左側。九曳規范的【次要/主要】按鈕順序是按照設計規范來，前后應始終遵循。完成相同或相近的功能按鈕放置在一起，減少鼠標移動的距離。
按鈕文案：文字簡短，6個字以內，以動詞為主，表述清楚操作按鈕會發生什么，例如創建、保存、刪除等，不能出現反問、否定等詞匯。
錯誤使用：不要將按鈕用作導航元素。如果需要跳轉到新的頁面，可使用文字按鈕。
文字按鈕：當按鈕標簽過長（超過6個中文字符），導致視覺出現問題時，建議該用鏈接文字；按鈕需要嵌在文本中時，應該使用鏈接文字；當命令是次要的，應該用鏈接文字；
圖標+按鈕：有圖標的按鈕會給人權重較高，需要引導用戶去點擊它可使用，如導入導出等。
三個按鈕：在極少數，需要三個按鈕的情況下。除最右邊的是主要按鈕，其他兩個都是次要按鈕。如果三個按鈕具有的權重都差不太多，那么三個都應該是輔助按鈕。
1.3 刪除按鈕
刪除無法輕易撤銷，通常是永久性的。如果對象將不存在，需要警告用戶任何不利的后果，例如數據丟失。
刪除后：用戶刪除數據后，返回其列表頁面時，需要對列表的數據進行動畫處理，并消息成功提示；如果刪除失敗，需要發出通知告知用戶刪除失敗。
彈窗刪除：高影響。數據很重要、新建非常耗時麻煩、刪除的內容有大量數據、關聯其他的重要項目等。
氣泡窗刪除：低影響。新建很容易、操作需要連續刪除多個內容等。
1.4 按鈕樣式
圖標禁用樣式：默認禁用狀態是通過降低透明度的來設置的。
組件：50%透明度；
文本：25%透明度；
圖標：50%透明度。
1.5 更多按鈕
至少需要 3個 以上的按鈕，更多可以包括任意操作。
刪除位置：一般將破壞性的才做放到最后，比如刪除。
排序：按照重要的、使用頻率高低來順序，但也需要合乎邏輯。
文案：和正常按鈕一樣，使用動詞作為操作的詞匯，不要使用句式。
按鈕數量：至少3個以上操作才可使用「更多」。
1.6 使用注意事項
按鈕文案：文字要以動詞為主，表述清楚操作按鈕會發生什么，例如創建、保存、刪除等。具體詳見「標準詞匯庫」。
按鈕文案：文字要簡短，不要超過6個字，同時需要清楚說明操作按鈕時會發生什么。
不同尺寸按鈕：相鄰的放置不同尺寸的按鈕不可以放在一起。
列表頁按鈕應用
突出的方法，不局限于強化重點項，也可以通過視覺單元的形式（通過改變間距親密性）。
在一些選項上，或者需要慎重決策的場景，設計應該保持中立，不要去誘導客戶去點擊某個按鈕，所以如果需要突出一項或者更高頻的操作，可以通過間距做設計。
2.? Link 鏈接
鏈接是我們系統常見的交互式元素，它主要的目的是將用戶帶到其他地方。
2.1 鏈接類型
默認鏈接：藍色。用于文本鏈接和主要操作。
不重要鏈接：黑色。次要、不重要的操作使用黑色。
2.2 一般規則
- 不要使用圖標作為鏈接；
- 鏈接文字字符一般不受限制，但也不可過多；如果鏈接文字特別長，但便于用戶理解，也必須精簡，以防止文本換行；
- 鏈接文字應當與目的地的標題一致；
- 避免使用術語“單擊此處”，鏈接文案需要結合目標站點名稱，使用有意義的描述性標簽。
2.3 錯誤案例
避免使用術語“單擊此處”，鏈接文案需要結合目標站點名稱，使用有意義的描述性標簽。
3. Radio 單選框
當兩個或兩個以上選項互斥時，則使用單選，意味著用戶只能選擇一個選項。
3.1 一般規則
單選框數量：單選框數量至少為2個，一般少于6個。
簡潔明了：標簽文字要可能簡潔，且標簽文字必須顯示在按鈕的右側。
應用規則：單選框為必填項。正常情況下，初始狀態默認選擇第一項。
3.2 舉例說明
默認選擇：一組單選按鈕應該默認選擇一個選項。如果沒有默認選擇，切勿顯示它們。
4. Checkbox 復選框
用戶可以在選項列表中選擇一個或者多個選項。
4.1 一般規則
復選框數量：避免過多的復選框給使用者造成認知負擔，數量不宜過多，一般適用于不超過7個選項；如出現過多的情況，可采用其他方式展示，如穿梭框、下拉標簽選擇等。
應用規則：根據使用場景是否為必填；初始狀態不可以有默認勾選項。對于開關選項，使用switch開關，不可使用復選框。
默認選擇：默認情況下，不選中復選框。為了便于閱讀，復選框和標簽保持為一行。
單個復選框：單個復選框表示用戶在兩種狀態之間做切換操作。
4.2 事項
全選復選框：當頁面存在多個同類內容的復選框時，需要提供全選的功能，要求：
- 勾選全選，則選中當前頁面所有記錄；
- 去掉當前頁面某個記錄的勾選，則全選也去掉勾選；
- 刷新頁面后，自動去掉已勾選的記錄及全選的勾選。
標簽位置：復選框和標簽保持一行，并始終顯示在左側。
5. Input 輸入框
用于輸入內容和數據，可以控制文本輸入框的長短，來制定希望用戶輸入內容的多少。
5.1 元素拆解
- 標題：應始終可見；
- 占位符：可作為提示，也可以提供默認值；
- 文本框：長度可根據場景變化；
- 反饋提示：作錯誤提醒；
- 幫助提示：內容多可拆分，也可以融入操作圖標中；
- 圖標：分為展示型圖標，操作型圖標，反饋型圖標；
- 反饋型圖標：也有可能是錯誤，配合下方的錯誤提醒。
5.2 常用輸入框形式
輸入框形式有4中，分別是頂對齊、右對齊、左對齊和隱藏標簽，這里只推薦前兩種，使用方法如下：
- 簡易表單：頂部對齊，字段少于4個，或者字段名稱字數多；
- 較復雜表單：右邊對齊，字段數量較多，4個以上，默認推薦使用該對齊方式。標簽名稱盡可能不要超過6個字，超過的用“……”顯示。
5.3 一些注意事項
必填項：
- 界面的必填項必須以紅色 * 標識出來；
- 當必填項沒有填寫時，在光標移走時，文本框下方以“請輸入…”紅色文字來標識；
- 當界面排列較緊時，如果必填項沒有填，可通過消息提示來提醒。
輸入框操作：
- 數字輸入框 在輸入非法值時直接給予提示；
- 當輸入的內容達到了字段的長度限制時，不顯示新輸入的字符，并提示不允許再輸入。
驗證和錯誤：
驗證可以簡化流程，并讓用戶在填寫表單時保持簡潔。有關完整指南，參閱表單使用頁面。
字符數
文本字段和文本區域需要有字符數限制，輸入框長度一般為最大最大輸入內容。如果是段落字符計數器超過字符限制，則提示用戶字符超過限定數量。
5.4 輸入框規范
輸入框樣式
輸入框高度：40px、32px、24px 三種高度，默認使用32px。
輸入框長度：輸入框的長度尺寸需嚴格按照規定的尺寸來，80px、120px、160px、240px、320px。
搜索輸入框
數字輸入框
6. Select 選擇
用于輸入的一種組件，比如選擇一個選項用來提交數據等。
6.1 一般規則
默認顯示：擇下拉框不存在默認值時，則默認為“請選擇”，當有默認值，則顯示默認值，比如：所有、全部等。
驗證方式：驗證有助于簡化流程，用戶在填寫表單時出現錯誤，應實時提醒。
6.2 高級選擇
可多選：適用性較廣的基礎多選，用 Tag 展示已選項。
單選可搜索：利用搜索功能快速找到選項。
6.3 選擇和下拉菜單
選擇和下拉組件看起來相似，但它們具有不同的功能。兩者基礎代碼也不同。一個是可以根據需要設置下拉菜單組件的樣式，而選擇組件的外觀可以使用瀏覽器所自帶的。
選擇：用戶從選項表選擇一個（或多個）并用于數據的提交組件。
下拉菜單：對面頁面的內容進行過濾、排序或操作等。
7. Switch 開關
兩種狀態之間的切換，使用時需告知用戶當前開關的狀態。
7.1 一般規則
內容：操作切換，闡明該操作執行后的結果。
8. DateTime 日期時間
日期和時間組件是允許用戶選擇一個或某個日期范圍的組件。
8.1 日期時間形式
單日期選擇： ?當用戶需要選擇一個日期時，附帶日歷小部件。
帶有時間日期：具體到當天的時間，日期并提供快速選擇到「今天」。
8.2 錯誤案例
使用分隔符：使用“-”作為分隔符；日期為個位數時，需要用“0”補齊；表達時間范圍時，用“至”作為連接。
使用分隔符：如果日期是用中文，那么表達時間范圍時，用“-”作為連接。
日期格式：日期、星期與時刻一起使用時，格式為「日期 時刻」、「日期 星期 時刻」。
9. Upload 上傳
點擊或者拖拽上傳文件。
9.1 一般規則
圖片要求：告知用戶上傳圖片的格式質量及要求，以及上傳圖片的上限數量。
狀態可控：告知用戶上傳的狀態。例如：上傳中、上傳成功、上傳失敗等。
可刪除：已上傳的圖片需要提供刪除功能。開發需需使用JavaScript在每個上傳的文件加入一個“刪除”按鈕。需注意，瀏覽器本身不支持這種編輯。
顯示提示：文件名隱藏的內容，鼠標懸停時需要包含瀏覽器提供的全部提示。
9.2 拖拽上傳
把文件拖入到指定區域上傳，且支持點擊上傳。文件上傳需要明確文件的大小和文件格式，例如：文件大小不超過5M，文件僅支持PDF.ZIP.EXL等。
9.3 縮略圖上傳
一般用于圖片文件上傳，用戶可以點擊縮略圖放大或者刪除。當上傳圖片數量到達限制后，上傳按鈕消失。
使用場景：一般用于上傳面單、頭像等。
9.4 使用注意
- 用戶可以一次選擇一個或多個文件上傳。默認情況下，可以接受任何文件類型，如果有需要添加參數以驗證特定的文件類型。
- 單擊添加文件的操作后將觸發瀏覽器的上傳窗口。
- 用戶選擇要上傳的文件后，瀏覽器特定的上傳文件窗口將關閉，并且這些文件將顯示在“添加文件”指定的區域。
- 文件發生的任何錯誤應顯示為內聯錯誤 Alert。
10. Transfer 穿梭框
雙欄穿梭選擇框，常用于將多個項目從一邊移動到另一邊。
10.1 舉例說明
組織架構：選擇組織架構人員。
11. Form 表單
用于數據采集。所有頁面需要填寫信息的相關頁面，都叫做表單。表單域包含文本框、多行文本框、復選框、單選框、下拉選擇框和上傳組件等；表單按鈕包含提交、取消等。
11.1 元素解析
- 標題：告知用戶輸入該字段的含義。
- 占位符文本：提供輸入字段的內容。
- 輸入字段：用戶輸入信息，可通過不同的組件（文本字段、單選框和復選框等）輸入字段信息。
- 幫助文本：提供關于填寫字段的幫助。
- 驗證反饋：確保填寫的信息符合要求。
- 操作：允許用戶提交表單。
11.2 表單對齊方式
默認推薦類型右對齊，普遍適用于絕大多數場景。如果一個頁面需要展示兩欄及以上，采用左對齊?？紤]海外場景的話，使用頂對齊。
11.3 表單布局
- 簡易表單（F布局）：一般情況下，16個字段以下，好處能夠做到提交前審查完所有的字段，避免非必填字段的遺漏，這也是默認布局。
- 較復雜表單（Z布局）：16個字段以上，方便快速提交，避免滾動帶來的效率底下。錯誤通知顯示在表單的頂部。
11.4 表單組件使用
- 當存在兩個或兩個以上的選項時，并且它們之間存在互相排斥的關系，使用單選按鈕。
- 可以選擇任意數量的選項，每個復選框和和其他的復選框不存在任何聯系。獨立存在的復選框可用于打開或關閉某個選項，例如勾選「閱讀條例」。
- 下拉選擇一般用于有大量需要選擇的字段。
11.5 表單使用規范
表單結構：表單應該幫助用戶盡快的完成其目標，所以不要使用豎列排版布局。
默認焦點：打開一個新表單，光標默認停在第一個待輸入的文本框中。
表單按鈕：不要將按鈕放在表單的正中間，當前采用的是簡易表單按鈕放在左邊，復雜表單按鈕放在右下角并浮層。
表單驗證：用戶單擊文本字段以外的位置時，失去焦點顯示驗證，并將錯誤提醒顯示在組件的下方。
不要長篇大論：表單項的標題、提示不要使用不易理解的詞匯或大篇文字，造成理解成本過高。
12. Table 表格
表格主要用于展示大量結構化數據。
12.1 一般規則
數字對齊：數字類一般是左對齊，價格是右對齊，這樣可以方便金額做上下對比，可以很快看出最多和最小值；如果價格一般較為固定在幾位數，也可以考慮左對齊。
避免橫向滾動：精簡字段，盡可能避免橫向滾動；如果字段實在過多，滾動時表頭進行浮起，方便滾動時看到找到字段的主體信息；如果帶有操作類，表尾也需要進行浮起。
復選框全選：當去掉某個記錄的勾選，則全選也去掉；刷新頁面后，自動去掉已勾選的記錄及全選的勾選。
不要斑馬線：不需要斑馬條紋，用線條進行分割。
表頭屬性：表格的表頭有固定的顏色，要求與表中的內容對比明顯；文字加粗，以區別于表格的內容。
表格內容：表格中存在的鏈接文字需要采用統一的藍色字體顯示。
文字過多：當某個字段文字超過顯示寬度后，以……顯示，光標停留后，詳細內容在浮動層顯示。
內容為空：字段內容為空的時候，不要空著，用“-”顯示。
12.2 字段過多
字段合并：頭部重新加一個名稱，前面列可以多放字段，缺點是占用行高。
滾動條左右滑動：需注意第1列和最后操作列固定浮層，盡可能避免左右滑動。
12.3 附加功能 – 分頁
默認樣式：默認展示樣式，有當前頁+總頁+總條目數量+分頁按鈕組成。
延遲加載：不注重內容的數量，需要用起來更方便一些，使用場景：新聞公告通知等。
12.4 附加功能 – 排序
排序數據表有三種狀態：沒有排序（arrows）,向上排序（arrow-up）,向下排序（arrow-dowm）。
圖標指示當前的排序狀態，并且在激活排序后顯示。
12.5 附加功能 – 工具欄
全局操作：表格工具欄保留用于全局表格操作，例如表格設置，隱藏過濾器，設置表格數據。
圖標大?。?/strong>該區域可添加關于表格功能的圖標，圖標大小為16×16。
圖標數量：建議表格工具icon數量不超過5個。
12.6 錯誤案例
數字對齊：無論表格大小，不要將內容單元格居中；名稱、標題和文本向左對齊，數字右對齊。
文字鏈接：將所有的操作鏈接放到最后操作列中。
計量單位：計量單位默認放在表頭，并右對齊。
字段過多：字段過多盡可能采用合并的方式。
13 Tag 標簽
對某個類目的關鍵字進行標記或者分類，其主要目的對項目進行分類。
13.1 一般規則
標簽數量：表格可添加多個標簽。
標簽文字：標簽內字數最多為6個字。
13.2 標簽分類
基礎標簽：正常情況下，采用基礎標簽。
輕標簽：分類內容重要性很低，可采用輕標簽。
13.3 其他標簽
內容標簽：如選擇輸入框、詳情頁信息內容等。
13.4 錯誤案例
不可用矩形標簽：不要使用矩形作為標簽，會讓用戶誤以為是按鈕。
14. Pagination 分頁
將內容或數據分為多個頁面，并帶有下一頁和上一頁的控件。分頁器附帶一個選項，該選項可以讓用戶可以更改每頁的展示行數。
14.1 一般規則
什么時候使用：一般情況下，如果一個視圖顯示的項目數量超過25個（瀑布流的loading除外），則需要分頁器。
顯示當前頁碼：清楚地告訴用戶所在的頁面。通過總體多少頁（例如共4頁中第1頁），幫助用戶清楚地顯示所有的數據。
提供按鈕選項：提供上一頁和下一頁按鈕，幫助用戶在數據中頁面中前進或后退。
每頁數量：使用內聯選擇，以便用戶可以更改每頁顯示的數量。
分頁器位置：位于表格的右上角。
14.2 分頁器分類
基礎分頁器：默認分頁器，一般情況下表格都需要展示。
可跳轉分頁器：除特殊要求，一般不提供輸入具體頁數查詢。
小型分頁器：一般用于詳情頁內部。
15. Message 輕提示
全局展示提醒消息。
15.1 一般規則
何時使用：用于提示簡要的文字信息。
文案數量：簡明扼要，文字不要超過10個字。
展示時間：從頂部出現，顯示2秒后自動消失。
15.2 舉例說明
成功提示：如表單創建成功，則需要簡要提示。
16. Notification 警告通知
展示重要的警告提示和通知消息。
16.1 一般規則
顯示時間：如不做要求，持續顯示不會自動消失，直到用戶將其關閉。
消息內容：通知含有標題，以便讓用戶一眼就能明白所要提示什么，所含內容格式為「標題+提示內容」，通知的正文中可包含一些鏈接，這些鏈接可定向到后續步驟中。
圖標：圖標是給用戶傳達直觀的信息，用戶更易理解；警告提示文案，是沒有圖標的。
16.2 警告提示 & 通知消息分析
警告提示：任務生成。直接給用戶及時的反饋信息，與用戶的操作有關。具有強吸引用戶的注意力，來提供上下文所需要的關鍵信息。
有以下幾種使用場景：
- 表單提交；
- 上傳文件出現問題；
- 搜索（篩選）結果問題。
通知消息：系統生成。主要用于系統級通知的被動提醒。和系統或任務流有關，與用戶操作無關。
注意事項：
- 減少干擾：通知應當與用戶強有關，并可能減少干擾。
- 通知類型：一般分為任務/工作流生成的通知和系統生成的通知，如系統消息或系統維護等。
16.2 警告提示-使用規則
警告提示的消息持續存在，直到用戶關閉或者問題解決。一般與字段結合使用，解決表單輸入的錯誤問題。
如果需要顯示多個子類型：
使用規則：
- 用戶注意的緊迫性排序的：錯誤 > 警告 > 信息 > 成功。
- 表單中，警告提示通知顯示在表單的上方。
- 警告提示不可覆蓋其他內容。
- 如有可能，并為用戶提供清晰的后續步驟。
- 如有多個警告提示，不是一個接一個的顯示，而是全部顯示，比如：顯示多個錯誤警告。
各警告提示分析：
- 錯誤：阻止用戶繼續操作，直到消除錯誤。
- 警告：通知操作可能會產生的意外結果，持續顯示到用戶關閉，可繼續執行任務。
- 提示：提供操作無關要的其他信息，不需要進一步的操作，不顯示圖標。
- 成功：確認操作完成，不需要進一步的操作。
16.3 警告提示 – 使用案例
橫幅通知：標語占據界面的頂部，和模塊頁面寬度保持一致。警告提示持續存在，直到問題解決或被用戶關閉。放置在相關內容的頂部，通知消息不要覆蓋其他內容，其包含的鏈接重新上傳。
16.4 通知消息 – 使用案例
通知提示位置：顯示頁面的右下角，如有多個可進行覆蓋。通知消息展示重要消息，不是很重要通知消息，不需要強吸引用戶的注意力，放入導航欄消息中。
16.5 輕提示和警告通知區別
16.6 對話框 – 通知消息
短期任務或者需要提醒用戶注意的重要信息時，對話框效果最好。與導航到新頁面相比較，對話框不容易迷失方向。
缺點：對話框是破壞性的，強制吸引用戶的注意力，在一般工作流程中，應當謹慎使用，否則會嚴重影響心流體驗。如九曳平臺需要客戶關注公眾號，以便能夠及時獲取作業消息，這是一條非常重要希望客戶能夠及時獲取到的通知消息。
17. Modal 彈窗
分為模態窗和非模態窗，模態窗是保留當前頁面的情況下，需要用戶做的相關操作。非模態窗這邊主要是氣泡窗，可以讓用戶作快速確認，模態窗和氣泡窗都是彈窗，其區別看是否有遮罩。
17.1 彈窗類型
17.2 模態窗 – 注意事項
不可以：
- 不要嵌入鏈接：不要在模態窗訪問其他頁面的信息。
- 不要顯示大量信息：模態窗本身顯示的信息有限，不要顯示復雜或大量數據。
- 不要嵌套：不可以在模態窗打開另一個模態窗。解決方案：第一種則是第一個任務的時候，就不要用模態；第二種則第二個模態框可采用氣泡框。
- 不可整頁：正常模態框的寬度最大不超過600px，九曳平臺所推薦的表單模態框寬度為400px和500px。
使用場景：
- 簡易表單：字段數量少于6個。
- 需要立即回復：使用對話框來阻止用戶繼續其他進程的信息。
- 緊急/重要信息：告知用戶當前工作的緊急消息，通常用于報告系統錯誤、傳達用戶操作的后果或告知用戶平臺緊急發布的消息等。
- 需要做決斷：確認用戶的決定。如果該操作具有破壞性或不可逆性，則使用危險按鈕。
17.3 模態窗 – 新增表單
模態框主要顯示關鍵信息或請求完成用戶工作流程所需的輸入，九曳平臺推薦字段少于6個也可使用。
元素解析：
- 標題：標題應需要簡短，不要超過6個字，需要描述對話框的任務或詳細信息放到下方的內容中。
- 主體：包含模態窗任務所需的信息。它包括消息文本和組件，模態應包含和當前任務有關的內容。輸入框、選擇和日期組件如不做要求，都采用右對齊。
- 按鈕：包含完成或取消對話框任務所需操作按鈕。
- 關閉：關閉
X圖標將關閉對話框而不提交任何數據；點擊除窗口意外其他位置將自動關閉；按Esc關閉。 - 遮罩層：遮蓋頁面內容的屏幕疊加層。
17.4 模態窗 – 危險按鈕
危險模式是用于破壞性或不可逆的一種特殊類型。在危險模式下，用危險按鈕替換主按鈕，它們通常用于發生重大影響時用作確認操作的確認，如果操作不正確，將導致嚴重的數據丟失。
刪除選擇：根據其重要性和使用頻率來選擇。
17.5 模態窗 – 形式規范
消息確認：互動。需要用戶確認信息，可包含多個按鈕。
簡易表單：輸入數據后保存表單，一般包含取消/主按鈕。
17.6 模態窗 – 錯誤案例
不要使用鏈接：彈窗在任務中屬于中間過渡過程，需要用戶處理完當前狀態，所以不要使用鏈接讓用戶跳轉到其他頁面以致用戶中斷當前的工作流程。
18. Dropdown 下拉菜單
用于過濾、排序，或將動作折疊到菜單中。
18.1 一般規則
不可單獨使用圖標：下拉菜單中不可以單獨使用圖標，如需強調可圖標+文字。
避免出現多行文本：如果需要自動換行，則將其限制為兩行，并在第二行包含一個省略號（……）以表示溢出內容。
按照高頻率/重要排序：通常將高頻率/重要程度放在上方，如果沒有則按照文字的首字母排序。
什么時候使用：當有5～15個項目可供選擇時，通常會使用下拉菜單。例如：更多控件可以是一個圖標；對于用戶個人資料，控件是頭像+姓名。
重要菜單凸顯：對于過長列表中較為重要的、需要提醒的菜單選項，采用間隔線分組。
18.2 左側菜單
左側菜單：左側菜單由「組標題+菜單選項」構成。
18.3 選擇和下拉菜單
選擇和下拉組件看起來相似，但它們具有不同的功能。兩者基礎代碼也不同。一個是可以根據需要設置下拉菜單組件的樣式，而選擇組件的外觀可以使用瀏覽器所自帶的。
選擇：用戶從選項表選擇一個（或多個）并用于數據的提交組件。
下拉菜單：對面頁面的內容進行過濾、排序或操作等。
19. Tabs 標簽頁
標簽是用于內容篩選的一種快速切換導航。它是一種“或”的模式顯示的內容，在屏幕同一空間內兩個或兩個以上部分內容之間進行切換。
19.1 一般規則
簡潔明了：標題文字不超過6個字（4個字以內最佳），標簽字符過長，會嚴重影響閱讀和使用體驗。
默認選擇：至少有一個默認選擇，每次刷新切換到第一個選項。
或的關系：標簽與標簽是一種“或”的關系。
不要用圖標：不要在標簽標題內使用圖標。
標簽數量：大多數情況下，標簽的數量盡可能不要超過6個。這樣可以保證使用界面的整潔，并能夠減輕用戶認知負擔。如果需要用到超過6個以上的標簽，可以考慮下拉菜單的方式。
排序：具有相關性內容的選項卡應當靠在一起，做相鄰分組。
19.2 標簽頁分類
選項卡有兩種設計，默認和容器設計。它們在層次結構上是相同的，一般情況下不要相互嵌套。
默認樣式：獨立的選項卡，通常用于較大的內容區域。
容器樣式：強調標簽頁面與背景融合，例如子頁面。
19.3 容器案例
容器使用除橫過來作排序，也可以列作排序，注意列排序不需要加分割線區分。
19.4 其他樣式
可改變樣式，會有更好的使用體驗，如圖為「頁面頁簽導航」和「快速時間導航」。
20. Steps 步驟
數據量較多時，使用分頁引到用戶完成任務的導航條。
20.1 一般規則
步驟數量：步驟數量不得少于3步。
顯示進度方向：并顯示進度方向，允許用戶返回上一步查看其數據提交。
告知當前位置：告訴用戶讓他指導當前所處位置，以及要遵循的內容。
步驟驗證：進入下一步需要確認上一步是否完成可行，否則無法繼續下一步驟，并需要通過「警告提示」告知用戶。
20.2 設計規范
沒有副標題：標題文字較少，且不帶副標題，和步驟數字放一行。
帶有副標題：如果步驟帶有副標題，比如詳細描述、時間等，則需要上下兩行。
20.3 步驟豎排
豎排步驟一般用于任務、工作流情況。為排版需要步驟數量超過6個，也可豎排。
21. Tooltip 文字提示
鼠標Hover時的提示信息。
21.1 一般規則
操作狀態：鼠標移入時出現，移出消失。
內容簡潔：目標元素或者對象進行注釋和描述，不可放入復雜的文本或操作。
顯示位置：觸發位置的上方、下方、左側和右側，具體根據場景顯示。需要注意左/右兩側不適合文字提示，以防止遮擋重要的閱讀信息，這是因為人的閱讀習慣是橫向的。
21.2 使用案例
圖標提示：用于描述圖標按鈕的作用或作用效果，文字要盡可能簡短。
文字解釋：幫助解釋文字或者某個圖標的意思，如圖所示。
22. Special 特殊組件
22.1 區域
用于快速進行地址的三級（省/市/區）選擇。
22.2 日歷
用于顯示日期，下圖為預約倉庫的剩余量。
參考文章
在整理九曳設計規范的過程中，參考和學習了大量平臺和一些優秀的文章，不一定都能夠全部列舉！
- 《Uniform Design System》（by:?Hudl）
- 《Carbon Design System》（by:?IBM）
- 《Clarity Design System》（by: MIT）
- 《Element》
- 《Ant Design》
- 《An Extensive Guide To Web Form Usability》（by: Justin），講述Web表單可用性的重要以及怎么使用。
- 《Design better data tables》（by:?Andrew Coyle），怎么設計讓數據表結構有著更好的用戶體驗。
- 《如何優化數據表格設計》（by: Meng）
- 《如何設計復雜信息架構產品》（by: 尤文文）
- 《web表格設計攻略》（by: 張鵬濤TAO）
- 《提高表格可讀性的一些技巧》（b: founderdesign）
#相關閱讀#
本文由 @徐銀高 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
干貨滿滿，必須點贊
9.4 4. “文件發生的任何錯誤應顯示為內聯錯誤 Alert”
請問什么是內聯錯誤？
怎么空空如野呢，這么有誠意的作品。給你點贊