响应式设计与前端工程性

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

字体选择

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

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

• 行高，字体大小，间距，要根据整个展示范围的透视比例合理的去规划
• 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