您的位置:首页 > 新闻动态 > 行业动态
少即是多 怎样在响应式网站建设中运用"留白"艺术?
浏览次数:529次 发布日期:2019-09-10
空白是网站设计的重要工具,可以给网站带来很多好处。适当的空白可以有效地突出网站的主题,传达网站的核心理念,吸引访问者的注意力,可以简化图片,使各种元素的呈现更加层次化、清晰化,提高网站内容的可读性和可用性,也可以增加网站内容的可读性和可用性。网站的纹理,建立一个独特的形象。空白通常意味着在页面的不同部分之间找到平衡。在网站中使用空白并不容易,但在响应式网站建设布局中使用更难。这是因为响应式网站建设通常需要不同的断点来容纳多个设备,如计算机、平板电脑和电话,页面上的空白区域必须确保跨不同设备的用户友好的浏览体验。不过,别担心,小菲是来给福利机构做一个介绍,介绍什么是空白,以及如何在响应式建设网页设计中使用空白。

什么是空白?

空白是中国艺术作品创作中常用的一种技法。一些艺术大师,如画家,往往是空白的大师。在他们看来,白色空间具有很高的审美价值,可以给观众留下想象空间,达到“无赢”、“此时无声胜音”。在你的网站上使用空白可以产生类似的效果。网站中的空白,又称负空间,是指在空白处合理安排各种设计元素,实现页面布局的干净细腻。然而,很多人经常陷入一个陷阱,认为空白是为了让你的网站的某个区域变白。白色并不意味着白色,它意味着白色,这是一种没有装饰的状态,没有额外的元素(下图中的灰色区域也是白色的)。它可以采取多种形式,包括图片、图表、边距、列,甚至单词之间的空格。

如何在响应性网站建设上留下空白?

响应式网站建设的最大特点之一是,在适应计算机屏幕的同时,它们在手机等小屏幕上表现良好。网站上的空白是否合适,取决于它能否满足不同设备的需求,主要是手机。以下建议正是基于此。

重置导航菜单

导航菜单是您在构建网站时遇到的第一个设计挑战之一,但很少有设计师将导航菜单与空白区域结合起来。实际上,在导航菜单中也应该注意空格。这是因为如果没有足够的空白导航菜单,网站上显示的小屏幕上,极有可能会出现菜单栏断线(尤其是在横导航菜单的情况下),效果不佳的视觉体验,此外,移动用户还容易点击on单击菜单项时出错,将影响用户的操作体验。

如何使导航菜单为空?如果导航菜单栏上有太多的选项,而这些选项实际上是不可用的,我们可以使用隐藏的菜单,例如汉堡图标,来给网站足够的空间。但是,在使用隐藏菜单之前,我们可以对导航菜单进行一些设置,以便在不同的设备上以最合适的方式显示它。

在fla的情况下,当显示在桌面上时,它会显示一个类似于上面所示的并排导航菜单,而在一个小屏幕设备上,左侧导航菜单隐藏在汉堡图标中,给用户足够的空间。此外,你可以看到,左边的菜单选项之间有一定的距离,设计师特意添加了这些选项,以方便用户在小屏幕设备上点击和使用手势。

Dorigati的导航菜单比佛罗里达州的网站要复杂一些。当用户在电脑等大屏幕上导航时,导航菜单在网站上水平排列。如果屏幕较小,导航菜单将以两行(如上图所示)的形式呈现给用户,有些光栅化;当站点需要调整到960px断点时,导航菜单的布局将从水平变为垂直,出现在站点的侧面,一个标志会相应地改变位置。如果断点较小,则导航菜单将隐藏在汉堡图标中并显示在页面顶部。这种方法听起来很乏味,但它是一个实用的解决方案,允许网站为不同设备的用户提供自然、友好的浏览体验,同时确保适当的空白。

注意垂直空白

