响应式设计与前端工程性
前端
pdf 已经读完，在dropbox云盘里
https://www.kancloud.cn/kancloud/responsive-typography/70844
一：响应式的几个基本知识
字体选择
有衬线和无衬线，那种字体看自己的美学意识和考虑
透视比例与体验一致性保证（人眼的位置）
- 行高，字体大小，间距，要根据整个展示范围的透视比例合理的去规划
- pc 离人的眼相对较远，所以需要更大的字号和间距
- iPhone 离人眼距离相对较近，为了保持体验的一致性需要调小字号间距和行高
前端的工程性
- 界面设计，交互的工程性，软件界面是呈现给用户，于此同时也是关于视觉设计和技术实现的妥协。
- 在不断的技术与设计的探索中，结合业务的场景，根据权衡和优先级做出决策。
- 技术和设计合力能让产品和业务的效率最大化
二：响应式设计与应用
查询不同的比例并做适配
- Media Query 处理屏幕像素差距较大的问题
- mediaquery.js
一切皆为弹性
- 弹性的图片根据分辨率调整的大小的size
- 响应式图片根据分辨动态加载不同分辨率的图片
iPhone下禁用图片缩小
动态的隐藏内容（bootstrap栅栏网格系统）
- 触屏设备也是需要考虑的范畴，目前触屏设备越来越多，需要在它上面的体验做适配
- 加载：加载超过5秒就会有74%的用户离开页面
更多指标参数可以参见这里：https://www.jianshu.com/p/0992cb75730f
三 响应式设计的基本原则：
- 使用内容流，响应式,bootstrap网格系统，适应屏幕
- 使用相对单位em,rem,vm vh 等，保证排版的适应型
- 断点，在跨度不同的分辨率上合理的适配不同的布局，MediaQuery
- 根据内容的展示场景，设置和里的最大值和最小值，保证展示效果
- 合理设置嵌套，模块化局部布局，整体化一，方便适配和调整
- 移动端和pc端看自己的业务需求，都要实现适配，无所谓先后
- web字体需要下载，时间可能久，但是美观，个性，系统自带的字体加载效率高，但是展示相对单调，只有几种字体
位图与矢量图按场景选择
- 位图： jpg,png,gif 色彩还原度高，指尖上行，提到了一些很实用的工具，保证最小质量和最高的展示效果
- 矢量图：svg 适合色彩通道相似的资源合并在一起提高存储效率和传输效率
响应式和自适应一起用 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 自动改变标题文字的大小，无法应用段落
响应式的最佳实践
- 有限专注极端的尺寸：pc mobile
- 优先考虑不同断点之间内容布局
- 应用弹性图片策略，提早做处理的准备
- 从基础元素就考虑，模块化设计，考虑响应式
- 前端工程性，设计提出方案，让开发者给出技术角度的视觉体验反馈和建议，二者在磨出下一版
- 根据透视比例设置合理的 行高，字号，边距
- 根据设备和分辨率动态决定模块展示和模块内部内容的展示
- 页面细节的打磨
简单的产品架构
- 简单的产品架构，有利于产品的快速成长
- 清晰的产品逻辑会减少用户的负担感，提高交互的效率和喜悦
