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设计一致；减小没必要要的手势操做；避免与浏览器的交互冲突，如左右滑动。