首页

自适应与响应式设计的介绍和区别

博博

自适应与响应式设计的介绍和区别

开启新时代的响应式网页设计

分享达人

///

它是如何开始的-固定屏幕

在千禧年来临之前,我们首先开始在单一视图屏幕中进行UI设计,这类屏幕在当时最流行的尺寸是640x480。大多数时候,我们甚至没有考虑让屏幕滚动,而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑,当时的大部分网页也是用Flash或HTML创建的,并带有用于布局的表格。那是在智能手机出现之前,随着事物的发展,我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路,CSS已得到长足的发展,“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history


///

它现在怎么样-响应式设计

随着CSS3的发布,我们获得了对“媒体查询”(Media Queries)的访问权限(译者注:随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries,即“媒体查询”),此后不久,Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来,我们一直使用“响应式网页设计” (RWD) 创建网页布局,作为一种网页设计方法,仅需基于一种屏幕尺寸进行设计,“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

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

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

 

///

它的未来是什么-组件驱动

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

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


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

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

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


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

 

///

用户能够设置基于个人偏好的“媒体查询”

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

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

这些将帮助我们构建更具活力和个性化的网页体验,专门满足我们用户的专属需求,尤其是那些希望网站易于访问的用户。更进一步说,这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子,当用户的操作系统偏好设定为“减少动效”时,他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好,并为其他人提供“动效增强”的体验。

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

///

“容器查询”为你的设计系统注入新的生命力

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

简而言之,“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立,与现代设计系统保持一致,真正成为“即插即用”模块,可以转移到任何页面或布局,而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法,因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要,我们应该研究一下。

 

///

考虑各种形态因素

由于各种“形态因素”(form factors)的变化和扩展,例如新的屏幕类型,可折叠屏,我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中,请记住,这是最具实验性的,并且只是一项正在进行的工作,仍在尝试解决我们可能遇到的任何复杂问题,同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中,原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如,你可以在一个屏幕上放置一个收起的侧边栏(或菜单),并允许内容在另一个屏幕上展开并随页面滚动。

 

///

为什么我们需要它?

我知道你在想什么,我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意,那么为什么要改变呢?如果我们真的以终局视角来看响应式设计,那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页,诸如“容器查询”之类的工具将变得非常有意义。

配图:CSS 将基于各个层级来确定用户的最佳体验

 

考虑到这一点,这意味着我们现在可以使用基于页面的媒体查(包括跨越屏幕的细微差别)来设计宏观布局;使用容器查询的组件设计微观布局;使用基于用户偏好的媒体查询,根据用户独特的偏好和需求定制用户体验。

 

对于新的响应式设计,有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实:即我们的设计不是静态的,不仅在布局上,还有在用户可获得的体验中,我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂,我们需要适应和挑战自己,理解“新响应式”体验的意义。

 

文章来源:站酷   作者:MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

响应式布局如何实现

前端达人

css面试题@响应式布局如何实现

1为什么要使用响应式布局

响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好

的体验。



2如何实现

方案一:百分比布局

利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有width,、height、padding、margin,其他属性比如border、 font-size不能用百分比来设置的

由于没办法对font-size进行百分比设置,所以用的最多就是对图片和大块布局进行百分比设置。



方案二:使用媒体查询 (CSS3@media 查询)

利用媒体查询设置不同分辨率下的css样式,来适配不同屏幕。

媒体查询相对于百分比布局,可以对布局进行更细致的调整,但需要在每个分辨率下面都写一套css样式。

该布局的话适用于简单的网页,可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护,bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了(如:淘宝,京东)等等



方案三.rem 响应式布局

rem布局的原理

rem:相对于根元素(即html元素)font-size计算值的倍数。

如 html的font-size为100px;那么2rem就为200px。

通俗的来讲的话rem就是通过JavaScript来获取页面的宽度,从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。

//代码展示

css面试题@响应式布局如何实现
1为什么要使用响应式布局
响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好
的体验。

