首页 客户案例 品牌营销网站建设 微信小程序开发 网络营销 APP开发 终端形象 商业摄影 动态 联系

1对1定制服务,PC端+手机端+小程序多端应用

6种非常有用的响应式网站设计模式

2019年08月02日浏览:

响应式网页设计需要一种非常不同的布局方式。 几个世纪以来,平面以及数字化设计的布局艺术已经变得足够复杂,它由固定元素定义,现在随着响应式布局变得越来越受欢迎,元素的排版以及版块的罗列等元素变得越来越复杂,但是越来越“有序”。


为了帮助让你的设计思维以新的方式考虑布局,我们将向你展示一些有趣的响应式设计模式,这些模式目前正在流行。


1.Starting Small


我能看到的最流行的方法之一是将页面上的内容以横向模式排列开,实现简单的排列布局。随着页面宽度的增加,这些内容会变得越来越窄,但是在空间上却越来越开放。 我们可以在137 Pillars House的网站设计中看到这种技术。


137-pillars.jpg


正如你所看到的,布局实际上只经历了一次重大转变。 其余的调整是非常渐进的,仅仅是初始布局的缩小版本。


经过设计师在响应式设计过程中积累的经验以及优化。 这可以是一个很好的开始,因为它可以提供比大多数的布局都更具有响应性的布局和内容,同时提供在任何视窗大小看起来都很棒的网页。


虽然我想鼓励你采取相应的措施,探索你在布局中的巨大可能性,而不是简单地为了响应性而去调整。 不要误解我的意思,上面的方法没有任何问题,但是将你的技能提高一步并延伸到你的项目中需要根据你实际面临的情况来决定。


2.Mondrian


rwdpatterns-5.jpg


我们的第一个响应式网页设计模式是Piet Mondrian所欣赏的模式。 它使用带有明显宽度的三条边界来区隔开的三个简单以及大的内容块。 初始状态本身就非常灵活,可以很好地适应不同的视窗大小。


一旦初始状态的视窗大小太窄,宽屏布局就会适应并变成垂直布局。 通过将右侧两个较小的盒子移动到大盒子的下方来实现布局上的统一和平衡。 这种布局可以看做标准的单列移动视图,其中每个内容都可以简单地堆叠到内容的最后。


3.Basic Gallery


rwdpatterns-7.jpg


Basic Gallery是一种流行的设计模式,它的使用周期几乎自网站诞生以来就一直被沿用到现在。 如今,设计师通常会在极简风格的设计中使用它们:简单的矩形均匀排列在垂直的视觉区上。 随着视口的变化,这种格式非常容易被重新排列。


brad-sawicki.jpg


想要在实际网站设计中查看这种模式的效果,你可以以Brad Sawicki为例。 在主页上,它从一个简单的三列布局开始,随着视窗的变换,内容区块逐渐折叠成双列,最后是一个列的布局。 这样做的好处在于用户可以以漂亮的大格式查看图像。


4.Featured Items


rwdpatterns-9.jpg


这个布局其实很像上面的基础布局,目的是为了一次性突出一些而不是太多的内容。 这里的例子使用了四个特色项目,但它看起来很有用,用户在实际的体验过程中也不仅仅只会关注着四个项。


正如你所看到的,布局从四个重点项目开始并排,上面有一些介绍性内容。 请注意介绍性内容如何适应:整体界面以统一的左对齐为布局方式,这样在响应的过程中任然能够以同样的形式进行内容上的罗列。


5.Column Flip


rwdpatterns-11.jpg


这是最复杂的一种模式。 布局的顶部有一些非常大的元素,吸引你的注意力并介绍网站的目的。 下一部分是分为三列内容块的区域,在实际操作测试之前,你很难想想它们在小视窗的情况下将如何排列。


这是一个相当复杂的转变,但它非常有效。


最后一步当然是将所有内容再次固定于一个宽的列。 它可以使用滚动或滑动的效果进行平衡,只要你没有多到让人感觉要溢出页面的内容,那么这种模式不是太糟糕。


这种布局的灵感来自一家开发公司——Palantir。 请注意,网站开发人员是第一个尝试响应式设计的人,它既可以作为一个很好的学习经验,也可以作为向客户展示的一个很好的例子。


palantir.jpg


Palantir可以作为你了解这种模式的一个很好的例子,你将明白响应式网页设计中的变革有多么激烈,这不仅仅是减少宽度或完全消除它,它代表了页面内容的主要排版变化,以不断最大化可用宽度。


6.Feature Shuffle


rwdpatterns-13.jpg


最后一种模式对项目在排版理念有一定独特的见解。 我非常喜欢它,因为它在第一次变动时会产生轻微的弯曲。 它不是简单地变动为两列进而到一列,而是创建一个交错的两列布局,其中部分浮动到任一侧。


对于单列布局,则完全删除缩略图图像以保持文本内容的显示。 这是一门可以根据你的想法进行选择的模式。


Orestis在他们的网站设计上采用了这种模式。 三个强调性的项目是他们提供的服务,并用彩色插图表示。


orestis.jpg


当调整浏览器大小时,不同服务的内容块会堆叠,图像会向左或向右浮动。 这是一个有趣,古怪但同时又很有个性的网站。


总结


我希望你的思想现在处于超速思考响应式布局的“风暴”状态。 网页设计花了大量时间讨论有关如何通过各种技术和布局完成响应式的设计。


随着技术的革新以及设计的不断创新,相信响应式的网站设计会在未来越来越官方以及广泛的被用于各种项目上,你所需要做的就是不断尝试,并时刻更新自己的知识。

在线提交您的需求

*我们会在24小时内回复您,节假日除外。
线上服务咨询微信二维码18628098709获取解决方案