创东云品牌 达客户愿景
国内领先互联网应用服务提供商

服务热线:4006-150-015   北京总机:010-56629163   天津总机:022-60287038

销售热线
4006-150-015
首页 网站建设 企业邮箱 办公OA 云画建站 域名注册 虚拟主机 VI设计 微信营销 关于我们
销售热线:010-56629163
服务热线:4006-150-015
销售邮箱:sales@insaas.com
客服邮箱:kf@insaas.com
质控邮箱:qc@insaas.com
新闻动态
当前位置:首页 > 关于我们 > 新闻动态

避免3种响应式设计灾难

[2016-03-20]


缩放、流式布局与响应式

这些术语容易造成混淆,设计师常常错误地交替互用。实际上,每个都是布局技巧的显著进化过程,像技术演进那样逐一显现。


缩放布局,旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容,就这方面而言,它们是响应式的。布局本身保持静止,通过改变每一个元素来保持一致的表现。


上图:不同分辨率下缩放布局的例子,这种设计为了统一牺牲了易读性。


流式布局就不一样,因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点,克服了缩小文字的问题。用户主动缩放时,设计就被破坏了。


上图:不同分辨率下流式布局的例子,这种设计为了易读性牺牲了统一。


响应式设计不会缩放任何东西。相反,它会根据窗口尺寸决定显示哪些内容。


上图:不同分辨率下响应式布局的例子。


灾难1:菜单折行

如果在页面顶部使用了导航栏,当页面展现在小屏幕上时,响应式设计通常会把它“掰”成更紧凑的格式,但这并非总是有效,如果显示区域比断点更宽,又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。


有些方法可以解决这个问题。


其一,减少导航栏中横排菜单项的数量,将它们分门别类。然后选中某类时,你可以通过下拉菜单来显示子类。


其二,减少断点的数值。应该以导航栏开始出问题的实际数值为准,而非具体设备尺寸。


其三,不同设备使用不同方式,例如滑动抽屉。


灾难2:使用固定宽度图片

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时,图片就被裁剪了。


上图:糟糕的固定宽度图片例子,它太大了。于是出现了滚动条,内容被推到屏幕之外。


通过给图片设定相对单位,可以避免这个问题。或者使用支持响应式的框架(比如Bootstrap),使用响应式图片class名来控制(例如class="img-responsive")。


上图:同样的元素,用响应式图片class名的方式,滚动条就不见了。


灾祸3:元素的扭曲

这有点晦涩难懂,但本质上,布局显示在小窗口上的时候,所有未经处理的列都会以行的形式呈现。这是个问题,因为内容的扭曲会不经意地改变设计的层级。


上图:列变成了行,扭曲了内容。


解决方法显而易见,但令人惊奇的是,仍有很多人在纠结它:只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置,盖住了其他元素,可以通过将它包裹在div容器中,设置外边距,迫使它回到原本的地方。


规划有助于避免问题

本文只讨论了3种最普遍遇到的响应式设计问题,还有很多其他途径会毁了一个好的设计。预防错误并不难。现代浏览器都有内置的响应式布局测试,好好规划设计,多做测试吧。

(文章来自互联网)

_________________________________________________________________________________________________________________________________________________________________________



      北京东云创达科技有限公司(东云创达) ,是国内领先的互联网应用服务提供商,企业网络服务首选品牌。公司经营理念是创东云品牌,达客户愿景!


      东云创达重点面向在京企业及国内外知名企业客户,为客户提供与其整体战略相匹配的网站服务解决方案、企业营销解决方案、企业管理解决方案;从而帮助客户应用互联网实现电子商务,提高企业竞争力。


      东云创达是新互联网时代中国网站建设服务的创新者、领先者,企营销解决方案的引领者。公司将一直秉承专业、诚信、服务、进取的价值观,坚持“客户第一”的服务理念,以 “不是我们可以为您提供什么,而是您需要什么,以及您的客户需要什么”为导向,向企业提供全方位优质的企业应用解决方案。


7*24小时免费咨询热线:400-615-0015
业务咨询电话  总机:010-56629163
售后服务电话:010-53322549
合作加盟:18911086715
销售邮箱:sales@insaas.com
客服邮箱:kf@insaas.com
质控邮箱:qc@insaas.com
公司地址:北京市海淀区上地三街中黎科技园3号楼D501





北京
010-56629163

天津
022-60287038

售后服务
4006-150-015