By

页面设计策略

前端开发,最重要的是让更多的人访问到我们的页面,并给他们优秀的用户体验。但在这美丽而残酷的世界,总有那么一些事情不尽如人意,浏览器之间差异便是其中一个。如今网页开发者和网页设计师们需要一个优秀的设计策略来引导跨浏览器、跨设备网页开发。这里就介绍了三种主流的设计策略。

浏览器兼容设计策略

优雅降级(适度退化)

一般情况下,我们总是希望自己的网页能在所有的浏览器中能正常工作,但事实总是那么的残酷(因为M记的IE)。一种比较常见的策略,名叫优雅降级(也叫适度退化)。先使得网页能在所有的现代浏览器中正常工作(不一定是最新,一般是当前最新版本的上一个发行版本),然后通过代码来监测网页能否在用户使用的老式浏览器中正常工作。比如IE自身的盒子模型问题,开发者就会根据具体的IE版本实现来进行降级。也就是说,如果使用优雅降级的策略,我们需要实现整个网页的所有功能和效果,为无法支持所有功能的浏览器专门去制定一些候选方案,关注其中的核心功能,在老式浏览器上降低用户体验而保持核心功能能够正常工作。

渐进增强

渐进增强的策略与优雅降级相反。首先从能被所有浏览器所支持的基本功能开始,逐步的去添加现代浏览器所支持的功能。用户体验中内容为王,在网页实现时最重要的就是将主要内容展现给用户。渐进增强就很符合这个理念。

要实现渐进增强,首先需要为所有设备准备好清晰的语义化HTML以及完善的内容,再通过无侵入的方式想页面中增加无害于基础浏览器的额外样式和功能。这样当浏览器更新换代时,就会不断提升用户体验

不要为了兼容舍弃新技术

有很多人整日只关注老式浏览器上的表现情况,和他们一谈HTML5和CSS3,他们的态度是:“IE6(7)支持吗?不支持用(学)它干嘛”,我很鄙夷这种想法。我们不应该仅仅为了照顾那些老古董(老式浏览器用户),而阻碍大批量现代浏览器用户享受CSS3和HTML5所带来的优秀视觉体验和交互设计。同时浏览器本身也会随着时间而变得更加强大,老式浏览器所占的份额也越来越小,没理由不去使用CSS3和HTML5。

响应式页面设计策略

移动先行

在响应式页面设计时我们需要考虑的几个问题:

  1. 允许更多的人访问我们的网页(目前77%的人拥有手机,2011年出售的手机中85%安装了浏览器)
  2. 让设计者关注核心的内容和功能(如果你失去了屏幕大小的80%你会怎么做?)
  3. 让设计者关注新技术,热爱创新(地理位置、触碰事件等等)

响应式页面的核心内容:

  1. 根据设备的屏幕大小流式布局
  2. 伸缩的图片和媒体保证在任何屏幕大小中完整显示
  3. 通过为媒体查询增加断点

如今,随着移动互联网的发展,移动设备(智能手机、平板电脑等)所占有的比重越来越重,这也决定了视口大小的多种多样。同时随着传统数字设备(台式机、笔记本电脑、上网本)的发展,其视口大小也在不断扩大。这也导致了需要兼容的最大视口与最小视口的大小的差距逐渐增大。响应式WEB设计业应运而生。我们的目标就是(没有蛀牙!),让我们的页面兼容更多的设备。但是需要注意的是,将页面做成响应式页面只是权宜之计,最好的方法(预算够)是为移动端设备专门开发一个页面。这样可以为移动端设备做一些针对性的优化。

移动先行就是一种响应式页面设计策略,采用渐进增强的思想。最初只是为移动端的小视口设备(智能手机等)展现核心内容和功能,然后通过媒体查询为中视口设备(平板电脑等)添加更多的功能和视觉效果,再在大视口传统数字设备(台式机、笔记本电脑)上添加所有的内容和更加复杂的视觉效果,最后为了兼容超大视口(高分屏),可以适当加大原有内容的显示效果,并同时保持内容居中。

参考文献

Written by
前端开发工程师