屏幕的宽度_交互规范:响应式让屏幕利用更高,用户体验更佳
让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯。本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析 三个部分进行阐述,在项目中提前定义好响应系统将有助于设计师在设计中考虑页面在不屏幕断点上布局,希望对正在了解响应式知识的你有帮助!!!
1. 什么是响应式
马科特说,真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局,而是要从整体上颠覆当前网页的设计方法,是针对任意设备的网页内容进行完美布局的一种显示机制。也就通过 CSS3’s 的媒体查询识别当前屏幕宽度,在根据预设的屏幕断点比对展示相应的页面结构布局、版式设计以及不同数量信息的展示。
1.1 相对尺寸单位-Rem
在《菜鸟教程》中是这样描述的,使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。使用 Rem 的主要目的:方便计算尺寸、在不同宽度的设备上等比缩放内容。
1.2 屏幕断点
屏幕断点是响应式设计的基础依据,它决定了我们要适配到什么样的设备或屏幕规格,并通过“媒体查询”这样的技术实现不同 “屏幕断点” 条件下的不同 UI 表现。一般情况屏幕断点都是手机、平板、PC这三个维度设计。下图屏幕断点参考 《Bootstrap入门:容器、响应式断点、Z-index – 菜鸟学院》划分。
1.3 流体栅格
在《「交互规范」栅格系统让页面元素间距更统一》中有详细的介绍栅格系统及如何搭建,而流体栅格的核心思想是在较小的屏幕上降低栅格数量,以保证页面元素各个屏幕下显示效果。
2. 如何搭建响应系统
2.1 确定策略
响应策略主要是列数量、槽宽度、页边距的宽度、导航栏根据窗口的宽度而发生变化。屏幕断点之间的页面布局,采用向下兼容的适配方式,576-767范围的屏幕宽度用屏幕断点576的设计布局去响应。
以《「交互规范」栅格系统让页面元素间距更统一》模块布局中 “全屏”为例,响应策略如下图(具体策略以各自项目实际情况为准)。
以《「交互规范」栅格系统让页面元素间距更统一》模块布局“在屏幕垂直中间选择合适的区域”为例,响应策略如下图(具体策略以各自项目实际情况为准)。
2.2 确定规则
2.2.1 屏幕断点上响应
页面布局只允许在屏幕宽度缩放到屏幕断点时发生变化,去响应下一个断点范围,屏幕断点上常见的响应规则有删除、堆叠、变更三种。
2.2.2 屏幕断点内响应
屏幕断点之间页面布局需要完全一致,不允许发生任何变化。屏幕断点内常见的响应规则有定高拉伸、等比例缩放、无删减拉伸三种。
2.2.3 Hover 动作兼容
在PC的交互方式主要鼠标和键盘,鼠标指针移入元素上面会出现样式上变化、展示更多的信息、产生浮层等多种情况,但平板和手机上的交互方式主要是手指,不会出现出现 PC特有的 hover 动作。
3. 响应式网站解析
3.1 微信读书
在浏览器屏幕宽度为721时,截取了 “微信读书” 页面进行了栅格还原;同时发现浏览器屏幕宽度的值分别是 560、720、960、1331 页面布局发生变化,根据屏幕断点之间的页面布局,采用向下兼容的适配方式,微信读书屏幕断点可以划分为320、560、721、961、1332,响应策略如下图:
3.2 爱彼迎
在浏览器屏幕宽度为744时,截取了 “爱彼迎” 页面进行了栅格还原;同时发现浏览器屏幕宽度的值分别是 743、1127 页面布局发生变化,根据屏幕断点之间的页面布局,采用向下兼容的适配方式,微信读书屏幕断点可以划分为320、744、1128,响应策略如下图:
3.3 Ant Design Pro
在浏览器屏幕宽度为768时,截取了 “Ant design Pro” 页面进行了栅格还原;同时发现浏览器屏幕宽度的值分别是 575、767、991 页面布局发生变化,根据屏幕断点之间的页面布局,采用向下兼容的适配方式,Ant design Pro 屏幕断点可以划分为320、576、768、992、1200,响应策略如下图:
「思考,优设网属于响应式吗?」
在浏览器屏幕宽度为768时,截取了 “优设网” 页面进行了栅格还原;同时发现浏览器屏幕宽度的值分别是 575、767、991 页面布局发生变化,根据屏幕断点之间的页面布局,采用向下兼容的适配方式,优设网 屏幕断点可以划分为320、576、768、992、1200,响应策略如下图:
总结
在项目中,提前定义好响应系统,确定了屏幕断点尺寸,设计师在设计中将会考虑的更全面,也为用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,操作体验更统一打下了基础。根据不同的业务场景响应系统也不尽相同,合适自己项目的响应系统才是好响应系统。
布局涉及的《交互规范:系统布局让页面模块更统一》、《「交互规范」栅格系统让页面元素间距更统一》、《响应式》到此已经全部分享完毕,希望对正在设计 0-1 项目的你有所帮助!!!
本文由 @前行的大熊 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议
屏幕的宽度_交互规范:响应式让屏幕利用更高,用户体验更佳相关推荐
- 网页制作中点一张图片变成图片浏览式_如何建设响应式网站?
随着H5响应式网站建设技术的日趋成熟,它大大降低了网站建设成本.在技术成熟之前,需要制作两套模板,一套是PC端一套是手机端.H5响应网站在访问浏览器时通过区分浏览器而不同.H5自适应网站是一组屏幕,可 ...
- vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验 镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现 作者上篇 ...
- jsp+左间距_交互规范:栅格系统让页面元素间距更统一
栅格系统在页面排版布局.尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律,从而减少了设计决策成本:提高了页面布局的一致性跟复用性.本文主要围绕什么是栅格系统,如何搭建栅格系统,栅格系统的应用 ...
- 显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
- 响应式移动端框架_简单,响应式,移动优先导航
响应式移动端框架 我们将构建一个简单的响应式网站导航. 我们的解决方案将帮助我们强调页面的内容 ,可以说是设计移动设备时的重中之重. 不会涉及JavaScript,我们将通过Mobile First方 ...
- (11)照虎画猫深入理解响应式流规范——响应式Spring的道法术器
本系列其他文章见:<响应式Spring的道法术器>. 前情提要:响应式流 | Reactor3快速上手 2 响应式编程之法 上一章本着"快速上手"的原则,介绍了响应式流 ...
- struct用法_精讲响应式webclient第1篇-响应式非阻塞IO与基础用法
笔者在之前已经写了一系列的关于RestTemplate的文章,如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层HT ...
- elementui 响应式导航栏网站_什么是响应式网站?响应式网站的优势介绍
响应式网站的含义 响应式网站指的是同一个网站,可以支持在iPai.手机.电脑以及其他各种设备上能够正常访问网站,它可以根据设备屏幕大小进行等比缩,不会影响到最终的展示效果. 举例说明: 浏览器窗口最大 ...
- 响应式滑动菜单_如何创建响应式滑动菜单
响应式滑动菜单 by Prashant Yadav 通过Prashant Yadav 如何创建响应式滑动菜单 (How to create a responsive sliding menu) I r ...
最新文章
- 使用B::Deparse模块对perl代码反汇编
- Ubuntu 安装 Qt 开发环境 简单实现
- 一般屏幕的3D模型是公开的吗?
- 读书笔记--互联网必读《长尾理论》作者克里斯.安德森
- LeetCode 1658. 将 x 减到 0 的最小操作数(哈希)
- linux mplayer_移植mplayer播放器到EK200开发板的步骤浅析
- python mysql工具类_Python工具类(一)—— 操作Mysql数据库
- 经典重温:FAIR提出SlowFast,用双分支非对称网络处理不同采样率的视频!代码开源!...
- 谷歌能让死去的亲人继续活在网络世界,即便他们从来不上网
- Luogu P4478 [BJWC2018]上学路线 卢卡斯+组合+CRT
- Hbase常用基础命令
- HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
- vs 通过命令参数 定义宏_YRC1000 宏程序命令(四十)
- 拓端tecdat|python爬虫进行Web抓取LDA主题语义数据分析报告
- AT91SAM9260不能与sam-ba连接的解决方法
- 多方位玩转“地平线新发布AIoT开发板——旭日X3派(Sunrise x3 Pi)” 插电!开机!轻松秒杀!
- ubuntu更新源出现错误
- 软件测试课程设计——智云云盘
- 欧空局(esa)下载哨兵-Sentinel影像-(史上最全讲解,老少皆宜)
- seaborn保存图片
热门文章
- 基于RNN和CTC的语音识别模型,探索语境偏移解决之道
- MindSpore21天实战营丨基于MindSpore的ResNet-50蘑菇“君”的识别应用体验
- 三分钟带你分清Mysql 和Oracle之间的误区
- Modelarts与无感识别技术生态总结(浅出版)
- 和华为云一起做件“伟大的事”,24万奖金等你来!
- 【Python3网络爬虫开发实战】 1-开发环境配置
- 【华为大咖分享】6.华为专家揭秘研发效能提升之道(后附PPT下载地址)
- SpringBoot自动装配探究
- Android线程池的简单使用
- adobe acrobat看PDF文档显示字体发虚,有毛刺的解决办法