網站建設

良好的(de)網頁設計是(shì)件很難實現的(de)事情。一(yī / yì ／yí)個(gè)好的(de)網頁設計，不(bù)僅吸引眼球，也(yě)是(shì)實用的(de)、直觀的(de)、層級簡單卻足夠複雜到(dào)保持用戶的(de)興趣。字體、色彩、空白與内容間的(de)完美平衡可以(yǐ)構成一(yī / yì ／yí)個(gè)非常好看的(de)設計，你的(de)用戶也(yě)會再次回來(lái)。而(ér)一(yī / yì ／yí)個(gè)壞的(de)網頁設計，會把你的(de)用戶從你的(de)網站上(shàng)趕跑。 在(zài)設計一(yī / yì ／yí)個(gè)網頁時(shí)，有許多地(dì / de)方會讓許多設計師誤入歧途。

1、沒有足夠的(de)空白

空白可以(yǐ)說(shuō)是(shì)設計中重要(yào / yāo)的(de)一(yī / yì ／yí)部分。它有助于(yú)防止用戶在(zài)浏覽網站時(shí)變得疲憊，它可以(yǐ)在(zài)内容中劃出(chū)距離，而(ér)且它本身也(yě)看上(shàng)去不(bù)錯。空白不(bù)是(shì)必須用白色的(de)，而(ér)是(shì)，它僅僅是(shì)爲(wéi / wèi)其他(tā)設計元素提供間隔和(hé / huò)緩沖的(de)空間。

2、太多的(de)字體

一(yī / yì ／yí)般一(yī / yì ／yí)個(gè)簡單的(de)網頁設計，一(yī / yì ／yí)般字體不(bù)超過3種。多則亂

3、太多的(de)色彩

背景一(yī / yì ／yí)種顔色，内容文本一(yī / yì ／yí)種顔色，鏈接一(yī / yì ／yí)種顔色，頁頭和(hé / huò)lightbox一(yī / yì ／yí)種顔色，圖案和(hé / huò)頁腳各一(yī / yì ／yí)種顔色。這(zhè)很好，因爲(wéi / wèi)它幫助區分了(le／liǎo)有用的(de)内容。但是(shì)，多重漸變、幾種鮮豔的(de)色彩和(hé / huò)大(dà)量有鮮明對比的(de)色調及飽和(hé / huò)度，會破壞你網站的(de)層次和(hé / huò)空白概念。嘗試限制自己隻用一(yī / yì ／yí)種鮮豔的(de)色調（如藍色），再搭配反相的(de)單色（白、灰、黑）以(yǐ)獲得一(yī / yì ／yí)個(gè)漂亮的(de)搭配。這(zhè)裏強調下豆瓣的(de)配色。也(yě)是(shì)我喜歡的(de)顔色搭配。

4、沒有内容層次

用戶的(de)眼睛喜歡有秩序的(de)設計，如頭部包含導航和(hé / huò)LOGO，特定内容使用lightbox，三列分欄，頁腳。它有助于(yú)在(zài)内心組織重要(yào / yāo)的(de)信息，并引導用戶注意在(zài)你想讓他(tā)注意的(de)地(dì / de)方。在(zài)傳統藝術中，新手們被教導色彩、價值和(hé / huò)線性透視三原則和(hé / huò)其他(tā)藝術指導。在(zài)網頁設計中，沒有特别奉行的(de)準則，但以(yǐ)直觀的(de)方式組織你的(de)内容是(shì)一(yī / yì ／yí)條很好的(de)經驗規則。也(yě)是(shì)多年培養的(de)用戶習慣。終習慣就(jiù)是(shì)終用戶。當然一(yī / yì ／yí)成不(bù)變不(bù)是(shì)我們所鼓勵的(de)。

5、不(bù)考慮用戶的(de)分辨率

