隨著互聯(lián)網(wǎng)競爭日益激烈，同質(zhì)化的網(wǎng)站越來越多，但只有提供了最佳用戶體驗的那一個才會勝出?？捎眯允且粋€設(shè)計者必須要重視的原則，來自IBM的工程師張群撰文從多個方面闡述了可用性原則在具體網(wǎng)站設(shè)計中的細(xì)節(jié)實現(xiàn)和具體案例，值得網(wǎng)站設(shè)計者借鑒。

作者首先強調(diào)了可用性設(shè)計的重要性：

相互競爭的網(wǎng)站通常提供相似的功能，我們經(jīng)常能感受到視頻網(wǎng)站同質(zhì)化，團購網(wǎng)站同質(zhì)化，社交網(wǎng)站同質(zhì)化，門戶網(wǎng)站同質(zhì)化，它們之間信息內(nèi)容重復(fù)、服務(wù)項目雷同，但只有提供了最佳用戶體驗的那一個才會勝出。在網(wǎng)站設(shè)計、開發(fā)及發(fā)布過程中，通常可用性專家會幫助評估網(wǎng)站的易用性，收集內(nèi)部反饋，測試團隊進行可用性測試。最為糟糕的是網(wǎng)站上線階段發(fā)現(xiàn)界面錯誤，需要花高昂的代價修復(fù)網(wǎng)站界面錯誤。因此分階段設(shè)計、及早測試、經(jīng)常測試是極其有必要的。

要實現(xiàn)可用性原則，作者認(rèn)為要分析用戶的真正需求：未經(jīng)解構(gòu)的用戶需求在某種程度上來講是“偽需求”，不能真實體現(xiàn)需求，往往是表面上的需求，洞察用戶表象背后的真實需求是網(wǎng)站設(shè)計的第一步。有經(jīng)驗的網(wǎng)站設(shè)計師往往在用戶的顯性需求描述基礎(chǔ)上，探究他們的真實問題是什么，并打磨需求。

用戶上網(wǎng)的習(xí)慣和逛超市基本類似，大量網(wǎng)頁他們幾乎不看一眼，而是掃視頁面尋找感興趣的內(nèi)容。但用戶愿意為高質(zhì)量的內(nèi)容而忍受廣告和糟糕的設(shè)計。網(wǎng)站設(shè)計者不應(yīng)對用戶的耐心抱有較高的期待，多數(shù)用戶都掃視頁面而非閱讀，靠自己的直覺摸索，如果頁面沒有達(dá)到用戶預(yù)期，使得學(xué)習(xí)成本負(fù)荷越高、直觀性越差，用戶就會很輕易的離開，尋找替代的頁面。

以“一致性的視覺設(shè)計”為例，作者指出，當(dāng)一個網(wǎng)站的視覺設(shè)計整潔連貫，高度一致時，用戶很容易不費腦力去理解如何使用網(wǎng)站，不一致的視覺設(shè)計，有可能會讓人感覺到欺騙，當(dāng)界面設(shè)計得過于跳躍和創(chuàng)新，用戶可能在第一眼難以理解，不得不重新學(xué)習(xí)如何使用那些他們本已經(jīng)熟悉的東西。視覺一致性可以提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶的認(rèn)知成本。

達(dá)到“一致”的界面，并非指界面元素需要“統(tǒng)一”，視覺上可以有很多不同的表現(xiàn)手段，世界上沒有兩個相同的雞蛋，為了一致，網(wǎng)站信息架構(gòu)很重要。具體體現(xiàn)在形狀、色彩、界面質(zhì)感、圖標(biāo)、畫風(fēng)、文字描述、提示信息呈現(xiàn)方式等，使得網(wǎng)站在不同的欄目下，設(shè)計一致，而不是不同的欄目下頁面視覺差異大，一眼看上去，不象一個爹媽生出來的。

對于“文字對齊”問題，作者分析了兩端對齊的問題：當(dāng)行的原始長度差異過大時，行與行之間有明顯的疏密變化。而且對英文來說，如果沒有 hyphenation，往往也很難讓行間長度差異適合兩端對齊。

