中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

　圖 2.騰訊產(chǎn)品，導(dǎo)航風(fēng)格一致

左對(duì)齊?右對(duì)齊?兩端對(duì)齊?

兩端對(duì)齊(justification)最大的問題是：當(dāng)行的原始長(zhǎng) 度差異過大時(shí)，行與行之間有明顯的疏密變化。而且對(duì)英文來說，如果沒有 hyphenation，往往也很難讓行間長(zhǎng)度差異適合兩端對(duì)齊。越來越多的瀏覽器開始實(shí)現(xiàn)適用于中文的兩端對(duì)齊算法，在可以啟用 CSS hyphenation(斷字)的瀏覽器，我們可以考慮使用 text-align: justify; 來達(dá)到漂亮的兩端對(duì)齊效果，但如何才是理想效果?需要綜合考慮瀏覽器兼容性，良好的斷字是美觀文本的必要條件，但正確的斷字方法是按照單詞的音節(jié)將其斷 開，這樣使得用戶在閱讀時(shí)候不必讀到下一行才能拼出完整單詞，這個(gè)問題在單行文本特別長(zhǎng)，行間距較小的時(shí)候顯得尤其重要。

排版上一定要盡量 兩端對(duì)齊的原則不一定適用于現(xiàn)代網(wǎng)站，左端對(duì)齊(flush left)、右端參差(ragged right)的排版越來越常見，人們的審美觀也在發(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á)到美觀效果。

　　圖 3.利用 hyphens 實(shí)現(xiàn)兩端對(duì)齊

固定元素保持慣例

設(shè)計(jì)師容易在設(shè)計(jì)中讓自己的創(chuàng)意占據(jù)上風(fēng)，期望界面脫離傳統(tǒng)，具有創(chuàng)意無可厚非，但人們已經(jīng)根深蒂固的元素，保持慣例會(huì)更為穩(wěn)妥。比如

網(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)站語言版本的功能經(jīng)常出現(xiàn)在網(wǎng)站 header 右端并配有國(guó)旗顯示更直觀

搜索框必需是一個(gè)框

注冊(cè)通常在頁(yè)面的右上角

　　讓搜索更容易

為了精確搜索或在特定范圍內(nèi)搜索，網(wǎng)站往往提供各種不同的搜索參數(shù)。但多數(shù)用戶更為青睞不需要思考就知道該如何搜索的界面。針對(duì)搜索功能最常見的設(shè)計(jì)就是一個(gè)相對(duì)顯得寬大的輸入框，加上“搜索”按鈕組成，以提供最為方便的快捷搜索。

這里需要注重的一個(gè)原則是，雖然我們有時(shí)必需提供高級(jí)搜索功能，但較好的用戶體驗(yàn)是，即使用戶沒有提供額外信息的情況下，搜索功能也應(yīng)該是正常能夠工作的。比如：

　　圖 4.當(dāng)用戶未選擇任意一個(gè) within 下拉列表內(nèi)容時(shí)，搜索照常工作

巨型菜單(Mega menu)的優(yōu)劣勢(shì)

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

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

所有選項(xiàng)一目了然

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

　　圖 5.利用圖標(biāo)，分隔線，文字加粗等手段使 mega menu 更易讀

巨型菜單的劣勢(shì)：

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

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

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

Load 巨型菜單速度有影響

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

　　圖 6.縮小窗口后 mega menu 顯示不完整，滾動(dòng)條出現(xiàn)

圖 7.窗口高度縮小后 mega menu 顯示不完整

需要注意的是：

不能無節(jié)制地堆放過量菜單選項(xiàng)，降低友好度

激活 Mega menu 較好的作法是加一個(gè)倒三角小圖標(biāo)，暗示用戶鼠標(biāo)經(jīng)過可展開更多內(nèi)容。因?yàn)?Mega menu 本身不象一個(gè)按鈕能更直觀能告訴用戶此處可點(diǎn)擊

避免菜單太難使用，鼠標(biāo)指針輕微失去焦點(diǎn)，就得從頭開始。

避免使用多個(gè)下拉級(jí)別，多個(gè)層級(jí)的導(dǎo)航必須進(jìn)行水平滾動(dòng)，不夠友好

避免在 Mega menu 內(nèi)加“搜索”功能

避免在 Mega menu 區(qū)域內(nèi)右上角加“關(guān)閉”按鈕，這本身并不是必需的，關(guān)閉菜單較好的設(shè)計(jì)方案是將鼠標(biāo)移開一定的距離才能關(guān)閉它，Jacob Nielsen 的另一個(gè)建議是鼠標(biāo)移開 0.5 秒后，菜單在 0.1 秒內(nèi)消失

　　單選框、復(fù)選框文字可點(diǎn)擊

單選框、復(fù)選框的設(shè)計(jì)疏忽通常是未設(shè)置 id 和 label 的 for 屬性，從易用性和 accessibility 角度而言，for 屬性都是不能缺少的，for 屬性可以關(guān)聯(lián)控件元素的 id，使文本也可點(diǎn)擊選中，擴(kuò)大了選中焦點(diǎn)區(qū)域。HTML5，可以使用 for 屬性，或是把表單控件放在 label 元素里面兩種方法來實(shí)現(xiàn)該關(guān)聯(lián)。但使用 for 和 id 找到控件元素的方法要比將控件放在 label 標(biāo)簽內(nèi)的健壯性好很多。使用?aria-labelledby?屬性跨瀏覽器和 accessibility 的健壯性要比使用標(biāo)準(zhǔn)的控件元素放入 label 標(biāo)簽下的方法強(qiáng)。所以建議還是第一種方法。

　　圖 8.不妥的設(shè)計(jì)，使得用戶較難判斷單選框?qū)?yīng)于哪一個(gè)選項(xiàng)

