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

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

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

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

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

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

實(shí)現(xiàn)方案1：

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

實(shí)現(xiàn)方案2：

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

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

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

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

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

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