你的(de)屏幕分辨率有2560像素，這(zhè)非常好。但很多人(rén)還在(zài)屏幕上(shàng)用1024像素的(de)分率，有些還在(zài)用640*480或800*600。雖然這(zhè)種分辨率的(de)顯示器正在(zài)減少，但采用更小的(de)分辨率的(de)手機設備也(yě)來(lái)了(le／liǎo)。現在(zài)的(de)網頁設計寬度标準是(shì)960像素，雖然沒有照顧到(dào)每一(yī / yì ／yí)種分辨率，但在(zài)主流分辨率上(shàng)可以(yǐ)呈現的(de)好。假如你希望面對大(dà)量的(de)手機用戶，好考慮一(yī / yì ／yí)個(gè)手機版設計。

6、對比的(de)問題

你考慮過閱讀黑底白字和(hé / huò)白底黑字的(de)不(bù)同嗎？你有沒有試過閱讀一(yī / yì ／yí)下白底灰字？有些方式之(zhī)所以(yǐ)比其他(tā)的(de)更好，其原因就(jiù)是(shì)這(zhè)是(shì)一(yī / yì ／yí)種眼睛感知到(dào)對比的(de)方式。如果你很難舒服的(de)閱讀文字，考慮一(yī / yì ／yí)下改變字體大(dà)小或方式。成爲(wéi / wèi)一(yī / yì ／yí)個(gè)大(dà)師級網頁設計師的(de)秘訣：對比，對比，對比。

7、同一(yī / yì ／yí)件事情做的(de)不(bù)夠多，或做的(de)太多

多重導航非常好，如一(yī / yì ／yí)個(gè)在(zài)頁頭一(yī / yì ／yí)個(gè)在(zài)頁腳。在(zài)頁腳加一(yī / yì ／yí)個(gè)”返回頂部”的(de)按鈕也(yě)很好。但是(shì)，太多指向同一(yī / yì ／yí)目标的(de)途徑會降低可用性。讓你的(de)奶奶用下你的(de)網站，如果她搞不(bù)定，想想哪些東西讓初次訪問的(de)用戶拒絕使用這(zhè)個(gè)網站。

8、不(bù)一(yī / yì ／yí)緻

一(yī / yì ／yí)緻性是(shì)網頁設計的(de)關鍵。它是(shì)把網頁設計組織在(zài)一(yī / yì ／yí)起的(de)方式，可以(yǐ)創造一(yī / yì ／yí)種緊密結合的(de)感覺。在(zài)網站頁面互相鏈接的(de)情況下，它可以(yǐ)幫助用戶把所有頁面都聯系在(zài)一(yī / yì ／yí)起。如果你在(zài)整個(gè)網站持續改變字體、大(dà)小和(hé / huò)色彩，用戶很快會覺得不(bù)知所措。

9、沒有足夠的(de)文字間距

與空白有關，文字間距有兩個(gè)部分，一(yī / yì ／yí)個(gè)是(shì)字距（這(zhè)個(gè)不(bù)能用CSS直接調整，可以(yǐ)通過一(yī / yì ／yí)些高級技術解決），關系到(dào)字母之(zhī)間的(de)空白。一(yī / yì ／yí)個(gè)是(shì)行距，可以(yǐ)用CSS直接調整，關系到(dào)兩行文字之(zhī)間的(de)距離。這(zhè)些有助于(yú)區分行與段落，使用戶更容易閱讀文字。

10、貧乏的(de)尺寸大(dà)小

标準做法是(shì)h1的(de)文字大(dà)于(yú)h2的(de)文字，頭部文字大(dà)于(yú)段落文字。盡量保持一(yī / yì ／yí)緻的(de)尺寸，因爲(wéi / wèi)它有助于(yú)一(yī / yì ／yí)緻性（第8條）和(hé / huò)内容層次（第4條）。保持文字的(de)可讀性，但不(bù)要(yào / yāo)太大(dà)，讓字體的(de)大(dà)小表現信息的(de)重要(yào / yāo)性。還有，10像素以(yǐ)下的(de)尺寸對大(dà)量閱讀的(de)人(rén)來(lái)說(shuō)太小了(le／liǎo)。

本文章來(lái)源湖北衆廣網絡：高端網站建設