優(yōu)秀網(wǎng)頁(yè)前端設(shè)計(jì)的指標(biāo)有哪些

這篇文章給大家介紹優(yōu)秀網(wǎng)頁(yè)前端設(shè)計(jì)的指標(biāo)有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

網(wǎng)頁(yè)的可訪問(wèn)性，似乎只能由前端來(lái)重視并實(shí)現(xiàn)。這點(diǎn)挺可悲，作為可用性的一部分——可訪問(wèn)性，居然只能由技術(shù)人員來(lái)掌控，這是我不愿意看到的。但反過(guò)來(lái)，這給前端開(kāi)發(fā)工程師們新增加了一個(gè)責(zé)任，同時(shí)為如何區(qū)分優(yōu)秀的前端增加了一個(gè)指標(biāo). 事情的緣由是，前兩個(gè)禮拜打了個(gè)“飛的”去北京玩，見(jiàn)了一位在百度做前端的朋友。過(guò)去一年以來(lái)，這家伙就不停的在鼓動(dòng)我去他們那個(gè)邪惡的公司。當(dāng)然，見(jiàn)面之后就不能再當(dāng)面稱(chēng)呼人家是邪惡的公司啦，所以我就找了個(gè)理由，說(shuō)你們那個(gè)“百度盲道”做得太垃圾了。他當(dāng)然就很虛心的問(wèn)我為什么啦。所以我也只能很心虛的糊弄了幾句，說(shuō)回上海之后詳細(xì)告訴他。
事情的緣由是，前兩個(gè)禮拜打了個(gè)“飛的”去北京玩，見(jiàn)了一位在百度做前端的朋友。過(guò)去一年以來(lái)，這家伙就不停的在鼓動(dòng)我去他們那個(gè)邪惡的公司。當(dāng)然，見(jiàn)面之后就不能再當(dāng)面稱(chēng)呼人家是邪惡的公司啦，所以我就找了個(gè)理由，說(shuō)你們那個(gè)“百度盲道”做得太垃圾了。他當(dāng)然就很虛心的問(wèn)我為什么啦。所以我也只能很心虛的糊弄了幾句，說(shuō)回上海之后詳細(xì)告訴他。
回來(lái)之后，就馬上很虛心的翻出一本老舊的電子書(shū)——《Dive Into Accessibility》，認(rèn)認(rèn)真真的看了一遍。
然后驚奇的發(fā)現(xiàn)：
1. 雖然我沒(méi)看過(guò)這本書(shū)，但里面講的大部分，我平日里都有遵守。果然，堅(jiān)持好習(xí)慣是值得表?yè)P(yáng)的。
2. 網(wǎng)頁(yè)的可訪問(wèn)性，似乎只能由前端來(lái)重視并實(shí)現(xiàn)。這點(diǎn)挺可悲，作為可用性的一部分——可訪問(wèn)性，居然只能由技術(shù)人員來(lái)掌控，這是我不愿意看到的。但反過(guò)來(lái)，這給前端開(kāi)發(fā)工程師們新增加了一個(gè)責(zé)任，同時(shí)為如何區(qū)分優(yōu)秀的前端增加了一個(gè)指標(biāo)。
好吧，下面我把這本Dive Into Accessibility的內(nèi)容作一個(gè)摘要，看看對(duì)于可訪問(wèn)性，應(yīng)該要注意哪些問(wèn)題：
1. 標(biāo)明語(yǔ)言（Identifying your language）
這一條的意思是，加上lang屬性，如。如果其中有一段是其他的語(yǔ)言，就在那一段的標(biāo)簽上加lang屬性。這一條我做得不好，以后記得。
2. 構(gòu)建有意義的頁(yè)面標(biāo)題（Constructing meaningful page titles）
有幾點(diǎn)值得一提：
a) 做頁(yè)面時(shí)，千萬(wàn)不要忘記寫(xiě)title。我見(jiàn)過(guò)好多頁(yè)面的title是“Untitled Document”或“新建頁(yè)面”，丟臉啊~
b) title到底應(yīng)該是“小標(biāo)題”在前呢，還是“大標(biāo)題”在前？現(xiàn)在的慣例似乎都是“小標(biāo)題”在前，比如“影音娛樂(lè)首頁(yè)_新浪網(wǎng)”。但我個(gè)人倒是有個(gè)看法，或許大標(biāo)題在前比較好。這樣當(dāng)我把“新浪網(wǎng)_影音娛樂(lè)首頁(yè)”、“新浪網(wǎng)_新聞中心首頁(yè)”放入收藏夾時(shí)，它們會(huì)因?yàn)橐粜蚺判蚨粼谝黄?，而不是散亂在各處。當(dāng)然這個(gè)也不一定，僅供參考。
c) 對(duì)于英文的標(biāo)題，一定要注意盡量不要把The放在title的前面，否則你的網(wǎng)頁(yè)在收藏夾里就會(huì)被排在T開(kāi)頭了。
3. 提供額外的導(dǎo)航輔助（Providing additional navigation aids）
這一條是說(shuō)要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 這個(gè)。這個(gè)其實(shí)我知道。但是貌似對(duì)于頁(yè)面里這么多鏈接，要都加上rel和rev屬性，有點(diǎn)難度。
4. 先呈現(xiàn)主要內(nèi)容（Presenting your main content first）
好啦，這就是一條典型的“指望優(yōu)秀的CSS”的可訪問(wèn)性原則啦。把<div class=”main”>放在<div class=”side”>的前面，其實(shí)挺考驗(yàn)CSS技術(shù)的。一道著名的題目是：如何讓側(cè)欄固定寬度，主欄寬度自適應(yīng)，同時(shí)主欄的HTML要在側(cè)欄 的前面。我很想放在我的面試題里，可又覺(jué)得是不是太刁難了。但是，無(wú)論如何，這道題目很重要！
5. 用于跳過(guò)導(dǎo)航欄的鏈接（Skipping over navigation links）
很重要！這個(gè)在骨灰級(jí)網(wǎng)頁(yè)標(biāo)準(zhǔn)教程《網(wǎng)站重構(gòu)》里就提到了。只是有一點(diǎn)我比較懷疑，如果把skip link設(shè)為display:none，難道不怕被閱讀器也忽略掉么？
6. 安全的使用顏色（Using color safely）
這條其實(shí)講了幾個(gè)要點(diǎn)：
a) 顏色對(duì)比要夠，否則眼神不好的人看起來(lái)費(fèi)勁
b) 鏈接的顏色，最好用藍(lán)色（像我比較喜歡用#09c）
c) 鏈接最好有下劃線
7. 用“真鏈接”（Using real links）
意思是，即便這個(gè)鏈接是用于觸發(fā)Ajax，也要把Ajax代碼片段的URL放在href里，好讓搜索引擎以及閱讀器等等能夠爬到。關(guān)于此條，請(qǐng)參看土豆網(wǎng)首頁(yè)的“挖土豆”一塊。
8. 給鏈接加“title”屬性（Adding titles to links）
這個(gè)還用說(shuō)么，可用性兩大重點(diǎn)：a的title和img的alt。
呼~(yú)~~先結(jié)束這第一回合吧。如果你對(duì)可用性感興趣，可以詳細(xì)的讀一下這本“Dive Into Accessibility”，尤其是前5節(jié)。然后可以再去看看那個(gè)可惡的“百度盲道”，我接下來(lái)會(huì)專(zhuān)門(mén)用一篇來(lái)詛咒這個(gè)忽悠障礙人士的無(wú)良黑心產(chǎn)品。