越來越多的瀏覽器開始實現(xiàn)適用于中文的兩端對齊算法，在可以啟用 CSS hyphenation(斷字)的瀏覽器，我們可以考慮使用 text-align: justify; 來達(dá)到漂亮的兩端對齊效果，但如何才是理想效果?需要綜合考慮瀏覽器兼容性，良好的斷字是美觀文本的必要條件，但正確的斷字方法是按照單詞的音節(jié)將其斷開，這樣使得用戶在閱讀時候不必讀到下一行才能拼出完整單詞，這個問題在單行文本特別長，行間距較小的時候顯得尤其重要。

作者指出，排版上一定要盡量兩端對齊的原則不一定適用于現(xiàn)代網(wǎng)站，左端對齊(flush left)、右端參差(ragged right)的排版越來越常見，人們的審美觀也在發(fā)生變化。如今的互聯(lián)網(wǎng)上，左對齊也是文本的默認(rèn)設(shè)定。純英文文本行的長度錯落有致，強制右側(cè)對齊不一定是明智之選。設(shè)計師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達(dá)到美觀效果。

固定元素保持慣例，作者列舉了幾個例子：

網(wǎng)站標(biāo)題(header)往往會在網(wǎng)站左上方顯示。

LOGO 通?？梢渣c擊，以回到首頁

退出登錄一般會在網(wǎng)站右上方顯示

版權(quán)信息總是位于最下方 footer

網(wǎng)站搜索框經(jīng)常會出現(xiàn)在網(wǎng)站右上方或中部上方

切換網(wǎng)站語言版本的功能經(jīng)常出現(xiàn)在網(wǎng)站 header 右端并配有國旗顯示更直觀

搜索框必需是一個框

注冊通常在頁面的右上角

作者提倡僅在必要時使用下拉菜單，雖然下拉菜單占較少的屏幕空間，但其缺點也是明顯的，例如選項可見性較低，下拉菜單所包含的內(nèi)容項太多時將造成困擾。然而根據(jù) Jacob Nielsen 對下拉菜單的研究，他認(rèn)為下拉菜單并不一定要很小，“巨型”導(dǎo)航下拉菜單效果也不錯。近年來，mega menu 成為在網(wǎng)頁設(shè)計中成為一種趨勢，尤其是在電子商務(wù)網(wǎng)站，如果運用得當(dāng)，它確實能有效幫助到用戶快速獲取信息，大的二維下拉面板可以對導(dǎo)航選項進行清晰，組織良好的導(dǎo)航分組，將用戶從不得不進行的滾動中解脫出來。運用是否得當(dāng)成了設(shè)計的關(guān)鍵。

巨型菜單的優(yōu)勢：

所有選項一目了然

可通過分隔線、富文本、圖標(biāo)、圖片修飾等視覺上手段更加清晰地組織菜單結(jié)構(gòu)

巨型菜單的劣勢：

未展開前的 mega menu 不易被用戶發(fā)覺

大量的菜單選項占據(jù)了屏幕空間，遮住了一部分內(nèi)容

縮小瀏覽器尺寸或在小屏幕手持設(shè)備上不易看到全部菜單內(nèi)容

Load 巨型菜單速度有影響

Accessibility 方面，fly-out 菜單很容易導(dǎo)致可訪問性問題，代碼書寫需要更小心謹(jǐn)慎

除此之外，作者還強調(diào)不要忘記保護性設(shè)計：

我們應(yīng)該總是設(shè)想，用戶不按常理出牌，不會按您的預(yù)期使用您的網(wǎng)站，或是誤用。所以我們一定要有保護性設(shè)計，比如，刪除一個文檔如果沒有確認(rèn)提示，又沒有提供恢復(fù)功能，這將給用戶造成難以接受的后果;再如，如果用戶在輸入注冊信息時關(guān)閉瀏覽器，在沒有詢問之前不要拋棄他們的數(shù)據(jù);或是，當(dāng)用戶請求的一個頁面不存在時，需提供一個有用的 404 頁面。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：網(wǎng)站設(shè)計中不可忽視的可用性
文章源于：http://jinyejixie.com/news2/313852.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、關(guān)鍵詞優(yōu)化、定制開發(fā)、網(wǎng)站設(shè)計、微信公眾號、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)