1、對齊

? 文案類：如果頁面的字段或段落較短、較散時，需要確定一個統(tǒng)一的視覺起點。?

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

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

????? 文本對齊方式一般為左對齊；?

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

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

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

3、一致性

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

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

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

行寬

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

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

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

行高

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

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

? 行距（行高) = 字號 + 行間距?

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

列表頁

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

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

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

? 點擊【重置】后，立即查詢

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

? 查詢條件默認展示兩行，超過兩行查詢條件自動折疊，展示展開按鈕，支持展開和收起查詢條件。

? 下拉框支持搜索過濾功能，包括下拉單選和下拉復選框。

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

? 數(shù)據(jù)列無法一屏展示，展示水平滾動條時，操作列默認凍結(jié)展示。

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

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

? 滑動時，表頭固定在頂部

查詢條件

下拉選?

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

標題展示

1. 前端實現(xiàn)輸入框獲取焦點時，placeholder自動上移

日期組件

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

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

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

每行個數(shù)?

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

查詢按鈕?

1. 當前行放得下，放到最右邊?

2. 當前行放不下，放到下一排的最右邊?

布局?

1. tab放置位置?

??? a. 如果查詢條件不同，相當于獨立頁面，tab放到頂部?

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

滾動條?

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

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

3. todo：設(shè)置滾動條默認值

表格?

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

表單類

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

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

校驗?

1. 所有必填輸入框，如果只輸入空格，都算沒輸入，在提交時需要校驗。

頁面跳轉(zhuǎn)

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

分頁器

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

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

? 分頁/翻頁控件默認挨著列表table右下方展示。

按鈕

（1）主按鈕

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

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

? 在頁面當中，按鈕區(qū)域的主按鈕最好只有一個，否則會對頁面的主要功能造成干擾。

? 并不是每一個頁面都需要有主按鈕，不要因為源碼缺失主按鈕而強行加上。因為在實際使用中，時常遇到按鈕之間為平級的關(guān)系，強行添加，容易造成頁面層級混亂。

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

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

（2）次按鈕/標準按鈕?

次按鈕在頁面中出現(xiàn)最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時，那使用它，大概率沒有錯。因為它運用廣泛，出現(xiàn)頻率也最高，因此也被人們稱為標準按鈕。

（3）文字按鈕/鏈接?

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

文字按鈕重復的出現(xiàn)，以表格頁面當中的操作列表最為突出，因為表格當中常用的操作最好能夠直接展現(xiàn)出來，因此表格中基本都采取文字按鈕的形式。

（4）按鈕菜單?

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

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

（5） 危險按鈕?

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

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

如果此時主按鈕放在左邊，危險按鈕就放右邊，反之亦然。