2如何实现
方案一:百分比布局
利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有width,、height、padding、margin,其他属性比如border、 font-size不能用百分比来设置的
由于没办法对font-size进行百分比设置,所以用的最多就是对图片和大块布局进行百分比设置。

方案二:使用媒体查询 (CSS3@media 查询)
利用媒体查询设置不同分辨率下的css样式,来适配不同屏幕。
媒体查询相对于百分比布局,可以对布局进行更细致的调整,但需要在每个分辨率下面都写一套css样式。
该布局的话适用于简单的网页,可以使移动端和pc端使用一套网址。从而节约成本。也方便后期的维护,bootcss就是用了CSS3的media来实现响应的 但是相对于复杂的网页就不适合了(如:淘宝,京东)等等

方案三.rem 响应式布局
rem布局的原理
rem:相对于根元素(即html元素)font-size计算值的倍数。
如 html的font-size为100px;那么2rem就为200px。
通俗的来讲的话rem就是通过JavaScript来获取页面的宽度,从而动态的计算rem。这样就会使不同分辨率下展现出相同的效果。
//代码展示
上述代码中 7.5为动态的值,根据设计图的宽度进行动态的改变。window.onresize的作用是:当页面的宽度或高度发生改变时,再次进行调用rem函数。

方案四.vw 响应式布局
vm,vh相应式布局通俗来讲就是有一点类似百分比布局 将页面的宽和高分别分为100份 1vm就是为宽度的百分之一,同理1vh及为高度的百分之一。段手机端用的最多就是这个方法,能保持不同屏幕下元素显示效果一致,也不用写多套样式。

方案五.flex 弹性布局
flex就是利用css3中的弹性盒子向下兼容到IE10
利用flex属性来适配不同屏幕, 该方法一般都会结合rem布局来写移动端页面

————————————————
版权声明:本文为CSDN博主「姚先生丶」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/listStyleScript/article/details/104862009

Material Design 之响应式栅格布局

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Material Design 响应式布局栅格适应屏幕尺寸和方向,确保布局的一致性。

列、间距和边距

Material Design 布局栅格由三个元素组成:列、间距和边距。

内容放置在包含列的屏幕区域中。

列宽是使用百分比而不是固定值来定义的,以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)确定,无论是移动设备,平板电脑还是其他尺寸的断点。

间距

间距是列之间的空间,它们有助于分离内容。

间距在每个断点范围内的值是固定的。为了更好地适应屏幕,间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕,因为它们在列之间创建了更多的空白。

边距

边距是内容和屏幕左右边缘之间的空间。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕,边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕,因为它们在内容的周边创建了更多的空白。

自定义栅格

可以调整布局栅格以满足您的产品和各种设备尺寸的需求。

自定义间距

可以调整间距以在布局的列之间创建更多或更少的空间。

自定义栅格

可以调整页边距,以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。

正文副本可读性的理想长度是每行40-60个字符。

间距和边距

在同一断点内,间距和边距宽度可以彼此不同。

水平栅格

Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列,而不是从上到下排列。屏幕的高度决定水平栅格中的列数。

在非触控和web平台,水平滚动的UI并不常见。

可以定位水平栅格以适应不同的高度,从而为顶部的app栏或其他UI区域留出空间。

断点

断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内,布局将根据屏幕大小和方向进行调整。

Material Design基于以下列结构提供响应式布局。使用4列,8列和12列栅格的布局可用于不同的屏幕、设备和方向。

每个断点范围决定每个显示大小的列数、建议的边距和间距。

栅格特点

弹性栅格

弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。

固定栅格

固定栅格使用固定大小的列,具有流体边距,以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。

UI(用户界面)区域

布局由多个UI区域组成,例如侧面导航,内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致,同时适应不同屏幕尺寸的不同断点。

为了提高设备之间的熟悉度,为桌面设计的UI元素应该以与移动UI一致的方式进行组织。

永久UI区域

永久UI区域是可以在响应栅格之外显示的区域,如导航抽屉。这些地区不能重叠。

持久UI区域

