[关闭]
@buoge 2017-12-25T16:18:04.000000Z 字数 1601 阅读 925

响应式设计与前端工程性

前端


pdf 已经读完,在dropbox云盘里
https://www.kancloud.cn/kancloud/responsive-typography/70844

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

字体选择

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

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

前端的工程性

二:响应式设计与应用

查询不同的比例并做适配

一切皆为弹性

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

  1. 使用内容流,响应式,bootstrap网格系统,适应屏幕
  2. 使用相对单位em,rem,vm vh 等,保证排版的适应型
  3. 断点,在跨度不同的分辨率上合理的适配不同的布局,MediaQuery
  4. 根据内容的展示场景,设置和里的最大值和最小值,保证展示效果
  5. 合理设置嵌套,模块化局部布局,整体化一,方便适配和调整
  6. 移动端和pc端看自己的业务需求,都要实现适配,无所谓先后
  7. web字体需要下载,时间可能久,但是美观,个性,系统自带的字体加载效率高,但是展示相对单调,只有几种字体
  8. 位图与矢量图按场景选择

    • 位图: jpg,png,gif 色彩还原度高,指尖上行,提到了一些很实用的工具,保证最小质量和最高的展示效果
    • 矢量图:svg 适合色彩通道相似的资源合并在一起提高存储效率和传输效率
  9. 响应式和自适应一起用 mediaquery+百分比布局,网格系统提升界面的展示效果和屏幕适配效果

四:响应式排版

垂直方向

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

手机的调整

* 字号缩小到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 动画
    • 配色
    • 文字样式
    • 缓冲,过渡的效果

简单的产品架构

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注