国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

《如何從零構(gòu)建UI組件及設(shè)計(jì)規(guī)范》共分為5個(gè)系列，分別為：介紹篇、設(shè)計(jì)原則、全局樣式、基礎(chǔ)組件、通用模版。本篇介紹了九曳供應(yīng)鏈平臺經(jīng)常使用到的22個(gè)組件，總結(jié)了平臺對于這些組件的定義、組成、使用規(guī)則、使用場景及注意事項(xiàng)，以及產(chǎn)品在設(shè)計(jì)時(shí)所要遵循的規(guī)范。

Ps. 本文約11000個(gè)字，90張圖片，內(nèi)容較多，建議收藏后閱讀。

1. Button 按鈕
2. Link 鏈接
3. Radio 單選框
4. Checkbox 復(fù)選框
5. Input 輸入框
6. Select 選擇
7. Switch 開關(guān)
8. DateTime 日期時(shí)間
9. Upload 上傳
10. Transfer 穿梭框
11. Form 表單
12. Table 表格
13. Tag 標(biāo)簽
14. Pagination 分頁
15. Message 輕提示
16. Notification 警告通知
17. Modal 彈窗
18. Dropdown 下拉菜單
19. Tabs 標(biāo)簽頁
20. Steps 步驟
21. Tooltip 文字提示
22. Special 特殊組件

1. Button 按鈕

按鈕主要用于操作，表示交互時(shí)發(fā)生的動作，比如添加、保存、刪除和注冊等。

1.1 常用按鈕

常見的按鈕有很多種，九曳系統(tǒng)常見的按鈕有5類，如下：

1.2 一般規(guī)則

據(jù)研究，次要按鈕和主要按鈕的左右差異可以忽略不計(jì)，但是保持產(chǎn)品、系統(tǒng)的一致性更為重要。

按鈕位置：主按鈕在右側(cè)，所有的輔助按鈕顯示在左側(cè)。九曳規(guī)范的【次要/主要】按鈕順序是按照設(shè)計(jì)規(guī)范來，前后應(yīng)始終遵循。完成相同或相近的功能按鈕放置在一起，減少鼠標(biāo)移動的距離。

按鈕文案：文字簡短，6個(gè)字以內(nèi)，以動詞為主，表述清楚操作按鈕會發(fā)生什么，例如創(chuàng)建、保存、刪除等，不能出現(xiàn)反問、否定等詞匯。

錯誤使用：不要將按鈕用作導(dǎo)航元素。如果需要跳轉(zhuǎn)到新的頁面，可使用文字按鈕。

文字按鈕：當(dāng)按鈕標(biāo)簽過長（超過6個(gè)中文字符），導(dǎo)致視覺出現(xiàn)問題時(shí)，建議該用鏈接文字；按鈕需要嵌在文本中時(shí)，應(yīng)該使用鏈接文字；當(dāng)命令是次要的，應(yīng)該用鏈接文字；

圖標(biāo)+按鈕：有圖標(biāo)的按鈕會給人權(quán)重較高，需要引導(dǎo)用戶去點(diǎn)擊它可使用，如導(dǎo)入導(dǎo)出等。

三個(gè)按鈕：在極少數(shù)，需要三個(gè)按鈕的情況下。除最右邊的是主要按鈕，其他兩個(gè)都是次要按鈕。如果三個(gè)按鈕具有的權(quán)重都差不太多，那么三個(gè)都應(yīng)該是輔助按鈕。

1.3 刪除按鈕

刪除無法輕易撤銷，通常是永久性的。如果對象將不存在，需要警告用戶任何不利的后果，例如數(shù)據(jù)丟失。

刪除后：用戶刪除數(shù)據(jù)后，返回其列表頁面時(shí)，需要對列表的數(shù)據(jù)進(jìn)行動畫處理，并消息成功提示；如果刪除失敗，需要發(fā)出通知告知用戶刪除失敗。

彈窗刪除：高影響。數(shù)據(jù)很重要、新建非常耗時(shí)麻煩、刪除的內(nèi)容有大量數(shù)據(jù)、關(guān)聯(lián)其他的重要項(xiàng)目等。

氣泡窗刪除：低影響。新建很容易、操作需要連續(xù)刪除多個(gè)內(nèi)容等。

1.4 按鈕樣式

圖標(biāo)禁用樣式：默認(rèn)禁用狀態(tài)是通過降低透明度的來設(shè)置的。

組件：50%透明度；

文本：25%透明度；

圖標(biāo)：50%透明度。

1.5 更多按鈕

