你不得不知的设计趋势:偏移+浮块

设计师们正在不断打破常规网格。从响应式网页设计  (Responsive Web Design简称RWD) 的早期开始,这就是一次伟大的演变。

5年前,响应只是意味着展示的内容不断的根据展示的内容进行相应的响应和调整。但它始终处于严格的网格范围之内。

实际上,响应式网页设计对设计师如何使用网格产生了负面影响,响应式Web设计的布局主要是液态的,这也正是设计者对设计样式不好控制的原因。

但是以后不会再这样了。

今天,随着技术的进步media queries媒介查询)和 Flexbox(弹性布局,它是现代Web布局的主流方式之一)等技术给设计师提供了更多网格计算功能。设计师根据不同的情况具有不同的质量,这种方式应用在网页设计中的不同网格之中:

· 视差 - 当滚动鼠标时,重叠的内容通常会“浮动”在其覆盖的内容上。这个效果要超过应用于整个网站的卷动顶起视差效果。

· 不同深度的阴影  - 虽然设计师不经常应用这一点,但是根据物理光影属性,重叠元素起来的元素会有不同的阴影深度。

· UI标注 - 在此变体中,产品网站使用重叠图像标注一块UI元素。它对于简单的产品来说很完美 。

· 图文结合 - 通常,背景内容通常是一些图片来表达情绪,因为重叠大部分都是模糊的。

说这么多了,赶紧看看一些栗子🌰吧:


A little site called Squarespace
Design by Giga Tamarashvili


Paper Tiger



https://flayks.com/


https://flayks.com/



名词解释:

响应式网页设计(Responsive Web Design简称RWD)  

这个术语,由伊桑•马科特(Ethan Marcotte)提出,是一种网页设计的技术做法。该设计应当根据设备环境(系统平台、屏幕尺寸)进行相应的响应和调整

关于Media Queries

到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页中,都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起,我们在开发网页只考虑到自己的萤幕显示的如何,是多么的肤浅哪。 在开发者的屏幕看到的网页或许很漂亮,那其他人的萤幕呢? 所以,我们需要的是能够控制不同大小的屏幕,在其所显示出来的样式,让各式各样来自不同地方的User 都能够有最佳的浏览体验。

Scrolljacking

通过重新定义鼠标滚动速度、幅度达到控制可视区域视觉效果的方式。


原文链接

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,805评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 一、名词解释 名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》 响应式Web设计(R...
    GeekJun阅读 802评论 0 3
  • 专业术语 响应式Web设计(RWD):网页内容会随着访问它的视口及设备的不同而呈现不同的样式,相关的基本要素:弹性...
    龙猫Vin阅读 363评论 0 0
  • 名词解释 1、响应式web设计:响应式web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随...
    Sugwa阅读 1,002评论 0 0