全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

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

发布时间:2022-08-15 10:32:18
发布人:syq

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

响应式网站设计注意事项

  一、什么是响应式设计?

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

响应式网站设计注意事项374

  pc端环境下效果

响应式网站设计注意事项386

  平板环境下效果

响应式网站设计注意事项397

  移动端环境下效果

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

  二、注意细节

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

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

响应式网站设计注意事项554

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

响应式网站设计注意事项607

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

响应式网站设计注意事项652

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

响应式网站设计注意事项705

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

响应式网站设计注意事项754

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

  解决方案:

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

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

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

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

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

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

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

  三、使用场景

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

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

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

  四、总结

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

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

相关文章

反欺诈中所用到的机器学习模型有哪些?

反欺诈中所用到的机器学习模型有哪些?

2023-10-14
强化学习中on-policy与off-policy有什么区别?

强化学习中on-policy与off-policy有什么区别?

2023-10-14
为什么交叉熵可以用于计算代价?

为什么交叉熵可以用于计算代价?

2023-10-14
开发网上平台的大概流程有什么?

开发网上平台的大概流程有什么?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取