至少需要 3個(gè) 以上的按鈕，更多可以包括任意操作。

刪除位置：一般將破壞性的才做放到最后，比如刪除。

排序：按照重要的、使用頻率高低來順序，但也需要合乎邏輯。

文案：和正常按鈕一樣，使用動詞作為操作的詞匯，不要使用句式。

按鈕數(shù)量：至少3個(gè)以上操作才可使用「更多」。

1.6 使用注意事項(xiàng)

按鈕文案：文字要以動詞為主，表述清楚操作按鈕會發(fā)生什么，例如創(chuàng)建、保存、刪除等。具體詳見「標(biāo)準(zhǔn)詞匯庫」。

按鈕文案：文字要簡短，不要超過6個(gè)字，同時(shí)需要清楚說明操作按鈕時(shí)會發(fā)生什么。

不同尺寸按鈕：相鄰的放置不同尺寸的按鈕不可以放在一起。

列表頁按鈕應(yīng)用

突出的方法，不局限于強(qiáng)化重點(diǎn)項(xiàng)，也可以通過視覺單元的形式（通過改變間距親密性）。

在一些選項(xiàng)上，或者需要慎重決策的場景，設(shè)計(jì)應(yīng)該保持中立，不要去誘導(dǎo)客戶去點(diǎn)擊某個(gè)按鈕，所以如果需要突出一項(xiàng)或者更高頻的操作，可以通過間距做設(shè)計(jì)。

2.? Link 鏈接

鏈接是我們系統(tǒng)常見的交互式元素，它主要的目的是將用戶帶到其他地方。

2.1 鏈接類型

默認(rèn)鏈接：藍(lán)色。用于文本鏈接和主要操作。

不重要鏈接：黑色。次要、不重要的操作使用黑色。

2.2 一般規(guī)則

• 不要使用圖標(biāo)作為鏈接；
• 鏈接文字字符一般不受限制，但也不可過多；如果鏈接文字特別長，但便于用戶理解，也必須精簡，以防止文本換行；
• 鏈接文字應(yīng)當(dāng)與目的地的標(biāo)題一致；
• 避免使用術(shù)語“單擊此處”，鏈接文案需要結(jié)合目標(biāo)站點(diǎn)名稱，使用有意義的描述性標(biāo)簽。

2.3 錯誤案例

避免使用術(shù)語“單擊此處”，鏈接文案需要結(jié)合目標(biāo)站點(diǎn)名稱，使用有意義的描述性標(biāo)簽。

3. Radio 單選框

當(dāng)兩個(gè)或兩個(gè)以上選項(xiàng)互斥時(shí)，則使用單選，意味著用戶只能選擇一個(gè)選項(xiàng)。

3.1 一般規(guī)則

單選框數(shù)量：單選框數(shù)量至少為2個(gè)，一般少于6個(gè)。

簡潔明了：標(biāo)簽文字要可能簡潔，且標(biāo)簽文字必須顯示在按鈕的右側(cè)。

應(yīng)用規(guī)則：單選框?yàn)楸靥铐?xiàng)。正常情況下，初始狀態(tài)默認(rèn)選擇第一項(xiàng)。

3.2 舉例說明

默認(rèn)選擇：一組單選按鈕應(yīng)該默認(rèn)選擇一個(gè)選項(xiàng)。如果沒有默認(rèn)選擇，切勿顯示它們。

4. Checkbox 復(fù)選框

用戶可以在選項(xiàng)列表中選擇一個(gè)或者多個(gè)選項(xiàng)。

4.1 一般規(guī)則

復(fù)選框數(shù)量：避免過多的復(fù)選框給使用者造成認(rèn)知負(fù)擔(dān)，數(shù)量不宜過多，一般適用于不超過7個(gè)選項(xiàng)；如出現(xiàn)過多的情況，可采用其他方式展示，如穿梭框、下拉標(biāo)簽選擇等。

應(yīng)用規(guī)則：根據(jù)使用場景是否為必填；初始狀態(tài)不可以有默認(rèn)勾選項(xiàng)。對于開關(guān)選項(xiàng)，使用switch開關(guān)，不可使用復(fù)選框。

默認(rèn)選擇：默認(rèn)情況下，不選中復(fù)選框。為了便于閱讀，復(fù)選框和標(biāo)簽保持為一行。

單個(gè)復(fù)選框：單個(gè)復(fù)選框表示用戶在兩種狀態(tài)之間做切換操作。

4.2 事項(xiàng)

