網絡公司盛界益信息咨詢專注于建站(zhàn)服務

資訊中心

更多(duō)

您當前的(de)位置: 首頁 > 資訊中心 > 行(xíng)業(yè)動态

給初學者的(de)反面典型!七個(gè)令人(rén)傷腦(nǎo)的(de)網頁頁面設✘‍ 計(jì)

有(yǒu)一(yī)些(xiē)情況下(xi∏♣®¥à),當我們滿懷期待地(dì)址開(kāi)一(yī)些(xiē)網址≥ 的(de)情況下(xià) —— 他(tā)們的(de)存有(yǒu)真是(shφσì)是(shì)設計(jì)的(de)災禍!相(xiàng)信自(zì)己,如(rú)™£↑果你(nǐ)看(kàn)到(dào)他(tā)們也(yě)會(huì)傷腦(nǎo)的(de)。從¥↑γ↓(cóng)莫名其妙的(de)連接遺失到(dào)槽糕的(de)易用(yòng)性,文(wén≤✘☆)中會(huì)共享一(yī)些(xiē)會(huì)令人(rén)一(yī)瞬間₩×(jiān)爆走的(de)不(bù)正确設計(jì)。留意!千萬不(bù)要(yào)使你(nǐ)∑♠←的(de)用(yòng)戶碰到(dào)和(h∑Ω€αé)下(xià)邊一(yī)樣的(de)難題。

1. 欠缺飽和(hé)度

網頁頁面上(shàng)的(de)文(wén)本和(hé)圖片都(dōu)必須具有(yǒu)較¥¥≥↓高(gāo)的(de)易讀(dú)性,非常簡單的(deε$φ)方式便是(shì)讓他(tā)們具備高(gāo)對(duγ♦ì)比度。可(kě)是(shì)很(hěn)多(≈↔Ωduō)設計(jì)師(shī)卻常常忽略這(zhè)條标準。$✘ ε

圖片情況與文(wén)本飽和(hé)度很(hěn)差,造成文(wén)€≠本模模糊糊沒法閱讀(dú)文(wén)章(zhāng),¶‌用(yòng)戶不(bù)但(dàn)錯(cuò)過了(le)這(zhè)句話(≥∏ £huà)也(yě)錯(cuò)過了(le)你(nǐ ¶β↑)要(yào)傳遞的(de)關鍵內容。

你(nǐ)務必确保每一(yī)個(gè)原素都(dōu)和(± φ<hé)它周邊的(de)别的(de)原素差别起來(lái),記牢這(zhè)種基'₹本上(shàng)方式——色彩、室內(nèi)空(kōng)間(jδ™iān)、規格.。有(yǒu)效地(dì)應‍&用(yòng)他(tā)們使你(nǐ)的(de)每一(yī)個(gè)原素都(dōu)清★"楚可(kě)見(jiàn)吧(ba)!

圖中的(de)2個(gè)比照(zhào)難題——乳白(bái)色的(de)‌‌文(wén)本與淺色系的(de)照(zhào)片色調過度相(xiàng)仿及其過↑§•小(xiǎo)的(de)字體(tǐ)大(dà)小(xiǎo)都(dōu)¶$✘讓這(zhè)一(yī)段文(wén)本的(de)易讀&≈'(dú)性越來(lái)越偏差。

2. 槽糕的(de)導航欄和(hé)操作(zuò)步驟

