全年无休丨24小时咨询热线: 024-86521520

办公地址: 沈阳市于洪区长江北街142-4号

辽宁省开启新媒体时代的响应式网页设计

沈阳做网站公司 发布时间 : 2022-01-22

沈阳哪家做响应式网站设计好?沈阳做网站建设站长利用响应式网页设计创建网页布局,UI设计将能够更好地适配不同的屏幕和尺寸。那么,沈阳网站制作公司随着UI设计行业的不断更迭,辽宁省未来响应式网页设计又可能会怎么发展?

沈阳网站建设公司的站长们在网页设计行业,小伙伴屷知道一件事即将发生,唯一不变的就是变化。大约每十年,人们做事的方式就会发生根本性的转变,这对于超越我们之前所做的事情至关重要……人们即将再次跨入下一个阶段。


首先:新媒体时代的网页设计是如何开始的——固定屏幕


在疫情前的那个时代,我们首先开始在单一视图屏幕中进行UI设计,这类屏幕在当时最流行的尺寸是640×480。大多数时候,我们甚至没有考虑让屏幕滚动,而是在特定区域或文本局部区块中设置了内部滚动条。


毋庸置疑,那个时候的大部分网页也是用Flash或HTML创建的,并带有用于布局的表格。那是在智能手机出现之前,随着经济的高速的发展,我们经历了第一个向“响应式”设计的根本转变。人们已经走了很长一段路,CSS已得到长足的发展,H5“响应式”网页设计从2010年开始才真正获得了专有工具。


其次:新媒体时代的网页设计现在怎么样——响应式设计


随着CSS3的发布,我们获得了对“媒体查询”(Media Queries)的访问权限,此后不久,据沈阳网站优化站长德泰诺了解Ethan Marcotte在2009年底创造了“响应式设计”一词。


这十多年来,人们一直使用“响应式网页设计”(RWD,据统计现在电脑手机分开站在国内仍然占主流,主要是有很多互联网公司不愿意引进新技术)创建网页布局,作为一种网页设计方法,仅需基于一种屏幕尺寸进行设计,“响应式”使我们的设计能够适配各种设备和屏幕尺寸。


在早期的时候,当移动电话还不兼容媒体查询或JavaScript时,“移动优先”和”渐进式增强”的概念就成为了非常流行的方法,当时有很多CSS完全不受支持。


用人们今天的话来说响应式设计,我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时,人们使用“媒体查询”来更改整个页面布局。


再次、新媒体时代的网页设计的未来是什么——组件驱动


很快,使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时——就像我们在九十年代所做的那样。


人们通过基于viewport(视口)的“媒体查询”获得了许多强大的工具,但我们也缺乏很多适配的可能性,因为“媒体查询”是一个适用于整个页面的通用解决方案,并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力,也缺乏将“响应式”样式注入“组件”本身的能力。


当人们谈到组件时,这里指的是页面上的“元素”,这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容,每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information(全局视口信息)来设置这些组件,但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时,这使得它变得更加困难。


告诉人们一个好消息是这个生态系统正在发生变化,而且它正在迅速变化,这需要我们进行一些思维转变:考虑如何设计和定义组件样式以及它们如何适应周围环境。


现在的CSS正在不断发展,“响应式”网页设计的新时代即将到来。从目前的情况来看,自从我们第一次引入 “响应式网页设计”(RWD)以来,仅仅十多年的时间,这个生态系统已经准备好迎接CSS发生一些相当大的改变。


已经让人们深入研究一下可以期待哪些类型的变化,这会如何改变人们的设计方法,以及人们如何考虑界面设计。


最后:使用者能够设置基于个人偏好的“媒体查询”


简单来说,人们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使人们能够根据用户自己的特定偏好或需求来设定网页样式。这将使人们能够根据用户的体验偏好来调整使用者体验。


这绝不是一个完整的列表,但能给你一些想法,这些基于偏好的“媒体查询”可能包括:


这些可以帮助人们构建更具活力和个性化的网页体验,专门满足我们用户的专属需求,尤其是那些希望网站易于访问的使用者。更进一步说明这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。


沈阳网站建设公司举个例子,当用户的操作系统偏好设定为“减少动效”时,他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好,并为其他人提供“动效增强”的体验。


技术开发者说的另一个流行的媒体查询是@prefers-color-scheme(配色偏好设定),它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”,它会自动发生。


沈阳做网站公司总结:“容器查询”为企业网站的设计系统注入新的生命力


在CSS 中最令人兴奋的新兴领域之一是“容器查询”(container queries),通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估,尽管今天使用它并不安全,但重要的是要了解其发展方向。


“容器查询”已经允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立,与现代设计系统保持一致,真正成为“即插即用”模块,可以转移到任何页面或布局,而且无需根据新环境重新考虑所有内容。“容器查询”为人们如何规划、设计和构建特定组件提供了一种更加动态的方法,因为组件本身拥有它的响应信息。甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要,人们应该研究一下。


如果辽宁省开启新媒体时代真的以终局视角来看响应式设计,那么它就是关于个人用户的用户体验设计。人们正朝着一个与每一位个体用户高度相关的时代迈进。人们的网页体验应该去适应用户的需求偏好。随着UI设计系统的发展以及人们如何创建更便携的网页,诸如“容器查询”之类的工具将变得非常有意义。

联系我们

  • 我们的电话

    024-8652152013840164561

  • 我们的邮箱

    info@dtnnet.com

  • 我们的地址

    沈阳市于洪区长江北街142-4号