过去,在为电脑桌面设计网站时,我们常常注意网站上不同元素的水平间距。但当我们开始为响应站点安排空白时,我们应该更加注意元素的垂直方面。那是因为手机的屏幕通常是垂直的。如果不注意元素在垂直方向的间距,会影响手机等小屏幕上各种元素的显示,影响视觉效果。此外,垂直空白(white space)的数量在某种程度上决定了网站在移动设备(如手机)上加载的速度。让栗子证明吧!

显示了手机屏幕上的jisc站点,由于设计师在字体、图像和其他元素之间留出了空间,因此看起来很舒服。jisc网站在电脑桌面上出现的时候有很多横向的导向块,实际上在共享服务下面,行业交易是一种平行关系,在电脑屏幕上呈现的是一个横向的方向,但设计师不仅注重横向间距,同时考虑到网站在小屏幕上垂直渲染的习惯,使得较高的网站更清晰可读。

网站上的空白也可以用来划分不同的区块,给用户一些喘息的空间。mashable的博客使用负空间来实现这一点。mashable的计算机显示三列:small+text、medium+text和large+text,这在手机上看起来很糟糕。不过,设计师们考虑到了手机的垂直屏幕,在不同的元素垂直方向留下了足够的空间,使得不同文本块之间的边界清晰可见,界面看起来也更简单。

因此,在空白问题上,我们设计一个响应站点记住不要总是从元素的水平方向开始,也要考虑更多不同元素和不同间隔和距离的块在垂直方向上,所有元素在小屏幕上都是毕竟,倾向于显示垂直的,从而起到真正的白色空间中反应位点的作用。

字体和间距

响应网站建设上的空白处也需要注意文本的字体。除了改变字体大小,我们还可以调整行高、间距、颜色,甚至两个文本块之间的距离,使文本更容易阅读,使图片看起来更和谐。

在网页上显示的计算机标题与导航菜单之间的空白区域比较大,但当在移动设备上显示时,空白区域缩小(见图表),下页眉下文字字体少,段落间距在底部文字有所扩大,下一步是根据合理利用白色空间的特点。

agra文化也是如此,在计算机上显示时,每个图像上的单词都会挂起。但由于悬浮在手机等设备上不起作用,agra文化果断地放弃了在小屏幕上的悬浮,允许文本直接出现在图像的中心。虽然这个变化不是很大,但它保证了用户的舒适体验。

调整图片大小

响应性设计中经常涉及的一个大问题是图形。当在网站上使用空白时,我们还需要考虑图像是如何放置的。由于大多数显示器都是宽屏的,许多网站都使用宽屏图像。这也意味着在移动设备上显示图像时,我们需要缩小图像或重新定义图像大小。看看下面的栗子能不能给你一些启发!

当upp Broadgate Park站点显示在桌面上时,它会在主页上显示一个幻灯片,当设备的分辨率低于500px时,它会显示一个拉长的图像(如下所示)。虽然图片较长,但设计师仍然注重垂直方向的空间,并删去不必要的元素,使网站看起来更简单、更清晰。很难做到这一点,因为你需要知道图像的大小和每幅图像的实际价值,才能正确地重新定义图像的大小,但如果你愿意付出努力,小菲认为这是值得的。

金岛是另一个故事。网页设计师认为电脑桌面上的幻灯片在移动设备上没有多大意义,所以为了清晰起见,他们会将其隐藏起来。同时,将水平导航菜单垂直排列在两列中,以填充空间并防止网站显示为空。

很多设计师认为网络空间是有限的,认为通过有限的空间尽可能多地传达更多的内容才是王道。事实上,更多的内容对用户未必是好事,但可能会对用户造成干扰。我们在做响应式网站建设的时候要记住少即是多,要学会利用白色的空间给网站带来独特的美和强大的表现力。在你的响应网站上使用空白!

深圳做网站开发公司,响应式网站建设服务商,高端网站制作方案,企业建站服务定制价格
版权所有:深圳市万创科技有限公司 粤ICP备14001694号

陈小姐:

136-3280-8615

扫码有优惠