最近在拜读一本网络体验相关的书《渐进增强,跨平台用户体验设计》,阅读后做些总结,消化一下书中的精髓。
在阅读本文前,可以先思考下面几个问题。
1。浏览网页的目的是什么?
2。浏览网页的时候会碰到哪些问题?
3。用什么方法来解决这些问题?
4。这些方法具体的实施步骤有哪些?
一、契机
1)内容
内容是Web页面的核心,也是用户浏览页面的目的。内容可以是某些信息或某个功能,用户浏览网页就是为了获得它们。接下来所做的一切都是为了让内容脱颖而出,向用户传达更清晰明确的意义,传递更准确、更具表现力的信息,让内容适应更多、更新的设备。内容是用户体验的核心,结构清晰、文字晓畅、组织得当的内容,是一个网页的基础。没有内容,你的网页从技术上相当于不存在。
2)遇到的问题
虽然所有用户访问的页面是同一份,但在浏览的时候,经常会碰到各种奇葩问题,例如页面打不开,内容看不到,功能不能用,错乱的排版等。这是由于目前设备和浏览器碎片化,用户使用环境和交互习惯多样化导致的。
3)渐进增强
在Web开发的时候,需要考虑的细节越来越多,设备的屏幕尺寸,内存,CPU,像素密度,操作系统,浏览器,网络,代理等,用户的文化水平,认知障碍,上网目的,习惯,需求等。要做一个每个人体验都一致的网站,几乎不可能。但还是得确保Web的可访问性,保证用户在任何环境、使用任何设备,都能正常访问核心内容或使用基本功能,并为他们提供当前条件下最好的体验,这正是渐进增强的核心思想。
渐进增强是一种兼容未知设备、平衡各种设备间交互可用性的思想,并不要求技术追新,但能让用户脱离设备制约,极大提升Web可用性。采用渐进增强在项目开始之前需要多花些时间去思考,但会为后来的设计开发节省大量的时间,资源,从而在单位时间内产出更多价值。
4)分层设计
实施渐进增强,可分为文档结构化,完善视觉设计和丰富交互设计这3个层面,从而实现从基本到复杂的体验。
5)容错性
HTML的容错性:浏览器在渲染页面的时候,会忽略不认识的元素和属性,而文档中的内容则会保留下来。得益于这种设计,HTML的发展并不会伤害过时的浏览器。
CSS的容错性:浏览器遇到不认识的CSS规则或属性,浏览器就会忽略解析错误出现之处周围的代码。
JavaScript的容错性:与HTML和CSS不同,JavaScript没有那么强的容错性,一旦程序中有一部分语义不明,这个程序就无法执行。
二、文档结构化
如果我们能够提供结构清晰、易于检索的内容,无论对于搜素引擎的抓取,还是对某些数据结构化工具的内容识别都是相当有用的,同时让你的内容适应更多、更新的浏览器。
1)按照Web标准开发
语义化元素组织HTML结构、使用CSS级联样式表来布局、压缩图片、优化DOM,使用脚本增强交互体验等,实现结构和样式、逻辑分离。过去人们喜欢用table布局,究其原因有二:第一,兼容性不错,不会出现特别显眼的问题;第二,大多数从业者尚未形成可访问性优化的意识。但随后,Google率先采取了HTML语义化分析的方法,来判断一个网页的内容和关键词意义的相关程度,各大搜索引擎也开始搜寻语义化的标签,开发出类似的排名技术。很多网站的流量都是从搜索引擎带入,这使得语义化标记和CSS样式布局的方法逐渐被大家接受。
2)使用合适的标签
当你在合适的地方使用一个语义恰当的标签的时候,内容的意义也会被强化,页面的内容结构变得更加清晰。如果使用不同的HTML元素来模拟某个控件,在浏览器中,会体现出不同的特征。就算我们可以实现从样式到行为的全面模拟,得到的也只是一个不稳定、代码臃肿、难以维护的组件。在页面中合理运用布局元素(section、article、header等),将页面划分为各个语义明确的区块,使网页的内容信息更好地传递给用户。
3)class和id的命名
一些常用的class和id的命名对HTML起到了一定的补充和建议作用,例如#header、#nav和.文章等。最后慢慢演变成了HTML标准元素,标题、导航和文章等。
4)微格式