全選復(fù)選框：當(dāng)頁面存在多個(gè)同類內(nèi)容的復(fù)選框時(shí)，需要提供全選的功能，要求：

• 勾選全選，則選中當(dāng)前頁面所有記錄；
• 去掉當(dāng)前頁面某個(gè)記錄的勾選，則全選也去掉勾選；
• 刷新頁面后，自動去掉已勾選的記錄及全選的勾選。

標(biāo)簽位置：復(fù)選框和標(biāo)簽保持一行，并始終顯示在左側(cè)。

5. Input 輸入框

用于輸入內(nèi)容和數(shù)據(jù)，可以控制文本輸入框的長短，來制定希望用戶輸入內(nèi)容的多少。

5.1 元素拆解

1. 標(biāo)題：應(yīng)始終可見；
2. 占位符：可作為提示，也可以提供默認(rèn)值；
3. 文本框：長度可根據(jù)場景變化；
4. 反饋提示：作錯誤提醒；
5. 幫助提示：內(nèi)容多可拆分，也可以融入操作圖標(biāo)中；
6. 圖標(biāo)：分為展示型圖標(biāo)，操作型圖標(biāo)，反饋型圖標(biāo)；
7. 反饋型圖標(biāo)：也有可能是錯誤，配合下方的錯誤提醒。

5.2 常用輸入框形式

輸入框形式有4中，分別是頂對齊、右對齊、左對齊和隱藏標(biāo)簽，這里只推薦前兩種，使用方法如下：

1. 簡易表單：頂部對齊，字段少于4個(gè)，或者字段名稱字?jǐn)?shù)多；
2. 較復(fù)雜表單：右邊對齊，字段數(shù)量較多，4個(gè)以上，默認(rèn)推薦使用該對齊方式。標(biāo)簽名稱盡可能不要超過6個(gè)字，超過的用“……”顯示。

5.3 一些注意事項(xiàng)

必填項(xiàng)：

• 界面的必填項(xiàng)必須以紅色 * 標(biāo)識出來；
• 當(dāng)必填項(xiàng)沒有填寫時(shí)，在光標(biāo)移走時(shí)，文本框下方以“請輸入…”紅色文字來標(biāo)識；
• 當(dāng)界面排列較緊時(shí)，如果必填項(xiàng)沒有填，可通過消息提示來提醒。

輸入框操作：

• 數(shù)字輸入框 在輸入非法值時(shí)直接給予提示；
• 當(dāng)輸入的內(nèi)容達(dá)到了字段的長度限制時(shí)，不顯示新輸入的字符，并提示不允許再輸入。

驗(yàn)證和錯誤：

驗(yàn)證可以簡化流程，并讓用戶在填寫表單時(shí)保持簡潔。有關(guān)完整指南，參閱表單使用頁面。

字符數(shù)

文本字段和文本區(qū)域需要有字符數(shù)限制，輸入框長度一般為最大最大輸入內(nèi)容。如果是段落字符計(jì)數(shù)器超過字符限制，則提示用戶字符超過限定數(shù)量。

5.4 輸入框規(guī)范

輸入框樣式

輸入框高度：40px、32px、24px 三種高度，默認(rèn)使用32px。

輸入框長度：輸入框的長度尺寸需嚴(yán)格按照規(guī)定的尺寸來，80px、120px、160px、240px、320px。

搜索輸入框

數(shù)字輸入框

6. Select 選擇

用于輸入的一種組件，比如選擇一個(gè)選項(xiàng)用來提交數(shù)據(jù)等。

6.1 一般規(guī)則

默認(rèn)顯示：擇下拉框不存在默認(rèn)值時(shí)，則默認(rèn)為“請選擇”，當(dāng)有默認(rèn)值，則顯示默認(rèn)值，比如：所有、全部等。

驗(yàn)證方式：驗(yàn)證有助于簡化流程，用戶在填寫表單時(shí)出現(xiàn)錯誤，應(yīng)實(shí)時(shí)提醒。

6.2 高級選擇

可多選：適用性較廣的基礎(chǔ)多選，用 Tag 展示已選項(xiàng)。

單選可搜索：利用搜索功能快速找到選項(xiàng)。

6.3 選擇和下拉菜單

選擇和下拉組件看起來相似，但它們具有不同的功能。兩者基礎(chǔ)代碼也不同。一個(gè)是可以根據(jù)需要設(shè)置下拉菜單組件的樣式，而選擇組件的外觀可以使用瀏覽器所自帶的。

選擇：用戶從選項(xiàng)表選擇一個(gè)（或多個(gè)）并用于數(shù)據(jù)的提交組件。

