隨著互聯(lián)網(wǎng)競(jìng)爭(zhēng)日益激烈，同質(zhì)化的網(wǎng)站越來(lái)越多，但只有提供了最佳用戶(hù)體驗(yàn)的那一個(gè)才會(huì)勝出�？捎眯允且粋�(gè)設(shè)計(jì)者必須要重視的原則，來(lái)自IBM的工程師張群撰文從多個(gè)方面闡述了可用性原則在具體網(wǎng)站設(shè)計(jì)中的細(xì)節(jié)實(shí)現(xiàn)和具體案例，值得網(wǎng)站設(shè)計(jì)者借鑒。
相互競(jìng)爭(zhēng)的網(wǎng)站通常提供相似的功能，我們經(jīng)常能感受到視頻網(wǎng)站同質(zhì)化，團(tuán)購(gòu)網(wǎng)站同質(zhì)化，社交網(wǎng)站同質(zhì)化，門(mén)戶(hù)網(wǎng)站同質(zhì)化，它們之間信息內(nèi)容重 復(fù)、服務(wù)項(xiàng)目雷同，但只有提供了最佳用戶(hù)體驗(yàn)的那一個(gè)才會(huì)勝出。在網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)及發(fā)布過(guò)程中，通�？捎眯詫�(zhuān)家會(huì)幫助評(píng)估網(wǎng)站的易用性，收集內(nèi)部反饋，測(cè) 試團(tuán)隊(duì)進(jìn)行可用性測(cè)試。最為糟糕的是網(wǎng)站上線(xiàn)階段發(fā)現(xiàn)界面錯(cuò)誤，需要花高昂的代價(jià)修復(fù)網(wǎng)站界面錯(cuò)誤。因此分階段設(shè)計(jì)、及早測(cè)試、經(jīng)常測(cè)試是極其有必要的。
要實(shí)現(xiàn)可用性原則，作者認(rèn)為要分析用戶(hù)的真正需求：未經(jīng)解構(gòu)的用戶(hù)需求在某種程度上來(lái)講是“偽需求”，不能真實(shí)體現(xiàn)需求，往往是表面上的需求， 洞察用戶(hù)表象背后的真實(shí)需求是網(wǎng)站設(shè)計(jì)的第一步。有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師往往在用戶(hù)的顯性需求描述基礎(chǔ)上，探究他們的真實(shí)問(wèn)題是什么，并打磨需求。
用戶(hù)上網(wǎng)的習(xí)慣和逛超市基本類(lèi)似，大量網(wǎng)頁(yè)他們幾乎不看一眼，而是掃視頁(yè)面尋找感興趣的內(nèi)容。但用戶(hù)愿意為高質(zhì)量的內(nèi)容而忍受廣告和糟糕的設(shè) 計(jì)。網(wǎng)站設(shè)計(jì)者不應(yīng)對(duì)用戶(hù)的耐心抱有較高的期待，多數(shù)用戶(hù)都掃視頁(yè)面而非閱讀，靠自己的直覺(jué)摸索，如果頁(yè)面沒(méi)有達(dá)到用戶(hù)預(yù)期，使得學(xué)習(xí)成本負(fù)荷越高、直觀(guān) 性越差，用戶(hù)就會(huì)很輕易的離開(kāi)，尋找替代的頁(yè)面。
以“一致性的視覺(jué)設(shè)計(jì)”為例，作者指出，當(dāng)一個(gè)網(wǎng)站的視覺(jué)設(shè)計(jì)整潔連貫，高度一致時(shí)，用戶(hù)很容易不費(fèi)腦力去理解如何使用網(wǎng)站，不一致的視覺(jué)設(shè) 計(jì)，有可能會(huì)讓人感覺(jué)到欺騙，當(dāng)界面設(shè)計(jì)得過(guò)于跳躍和創(chuàng)新，用戶(hù)可能在第一眼難以理解，不得不重新學(xué)習(xí)如何使用那些他們本已經(jīng)熟悉的東西。視覺(jué)一致性可以 提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶(hù)的認(rèn)知成本。
達(dá)到“一致”的界面，并非指界面元素需要“統(tǒng)一”，視覺(jué)上可以有很多不同的表現(xiàn)手段，世界上沒(méi)有兩個(gè)相同的雞蛋，為了一致，網(wǎng)站信息架構(gòu)很重 要。具體體現(xiàn)在形狀、色彩、界面質(zhì)感、圖標(biāo)、畫(huà)風(fēng)、文字描述、提示信息呈現(xiàn)方式等，使得網(wǎng)站在不同的欄目下，設(shè)計(jì)一致，而不是不同的欄目下頁(yè)面視覺(jué)差異 大，一眼看上去，不象一個(gè)爹媽生出來(lái)的。
對(duì)于“文字對(duì)齊”問(wèn)題，作者分析了兩端對(duì)齊的問(wèn)題：當(dāng)行的原始長(zhǎng)度差異過(guò)大時(shí)，行與行之間有明顯的疏密變化。而且對(duì)英文來(lái)說(shuō)，如果沒(méi)有 hyphenation，往往也很難讓行間長(zhǎng)度差異適合兩端對(duì)齊。
越來(lái)越多的瀏覽器開(kāi)始實(shí)現(xiàn)適用于中文的兩端對(duì)齊算法，在可以啟用 CSS hyphenation(斷字)的瀏覽器，我們可以考慮使用 text-align: justify; 來(lái)達(dá)到漂亮的兩端對(duì)齊效果，但如何才是理想效果?需要綜合考慮瀏覽器兼容性，良好的斷字是美觀(guān)文本的必要條件，但正確的斷字方法是按照單詞的音節(jié)將其斷 開(kāi)，這樣使得用戶(hù)在閱讀時(shí)候不必讀到下一行才能拼出完整單詞，這個(gè)問(wèn)題在單行文本特別長(zhǎng)，行間距較小的時(shí)候顯得尤其重要。
作者指出，排版上一定要盡量?jī)啥藢?duì)齊的原則不一定適用于現(xiàn)代網(wǎng)站，左端對(duì)齊(flush left)、右端參差(ragged right)的排版越來(lái)越常見(jiàn)，人們的審美觀(guān)也在發(fā)生變化。如今的互聯(lián)網(wǎng)上，左對(duì)齊也是文本的默認(rèn)設(shè)定。純英文文本行的長(zhǎng)度錯(cuò)落有致，強(qiáng)制右側(cè)對(duì)齊不一定 是明智之選。設(shè)計(jì)師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達(dá)到美觀(guān)效果。
固定元素保持慣例，作者列舉了幾個(gè)例子：
網(wǎng)站標(biāo)題(header)往往會(huì)在網(wǎng)站左上方顯示。
LOGO 通�？梢渣c(diǎn)擊，以回到首頁(yè)
退出登錄一般會(huì)在網(wǎng)站右上方顯示
版權(quán)信息總是位于最下方 footer
網(wǎng)站搜索框經(jīng)常會(huì)出現(xiàn)在網(wǎng)站右上方或中部上方
切換網(wǎng)站語(yǔ)言版本的功能經(jīng)常出現(xiàn)在網(wǎng)站 header 右端并配有國(guó)旗顯示更直觀(guān)
搜索框必需是一個(gè)框
注冊(cè)通常在頁(yè)面的右上角
作者提倡僅在必要時(shí)使用下拉菜單，雖然下拉菜單占較少的屏幕空間，但其缺點(diǎn)也是明顯的，例如選項(xiàng)可見(jiàn)性較低，下拉菜單所包含的內(nèi)容項(xiàng)太多時(shí)將造 成困擾。然而根據(jù) Jacob Nielsen 對(duì)下拉菜單的研究，他認(rèn)為下拉菜單并不一定要很小，“巨型”導(dǎo)航下拉菜單效果也不錯(cuò)。近年來(lái)，mega menu 成為在網(wǎng)頁(yè)設(shè)計(jì)中成為一種趨勢(shì)，尤其是在電子商務(wù)網(wǎng)站，如果運(yùn)用得當(dāng)，它確實(shí)能有效幫助到用戶(hù)快速獲取信息，大的二維下拉面板可以對(duì)導(dǎo)航選項(xiàng)進(jìn)行清晰，組 織良好的導(dǎo)航分組，將用戶(hù)從不得不進(jìn)行的滾動(dòng)中解脫出來(lái)。運(yùn)用是否得當(dāng)成了設(shè)計(jì)的關(guān)鍵。
巨型菜單的優(yōu)勢(shì)：
所有選項(xiàng)一目了然
可通過(guò)分隔線(xiàn)、富文本、圖標(biāo)、圖片修飾等視覺(jué)上手段更加清晰地組織菜單結(jié)構(gòu)
巨型菜單的劣勢(shì)：
未展開(kāi)前的 mega menu 不易被用戶(hù)發(fā)覺(jué)
大量的菜單選項(xiàng)占據(jù)了屏幕空間，遮住了一部分內(nèi)容
縮小瀏覽器尺寸或在小屏幕手持設(shè)備上不易看到全部菜單內(nèi)容
Load 巨型菜單速度有影響
Accessibility 方面，fly-out 菜單很容易導(dǎo)致可訪(fǎng)問(wèn)性問(wèn)題，代碼書(shū)寫(xiě)需要更小心謹(jǐn)慎
除此之外，作者還強(qiáng)調(diào)不要忘記保護(hù)性設(shè)計(jì)：
我們應(yīng)該總是設(shè)想，用戶(hù)不按常理出牌，不會(huì)按您的預(yù)期使用您的網(wǎng)站，或是誤用。所以我們一定要有保護(hù)性設(shè)計(jì)，比如，刪除一個(gè)文檔如果沒(méi)有確認(rèn)提 示，又沒(méi)有提供恢復(fù)功能，這將給用戶(hù)造成難以接受的后果;再如，如果用戶(hù)在輸入注冊(cè)信息時(shí)關(guān)閉瀏覽器，在沒(méi)有詢(xún)問(wèn)之前不要拋棄他們的數(shù)據(jù);或是，當(dāng)用戶(hù)請(qǐng) 求的一個(gè)頁(yè)面不存在時(shí)，需提供一個(gè)有用的 404 頁(yè)面。
