响应式设计与前端工程性

一:响应式的几个基本知识

字体选择

有衬线和无衬线,那种字体看自己的美学意识和考虑

透视比例与体验一致性保证(人眼的位置)

  • 行高,字体大小,间距,要根据整个展示范围的透视比例合理的去规划
  • pc 离人的眼相对较远,所以需要更大的字号和间距
  • iPhone 离人眼距离相对较近,为了保持体验的一致性需要调小字号间距和行高

前端的工程性

  • 界面设计,交互的工程性,软件界面是呈现给用户,于此同时也是关于视觉设计和技术实现的妥协。
  • 在不断的技术与设计的探索中,结合业务的场景,根据权衡和优先级做出决策。
  • 技术和设计合力能让产品和业务的效率最大化

二:响应式设计与应用

查询不同的比例并做适配

  • Media Query 处理屏幕像素差距较大的问题
  • mediaquery.js

一切皆为弹性

  • 弹性的图片根据分辨率调整的大小的size
  • 响应式图片根据分辨动态加载不同分辨率的图片
  • iPhone下禁用图片缩小

  • 动态的隐藏内容(bootstrap栅栏网格系统)
    • 隐藏模块内容
    • 动态调整模块内的内容展示
  • 触屏设备也是需要考虑的范畴,目前触屏设备越来越多,需要在它上面的体验做适配
  • 加载:加载超过5秒就会有74%的用户离开页面
    更多指标参数可以参见这里:https://www.jianshu.com/p/0992cb75730f

三 响应式设计的基本原则:

  1. 使用内容流,响应式,bootstrap网格系统,适应屏幕
  2. 使用相对单位em,rem,vm vh 等,保证排版的适应型
  3. 断点,在跨度不同的分辨率上合理的适配不同的布局,MediaQuery
  4. 根据内容的展示场景,设置和里的最大值和最小值,保证展示效果
  5. 合理设置嵌套,模块化局部布局,整体化一,方便适配和调整
  6. 移动端和pc端看自己的业务需求,都要实现适配,无所谓先后
  7. web字体需要下载,时间可能久,但是美观,个性,系统自带的字体加载效率高,但是展示相对单调,只有几种字体
  8. 位图与矢量图按场景选择
    • 位图: jpg,png,gif 色彩还原度高,指尖上行,提到了一些很实用的工具,保证最小质量和最高的展示效果
    • 矢量图:svg 适合色彩通道相似的资源合并在一起提高存储效率和传输效率
  9. 响应式和自适应一起用 mediaquery+百分比布局,网格系统提升界面的展示效果和屏幕适配效果

四:响应式排版

垂直方向

  • 合理设置 行高,字号,边距 保证垂直方向的韵律感
    • font 18px;
    • line-height 32px;

根据透视比例适配屏幕的效果

手机的调整

* 字号缩小到14px;
* 间隙变小20px;
* 行高变小22px;

良好阅读体验的3点指标(如何把握韵律感和呼吸感):

 1. 搞清楚人们如何阅读,搞清楚用户的使用场景和使用习惯2. 保证能够惬意的阅读某一行然后轻松跳回下一行的开头3. 快速理解不同文章和章节之间的优先级和重要性

五:如何实践响应式

测试指标:mobitest 进行加载测试

优化的地方(响应式和载入速度的权衡和取舍)

1. css uglifyJS 压缩js
2. compass 压缩css
3. 根据设备,确定是否需要,地图,图像,视频等有选择展示
4. 弹性图像,根据分辨率加载不同大小的图片
5. FitTxt 自动改变标题文字的大小,无法应用段落

响应式的最佳实践

  1. 有限专注极端的尺寸:pc mobile
  2. 优先考虑不同断点之间内容布局
  3. 应用弹性图片策略,提早做处理的准备
  4. 从基础元素就考虑,模块化设计,考虑响应式
  5. 前端工程性,设计提出方案,让开发者给出技术角度的视觉体验反馈和建议,二者在磨出下一版
  6. 根据透视比例设置合理的 行高,字号,边距
  7. 根据设备和分辨率动态决定模块展示和模块内部内容的展示
  8. 页面细节的打磨
    • css 动画
    • 配色
    • 文字样式
    • 缓冲,过渡的效果

简单的产品架构

  • 简单的产品架构,有利于产品的快速成长
  • 清晰的产品逻辑会减少用户的负担感,提高交互的效率和喜悦

https://www.kancloud.cn/kancloud/responsive-typography/70844

转载于:https://www.cnblogs.com/buoge/p/9347236.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

aspx写入mysql_Asp.net用户登陆数据库验证与注册写入数据库

1.思路与效果图Index.aspx注册注册成功登陆登陆验证通过进入内容页1登陆没通过验证思路:首先建一个Sqlserver数据库Student,再建一个student表(name,pwd)存放用户名和密码。然后注册功能的实现:通过数据库插入信息到表的Sql语句来实现,成功提…

在WildFly中将Apache Camel和Spring添加为jboss模块

这些天,我在玩Wildfly , Apache Camel和Spring 。 在EAR / WAR之间进行通信的一种简单方法是使用Camel的direct-vm组件。 有或没有骆驼,有很多方法可以实现这一目标。 骆驼在WildFly中就像一个饰物,不需要任何额外的配置。 骆驼很…

页面体验提升小技巧—渐进式图片

前端性能方面有许多可优化的点,而这些优化带来的就是用户体验的提升。今天我们要聊的东西并不能给性能带来提升,但却能在一定程度上提升用户的体验。 参考博客 场景:在访问页面的时候如果图片较大或者网速慢的情况我们会看到图片加载起来是有…