圖 9.點(diǎn)擊文字即可選擇該復(fù)選框，增大了可點(diǎn)擊區(qū)域

鏈接

永遠(yuǎn)不要讓用戶去猜測(cè)一段文本是否可點(diǎn)擊。最為穩(wěn)妥的作法是顏色和下劃線的組合使 用，使得超鏈接很容易辨識(shí)。同時(shí)不能犯的錯(cuò)誤是，通過顏色和下劃線設(shè)計(jì)非鏈接文本，這樣會(huì)給用戶帶來困惑。當(dāng)我們無法即用顏色，又用下劃線標(biāo)識(shí)所有的鏈接 時(shí)，我們也要盡量在固定的區(qū)域內(nèi)，使用一樣的鏈接風(fēng)格，比如不能有些鏈接有下劃線，有些鏈接沒有，有些鏈接是不同的顏色等。

其次要注意鏈接文本要清晰，準(zhǔn)確描述它所指向的目的地，避免使用含糊的描述。

比如工商銀行的首頁(yè)上幾乎每個(gè)字都是鏈接，這種情況下不可能采用全部鏈接帶有下劃線的作法。

　　圖 10.“企業(yè)網(wǎng)上銀行登錄”下的文本都是鏈接，好的作法是紅線所指處的鏈接與“用戶登錄”區(qū)域塊鏈接表現(xiàn)一致，用黑色

圖 11.非鏈接用了灰色文本，[詳細(xì)]是可點(diǎn)擊鏈接，設(shè)置成與整站統(tǒng)一鏈接顏色黑色更為合適

圖 12.矩形欄目塊狀內(nèi)，“客戶服務(wù)”是鏈接可點(diǎn)，而“貴賓尊享”是非鏈接，合適的作法是給“客戶服務(wù)”同時(shí)加下劃線，以示區(qū)分，減少用戶的困惑

注冊(cè)表單盡量簡(jiǎn)潔

沒有人喜歡填表單，設(shè)計(jì)高效的網(wǎng)頁(yè)表單的原則是，盡量使用較少量強(qiáng)制性的輸入框，避免增加用戶負(fù)擔(dān)。不應(yīng)在注冊(cè)頁(yè)面上放置廣告，閃爍圖片等效果分散用戶注意力。

　　圖 13.太多分散用戶注意力的內(nèi)容，對(duì)用戶專心完成注冊(cè)沒有幫助

文本排版應(yīng)優(yōu)雅

文本排版在網(wǎng)頁(yè)設(shè)計(jì)中是相當(dāng)重要的一部分。CSS3 的@font-face 使得頁(yè)面可以嵌用自定義字體，頁(yè)面文字顯示將更豐富多彩，表現(xiàn)力更強(qiáng)。實(shí)現(xiàn)優(yōu)雅的文本排版，我們需要注意以下：

文本大?。禾〉奈淖质沟瞄L(zhǎng)篇文章閱讀起來很困難

行距：保持適合的行間距增加文字可讀性

留白：文字的周圍提供充足的空白，使用戶不會(huì)感到太壓抑

Line-height 屬性值不應(yīng)該用 px 作為單位

　　圖 14.line-height 設(shè)置成絕對(duì)值(px)時(shí)，當(dāng)字體增大時(shí)有可能出現(xiàn)重疊的問題

清晰的導(dǎo)航

　　通常有以下幾種導(dǎo)航的作法，在設(shè)計(jì)中我們可以綜合考慮使用。

　　全局導(dǎo)航：類似于網(wǎng)站地圖，突出整體網(wǎng)站結(jié)構(gòu)，大而全

本地導(dǎo)航：針對(duì)某個(gè)欄目?jī)?nèi)的導(dǎo)航

　　上下文導(dǎo)航：針對(duì)具體的頁(yè)面內(nèi)的導(dǎo)航

　　面包屑導(dǎo)航：二級(jí)導(dǎo)航模式，用來定位用戶當(dāng)前所處的位置

　　圖 15.Amazon 采取混合導(dǎo)航，樹狀導(dǎo)航，欄目?jī)?nèi)搜索，全局導(dǎo)航及面包屑

不要忘記保護(hù)性設(shè)計(jì)

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

　　圖 16.盡量讓 404 頁(yè)面信息更有幫助，同時(shí) 404 也可以設(shè)計(jì)得很獨(dú)特，展現(xiàn)網(wǎng)站個(gè)性

及早測(cè)試

“早期測(cè)試一個(gè)用戶要比后期測(cè)試 50 個(gè)用戶好”。可用性測(cè)試總會(huì)產(chǎn)生有用的結(jié)果。基本的檢查點(diǎn)可以包括以下：

死鏈接

校對(duì)文本

Javascript 不生效時(shí)，網(wǎng)站展示效果仍要優(yōu)雅

404 頁(yè)面是否缺失

跨瀏覽器兼容性檢查

導(dǎo)航是否清晰

文字表述是否親和

　　總結(jié)

界面設(shè)計(jì)的原則很多來自于經(jīng)驗(yàn)和啟發(fā)，并在不斷的探索討論過程中，建立與用戶之間的信任感，不斷進(jìn)行易用性測(cè)試。雖然我們不可能做一個(gè)普適的設(shè)計(jì)，比如移動(dòng)設(shè)備、手機(jī)之間的差異與電腦就大很多，低端機(jī)、智能機(jī)、觸摸屏手機(jī)各有不同，但基本總結(jié)通用的易用性原則是：

1. 盡量簡(jiǎn)潔連貫;

2. 提供信息反饋;

3. 允許簡(jiǎn)單的撤銷操作;

4. 降低短期記憶載荷和學(xué)習(xí)成本;

5. 及時(shí)測(cè)試;

6. 信息架構(gòu)合理