在用戶(hù)體驗(yàn)這個(gè)行業(yè)，經(jīng)常會(huì)聽(tīng)到，可用性，可訪問(wèn)性這樣專(zhuān)業(yè)的名詞，但是，事實(shí)上在很多產(chǎn)品實(shí)現(xiàn)過(guò)程里都忽略了這一點(diǎn)！WHY？

舉個(gè)很簡(jiǎn)單的例子，用戶(hù)的注冊(cè)流程，很多交互設(shè)計(jì)師在做這塊流程設(shè)計(jì)的時(shí)候都無(wú)可避免的忽略了部分可用性和可訪問(wèn)性，直白點(diǎn)說(shuō)，產(chǎn)品的應(yīng)用場(chǎng)景沒(méi)有cover全用戶(hù)群，損害了這部分用戶(hù)的可用性和訪問(wèn)性。

太抽象？不明白？好，那我們就用戶(hù)注冊(cè)流程展開(kāi)，侃侃流程中用戶(hù)提交表單的設(shè)計(jì)。

看上圖，這是現(xiàn)有支付寶注冊(cè)流程中的一塊功能，要實(shí)現(xiàn)的功能很簡(jiǎn)單，個(gè)人用戶(hù)直接填寫(xiě)注冊(cè)信息，是企業(yè)用戶(hù)的話，就先選擇企業(yè)，再填寫(xiě)注冊(cè)信息，最后提交表單，完成操作。流程早就發(fā)布上線了，看上去很和諧，但是不然……

不然在哪里呢？應(yīng)用場(chǎng)景，沒(méi)錯(cuò)，您答對(duì)了。交互設(shè)計(jì)師在設(shè)計(jì)這個(gè)流程的時(shí)候忽略了一些場(chǎng)景，沒(méi)有考慮到那些客戶(hù)端對(duì)JavaScript不支持或支持不好的用戶(hù)。做個(gè)實(shí)驗(yàn)，打開(kāi)支付寶的注冊(cè)頁(yè)面，然后禁用腳本，你會(huì)發(fā)現(xiàn)，不論怎么搞，你都無(wú)法點(diǎn)出企業(yè)類(lèi)的注冊(cè)信息了！OK,現(xiàn)在明白了吧，企業(yè)類(lèi)的用戶(hù)在這種場(chǎng)景下基本上就game over了，搞不好還會(huì)再來(lái)上一句“FT，支付寶真TMD難用??！”

聽(tīng)到這里，或許很多交互設(shè)計(jì)師坐不住了，“這不是前端開(kāi)發(fā)工程師要去考慮的嗎？”，我認(rèn)為要這樣來(lái)理解，如果單純的從前端開(kāi)發(fā)的角度而言，這種實(shí)現(xiàn)方式是無(wú)可厚非的。什么做法？對(duì)的，要說(shuō)明一下……

實(shí)現(xiàn)方案1：采用css樣式設(shè)置企業(yè)注冊(cè)信息的容器默認(rèn)為隱藏，當(dāng)用戶(hù)點(diǎn)選企業(yè)后通過(guò)js腳本改變?nèi)萜鞯碾[藏屬性為顯示。

實(shí)現(xiàn)方案2：通過(guò)腳本控制企業(yè)注冊(cè)信息的容器的初始狀態(tài)為隱藏，當(dāng)用戶(hù)點(diǎn)選企業(yè)后通過(guò)腳本改變?nèi)萜鞯碾[藏屬性為顯示。

一般情況下，前端會(huì)有兩種實(shí)現(xiàn)方案，拋開(kāi)可訪問(wèn)性，光從Developer這個(gè)層面上來(lái)選擇的話，我選第一種?，F(xiàn)在的注冊(cè)流程中用的也是這個(gè)方案。

討論一下這兩個(gè)方案吧，各有優(yōu)缺點(diǎn)，但是今天我們討論的是可用性和可訪問(wèn)性，所以很顯然第一種方案是不可取的。那為什么前端開(kāi)發(fā)工程師還是選擇了她呢？自然也有他的道理，如果采用第二種方案的話，勢(shì)必要在頁(yè)面結(jié)構(gòu)加載完成后，再去初始化要隱藏的容器，當(dāng)客戶(hù)端網(wǎng)速不佳的情況下，會(huì)先顯示企業(yè)注冊(cè)信息的內(nèi)容，幾秒后又不見(jiàn)了，體驗(yàn)上有所折扣。但是就可用性和可訪問(wèn)性而言，是無(wú)懈可擊的。假設(shè)，當(dāng)前用戶(hù)環(huán)境禁用了腳本，那么他訪問(wèn)這個(gè)頁(yè)面的時(shí)候，企業(yè)注冊(cè)信息不會(huì)被隱藏，會(huì)顯示在當(dāng)前頁(yè)面上，易用性可能有一些缺失，但是功能上是可訪問(wèn)可用的，整個(gè)流程是健全的。相比兩種情況，我想我會(huì)選擇采用方案2。當(dāng)然如果你不屑可用可訪問(wèn)性，那就磚頭砸我吧！

很多交互設(shè)計(jì)師都會(huì)想當(dāng)然的認(rèn)為，類(lèi)似這樣的應(yīng)用場(chǎng)景受重群體是很小的，也許真實(shí)的數(shù)據(jù)會(huì)讓你大吃一驚！總而言之，多為用戶(hù)想想，是設(shè)計(jì)師最起碼的職業(yè)道德！

可用性和可訪問(wèn)性的重要還能表現(xiàn)在很多應(yīng)用上，如語(yǔ)音閱讀器，手機(jī)瀏覽器等，這些在ppk談javascript中有比較詳細(xì)的描述，有興趣的話，可以查閱《ppk談javascript》?？偠灾?，語(yǔ)義化的頁(yè)面結(jié)構(gòu)在以后互聯(lián)網(wǎng)產(chǎn)品的可用性和可訪問(wèn)性中起著非常重要的作用！

說(shuō)到這里，我相信看懂的都應(yīng)該明白可用性和可訪問(wèn)性是咋會(huì)事了，除了明白，你是不是也看到了一些問(wèn)題呢？沒(méi)錯(cuò)，絕對(duì)是有問(wèn)題的，交互設(shè)計(jì)和前端開(kāi)發(fā)過(guò)程中都存在的問(wèn)題，專(zhuān)業(yè)化路線絕對(duì)不是單一的，專(zhuān)業(yè)化cover的度很重要！

原文：http://ued.alipay.com/?p=826