php mysql无限分类排序_PHP 无限级分类、排序

lyk625358header(content-type:text/html;charsetutf-8);echo "";//-无限级排序,自己优化改良的,清除上次调用此函数后留下的静态变量的值$arr array(array(id>2,cname>分类2,parent_id>1),array(id>9,cname>分类9,parent_id>8),array(id>1,cn…

Java方法中的参数太多,第5部分:方法命名

在上一篇文章 (有关处理Java方法中过多参数的系列文章的 第4部分 )中,我将方法重载视为一种向客户提供需要较少参数的方法版本或构造函数的方法。 我描述了该方法的一些缺点,并建议从方法重载中摆脱出来以使用不同名称的方法至少可…

微信小程序搭配小白接口,自己没有服务器也能开发哦

这里将重点介绍,在自己没有服务器的情况下,如何在微信小程序里直接调用小白接口。 前提 假设你已经开通微信小程序,如果还没有,可前往微信公众平台开通:https://mp.weixin.qq.com 假设你已经开通小白接口&#xff0c…

LeetCode:34. 在排序数组中查找元素的第一个和最后一个位置

1、题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。 你的算法时间复杂度必须是 O(log n) 级别。 如果数组中不存在目标值,返回 [-1, -1]。 示例 1: 输入: nums [5,7,7,8,8,10], targ…

怎么将自己做好的网站发布到互联网上呢?

如何将自己的网站上传到网站空间。 1.需要有一个上传网站的软件,在这里推荐大家使用 FTP全称是flashfxp这个软件,这个功能功能齐全而且操作简单。大家可以先去下载一下这个软 件 2. 打开FTP,界面如下 3.我们要点击链接按钮,然后FT…

vue动态生成下拉框_vue+elementui 动态创建下拉框

v-for"(domain, index) in dynamicValidateForm.domains":label"‘站点‘ index":key"domain.id">v-for"item in testData":key"item.id":label"item.testName":value"item.id":disabled"item…

[贝聊科技]网页端「应用跳转」技术实现演变

本文作者:Mr.Luo ,贝聊前端经理。本文同时发布于作者 个人博客 。 由于网页传播的便捷性,从网页向APP导流几乎是所有APP厂商都会采用的推广手段,具体来说就是在网页上提供一些触发点(例如按钮、链接)&#…

常见Java错误的十大列表(前100名!)

前10名名单非常受欢迎,有趣且内容丰富。 但是有很多! 如何选择合适的? 这是一个元前10名列表,可帮助您找到前10名的前10名列表。 在更令人讨厌的笔记上: SELECT TOP 10 mistake FROM source1 UNION ALL SELECT TOP 10…

Ubuntu 16.04 下octave的使用入门

SciLab和octave是开源的且免费的矩阵计算工具,二者都有希望成为矩阵计算的新宠。相比之下, octave与MatLab的兼容性更高。octave遵循GPL协议(GNU General Public License),用户可以单独发行octave或者包含在其产品中发…

hydra mysql 爆破_Hydra(爆破神器)使用方法

文本框 textarea 动态显示行数(简单文本编辑器)工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. python中set使用In [2]: a set() # 常用操作1 In [3]: a Out[3]: set() In [4]: type(a) Out[4]: set In [5]…

消除switch语句以获得更好的代码结构

消除switch语句以获得更好的代码结构 代码演化1:纯switch function counter(state 0, action) {switch (action.type) {case INCREMENT:return state 1case DECREMENT:return state - 1default:return state} }用三元运算符代替 const counter (state 0, ac…

HTTP请求中POST与GET的区别

一、原理区别 一般我们在浏览器输入一个网址访问网站都是GET请求;在FORM表单中,可以通过设置Method指定提交方式为GET或者POST提交方式,默认为GET提交方式。 HTTP定义了与服务器交互的不同方法,其中最基本的几种:GET,P…

Linux服务器配置---安装vsftpd

安装vsftpd 大多数Linux系统都使用vsftpd,因此这里我们也安装vsftpd 1、安装vsftpd [rootlocalhost phpMyAdmin]# yum install -y vsftpd Loaded plugins: fastestmirror, refresh-packagekit, security Installed: vsftpd.i686 0:2.2.2-11.el6_4.1 …

Java方法中的参数太多,第1部分:自定义类型

我认为构造函数和方法中冗长的参数列表是Java开发中的另一个“ 危险信号 ”,就逻辑和功能而言,它们不一定是“错误的”,但通常暗示当前或将来出现错误的可能性很高。 在一小部分帖子中,我介绍了一些可用于减少方法或构造函数的参数…

mysql怎么制作柱状图_从数据库中取出最近三十天的数据并生成柱状图

在终端用cd 命令进入文件目录说明:此处例子我是拿项目中的一个例子讲解的。1、新建一个项目 :用终端输入:zf create project Airline 格式:zf create action project project-name 备注:这些格式可以在终端输入zf 查看…

关于ES6的Promise

JavaScript的异步处理 提到JavaScript的异步处理,也许很多人和我一样想到利用回调函数。 例如: firstAsync(function(data){//处理得到的 data 数据//....secondAsync(function(data2){//处理得到的 data2 数据//....thirdAsync(function(data3){//处…

为hexo博客添加基于gitment评论功能

关于gitment gitment其实就是利用你的代码仓库的Issues,来实现评论。每一篇文章对应该代码仓库中的 一个Issues,Issues中的评论对应你的博客每篇文章中的评论。如果你是用github的博客的话 用起来将会十分的方便。 注册github应用 首先需要在这注册一个OAuth Applic…