千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业 Java培训机构哪些好
当前位置:首页  >  关于学院  >  技术干货  > UI设计规范:响应式网站设计注意事项

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

来源:千锋教育
发布人:syq
时间: 2022-08-15 10:32:18 1660530738

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

响应式网站设计注意事项

  一、什么是响应式设计?

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

响应式网站设计注意事项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万人。不论你是零基础还是想提升,都可以找到适合的班型,千锋教育随时欢迎你来试听。

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

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区