網(wǎng)頁(yè)的可訪問(wèn)性，似乎只能由前端來(lái)重視并實(shí)現(xiàn)。這點(diǎn)挺可悲，作為可用性的一部分&mdash;&mdash;可訪問(wèn)性，居然只能由技術(shù)人員來(lái)掌控，這是我不愿意看到的。但反過(guò)來(lái)，這給前端開(kāi)發(fā)工程師們新增加了一個(gè)責(zé)任，同時(shí)為如何區(qū)分優(yōu)秀的前端增加了一個(gè)指標(biāo).
9. 定義鍵盤(pán)快捷鍵（Defining keyboard shortcuts）
意思就是定義accesskey屬性。這個(gè)好說(shuō)。有個(gè)關(guān)鍵是如何在瀏覽器里使用。IE里是“alt+”，并且只是將焦點(diǎn)移過(guò)去，要點(diǎn)擊需要再按 enter；Firefox是“shift+alt+”，按下之后直接觸發(fā)點(diǎn)擊事件。Opera和Chrome還有Safari，我都沒(méi)試出來(lái)，有知情者 請(qǐng)告知。
感謝aoao提供：Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc 選key
Chrome 3 alt+key
除了accesskey，其實(shí)還有一個(gè)更重要的：tabindex。有時(shí)候需要改變默認(rèn)的tabindex順序，以期得到更便利的體驗(yàn)。舉個(gè)例子，如下格式的登陸框：
用戶名
記住我
密碼
忘記密碼
按照默認(rèn)的順序，按下tab鍵，焦點(diǎn)會(huì)依次經(jīng)過(guò)“用戶名”、“記住我”、“密碼”。但是似乎把“記住我”放在“密碼”之后更方便，畢竟不是所有的人 都需要使用“記住我”這個(gè)按鈕，尤其是多次使用這個(gè)登陸框的人，他很顯然是不喜歡“記住我”。所以應(yīng)該用tabindex指定如下的順序：“用戶名”、“ 密碼”、“記住我”。
10. 不要打開(kāi)新窗口（Not opening new windows）
文中的意思是，這樣會(huì)破壞瀏覽器的“history”記錄，從而使瀏覽器“后退鍵”無(wú)效?？偹阒劳鈬?guó)網(wǎng)站很少有新開(kāi)窗口的緣故了吧，也總算知道為啥 XHTML標(biāo)準(zhǔn)要把a(bǔ)標(biāo)簽的target屬性取消的緣故了吧。但這個(gè)似乎不符合中國(guó)用戶的習(xí)慣，還值得商討。不過(guò)有一些變通的方式可以考慮：
a) 頁(yè)面上給一個(gè)選框，選擇之后就自動(dòng)把a(bǔ)標(biāo)簽里的target屬性移除，使得所有的鏈接都在本頁(yè)打開(kāi)。
b) 新開(kāi)窗口并不是到”_blank”，而是到一個(gè)指定名字的窗口，比如“new”。這樣所有新開(kāi)的頁(yè)面都會(huì)到同一個(gè)窗口里打開(kāi)，至少在這個(gè)窗口里，還是可以使用瀏覽器的“后退鍵”的。（提一下，土豆網(wǎng)的視頻都是這樣的，開(kāi)到同一個(gè)新窗口里）。
11.定義首字母縮略字（Defining acronyms）
先說(shuō)明一下，其實(shí)作者這里對(duì)acronym這個(gè)詞理解不正確。acronym是指單詞的首字母合起來(lái)成為一個(gè)新的可讀的單詞，這個(gè)單詞未必是所有字母都大寫(xiě)的，比如Nato（北大西洋公約組織）。所以HTML或是CSS算不上acronym，而
DOS、BASIC這種才算。像HTML或CSS這種，應(yīng)該叫abbreviation，與其對(duì)應(yīng)的是<abbr>標(biāo)簽，但很遺憾，這個(gè)標(biāo)簽IE6上無(wú)效。
12. 給你的日歷加上抬頭（Giving your calendar a real caption）
13. 使用真正的表頭（Using real table headers）
14. 為表格提供摘要（Providing a summary for tables）
把這三條合在一起說(shuō)，就是要正確使用表格。其實(shí)表格的使用遠(yuǎn)比這三條更多，建議大家仔細(xì)閱讀HTML權(quán)威指南。