下拉菜單：對面頁面的內(nèi)容進(jìn)行過濾、排序或操作等。

7. Switch 開關(guān)

兩種狀態(tài)之間的切換，使用時(shí)需告知用戶當(dāng)前開關(guān)的狀態(tài)。

7.1 一般規(guī)則

內(nèi)容：操作切換，闡明該操作執(zhí)行后的結(jié)果。

8. DateTime 日期時(shí)間

日期和時(shí)間組件是允許用戶選擇一個(gè)或某個(gè)日期范圍的組件。

8.1 日期時(shí)間形式

單日期選擇： ?當(dāng)用戶需要選擇一個(gè)日期時(shí)，附帶日歷小部件。

帶有時(shí)間日期：具體到當(dāng)天的時(shí)間，日期并提供快速選擇到「今天」。

8.2 錯誤案例

使用分隔符：使用“-”作為分隔符；日期為個(gè)位數(shù)時(shí)，需要用“0”補(bǔ)齊；表達(dá)時(shí)間范圍時(shí)，用“至”作為連接。

使用分隔符：如果日期是用中文，那么表達(dá)時(shí)間范圍時(shí)，用“-”作為連接。

日期格式：日期、星期與時(shí)刻一起使用時(shí)，格式為「日期 時(shí)刻」、「日期 星期 時(shí)刻」。

9. Upload 上傳

點(diǎn)擊或者拖拽上傳文件。

9.1 一般規(guī)則

圖片要求：告知用戶上傳圖片的格式質(zhì)量及要求，以及上傳圖片的上限數(shù)量。

狀態(tài)可控：告知用戶上傳的狀態(tài)。例如：上傳中、上傳成功、上傳失敗等。

可刪除：已上傳的圖片需要提供刪除功能。開發(fā)需需使用JavaScript在每個(gè)上傳的文件加入一個(gè)“刪除”按鈕。需注意，瀏覽器本身不支持這種編輯。

顯示提示：文件名隱藏的內(nèi)容，鼠標(biāo)懸停時(shí)需要包含瀏覽器提供的全部提示。

9.2 拖拽上傳

把文件拖入到指定區(qū)域上傳，且支持點(diǎn)擊上傳。文件上傳需要明確文件的大小和文件格式，例如：文件大小不超過5M，文件僅支持PDF.ZIP.EXL等。

9.3 縮略圖上傳

一般用于圖片文件上傳，用戶可以點(diǎn)擊縮略圖放大或者刪除。當(dāng)上傳圖片數(shù)量到達(dá)限制后，上傳按鈕消失。

使用場景：一般用于上傳面單、頭像等。

9.4 使用注意

1. 用戶可以一次選擇一個(gè)或多個(gè)文件上傳。默認(rèn)情況下，可以接受任何文件類型，如果有需要添加參數(shù)以驗(yàn)證特定的文件類型。
2. 單擊添加文件的操作后將觸發(fā)瀏覽器的上傳窗口。
3. 用戶選擇要上傳的文件后，瀏覽器特定的上傳文件窗口將關(guān)閉，并且這些文件將顯示在“添加文件”指定的區(qū)域。
4. 文件發(fā)生的任何錯誤應(yīng)顯示為內(nèi)聯(lián)錯誤 Alert。

10. Transfer 穿梭框

雙欄穿梭選擇框，常用于將多個(gè)項(xiàng)目從一邊移動到另一邊。

10.1 舉例說明

組織架構(gòu)：選擇組織架構(gòu)人員。

11. Form 表單

用于數(shù)據(jù)采集。所有頁面需要填寫信息的相關(guān)頁面，都叫做表單。表單域包含文本框、多行文本框、復(fù)選框、單選框、下拉選擇框和上傳組件等；表單按鈕包含提交、取消等。

11.1 元素解析

1. 標(biāo)題：告知用戶輸入該字段的含義。
2. 占位符文本：提供輸入字段的內(nèi)容。
3. 輸入字段：用戶輸入信息，可通過不同的組件（文本字段、單選框和復(fù)選框等）輸入字段信息。
4. 幫助文本：提供關(guān)于填寫字段的幫助。
5. 驗(yàn)證反饋：確保填寫的信息符合要求。
6. 操作：允許用戶提交表單。

11.2 表單對齊方式

默認(rèn)推薦類型右對齊，普遍適用于絕大多數(shù)場景。如果一個(gè)頁面需要展示兩欄及以上，采用左對齊?？紤]海外場景的話，使用頂對齊。

11.3 表單布局

