UI设计规范：响应式网站设计注意事项

　　最近在公司写的页面的都是使用了响应式布局，也正是这点在设计与开发沟通上引发了许多口水，因此在设计规范上写下几点响应式网站设计注意事项，望共勉。

　　一、什么是响应式设计？

　　先科普一下，所谓的响应式网站就是网站页面随浏览设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户。效果如图下：

　　pc端环境下效果

　　平板环境下效果

　　移动端环境下效果

　　通过以上图片可以发现不同设备环境下网页的布局结构是不一样的，但内容却不变。

　　二、注意细节

　　A、尽量避免大量使用图片充当背景。在响应式网站上，不同设备下背景图片适配是开发者的一个痛点。在开发原理上，前端是按比例适配图片，那么这将出现以下三种情况：

　　1、第一种：按容器比例撑满。

图片看起来好像没问题，但是在小设备环境下图片会出现压缩变形的情况。

　　2、第二种：图片宽度按容器比例撑满、高度自适应大小。

图片看起来好像也没有问题，同理在小设备环境下图片底部会出现空白情况。

　　3、第三种：把背景图片放大到适合元素容器的尺寸，图片比例不变。

图片看起来好像没有问题，同理在小设备环境下超出容器的部分可能会裁掉。

　　解决方案：

　　一张背景图片引发各种强迫症，骚年你还敢乱用？

　　1、尽量少用图片充当背景(这里指的是在响应式网站上)

　　2、通过调查使用裁剪这种方法比较多，设计师需要输出不同设备下的背景图片(pc 平板 移动端)。

　　3、可以使用背景图片，但是背景和图片需要分开，而且背景只能是纯色调或者是有规律的图片(这样前端可以重复使用背景图片。就可以避免底部出现空白的尴尬情况了)。

　　4、设计师输出不同设备下的图片效果(不推荐、效率低)

　　B、该显示的显示该隐藏的隐藏。例如导航栏，在pc端显示上导航的存在可能没什么，如图2-2。但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。在移动端上导航可以用汉堡按钮的形式展现。

　　C、不同设备环境下使用不同布局结构，这样能显示最友好的视觉效果。

　　三、使用场景

　　并不是所有网站都适合用响应式，如果用了响应式，那么移动端的UI就不能要求太高，毕竟响应式只是适配一下排版布局，排版都是按规律顺序进行调整的。如果移动端UI和PC端相差太大，那还不如直接写2套代码性能还更好。而且，后期响应式网站维护起来也不简单。

　　如果是单个页面或比较少页面的网站(网站结构不复杂的，比如官网、个人博客等)，建议做响应式；

　　反之，不建议(比如商城、社区等)。

　　四、总结

　　以上就是对响应式网站设计注意事项的一些总结，在实施上需要设计师和前端er一起探讨制定规范。更多关于“UI培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。

　　注：本文部分文字和图片来源于网络，如有侵权，请联系删除。版权归原作者所有!