持久性UI区域是可以随时根据命令显示的区域,或者它们可以保持可见。它们可以打开或关闭,出现或消失。当它们出现时,它们会压缩内容和栅格。

当持久性UI区域可见时,其可见性不受与屏幕上其他元素交互的影响。

临时UI区域

临时UI区域暂时出现,当它们出现时,它们不会影响响应式栅格。当它们可见时,可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。

当UI区域可见时,其他屏幕元素不是交互式的。

原型

原型是结构化布局,为布局、分层和阴影提供一致的方法。它们是一个起点,旨在在进行修改以满足产品的特定需求。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

移动端的dashboard设计也可以很好看哦

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

响应式已经成为网页设计的主流,目前已很多网站能兼容手机端 ,但是唯有 dashboard 的界面是相当难在移动端显示,特别是数据复杂、内容较多的后台数据,是很难直接展示到移动端的。

今天我们分享一系列 dashboard UI 设计作品,主要展示一些用户数据、图表的可视化组合设计。这些作品界面布局合理,层级分明,设计美观,对要做这类 UI 的同学有很好的参考价值。

– 01 –

by limor.tabeka

– 02 –

卡路里消耗跟踪器 by Cuberto
dribbble.com/cuberto

– 03 –

健身活动追踪 by Cuberto

– 04 –

医院 APP 设计 by Nicat Manafov
dribbble.com/nicatmanafovv

– 05 –

by Stelian Subotin

– 06 –

– 07 –

by Zoeyshen
dribbble.com/zoeyshen

– 08 –

by Gabe Becker

– 09 –

by Cedrica
dribbble.com/rddstudio

– 10 –

by Michal Parulski

http://dribbble.com/Shuma87

– 11 –

by Divan Raj
dribbble.com/divanraj

– 12 –

by Maciej Kałaska
dribbble.com/themce

– 13 –

by Gregory Muryn-Mukha
dribbble.com/murynmukha

– 14 –

by Saepul Rohman
dribbble.com/SaepulRohman

– 15 –

by Dmitro Petrenko
dribbble.com/ortimd

– 16 –

健康生活 APP,by OKatarina
dribbble.com/OKatarina

– 17 –

暗色系移动端后台 by ortimd
dribbble.com/ortimd

– 18 –

by Riko Sapto
dribbble.com/RikoSapto

– 19 –

by Taras Migulko
dribbble.com/migulko

– 20 –

电子单车 APP 后台设计 by Arnar Ólafsson
dribbble.com/pollur

– 21 –

by Cedrica
dribbble.com/cedrica

– 22 –

交易证券数据界面设计 by Iftikhar Shaikh
dribbble.com/iftikharshaikh

– 23 –

记帐应用统计界面 by Matt Koziorowski
dribbble.com/mattkoziorowski

– 24 –

by Matt Koziorowski
dribbble.com/mattkoziorowski

– 25 –

银行 APP 数据界面 by Vlad Ermakov
dribbble.com/ermalength

– 26 –

比特币交易界面设计 by Pawel Kwasnik
dribbble.com/pawelkwasnik

– 27 –

医疗护理app用户后台 by Masudur Rahman
dribbble.com/uigeek

– 28 –

by Manoj Rajput
dribbble.com/manojrajput

– 29 –

这个展开菜单很好看呢 by Martin Mroč
dribbble.com/martinmroc

从收集的这些 Dashboard 界面来看,它的展示形式和PC 端有很大的区别,移动端的后台只能显示少量或简化版的数据。比如 PC 一个页面的功能,在移动端可以分开1-2个页面来区分,或者使用类似 Tab 的形式来展现。

如果是手机 WEB 端可以用响应式来解决,以节省成本,但这样通常交互并不十分友好,如果时间和成本允许的话,建议产品和交互人员策划新的后台版本。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

变化在网页设计当中的运用

用心设计

在网页设计当中有各种形式和法则可以运用,前面也介绍了网页设计中常用的一些运用法则,界面上的美观有了,那交互上的呢?今天我们就界面上来分享变化在网页设计当中的运用。

变化在网页设计当中的运用

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档