當我們登錄了(le)網頁頁面的(de)第一(± 'yī)眼,你(nǐ)也(yě)就(jiù)得(de)讓我明(míng)白(bái)了(le§☆≠≠)下(xià)面我該做(zuò)哪一(yī)個(gè)實際σ ≥γ操作(zuò)。點一(yī)下(xià)按鍵及其信息必須放(fàng)到(dào)醒目的(de)± ‌→部位——這(zhè)就(jiù)是(shì)為(wèi)何導航ε >∞欄和(hé)工(gōng)具欄通(tōng)常處在網頁頁面的(de)頂端。

導航欄的(de)标識內(nèi)容和(hé)運作(zuò)實際效果務必清楚形象×α≥→化(huà),當你(nǐ)試著(zhe)應用(yòng)水(shuǐ)平方向的(de)滾動←∑條或是(shì)别的(de)一(yī)些(xiē)不(bù)太不(bù)同尋常的(​"✘Ωde)動畫(huà)特效設計(jì)的(de)情況下(xià),給用(yòng<☆)戶一(yī)些(xiē)暗(àn)示著(zhe)讓她(​• tā)們了(le)解你(nǐ)的(de)網頁頁面怎樣工(gōng)作(zuò)吧(ba"​$←)!過度繁雜(zá)的(de)設計(jì)會(huì)讓用(yòng)戶覺得(de)手足無措™φ↓并離(lí)開(kāi)你(nǐ)的(de)網站(zhàn)。

3. 槽糕的(de)照(zhào)片配搭解決

沒什(shén)麽比一(yī)個(gè)優秀的(de)圖↔↔¥片被别的(de)設計(jì)遮蓋更槽糕了(le)。假如 <∞≠(rú)你(nǐ)花(huā)了(le)時間(•&jiān)給你(nǐ)的(de)網站(zhàn)配搭了(le)一(yī)張優©∑​秀的(de)圖片,為(wèi)何要(yào)讓它被别的(de)的(dππλ‌e)設計(jì)原素所遮蓋呢(ne)?再加上(shàng)簡易的(de)一(yī)行(xíng)字₹™  就(jiù)可(kě)以了(le)!這(zhè)也(yě)是(shì)為(wèi)什(shén)麽ε±​←全透明(míng)按鍵變成了(le)新的(de)潮流÷♣趨勢。

當設計(jì)師(shī)追求時(shí)尚潮流的(d§ ₽e)情況下(xià),常常會(huì)掉入那(nà)樣的(de)錯(cuò)誤觀念。頂欄很(→δ'∏hěn)有(yǒu)意思,翻轉也(yě)非常好(hǎo),但(dàλΩ✘n)是(shì)當你(nǐ)為(wèi)他✘Ω(tā)們配搭上(shàng)文(wén)本,一(yī)切就(jiù)非常容易越來(lái) ™越不(bù)那(nà)麼和(hé)諧了(le)。網頁頁面上(shà∏£★ng)的(de)每一(yī)個(gè)照(zhào)片都(dōu)必須與文(wén)字配搭,π≥&讓每一(yī)個(gè)文(wén)本都(dōu)可(kě)以讀(dú)↑©,照(zhào)片上(shàng)的(de)每一(yī)個(gè)設計(₽≤÷•jì)原素都(dōu)清楚可(kě)見(jiàn)。

不(bù)能(néng)用(yòng)文(wén)字↓₩或是(shì)按鍵遮蓋照(zhào)片上(shàng)一(yī)切關鍵的(de)一ε∑(yī)部分(fēn)。當你(nǐ)感覺你(n☆€<γǐ)的(de)網頁頁面設計(jì)發生(→βshēng)了(le)那(nà)樣的(de)狀況,最好(hǎo)是(shì)拆換一(yī)個λ☆≥(gè)更為(wèi)簡約的(de)情況并在别的(de ♣α)地(dì)區(qū)放(fàng)喜歡你(nǐ)的(de)這(zhè)張圖片吧(ba)。

當第一(yī)眼見(jiàn)到(dào)上(shàng)邊這(z✔"βhè)幅圖的(de)情況下(xià)你(nǐ)能(n☆♣éng)被吸引住是(shì)由于它的(de)素描畫ε ±¶(huà)設計(jì)風(fēng)格。但(dàn)細心看(kàn)一(yī→¥∞↓)下(xià),角色臉部被文(wén)本遮住了(le),那(nà)一(yī)段獎賞之辭也←↑→‍(yě)讓總體(tǐ)看(kàn)起來(lái)亂七八糟。

4. 不(bù)應用(yòng)網格圖

在網頁頁面設計(jì)中,有(yǒu)一(yī)些(xiē)“雜(zá)亂無章(zhā '↑ng)”也(yě)可(kě)以令人(rén)心曠神怡,不(bù)一(yī)樣是"‍‌(shì)在其中的(de)一(yī)種,不(bù)應用(yòng)網格£↓≥™圖肯定并不(bù)是(shì)!

是(shì)不(bù)是(shì)應用(yòng)網格圖是(shì)區(£→βqū)别設計(jì)優劣的(de)技(jì)術(shù)專業(yè)指标值之§‍↑一(yī)。網格圖讓一(yī)切越來(lái)越清楚有(yǒu)全局性 —₽®— 使你(nǐ)的(de)原素中間(jiān)保持一(yī)緻的(de)适度的(de)間(jiā≤ αn)隔,你(nǐ)了(le)解理(lǐ)應将你(nǐ)的(de)原素放(←δ↕∑fàng)到(dào)哪裡(lǐ)、如(rú)何放(fàng)。網格圖協助你φβ(nǐ)确定原素的(de)規格、文(wén)字的(de)​÷規格和(hé)室內(nèi)空(kōng)間(jiān),根據占比呈現(xiàn)內(nèiε¥)容的(de)著(zhe)重點。

5. 不(bù)選用(yòng)響應式網站∏♠¥<(zhàn)設計(jì)

應用(yòng)響應式網站(zhàn)設計(jì)架構!應用(yòng)響應式網站(z•∑₩φhàn)設計(jì)架構!應用(yòng)響應式網站(zhàn)設←'♥δ計(jì)架構!關鍵的(de)事(shì)兒(ér)說(shuō)三遍! 你(n'‌ǐ)的(de)網頁頁面也(yě)許必須在手機(jī)上(shàng)運作(zuò),♦≠€它務必要(yào)和(hé)在電(diàn)腦(nǎo)上(shàng)運作(zuò)一'¶®(yī)樣順暢。

我總是(shì)能(néng)碰到(dào)一♣δ γ(yī)些(xiē)網站(zhàn),在手機(jī)上(shàng)載入出的(de)是λ¶​€(shì)一(yī)全部網頁頁面。這(zhè)種網站(zhàn)并±✔λ'并不(bù)是(shì)響應式網站(zhβ♥∞àn)設計(jì),最少(shǎo)沒有(yǒu)手機(jī)安卓版的(de)主視(sh£≥∑ì)圖,以緻于用(yòng)戶沒法應用(yòng)。(盡管很(hěn)不(bù)普遍,但(dàn)®₩這(zhè)些(xiē)隻給予手機(jī)安卓版主視(s€♥hì)圖的(de)網站(zhàn)也(yě)非常令人(rén)無可(kě)奈何β&。)

也(yě)許許多(duō) 用(yòng)戶與我一(yī§≈)樣,假如(rú)不(bù)可(kě)以在手λ✘♣機(jī)上(shàng)順利應用(yòng)你(nǐ)的(de)網站(zhàn),§×&¶那(nà)因為(wèi)我不(bù)容易在我的(de)電 ✘(diàn)腦(nǎo)上(shàng)開(kāi)π≠啓它了(le)。

6. 連接遺失

奔潰的(de)連接是(shì)網頁頁面上£× (shàng)最令人(rén)生(shēng)氣的(de)事(shì<δ±)之一(yī)。培養每一(yī)年(nián)都(dōu)去(qù)審批你(nǐ€₽σ)的(de)網頁頁面上(shàng)連接是(shì)不(bù)是(shì)通(tōn<∞®​g)暢的(de)習(xí)慣性吧(ba)!你(nǐ)能(néng)手動式查驗或者應用(yò•↕ng)一(yī)些(xiē)專用(yòng)工(gōng)具,例如(rφπú)Website Link Checker.

假如(rú)你(nǐ)的(de)logo并不(bù)可(kě)以連接©↑' 到(dào)你(nǐ)的(de)網站(zhàn)主頁,因為(wèβ‍↑i)我會(huì)覺得(de)怪異。Logo全∑≠✔λ是(shì)要(yào)連接到(dào)網站(zhàn)主頁的(de)。(及其當處在主頁×∞的(de)情況下(xià),不(bù)必禁止使用(yòng)返回按鈕。)

考慮到(dào)連接的(de)易用(yòng)性。确保你(nǐ)的(de)連接,尤其是(shì←   )這(zhè)些(xiē)文(wén)字中的(de)連接充足顯著而且便于點一(yī)£≤ ©下(xià)而不(bù)導緻操作(zuò)失誤。不(bù)必在你(nǐ)的(de)文(wén)字€α¥↑中加上(shàng)許多(duō) 文(wén)本連接,特别‌​是(shì)在小(xiǎo)的(de)移動設備顯示屏上(shàng)§≥,用(yòng)戶難以點一(yī)下(xià)到(dào)恰當的(de)連接。

7. 全屏播放(fàng)歌(gē)曲

在網頁頁面上(shàng)加上(shàng)響聲會(huì)很(hěn)栩栩如(rλ¥ú)生(shēng),可(kě)千萬不(bù)★§>✔要(yào)在沒有(yǒu)用(yòng)戶提醒的(de)狀況下(xià)音(yīn)樂(yuè↕<)播放(fàng)。

你(nǐ)理(lǐ)應給予給用(yòng)戶一←→↑∞(yī)個(gè)開(kāi)啓/關閉音(y±®¥īn)樂(yuè)的(de)按鍵,而且默認設置關掉。歌(gē)曲也(y÷×>ě)許會(huì)讓用(yòng)戶震撼,可(kě)如(rú)果用(yòng)戶正♣♥©處在辦公環境或者情緒比較差的(de)情況下(xià)那(nà)麽做(zuò)卻得(♥​♠•de)不(bù)償失。用(yòng)戶必須能(néng)徹底操縱你(nǐ)的(↔™≤de)網頁頁面,而全屏播放(fàng)的(de)歌(g€​∞ē)曲卻與之本末倒置。我需要(yào)網頁音(yīn)樂(yuè)但(dàn)播放(fàng) ↑視(shì)頻(pín)務必獲得(de)我的(de)願意,假如(rú)沒法尋找按鍵關掉全 ε 屏播放(fàng)的(de)歌(gē)曲,那(nà)隻←φ α有(yǒu)立即關閉網頁頁面。

但(dàn)運用(yòng)在廣告宣傳上(₽&↑¥shàng)這(zhè)倒是(shì)個(gè)非常好(hǎo)的(de)伎倆。假±♦δ如(rú)你(nǐ)有(yǒu)有(yǒu)響聲的(de)內(nèi)容務必要(yào)播放(fà ‌§•ng)視(shì)頻(pín),考慮到(dào)放(fàng)一(y×α€​ī)個(gè)大(dà)的(de)彈出式隔音(yīn)按鍵。用 '↕(yòng)戶通(tōng)常會(huì)接納幾秒(miǎo)的(de↑±)廣告宣傳時間(jiān)并會(huì)去(qù)閱讀(dú)文 ≤☆​(wén)章(zhāng)內(nèi)容。盡管這(zhè)不(bù)是(shì)一(yī)個(¥✔ gè)理(lǐ)想化(huà)的(de)方式,則是(shì)一(yī)個(gè)比較好( ♣♣hǎo)的(de)解決方法。

看(kàn)一(yī)下(xià)上(shàng)邊這(zhè)張網頁¥±​頁面,它會(huì)全屏播放(fàng)歌∑>£₽(gē)曲但(dàn)理(lǐ)應是(shì)隔音(yΩ£īn)的(de)。再看(kàn)一(yī)下(xià)能(n∑<éng)否一(yī)眼尋找轉換按鍵吧(ba ☆∑ )——按鍵太小(xiǎo)了(le)尤其是(s™±ε₩hì)比照(zhào)别的(de)原素它更難被找到(dγ♥ào)。

更比較嚴重的(de)罪行(xíng)

沒有(yǒu)最糟僅有(yǒu)更糟糕,下(xià)邊的(de)一(yī)些(xiē)關鍵點設計(δ≠jì)不(bù)正确也(yě)會(huì)要(yào)我棄之而去(qù),别讓你(nǐ)自(zì✘≈$$)己變成這(zhè)種粗心大(dà)意犯÷​↕☆的(de)不(bù)正确的(de)受害人(rén)了(le)。

沒有(yǒu)檢索作(zuò)用(yòng)

英語的(de)語法或語法錯(cuò)誤

沒有(yǒu)通(tōng)話(huà)作(zuò)用(yòng)

文(wén)本中發生(shēng)過多(duō)連接

連字符聯接的(de)文(wén)字

特小(xiǎo)的(de)按鍵

槽糕的(de)排版設計(jì)和(hé)易讀(dú)™​♥性