WEB 設計規範

WEB端設計規範

1、網頁尺寸

通常網站寬爲996px；國內網站大部分仍是以1000個像素爲界限，因超過1000像素適合在大屏幕上瀏覽，小屏幕會顯得擁擠。國內尺寸設置比較保守，這樣能夠保證大部分用戶溫馨的瀏覽網頁。

2、主流瀏覽器

chrome
IE
firefox
safari
opera

知道了瀏覽器的設計特色才能更好的設計頁面，好比瀏覽器的頭部的操做高度和信息的展現都會有所不一樣，那麼頁面在每一個瀏覽器上面的展示就會有所不一樣。

3、點擊操做

主要經過鼠標點擊、滑動、滾動、拖拽。

4、html5頁面（和web頁面類似的一個頁面。手機上的網頁稱做爲H5。）

概念：採用Html5語言寫出的App，不須要下載安裝。生存在瀏覽器中的應用，基本上能夠說是觸屏版的網頁應用。

屏幕適配：因爲受限於H5頁面在移動設備上的屏幕是各類各樣的。對設計影響比較大的主要是屏幕分辨率、尺寸、屏幕方向這些因素。而H5頁面會有很是多的一個屏幕尺寸，那麼在不一樣的屏幕下的界面適配就成了一個很大的問題。解決的辦法就是經過響應式網站的設計方法來提高在不一樣分辨率下的兼容性。

響應式設計概念：指的是不一樣設備、屏幕、分辨率、操做方式（鼠標、鍵盤、觸摸），保證信息在不一樣環境下表現一致，保證可交互可操做。作響應式設計時須要遵循一個原則。

因爲頁面的寬度發生了變化，進而信息展示也改變了就是響應式設計。直到最後在手機屏幕上的顯示圖片信息變成了一列。

一、臨界點：當頁面寬度發生變化的尺寸範圍就是臨界點的概念。因此作響應式設計時咱們須要知道每個尺寸的寬度範圍在多少時咱們就能夠制定出相對應清晰的一個臨界點，制定了臨界點以後就知道，當屏幕的寬度範圍位於哪個點的時候，咱們的頁面信息該如何展現。

二、刪格：將頁面分紅幾欄、幾塊。

以上是以12刪格爲基礎的案例。它的設計原則就是將頁面分紅12個等分的欄，而後把頁面的內容設計在12欄內。好比左邊的一些商品展現它用到了一個刪格的單位；其中的一個最大面積的商品展現它用到了比較多的刪格；最右側的操做信息用到了四個刪格的比例。 三、使用Native App的UI控件：在設計H5頁面的同時，可以儘可能讓樣式與Native保持一致；文字字號顏色都可與APP設計一致；減小沒必要要的手勢操做；避免與瀏覽器的交互衝突，如左右滑動。