網(wǎng)頁(yè)的可訪問(wèn)性，似乎只能由前端來(lái)重視并實(shí)現(xiàn)。這點(diǎn)挺可悲，作為可用性的一部分&mdash;&mdash;可訪問(wèn)性，居然只能由技術(shù)人員來(lái)掌控，這是我不愿意看到的。但反過(guò)來(lái)，這給前端開(kāi)發(fā)工程師們新增加了一個(gè)責(zé)任，同時(shí)為如何區(qū)分優(yōu)秀的前端增加了一個(gè)指標(biāo).
15. 忽略空白圖片（Ignoring spacer images）
一定記得給圖片加上alt屬性，哪怕它為空。其原因是如果不寫(xiě)alt，有些閱讀器會(huì)直接把它的文件名或URL讀出來(lái)。
這讓我想起小時(shí)候讀過(guò)，說(shuō)在發(fā)明數(shù)字0以前，人們都是用空位來(lái)表示的。這樣就很不方便啊。所以alt=”"就相當(dāng)于數(shù)字0這個(gè)偉大的發(fā)明。
16. 使用真實(shí)的列表（或者正確的把它們偽裝起來(lái)）
這一條其實(shí)也是在講如果要用圖片作為列表前的icon，最好用CSS。但是沒(méi)有提到為什么要用<ul>。其實(shí)這也是我一直糾結(jié)的問(wèn)題：目前看 起來(lái)，除了出于“標(biāo)簽語(yǔ)義化”的原教旨主義信仰，沒(méi)有更好的理由一定要用<ul>或<ol>。盼知情者告知。
17. 為圖片提供替換文本（Providing text equivalents for images)
18. 為圖片映射提供替換文本（Providing text equivalents for image maps)
這兩條同15。
這里我只是想說(shuō)說(shuō)兩個(gè)題外話：
a) 到目前這個(gè)年代，<map>標(biāo)簽是否還有用？同樣的還讓我想起<applet>標(biāo)簽。
b) 除了alt，還有兩個(gè)屬性：lowsrc和longdesc。有時(shí)間我會(huì)來(lái)看看目前的瀏覽器對(duì)這兩個(gè)屬性的支持是怎樣的。
19. 使用真實(shí)的水平分割線（Using real horizontal rules）
它說(shuō)的是使用<hr>比使用一張裝飾用的圖片好。（P.S. 原來(lái)hr是horizontal rule的縮寫(xiě)哦，hoho）但似乎不用<hr>更好吧。
20. 使用相對(duì)字號(hào)（Using relative font sizes）
我好想遵守這個(gè)規(guī)則，但可惡的微軟把宋體做得除了12px，更小的字號(hào)就不能看。不過(guò)現(xiàn)在瀏覽器都有zoom功能，相對(duì)字號(hào)或許也不像以前那么迫切需要了吧。不管怎么說(shuō)，都怪IE！
21. 使用真實(shí)的標(biāo)題（Using real headers）
除了SEO之外，文中提到，有瀏覽器是可以專(zhuān)門(mén)擷取文中的標(biāo)題，以提供方便的文內(nèi)導(dǎo)航。這個(gè)功能就類(lèi)似word里面自動(dòng)生成目錄的方法。
不過(guò)有一點(diǎn)值得注意，<h2>標(biāo)簽的使用。它其實(shí)是指最能概括本頁(yè)內(nèi)容的文字，而不是指看起來(lái)在標(biāo)題的位置的文字（比如網(wǎng)站頂部 LOGO）。我之前一直犯一個(gè)錯(cuò)誤，就是把網(wǎng)站的LOGO作為H1。事實(shí)上，比如搜索結(jié)果頁(yè)，很明顯“搜索XXX，一共XXX個(gè)結(jié)果”才應(yīng)該作為h2標(biāo) 題。
22. 給表單元素加上label標(biāo)簽（labeling form elements）
這里只有一個(gè)想和大家討論的：到底是用id和for來(lái)聯(lián)系，還是直接用label標(biāo)簽把表單元素和文字框起來(lái)？你們的習(xí)慣是怎樣的？
23. 讓所有的內(nèi)容都可被搜索（Making everything searchable）
這一條是個(gè)比較寬泛的產(chǎn)品層面的問(wèn)題，這里就不作討論了。
24. 建立可訪問(wèn)性聲明（Creating an accessibility statement）

關(guān)于優(yōu)秀網(wǎng)頁(yè)前端設(shè)計(jì)的指標(biāo)有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。