• 簡易表單（F布局）：一般情況下，16個(gè)字段以下，好處能夠做到提交前審查完所有的字段，避免非必填字段的遺漏，這也是默認(rèn)布局。
• 較復(fù)雜表單（Z布局）：16個(gè)字段以上，方便快速提交，避免滾動帶來的效率底下。錯誤通知顯示在表單的頂部。

11.4 表單組件使用

• 當(dāng)存在兩個(gè)或兩個(gè)以上的選項(xiàng)時(shí)，并且它們之間存在互相排斥的關(guān)系，使用單選按鈕。
• 可以選擇任意數(shù)量的選項(xiàng)，每個(gè)復(fù)選框和和其他的復(fù)選框不存在任何聯(lián)系。獨(dú)立存在的復(fù)選框可用于打開或關(guān)閉某個(gè)選項(xiàng)，例如勾選「閱讀條例」。
• 下拉選擇一般用于有大量需要選擇的字段。

11.5 表單使用規(guī)范

表單結(jié)構(gòu)：表單應(yīng)該幫助用戶盡快的完成其目標(biāo)，所以不要使用豎列排版布局。

默認(rèn)焦點(diǎn)：打開一個(gè)新表單，光標(biāo)默認(rèn)停在第一個(gè)待輸入的文本框中。

表單按鈕：不要將按鈕放在表單的正中間，當(dāng)前采用的是簡易表單按鈕放在左邊，復(fù)雜表單按鈕放在右下角并浮層。

表單驗(yàn)證：用戶單擊文本字段以外的位置時(shí)，失去焦點(diǎn)顯示驗(yàn)證，并將錯誤提醒顯示在組件的下方。

不要長篇大論：表單項(xiàng)的標(biāo)題、提示不要使用不易理解的詞匯或大篇文字，造成理解成本過高。

12. Table 表格

表格主要用于展示大量結(jié)構(gòu)化數(shù)據(jù)。

12.1 一般規(guī)則

數(shù)字對齊：數(shù)字類一般是左對齊，價(jià)格是右對齊，這樣可以方便金額做上下對比，可以很快看出最多和最小值；如果價(jià)格一般較為固定在幾位數(shù)，也可以考慮左對齊。

避免橫向滾動：精簡字段，盡可能避免橫向滾動；如果字段實(shí)在過多，滾動時(shí)表頭進(jìn)行浮起，方便滾動時(shí)看到找到字段的主體信息；如果帶有操作類，表尾也需要進(jìn)行浮起。

復(fù)選框全選：當(dāng)去掉某個(gè)記錄的勾選，則全選也去掉；刷新頁面后，自動去掉已勾選的記錄及全選的勾選。

不要斑馬線：不需要斑馬條紋，用線條進(jìn)行分割。

表頭屬性：表格的表頭有固定的顏色，要求與表中的內(nèi)容對比明顯；文字加粗，以區(qū)別于表格的內(nèi)容。

表格內(nèi)容：表格中存在的鏈接文字需要采用統(tǒng)一的藍(lán)色字體顯示。

文字過多：當(dāng)某個(gè)字段文字超過顯示寬度后，以……顯示，光標(biāo)停留后，詳細(xì)內(nèi)容在浮動層顯示。

內(nèi)容為空：字段內(nèi)容為空的時(shí)候，不要空著，用“-”顯示。

12.2 字段過多

字段合并：頭部重新加一個(gè)名稱，前面列可以多放字段，缺點(diǎn)是占用行高。

滾動條左右滑動：需注意第1列和最后操作列固定浮層，盡可能避免左右滑動。

12.3 附加功能 – 分頁

默認(rèn)樣式：默認(rèn)展示樣式，有當(dāng)前頁+總頁+總條目數(shù)量+分頁按鈕組成。

延遲加載：不注重內(nèi)容的數(shù)量，需要用起來更方便一些，使用場景：新聞公告通知等。

12.4 附加功能 – 排序

排序數(shù)據(jù)表有三種狀態(tài)：沒有排序（arrows）,向上排序（arrow-up）,向下排序（arrow-dowm）。

圖標(biāo)指示當(dāng)前的排序狀態(tài)，并且在激活排序后顯示。

12.5 附加功能 – 工具欄

全局操作：表格工具欄保留用于全局表格操作，例如表格設(shè)置，隱藏過濾器，設(shè)置表格數(shù)據(jù)。

圖標(biāo)大?。?/strong>該區(qū)域可添加關(guān)于表格功能的圖標(biāo)，圖標(biāo)大小為16×16。