1、對(duì)齊

? 文案類：如果頁(yè)面的字段或段落較短、較散時(shí)，需要確定一個(gè)統(tǒng)一的視覺(jué)起點(diǎn)。?

? 表單類：冒號(hào)對(duì)齊（右對(duì)齊）能讓內(nèi)容鎖定在一定范圍內(nèi)，讓用戶眼球順著冒號(hào)的視覺(jué)流，就能找到所有填寫(xiě)項(xiàng)，從而提高填寫(xiě)效率。?

? 表格類：表體數(shù)據(jù)默認(rèn)的對(duì)齊原則：?

????? 文本對(duì)齊方式一般為左對(duì)齊；?

????? 數(shù)值、金額靠右，表頭文字右對(duì)齊處理；?

????? 合并表頭居中顯示文字。?

????? 操作列：居左。

3、一致性

? 顏色：網(wǎng)頁(yè)上顏色不能夠?yàn)E用，會(huì)導(dǎo)致視覺(jué)疲勞或無(wú)法突出重要內(nèi)容，如主題色可以用于文字鏈接、按鈕、導(dǎo)航等多處顯示。?

? 空間：間距上需要有一致性，規(guī)律的排版可以方便設(shè)計(jì)開(kāi)發(fā)工作和提升用戶的頁(yè)面閱讀體驗(yàn)。?

? 文案：文案的使用和排版格式具有統(tǒng)一性可以明確內(nèi)容層級(jí)關(guān)系，提升閱讀效率。

行寬

? 行寬 / 行高：是指一行字的高度。計(jì)算行寬的簡(jiǎn)單方法，使用 Robert Bringhurst 的方法：行寬 = 字號(hào) x 30。如果定義網(wǎng)站的基礎(chǔ)字號(hào)為 14px，那么最適宜基礎(chǔ)行寬為：14（字號(hào)） x 30 = 360px （行寬）。較適宜的寬度為 40-70 個(gè)字符。?

? 從生理結(jié)構(gòu)分析，人在閱讀文字的時(shí)候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時(shí)，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運(yùn)動(dòng)。行寬越大，眼睛移動(dòng)的距離太寬太多。寬度較大，眼動(dòng)位移較大，讀者閱讀換行時(shí)容易串行。?

? 行寬越短，眼睛閱讀折行的次數(shù)太多。行數(shù)較多，眼動(dòng)跳躍次數(shù)多，讀者閱讀行時(shí)會(huì)感覺(jué)到文字不連續(xù)。

行高

? 行距 / 行高：Photoshop 里為從一行文字的底部到另一行文字底部的間距。但在前端代碼實(shí)現(xiàn)上， 行距會(huì)自動(dòng)平均分配到文字上下端，因此這里說(shuō)的行距 / 行高為每行字體占用的高度空間。?

? 行間距：從一行文字的底部到另一行文字頂部的間距。?

? 行距（行高) = 字號(hào) + 行間距?

???? 例如：字號(hào) 24px，行距 / 行高為 32px，根據(jù) web 頁(yè)面平均分配原則，行距就是從文字的頂端上移 4px 到文字底部下移 4px 的距離。

列表頁(yè)

? 按鈕：顯示在列表表頭上方，獨(dú)立一行顯示，按鈕順序根據(jù)優(yōu)先級(jí)排序，最多顯示3個(gè)按鈕，超過(guò)3 個(gè)用【更多】。如果按鈕無(wú)主次，可全部使用次級(jí)按鈕。表頭字段必須顯示完整。

? 查詢條件統(tǒng)一都需要有【重置】按鈕。

??列表頁(yè)【重置】按鈕定義：重置的是查詢條件，清空/恢復(fù)默認(rèn)值可根據(jù)實(shí)際項(xiàng)目需求自定，重置對(duì)表格數(shù)據(jù)不起作用，重置完成后再點(diǎn)擊查詢才會(huì)更改表格顯示內(nèi)容。??

? 點(diǎn)擊【重置】后，立即查詢

? 查詢和重置按鈕，默認(rèn)居右展示（只有1個(gè)查詢條件的除外，緊挨查詢條件展示），如果查詢條件填滿某一行，放不下就換一行靠右展示。?

