主机运维
当前位置:主页 > 建站资讯 > 主机运维 >
少即是多如何在响应式网站中使用“空白”图片?
发布日期:2021-04-28 阅读次数: 字体大小:

就FLA网站而言,如果它显示在计算机桌面上,它将以侧面导航菜单的形式出现,如上图所示;当它显示在小屏幕设备上时,它将显示在屏幕上。 左侧将隐藏在汉堡图标中。 用户的足够空间。 此外,您可以看到左侧的菜单选项之间有一定距离,这是设计人员专门添加的,以使用户更方便地执行手势操作,例如在小屏幕设备上轻按。
与FLA的网站相比,Dorigati的导航菜单设置要复杂一些。 当用户浏览大屏幕(例如计算机)时,导航菜单将在网站上水平排列; 如果屏幕较小,导航菜单将以两行显示给用户(如上所示),这是网格系统的一部分; 当网站需要适应960px的断点时,导航菜单的布局将从水平变为垂直,出现在网站的侧面,徽标也会相应地改变位置; 如果断点较小,则导航菜单将隐藏在汉堡包图标出现在页面顶部。 这种方法听起来很麻烦,但实际上是一种更实用的解决方案,它允许网站为不同设备的用户提供自然而友好的浏览体验,同时确保适当的空白。
多留意垂直空间
过去,在设计针对计算机台式机的网站时,我们经常注意网站上不同元素的水平间距。 但是,当我们开始安排响应式网站的空白区域时,我们应该更加注意元素的垂直距离。 这是因为手机屏幕通常是垂直的。 如果不注意元素的垂直间距,则会影响各种元素在小屏幕(例如手机)上的显示,并影响视觉效果的呈现。 另外,垂直方向上的空白或空白量在一定程度上也决定了网站在诸如手机之类的移动设备上的加载速度。 让莉兹在下面证明这一点!下图是Jisc网站在手机屏幕上的显示。 由于网站设计师在字体,图片和其他元素之间留有一定的空间,因此它看起来更加舒适。Jisc网站在计算机桌面上显示时,将有许多水平定向的块。 实际上,下图中的共享服务和部门交易是并排的。 它们以水平方向显示在计算机屏幕上,但设计人员不仅关注水平方向。 同时,它还考虑了在小屏幕上垂直显示网站的习惯,从而使网站更清晰,可读性更好。
网站上的空白区域还可以分隔不同的块,并为用户提供一些喘息的空间。Mashable的博客使用负数空间来做到这一点。Mashable将在计算机的三列中显示:小图像+文本,中间图像+文本和大图像+文本。 如果它也以这种方式显示在手机上,那可能太可怕了。 但是,设计人员考虑了手机的垂直屏幕,在不同元素的垂直方向上留有足够的空间,因此不同文本块之间的边界清晰可见,界面看起来也更加简洁。
因此,当我们设计响应式网站的空白问题时,切记不要总是从元素的水平方向开始,还要记住不同元素和不同块的垂直间距和距离。 毕竟,所有元素在小屏幕上都倾向于垂直显示,因此空白可以真正在响应式网站中发挥作用。
字体和间距
要在自适应网站中做好空白,您还需要注意文本的字体。 除了更改字体大小之外,我们还可以调整字体行高,字距,字距,颜色,甚至两个文本块之间的距离,以使文本更易于阅读,并且屏幕看起来更加和谐。
当在计算机上显示“下一个网页”时,标题和导航菜单之间的空白区域相对较大,但是当在移动设备上显示时,空白区域会缩小(请参见下图),并且字体 标题TNW文本被减少。 较小,图片下方文本段落之间的空间已扩大,这是TNW根据其自身特点合理使用空白的体现。阿格拉文化网站也是如此。 当显示在计算机上时,每张图片上的文字都具有浮动效果。 但是,由于无法在手机和其他设备上显示浮动效果,因此Agra文化果断地在小屏幕上放弃了这种特殊效果,从而使文本直接出现在图片的中央。 尽管变化不大,但可以保证用户的舒适体验。
重新调整图片
响应式设计通常涉及一个大问题,那就是图片。 在网站上使用空白时,我们还需要考虑图片的正确放置方式。 由于大多数监视器都是宽屏的,因此许多网站都使用宽屏图像。 这也意味着当在移动设备上显示图像时,我们需要缩小图像或重新定义图像的大小。 看看下面的栗子是否可以给您一些启发!
当UPP Broadgate Park网站显示在计算机桌面上时,幻灯片将显示在主页上,并且当设备分辨率小于500px时,它将显示为扩展图片(如下所示)。 尽管图片变长了,但设计人员在设计时仍然注意垂直空间问题,并删除了不必要的元素,使网站看起来更加简洁明了。 但是,要实现这一点确实很困难,因为您需要知道图片的大小和每张图片的实际值,以便可以正确地重新定义图片的大小,但是如果您愿意做出这样的努力,小飞认为 这绝对是一回事。 物有所值。
金群岛是另一种情况。 网站设计人员认为,计算机桌面上的幻灯片在移动设备上的意义不大,因此为了网站的清晰起见,他们直接隐藏图片。 同时,水平导航菜单垂直排列在两列中以填充一定的空间,因此该网站不会显得空白。
许多设计师认为,网络空间本质上是有限的,这是通过有限的空间传递尽可能多的内容的一种王道方式。 实际上,更多内容不一定对用户来说是一件好事,但可能会干扰用户。 制作网站时,应牢记少即是多的原则,并学会利用空白为网站带来独特的美感和强大的表达力。 立即在您的响应式网站中使用空格!小飞还有另一个好消息要告诉你。 用于起飞页面()的自助式网站构建平台的许多模板都使用空白艺术,并且该网站看起来更加简洁和类似于Zen。 此外,起飞页面的自助网站建设平台可以满足小飞总结的以上有关导航菜单设置的建议,这些建议集中在垂直空白,调整字体和间距,重新定义图片等方面。 您可以使用起飞页面使您的网站在PC和移动设备上显示不同的效果。 但是,小飞想提醒您不要对移动网站进行过多的优化。 最好单独制作一个移动网站。 我们主张在响应式网站的基础上进行微调。 赶快在奇飞页面自助网站建设平台上建立一个响应迅速的网站!

标签: