一、 基礎(chǔ)框架Basic

1. 頁面布局Layout

頁面布局元素包括頂欄、側(cè)邊欄、主要區(qū)域和底欄。

幾種常見的頁面布局方式：

國字形布局

國字形布局，是一些大型網(wǎng)站常用的布局類型。頂欄是網(wǎng)站的logo、標題，頁面中間放置網(wǎng)站的主要內(nèi)容，左右分列一些消息內(nèi)容，如導航欄、友情鏈接等，最下方是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。

優(yōu)點：頁面容納內(nèi)容很多，信息量大。

缺點：頁面擁擠，不夠靈活。

T型布局

T型布局結(jié)構(gòu)因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網(wǎng)站的標志或Banner廣告，下方左側(cè)是導航欄菜單，下方右側(cè)則用于放置網(wǎng)頁正文等主要內(nèi)容。

優(yōu)點：頁面結(jié)構(gòu)清晰，主次分明

缺點：規(guī)矩呆板，如果不注意細節(jié)色彩，很容易讓人看之無味。

標題正文型布局

這種布局的最上方是標題或廣告等內(nèi)容，下面是正文，一般用于顯示文章頁面、新聞頁面和一些注冊頁面等。

特點：簡潔明快，干擾信息少，較為正規(guī)。

左右型布局

左右型布局是一些大型論壇和企業(yè)經(jīng)常使用的一種布局結(jié)構(gòu)。左側(cè)一般主要為導航欄，右側(cè)則放置網(wǎng)站的主要內(nèi)容。

優(yōu)點：視覺沖擊力強。

缺點：很難將兩部分有機地結(jié)合起來。

幾種常見的頁面布局方式

2.色彩Color

主色：主題顏色、用于頂欄等的背景色。

輔助色：除了主色外的場景色，不同使用場景顏色不同。如操作成功時的提示文字顏色等。

中性色：用于文本、邊框等的顏色。

中性色使用規(guī)范

3.字體Typography

不同層級的文字字號、行間距可能都會不同，有了規(guī)范可保持整體的一致性，降低溝通成本和了解成本。

字體使用規(guī)范

4.邊框Border

可設(shè)置各級邊框的樣式。

邊框使用規(guī)范

5.按鈕Button

可規(guī)定按鈕樣式、尺寸、色號等。

按鈕使用規(guī)范

6.圖標Icon

相同圖標需統(tǒng)一。

7.其他規(guī)范

1.篩選條件一行顯示幾列；

2.上下左右內(nèi)邊距值；

3.原型頁面尺寸等。

二、 引導類Navigation

1. 導航菜單NavMenu

樣式1：頂欄

樣式2：固定側(cè)欄

樣式3：可折疊側(cè)欄:

2. 面包屑Breadcrumb

樣式1：首頁/列表頁/新增

樣式2：首頁>列表頁>新增

面包屑樣式

3. 標簽頁Tabs

1.是否為選項卡樣式

2.是否有動態(tài)增減

3.標簽頁的位置（上下左右）

4. 步驟條Steps

1.橫式還是豎式

2.是否顯示狀態(tài)，如初審中、復審中等

3.是否有描述，如初審中（初審由XXX角色的用戶完成…）

4.是否帶圖標

步驟條樣式?

5. 下拉菜單Dropdown

1.觸發(fā)對象：按鈕或文字

2.觸發(fā)方式：hover激活或click激活

下拉菜單樣式?

三、 表單元素Form

1. 單選框Radio

1.樣式1:

單選樣式1?

2.樣式2：

單選樣式2?

2. 多選框Checkbox

1.樣式1：

多選樣式1?

2.樣式2：

多選樣式2

3. 輸入框Input

1.單一型輸入還是復合式輸入

2.是否帶單位

3.是否帶聯(lián)想輸入

4.是否有提示文字

輸入框樣式?

4. 計數(shù)器InputNumber

1.設(shè)置精度

2.設(shè)置增減幅度

計數(shù)器樣式

5. 選擇器Select

1.是否有搜索

2.是否支持多選

3.備選項是否分組

4.是否顯示禁用選項

選擇器分組樣式

6. 級聯(lián)選擇器Cascader

1.是否有搜索

2.是否支持多選

3.是否僅顯示最后一級

4.是否每一級都可單獨選擇

7. 時間選擇器TimePicker

1.固定時間點或范圍

2.精確時間點或范圍

8. 日期選擇器DatePicker

日期選擇器樣式

9. 開關(guān)Switch

開關(guān)樣式

10. 滑塊Slider

滑塊樣式

11. 上傳Upload

1.上傳文件展示類型：平鋪展示或列表展示

2.上傳類型：點擊上傳、拖拽上傳

上傳樣式

12. 評分Rate

1.是否允許出現(xiàn)半顆星

2.是否出現(xiàn)文字

3.是否將不同分值設(shè)置為不同顏色

評分樣式

四、 數(shù)據(jù)展現(xiàn)

1. 表格Table

1.有無斑馬線、有無邊框、有無特殊顏色行/值

2.表頭是否固定、列是否固定、表格是否固定高度、是否有多級表頭

3.是否有選中某行的效果、有無多選全選、是否可排序、是否可篩選

4.懸浮數(shù)據(jù)時是否可顯示額外內(nèi)容、是否可展開行、是否需要合計

表格樣式

2. 樹形控件Tree

1.控件中是否可以選擇

樹樣式

3. 分頁Pagination

1.是否顯示省略號

2.是否顯示總條數(shù)

3.是否可調(diào)整每頁顯示條數(shù)

4.是否可直接跳轉(zhuǎn)至某頁

分頁樣式

4. 標簽Tag

是否可移除，是否可新增。

可移除標簽樣式

5. 進度條Progress

1.線型/環(huán)形進度條

2.百分數(shù)內(nèi)顯/外顯/不顯

進度條樣

6. 標記Badge

標記樣式：數(shù)字/其他文本/小紅點

五、 通知Notice

1. 警告Alert

非浮層元素，不會自動關(guān)閉的提示。

1.是否帶圖標

2.是否帶標題文案

3.是否可關(guān)閉

警告樣式

2. 加載Loading

1.加載圖標樣式

2.是否帶文字

加載樣式

3. 消息提示Message

主要用于主動操作后的反饋提示。

4. 彈框MessageBox

復雜、慎重的提示用彈框表現(xiàn)，如刪除、提交等。

5. 通知Notification

懸浮出現(xiàn)在頁面角落，顯示全局的通知提醒消息。彈出位置；是否帶圖標；是否可自動關(guān)閉。

通知樣式

大部分樣式參考各網(wǎng)站前端樣式庫，部分圖片來源于網(wǎng)絡，侵刪。