写这些文字的时候,我的心情是凝重而复杂的。在自然灾害面前,人们是那么的脆弱。 在面对各种质疑的时候,你是否足够强大,也决定着你能走多远……

相对于汶川地震,我很欣慰的是互联网在救灾中起到了辅助救灾的作用。但是面对各个公司的寻人平台,却不尽如人意。作为前端开发者,与用户最接近,同时也直接影响网页的品质。这次一淘寻人的响应速度还是很快的。
那么在开发这种特殊类型的网页的时候,我们前端可以做什么?

1.无障碍性(Accessibility)

当同学们呵呵的讨论着这个寻人页面用什么背景比较好的时候,是否想过这种类型的网页,视觉设计真的很重要吗?面对亲人杳无音讯,眼前一片漆黑的绝望边缘,他们只是祈求通过这个平台带给他们一丝希望。

所以,此时此景,视觉设计真的不是那么重要了。与其给落水者一件漂亮的新装,不如伸出你可爱的双手。我们更需要关心的是可用性的设计。

例如在一淘寻人移动版中单选按钮实际上是很难点击的:

我们看一下代码不难发现问题:

T18HSXXyVhXXcFTJcW-337-165

label 标签错误的加到了性别上,而男、女选项根本没有加 label 标签,就别提正确的使用 for 属性了。这是很可悲的,甚至很多人根本认为这就不是一个问题。Web 的初衷是什么?让所有人无障碍的使用网页。这不是技术问题,不是时间问题,是认知的问题。

关于 label 标签的写法推荐《表单显式label和隐式label对屏幕阅读器用户的影响》
另外,在 iOS 上还会有上一项,下一项的快速切换按钮,所以合适的 tab-index 也能提升页面的可用性。
除了一淘寻人和360寻人,其他各大平台的寻人页面更像是给自己打广告,做外链的,特别是搜狗寻人之前的版本(后来已经改了),发布按钮不在第一屏,还有一个 flash 的视频:T1rY1mXsNcXXcXdxQZ-1138-1168

2.可达性

在这种特殊情况下,为用户节约每一个字节的流量都是可贵的,更好的保证页面正确完整的到达用户终端,是很有必要的。虽然三大电信运营商保证灾区手机不会停机,但是我不知道对于3G流量是否可以保证不会用完,抑或那边3G信号是否畅通。

作为前端,压缩HTML、减少图片的使用、不使用JS,都是可以优化的要点。

3.可共享性

很可悲的是,之前我们大部分人(包括我自己)都不知道有「 PFIF (人员查找交换格式)」这个标准,相比Google,不仅想到了需要这样一个标准,而且做出来了,开源出来了,同时倡导大家使用统一的数据格式:

T11fKlXwVcXXXWCsw7-770-185

上图文字:PFIF(Person Finder Interchange Format, http://t.cn/zTiYy26 )是一种开源数据标准,只要采用此标准构建应用,就可让信息在不同平台之间分享。Google Person Finder即基于PFIF创建。http://t.cn/zTic7AJ

4.可持续性

Google 的工程师张涤凡在远在美国的 Google 工程师是如何对四川雅安地震进行快速反应,并及时推出了 Person Finder 寻人页面?这个问题中提到了 Google 对于自然灾害的应急预案,一个国外公司可以如此迅速的对国内事件作出应急方案,实在是值得敬佩的。当我在与张涤凡的聊天中也谈及了这个问题,很可惜,由于涉及到公司机密,不便透露了。

5.隐私性

关于这一点,一淘寻人也做了很好的处理了,手机号码已经自动生成图片,同时我们每天要处理大量的垃圾广告信息,这也是对我们的一大考验。即便是受灾用户,他们也应该得到很好的隐私保护,不能让这些沦为社会工程学攻击的信息来源。

6.下一次能否更好?

随着国内响应式开发如火如荼的进行着,我希望各位亲们,可以认真的思考一下:到底什么是响应式网页?

响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求,让每位用户无障碍的使用网页,这是 Web 的初衷,也是响应式的初衷。

在这种寻人页网页上,我们更加应该尊重内容优先,移动优先的设计原则,做到更好的响应。

早上听到一个朋友说他献完血爬楼梯头很晕,表面上他只是说想知道自己的血型,但是我知道他是想为地震中的人们做点什么。

也许你会去捐款,也许你会去一线当志愿者,也许你可以把网页做的更好,也许你可以转发此文……

但是请你不要无动于衷,让我们为受灾的同胞们做点什么吧!

愿所有灾难中的人们平安健康!

目前的几大寻人平台:

转载自http://www.iyunlu.com/view/lenovo/73.html