? 查詢條件默認(rèn)展示兩行，超過(guò)兩行查詢條件自動(dòng)折疊，展示展開(kāi)按鈕，支持展開(kāi)和收起查詢條件。

? 下拉框支持搜索過(guò)濾功能，包括下拉單選和下拉復(fù)選框。

? 列表頁(yè)數(shù)據(jù)行操作列按鈕，統(tǒng)一超鏈接文字展示，最多展示三個(gè)，超過(guò)三個(gè)自動(dòng)折疊，顯示更多， 常用操作居左，需謹(jǐn)慎操作的按鈕突出顯示，并且需有二次確認(rèn)操作。?

? 數(shù)據(jù)列無(wú)法一屏展示，展示水平滾動(dòng)條時(shí)，操作列默認(rèn)凍結(jié)展示。

? 列表頁(yè)數(shù)據(jù)表頭右上?位置，展示列表操作icon，比如頁(yè)面刷新和列字段管理，可以對(duì)列表數(shù)據(jù)進(jìn)行管理；

? 表格內(nèi)容緊湊展示，適配至少兩種屏幕分辨率?

? 滑動(dòng)時(shí)，表頭固定在頂部

查詢條件

下拉選?

1. 不要「全部」選項(xiàng)，想要實(shí)現(xiàn)“全部”，不選即可。?

標(biāo)題展示

1. 前端實(shí)現(xiàn)輸入框獲取焦點(diǎn)時(shí)，placeholder自動(dòng)上移

日期組件

1. 日期選擇條件，只支持日期范圍或單個(gè)日期，原則上不允許同一個(gè)頁(yè)面上交叉使用，若要使用日期范圍選擇一天，那開(kāi)始日期和結(jié)束日期相同即可

2. 日期范圍選擇器，如果不需要選擇時(shí)間，則默認(rèn)開(kāi)始日期的默認(rèn)時(shí)間是00:00:00，結(jié)束日期的默認(rèn)時(shí)間是23:59:59。該規(guī)范涉及到接口規(guī)范，協(xié)作時(shí)跟服務(wù)端溝通好

3. 日期組件高度固定，可能引起時(shí)間展示不全，暫不管，看用戶反饋

每行個(gè)數(shù)?

1. 固定每個(gè)元素的寬度，3個(gè)（帶日期范圍）或4個(gè)（不帶日期范圍）

查詢按鈕?

1. 當(dāng)前行放得下，放到最右邊?

2. 當(dāng)前行放不下，放到下一排的最右邊?

布局?

1. tab放置位置?

??? a. 如果查詢條件不同，相當(dāng)于獨(dú)立頁(yè)面，tab放到頂部?

????b. 如果查詢條件相同，則tab放在查詢區(qū)域和（操作按鈕+table）中間，居左展示

滾動(dòng)條?

1. 垂直方向或水平方向，只出現(xiàn)一個(gè)滾動(dòng)條，且樣式保持一致?

2. 垂直滾動(dòng)時(shí)，整個(gè)內(nèi)容區(qū)域（包括查詢、表格）滾動(dòng)，表格表頭固定到頂部時(shí)吸住?

3. todo：設(shè)置滾動(dòng)條默認(rèn)值

表格?

1. 表頭、內(nèi)容緊湊

表單類

? 必填項(xiàng)顯示的星號(hào)，統(tǒng)一放在title的左邊。

? 數(shù)據(jù)存儲(chǔ)、流程切換等情況，正向操作放在右邊，取消操作放左邊。如在表單填寫(xiě)頁(yè)、彈窗中。

校驗(yàn)?

1. 所有必填輸入框，如果只輸入空格，都算沒(méi)輸入，在提交時(shí)需要校驗(yàn)。

頁(yè)面跳轉(zhuǎn)

? 點(diǎn)擊新增操作打開(kāi)表單填寫(xiě)類頁(yè)面、查看數(shù)據(jù)表格的某一條詳情信息時(shí)，如果需要展示內(nèi)容很少，在一個(gè)窗口內(nèi)能顯示完全，可采用模態(tài)窗口展示而非獨(dú)立頁(yè)面。?

分頁(yè)器

? 一頁(yè)就能展示所有數(shù)據(jù)的情況下，使用一屏展示方案；

