随著(zhe)互聯網競争日(rì)益激烈,↓÷☆≠同質化(huà)的(de)網站(zhàn)越來(lái)越多(duō),但(dàn)隻有(yαǒu)提供了(le)最佳用(yòng)戶體(tǐ)驗的(de)那(nà)一(yī)個(∞↔gè)才會(huì)勝出。可(kě)用(yòng)性是(shì)一(yī)個(gè)設計(jì)者☆✔ε必須要(yào)重視(shì)的(de)原則,來(lái)自 €↕(zì)IBM的(de)工(gōng)程師 ∞§(shī)張群撰文(wén)從(cóng)多(duō)個(gè)β≠方面闡述了(le)可(kě)用(yòng)性原則在具體(tǐ)網站(zhàn)設∏®✔ε計(jì)中的(de)細節實現(xiàn)和★ ∏(hé)具體(tǐ)案例,值得(de)網站(zh¥±♦àn)設計(jì)者借鑒。
作(zuò)者首先強調了(le)可(kěπβ☆)用(yòng)性設計(jì)的(de)重要(yào)性:
內(nèi)蒙古網站(zhàn)制(zhì)作(zuò),內(nèi)蒙古網站(zhàn)設計(∑¥jì),內(nèi)蒙古網站(zhàn)建設,呼和(hé)浩特網站(zhàn)建設,呼和(hé)浩>特網站(zhàn)制(zhì)、網站(zhàn)制(zhì)作(zuò)、計(jλ₩∞>ì)首選內(nèi)蒙古呼和(hé)浩特先誠網γ↕♦γ絡科(kē)技(jì)公司、、、先誠官網:/
相(xiàng)互競争的(de)網站(zhàn)通(tōng)常提供相(xiàng✔<♣)似的(de)功能(néng),我們經常能(né♥♣<¶ng)感受到(dào)視(shì)頻(pín)網站(zhàn)同質π化(huà),團購(gòu)網站(zhàn)同質化(huà),社交網站(zhàn)同質化(hu$®¶÷à),門(mén)戶網站(zhàn)同質化(huà),它們之間(jiān)信息β¥♥內(nèi)容重複、服務項目雷同,但(dàn)隻有(yǒu)提供了(le)最佳用(yòng<♠)戶體(tǐ)驗的(de)那(nà)一(yī)個(gè)才會(huì)勝出。在網站(zh ≥÷àn)設計(jì)、開(kāi)發及發布過程中,通(tōng)常可(kě)用(yòng$)性專家(jiā)會(huì)幫助評估網站(zhàn)的(de)易用(yòng)性,收集內(★φnèi)部反饋,測試團隊進行(xíng)可(kě)用(yòn∏★✔g)性測試。最為(wèi)糟糕的(de)是(shì)網站(zhàn)©₽₽<上(shàng)線階段發現(xiàn)界面錯(cuò)誤,需要(yào)♣¶花(huā)高(gāo)昂的(de)代價修複網站(zhàn)界面錯(cuò)誤。←♠<因此分(fēn)階段設計(jì)、及早測試、經常測試 ↔€÷是(shì)極其有(yǒu)必要(yào)的(de)。
要(yào)實現(xiàn)可(kě)用(yòng)性原則,作(zuò) §者認為(wèi)要(yào)分(fēn)析用(yòng)戶的(de)真正需 $δ'求:未經解構的(de)用(yòng)戶需求在某種程度上(shàng)來(lái)講是(shì)“僞 Ω₩需求”,不(bù)能(néng)真實體(♦$tǐ)現(xiàn)需求,往往是(shì)表面上(shàng)的(de)需求,洞察用(y←€∏₽òng)戶表象背後的(de)真實需求是(shì)網站(zhàn)設計(jì)的(de)第一(yī¶↔£ )步。有(yǒu)經驗的(de)網站(zhàn)設計(jì)師(shī)♣÷往往在用(yòng)戶的(de)顯性需求描述基礎上(shàng)✔♥,探究他(tā)們的(de)真實問(wèn)題是(shì)什φ☆★$(shén)麽,并打磨需求。
用(yòng)戶上(shàng)網的(de)習(xí)慣和(hé)逛超市(shπαì)基本類似,大(dà)量網頁他(tā)們幾乎不(bù)看(kàn)一(yī)眼,而是(shì)掃<↓✔<視(shì)頁面尋找感興趣的(de)內(nèi)容。但(dàn)用(yòng)γ→♥戶願意為(wèi)高(gāo)質量的(de)₹φ×內(nèi)容而忍受廣告和(hé)糟糕的(de)設計(jì)。網站(zh₹♥àn)設計(jì)者不(bù)應對(duì)用(yòng)戶的(de)耐心抱有(yǒu)較&♣©高(gāo)的(de)期待,多(duō)數(s₽₹ hù)用(yòng)戶都(dōu)掃視(shì)頁面而非閱讀(dú),靠自(z♥£∞ì)己的(de)直覺摸索,如(rú)果頁面沒有(yǒu)達到(dào)©±δ用(yòng)戶預期,使得(de)學習(xí)成本負荷越高(gāo)、£₹直觀性越差,用(yòng)戶就(jiù)會(huì)很(hěn)輕易的(de)≥'離(lí)開(kāi),尋找替代的(de)頁面。
以“一(yī)緻性的(de)視(shì)覺設計(jì)”為(wλφΩèi)例,作(zuò)者指出,當一(yī)個(gè)網站(zhàn)的(de)"∑δ£視(shì)覺設計(jì)整潔連貫,高(gāo)度一(££€yī)緻時(shí),用(yòng)戶很(hěn)容易不(bù)費(fèi)腦(nǎ<♠o)力去(qù)理(lǐ)解如(rú)何使用(yò♣ ng)網站(zhàn),不(bù)一(yī)緻的(de)視↑∑(shì)覺設計(jì),有(yǒu)可(kě)能(néng)會(™¥₽☆huì)讓人(rén)感覺到(dào)欺騙,當界面設計(jì)得(de)過于跳(tiào)≤™βΩ躍和(hé)創新,用(yòng)戶可(kě)能(néng)在第一(€"≤§yī)眼難以理(lǐ)解,不(bù)得(de)不(bù)重新學習(xí)如(rú)何使"★用(yòng)那(nà)些(xiē)他(tā)們本已經熟悉的(de)東λ☆(dōng)西(xī)。視(shì)覺一(yī)緻性←≥×>可(kě)以提高(gāo)産品所塑造的(de)品牌形象,一(yī)定φ 程度上(shàng)減少(shǎo)用(yòng)戶的(de)認知(zhī)成本。
達到(dào)“一(yī)緻”的(de)界面,并非指界面元素需要(yào)“統一(yī)”,視≥÷ (shì)覺上(shàng)可(kě)以有(yǒu)很(hěn)多(du±≠ō)不(bù)同的(de)表現(xiàn)手段,世界上(shà✘α•±ng)沒有(yǒu)兩個(gè)相(xiàng)同的(de)雞蛋,為(wèi)≥₹→了(le)一(yī)緻,網站(zhàn)信息架構很(hěn)重要(yào)↓→>。具體(tǐ)體(tǐ)現(xiàn)在形狀、色彩、界面質感、圖标、畫(huà)風(fēng)σ♣、文(wén)字描述、提示信息呈現(xiàn)方式等,使得(de)網站(zhànφ→¶)在不(bù)同的(de)欄目下(xià),設計(jì)一(∏↕♦yī)緻,而不(bù)是(shì)不(bù)同的(d×✔£e)欄目下(xià)頁面視(shì)覺差異大(dà),一(yī)眼看(kàn)上(shàng)¥&₽♥去(qù),不(bù)象一(yī)個(gè)爹媽(mā)生(shēng)出→€≠來(lái)的(de)。
對(duì)于“文(wén)字對(duì)齊”問(wèn)題,作(zuò)者分(fēn)析€♠>了(le)兩端對(duì)齊的(de)問(wèn)題:當行(xíng)的(dβ£"e)原始長(cháng)度差異過大(dà)時©¶(shí),行(xíng)與行(xíng)之間(jiān)有(yǒu)明(míng)顯的(de₹₩ <)疏密變化(huà)。而且對(duì)英文(wén)來(lái)說(shuō),如(r™&ú)果沒有(yǒu) hyphenation,往往也(₽♦yě)很(hěn)難讓行(xíng)間(ji ān)長(cháng)度差異适合兩端對(duì)齊。
越來(lái)越多(duō)的(de)浏覽器(qì)開(kāi)始實•¥"現(xiàn)适用(yòng)于中文(wén)的(♠¶♦Ωde)兩端對(duì)齊算(suàn)法,在可(kě)以啓用(yòng) CSS hyp☆ henation(斷字)的(de)浏覽器(" ®×qì),我們可(kě)以考慮使用(yòng) text-align: justify; 來(lái€↕)達到(dào)漂亮(liàng)的(de)兩端對(duì)齊效果,但(dàn)如(r≤↑ú)何才是(shì)理(lǐ)想效果?需要(yào)綜合考λ¥≥←慮浏覽器(qì)兼容性,良好(hǎo)的(de)斷字是(shì)美(měi)觀文(w€ ≠én)本的(de)必要(yào)條件(jià n),但(dàn)正确的(de)斷字方法是(shì)按照(zhào)單詞的(de)音(yīn)¶♣節将其斷開(kāi),這(zhè)樣使得(de)用(yòn& ∑g)戶在閱讀(dú)時(shí)候不(bù)必讀(dú)到(dào)下(xià)一(yī)行(<£₩≥xíng)才能(néng)拼出完整單詞,這(zhè)個(gè)問↕<<(wèn)題在單行(xíng)文(wén)本特别長(cháng),行(xíng)間(jiān)距較↑小(xiǎo)的(de)時(shí)候顯得(de)尤其重要(yào)。
作(zuò)者指出,排版上(shàn££₩g)一(yī)定要(yào)盡量兩端對(dε×uì)齊的(de)原則不(bù)一(yī)¥φ定适用(yòng)于現(xiàn)代網站(zhàn),左端對(duì)齊(♣αflush left)、右端參差(ragged right)的(de)排版越來(lái)越常♥π♠見(jiàn),人(rén)們的(de)審美(měi)觀也(yě)在發生(shē∑ ng)變化(huà)。如(rú)今的(de)互聯網♠≥↕'上(shàng),左對(duì)齊也(yě)是(shì∑Ω)文(wén)本的(de)默認設定。純英文(wén)φ✘∏文(wén)本行(xíng)的(de)長(cháng)度錯(cuò)落有(yǒu)緻,強制(zh✔ ¥ì)右側對(duì)齊不(bù)一(yī)定是(s✔±☆hì)明(míng)智之選。設計(jì)師(shī)可(kě)δ ↕↕以綜合利用(yòng)hyphens; letter-λ♥φ≤spacing, text-justify等 CSS 技(jì)巧達到 ©φ<(dào)美(měi)觀效果。
固定元素保持慣例,作(zuò)者列舉了(le)幾個(gè)例子(zǐ):
網站(zhàn)标題(header)往往會(hu∏₹ì)在網站(zhàn)左上(shàng)方顯示。
LOGO 通(tōng)常可(kě)以點擊,以回到(dào)首✔ 'γ頁
退出登錄一(yī)般會(huì)在網站(zhàn)右上(shàng≠)方顯示
版權信息總是(shì)位于最下(xià)方 footer
網站(zhàn)搜索框經常會(huì)出現(↔"☆δxiàn)在網站(zhàn)右上(shàng)方或中部上(shàn&&g)方
切換網站(zhàn)語言版本的(de)功能(néng)經←↕β常出現(xiàn)在網站(zhàn) header 右端并配£€有(yǒu)國(guó)旗顯示更直觀
搜索框必需是(shì)一(yī)個(gè)框
注冊通(tōng)常在頁面的(de)右上(shàng)角