WEB端設計規范
一、網頁尺寸
一般網站寬為996px；國內網站大部分還是以1000個像素為界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會顯得擁擠。國內尺寸設置比較保守，這樣可以保證大部分用戶舒適的瀏覽網頁。
二、主流瀏覽器
chrome
IE
firefox
safari
opera
知道了瀏覽器的設計特點才能更好的設計頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同，那么頁面在每個瀏覽器上面的展現就會有所不同。
三、點擊操作
主要通過鼠標點擊、滑動、滾動、拖拽。
四、html5頁面（和web頁面相似的一個頁面。手機上的網頁稱作為H5。）
概念：采用Html5語言寫出的App，不需要下載安裝。生存在瀏覽器中的應用，基本上可以說是觸屏版的網頁應用。
屏幕適配：由於受限於H5頁面在移動設備上的屏幕是各種各樣的。對設計影響比較大的主要是屏幕分辨率、尺寸、屏幕方向這些因素。而H5頁面會有非常多的一個屏幕尺寸，那么在不同的屏幕下的界面適配就成了一個很大的問題。解決的辦法就是通過響應式網站的設計方法來提升在不同分辨率下的兼容性。
響應式設計概念：指的是不同設備、屏幕、分辨率、操作方式（鼠標、鍵盤、觸摸），保證信息在不同環境下表現一致，保證可交互可操作。做響應式設計時需要遵循一個原則。
由於頁面的寬度發生了變化，進而信息展現也改變了就是響應式設計。直到最后在手機屏幕上的顯示圖片信息變成了一列。
1、臨界點：當頁面寬度發生變化的尺寸范圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應清晰的一個臨界點，制定了臨界點之后就知道，當屏幕的寬度范圍位於哪一個點的時候，我們的頁面信息該如何展示。
2、刪格：將頁面分成幾欄、幾塊。
以上是以12刪格為基礎的案例。它的設計原則就是將頁面分成12個等分的欄，然后把頁面的內容設計在12欄內。比如左邊的一些商品展示它用到了一個刪格的單位；其中的一個最大面積的商品展示它用到了比較多的刪格；最右側的操作信息用到了四個刪格的比例。
3、使用Native App的UI控件：在設計H5頁面的同時，能夠盡量讓樣式與Native保持一致；文字字號顏色均可與APP設計一致；減少不必要的手勢操作；避免與瀏覽器的交互沖突，如左右滑動。
 |
 |
 |
一般網站寬為996px；國內網站大部分還是以1000個像素為界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會顯得擁擠。國內尺寸設置比較保守，這樣可以保證大部分用戶舒適的瀏覽網頁。
二、主流瀏覽器
chrome
IE
firefox
safari
opera
知道了瀏覽器的設計特點才能更好的設計頁面，比如瀏覽器的頭部的操作高度和信息的展示都會有所不同，那么頁面在每個瀏覽器上面的展現就會有所不同。
三、點擊操作
主要通過鼠標點擊、滑動、滾動、拖拽。
四、html5頁面（和web頁面相似的一個頁面。手機上的網頁稱作為H5。）
概念：采用Html5語言寫出的App，不需要下載安裝。生存在瀏覽器中的應用，基本上可以說是觸屏版的網頁應用。
屏幕適配：由於受限於H5頁面在移動設備上的屏幕是各種各樣的。對設計影響比較大的主要是屏幕分辨率、尺寸、屏幕方向這些因素。而H5頁面會有非常多的一個屏幕尺寸，那么在不同的屏幕下的界面適配就成了一個很大的問題。解決的辦法就是通過響應式網站的設計方法來提升在不同分辨率下的兼容性。
響應式設計概念：指的是不同設備、屏幕、分辨率、操作方式（鼠標、鍵盤、觸摸），保證信息在不同環境下表現一致，保證可交互可操作。做響應式設計時需要遵循一個原則。
 |
 |
 |
 |
由於頁面的寬度發生了變化，進而信息展現也改變了就是響應式設計。直到最后在手機屏幕上的顯示圖片信息變成了一列。
1、臨界點：當頁面寬度發生變化的尺寸范圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應清晰的一個臨界點，制定了臨界點之后就知道，當屏幕的寬度范圍位於哪一個點的時候，我們的頁面信息該如何展示。
2、刪格：將頁面分成幾欄、幾塊。
 |
以上是以12刪格為基礎的案例。它的設計原則就是將頁面分成12個等分的欄，然后把頁面的內容設計在12欄內。比如左邊的一些商品展示它用到了一個刪格的單位；其中的一個最大面積的商品展示它用到了比較多的刪格；最右側的操作信息用到了四個刪格的比例。
3、使用Native App的UI控件：在設計H5頁面的同時，能夠盡量讓樣式與Native保持一致；文字字號顏色均可與APP設計一致；減少不必要的手勢操作；避免與瀏覽器的交互沖突，如左右滑動。