? 如果一頁(yè)不能展示所有數(shù)據(jù)，使用tab展示方案；?

? 分頁(yè)/翻頁(yè)控件默認(rèn)挨著列表table右下方展示。

按鈕

（1）主按鈕

主按鈕為頁(yè)面中按鈕區(qū)最為核心的操作，在日常場(chǎng)景中，主要按鈕一般都為新建、編輯、保存這一類正向的操作，強(qiáng)調(diào)頁(yè)面中最為核心的功能，能夠讓用戶一看到主按鈕就明白大致在頁(yè)面中需要如何操作。

但在主按鈕的使用中，要遵循以下兩個(gè)原則：?

? 在頁(yè)面當(dāng)中，按鈕區(qū)域的主按鈕最好只有一個(gè)，否則會(huì)對(duì)頁(yè)面的主要功能造成干擾。

? 并不是每一個(gè)頁(yè)面都需要有主按鈕，不要因?yàn)樵创a缺失主按鈕而強(qiáng)行加上。因?yàn)樵趯?shí)際使用中，時(shí)常遇到按鈕之間為平級(jí)的關(guān)系，強(qiáng)行添加，容易造成頁(yè)面層級(jí)混亂。

在主按鈕中，按鈕狀態(tài)的設(shè)計(jì)也會(huì)跟隨物理世界進(jìn)行相應(yīng)的映射，因此在設(shè)計(jì)時(shí)需考慮現(xiàn)實(shí)生活中的狀態(tài)。?

比如用戶的懸停狀態(tài)時(shí)，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶可以點(diǎn)擊，而用戶在按下時(shí)，用加黑來(lái)表示用戶按下的狀態(tài)，與現(xiàn)實(shí)生活中按鈕的狀態(tài)類似，因此按鈕狀態(tài)應(yīng)該映射物理世界。

（2）次按鈕/標(biāo)準(zhǔn)按鈕?

次按鈕在頁(yè)面中出現(xiàn)最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時(shí)，那使用它，大概率沒(méi)有錯(cuò)。因?yàn)樗\(yùn)用廣泛，出現(xiàn)頻率也最高，因此也被人們稱為標(biāo)準(zhǔn)按鈕。

（3）文字按鈕/鏈接?

文字按鈕為頁(yè)面中視覺(jué)層級(jí)較低的按鈕形式，因而可以在頁(yè)面中大面積的重復(fù)使用，文字按鈕與鏈接基本一致，且沒(méi)有太多區(qū)分，所以在設(shè)計(jì)上，文字按鈕與鏈接基本相同。?

文字按鈕重復(fù)的出現(xiàn)，以表格頁(yè)面當(dāng)中的操作列表最為突出，因?yàn)楸砀癞?dāng)中常用的操作最好能夠直接展現(xiàn)出來(lái)，因此表格中基本都采取文字按鈕的形式。

（4）按鈕菜單?

按鈕菜單為設(shè)計(jì)中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進(jìn)行整合，組成的按鈕菜單。這樣既能夠減少頁(yè)面元素的冗雜，同時(shí)也能夠滿足業(yè)務(wù)對(duì)于功能的需求。

舉個(gè)例子，在表格設(shè)計(jì)當(dāng)中，B端設(shè)計(jì)師最常用到的按鈕菜單就是新建，這類新建按鈕其實(shí)是必不可少的，同時(shí)業(yè)務(wù)需要，還需要多個(gè)業(yè)務(wù)按鈕進(jìn)行展開(kāi)，按鈕菜單的出現(xiàn)，幫助用戶進(jìn)行按鈕的整理， 同時(shí)也滿足業(yè)務(wù)需求。

（5） 危險(xiǎn)按鈕?

危險(xiǎn)按鈕在刪除操作中最為常見(jiàn)，通常是為了警告用戶，這個(gè)數(shù)據(jù)刪除不可恢復(fù)，讓用戶謹(jǐn)慎考慮。在常見(jiàn)的刪除操作中，都需要用戶進(jìn)行再次確認(rèn)，避免失誤操作。

可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點(diǎn)擊的按鈕，應(yīng)該盡量遠(yuǎn)離常用按鈕。?

如果此時(shí)主按鈕放在左邊，危險(xiǎn)按鈕就放右邊，反之亦然。