图片展示
图片展示

3种响应式网站设计优劣

作者:科慧设计 浏览: 发表时间:2022-11-17 23:22:33 来源:科慧设计

guandianxianyingshi.jpg

响应式设计布局设计早就不是什么新奇的技术了,现在的网站大多都能自适应平板,手机,pc端了。响应式的模式有很多,今天深圳网站设计公司科慧设计主要谈谈时下流行的3种不同的设计模式。

1.缩放、流式布局与响应式

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

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

通过改变每一个元素来保持一致的表现。

xiangyingshi1.jpg

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

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

xiangyingshi2.png

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

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

xiangyingshi3.png

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

2元素的扭曲

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

xiangyingshi4.png

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

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

3:使用固定宽度图片

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

xiangyingshi5.png

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

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

xiangyingshi6.png

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

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

xiangyingshi7.png

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

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

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

好的设计模式很重要,选择最适合的设计模式,效率才能大大提高。


3种响应式网站设计优劣
轻设计是时下炙手可热的话题,也是方兴未艾的Web2.0大浪下设计师们的最爱(无论是视觉元素还是交互流程均能轻则轻)。深圳网站设计​公司科慧设计从实践和总结的角度出发现为在家指出6个技巧使你的网站轻巧灵活。
长按图片保存/分享

Copyright © 2016-2023 科慧设计有限公司 版权所有       网站地图

添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了
粤ICP备12058681号