原创力文档- 1、本文档共6页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
WEB端设计规范
一、网页尺寸
一般网站宽为996px；国内网站大部分还是以1000个像素为界
限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。国内
尺寸设置比较保守，这样可以保证大部分用户舒适的浏览网页。
二、主流浏览器
chrome
IE
firefox
safari
opera
知道了浏览器的设计特点才能更好的设计页面，比如浏览器的头
部的操作高度和信息的展示都会有所不同，那么页面在每个浏览器上
面的展现就会有所不同。
三、点击操作
主要通过鼠标点击、滑动、滚动、拖拽。
四、html5页面（和web页面相似的一个页面。手机上的网页称
作为H5。）
概念：采用Html5语言写出的App，不需要下载安装。生存在浏
览器中的应用，基本上可以说是触屏版的网页应用。
屏幕适配：由于受限于H5页面在移动设备上的屏幕是各种各样的。
对设计影响比较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。
而H5页面会有非常多的一个屏幕尺寸，那么在不同的屏幕下的界面适
配就成了一个很大的问题。解决的办法就是通过响应式网站的设计方
法来提升在不同分辨率下的兼容性。
响应式设计概念：指的是不同设备、屏幕、分辨率、操作方式
（鼠标、键盘、触摸），保证信息在不同环境下表现一致，保证可交
互可操作。做响应式设计时需要遵循一个原则。
由于页面的宽度发生了变化，进而信息展现也改变了就是响应式
设计。直到最后在手机屏幕上的显示图片信息变成了一列。
1、临界点：当页面宽度发生变化的尺寸范围就是临界点的概念。
所以做响应式设计时我们需要知道每一个尺寸的宽度范围在多少时我
们就可以制定出相对应清晰的一个临界点，制定了临界点之后就知道，
当屏幕的宽度范围位于哪一个点的时候，我们的页面信息该如何展示。
2、删格：将页面分成几栏、几块。
以上是以12删格为基础的案例。它的设计原则就是将页面分成12
个等分的栏，然后把页面的内容设计在12栏内。比如左边的一些商品
展示它用到了一个删格的单位；其中的一个最大面积的商品展示它用
到了比较多的删格；最右侧的操作信息用到了四个删格的比例。
3、使用NativeApp的UI控件：在设计H5页面的同时，能够尽
量让样式与Native保持一致；文字字号颜色均可与APP设计一致；减
少不必要的手势操作；避免与浏览器的交互冲突，如左右滑动。
文档评论（0）