Articles tagged 'Design'

响应式Web图形篇 —— icon fonts 的探析及应用

前言

像素完美(Pixel Perfection)、分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求。 可访问性(Accessability)、加载性能和重构灵活性是前端工程师们关心的主题。

当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题。

  • 需要为高PPI(aka Retina)显示设备准备@1.5x、@2x、@3x的图片素材;
  • 需要针对不同显示屏分辨率来调整优化排版;
  • 需要考虑多个分辨率版本的图片的加载性能问题;
  • 设备版本碎片化(Version Segmentation)带来的语义和可访问性的问题;
  • ……

响应式设计

Responsive Design

响应式设计(Responsive Design)作为「救世主」的身份,已经在 Web 界布道了好几年,丝毫不亚于当年的「Ajax」先生。其核心就是:针对不同设备和应用场景,作出合理性的适应。狭义地看,就是 Web page 在不同分辨率下借助 media query 来调整页面布局和内容显示,三个关键词是:Fluid grids, Flexible images, Media queries.

其中 Flexible images 是最为棘手的地方。因为前面提到,现在的设备多样化,不同分辨率和不同 PPI 给图片自适应带来了空前复杂度。目前还没有一套完美的解决方案来应对,W3C那边还在拟定 Responsive ImagesPicture Element 的相关标准。但在这之前你需要采取多管齐下的方式,针对媒体元素不同的使用场景,制定不同的自适应策略。目前主要有三种主流方式:

......

Read more →