在網(wǎng)頁(yè)設(shè)計(jì)中需要注意什么問題

第頁(yè)在網(wǎng)頁(yè)設(shè)計(jì)中需要注意什么問題在〔網(wǎng)頁(yè)〔制定〕〕中必須要注意什么問題

文本、背景、框架等各為不同的顏色，雖然看似鮮艷但是，多重漸變、幾種鮮艷的色彩和大量有鮮亮對(duì)比的色調(diào)及飽和度，會(huì)破壞你網(wǎng)站的層次和空白概念。下面介紹在網(wǎng)頁(yè)制定中必須要注意什么問題，希望可以為您帶來(lái)幫助。

1、留白太少

留白是網(wǎng)頁(yè)制定中一個(gè)重要部分。它有助于防止用戶在瀏覽網(wǎng)站時(shí)變得疲憊，它可以在內(nèi)容中劃出距離，而且它本身也看上去不錯(cuò)?？瞻撞皇潜仨氂冒咨?，而是，它僅僅是為其他制定元素提供間隔和緩沖的空間。

2、字體設(shè)置過多

通常來(lái)說(shuō)一個(gè)網(wǎng)頁(yè)中最好不要超過三種字體。

3、色彩太多

文本、背景、框架等各為不同的顏色，雖然看似鮮艷但是，多重漸變、幾種鮮艷的色彩和大量有鮮亮對(duì)比的色調(diào)及飽和度，會(huì)破壞你網(wǎng)站的層次和空白概念。嘗試限制自己只用一種鮮艷的色調(diào)(如藍(lán)色)，再搭配反相的單色(白、灰、黑)以獲得一個(gè)美麗的搭配。這里強(qiáng)調(diào)下豆瓣的配色。也是我喜愛的顏色搭配。

4、內(nèi)容過于堆疊

網(wǎng)頁(yè)的內(nèi)容繁多，各種分支信息占據(jù)的空間過多，沒有特別關(guān)鍵的主題。它有助于在內(nèi)心組織重要的信息，并引導(dǎo)用戶注意在你想讓他注意的地方。在傳統(tǒng)藝術(shù)中，新手們被教導(dǎo)色彩、價(jià)值和線性透視三原則和其他藝術(shù)指導(dǎo)。在網(wǎng)頁(yè)制定中，沒有特別奉行的準(zhǔn)則，但以直觀的方式組織你的內(nèi)容是一條很好的經(jīng)驗(yàn)規(guī)則。也是多年培養(yǎng)的用戶習(xí)慣。最終習(xí)慣就是最終用戶。當(dāng)然一成不變不是我們所激勵(lì)的。

5、沒有重視用戶〔電腦〕的屏幕顯示效果

或許某個(gè)分辨率對(duì)你的電腦效果特別好，但是用在用戶電腦上就不一定如此了。雖然這種分辨率的顯示器正在減少，但采納更小的分辨率的手機(jī)設(shè)備也來(lái)了。現(xiàn)在的網(wǎng)頁(yè)制定寬度標(biāo)準(zhǔn)是960像素，雖然沒有照顧到每一種分辨率，但在主流分辨率上可以浮現(xiàn)的最好。假如你希望面對(duì)大量的手機(jī)用戶，最好合計(jì)一個(gè)手機(jī)版制定。

6、沒有合計(jì)對(duì)比效果

你有沒有試過兩種對(duì)比色彩的運(yùn)用或者大小的變化，有些方式之所以比其他的更好，其原因就是這是一種眼睛感知到對(duì)比的方式。如果你很難舒適的閱讀文字，合計(jì)一下改變字體大小或方式。成為一個(gè)大師級(jí)網(wǎng)頁(yè)制定師的秘訣：對(duì)比，對(duì)比，對(duì)比。

7、不一致

網(wǎng)頁(yè)內(nèi)容過于雜亂，沒有統(tǒng)一的框架把他們合并到一個(gè)中心主旨上。它是把網(wǎng)頁(yè)制定組織在一起的方式，可以創(chuàng)造一種緊密結(jié)合的感覺。在網(wǎng)站頁(yè)面互相鏈接的狀況下，它可以幫助用戶把所有頁(yè)面都聯(lián)系在一起。如果你在整個(gè)網(wǎng)站繼續(xù)改變字體、大小和色彩，用戶很快會(huì)覺得不知所措。

8、沒有足夠的文字間距

間距過小是造成網(wǎng)頁(yè)缺陷的一個(gè)重要原因。網(wǎng)頁(yè)一個(gè)是行距，可以用CSS直接調(diào)整，關(guān)系到兩行文字之間的距離。這些有助于區(qū)分行與段落，使用戶更容易閱讀文字。

9、尺寸大小問題

標(biāo)準(zhǔn)做法是h1的文字大于h2的文字，頭部文字大于段落文字。盡量堅(jiān)持一致的尺寸，因?yàn)樗兄谝恢滦?第8條)和內(nèi)容層次(第4條)。堅(jiān)持文字的可讀性，但不要太大，讓字體的大小表現(xiàn)信息的重要性。還有，10像素以下的尺寸對(duì)大量閱讀的人來(lái)說(shuō)太小了。

網(wǎng)頁(yè)底部制定的注意問題

制定師在制定頁(yè)面的時(shí)候，大多都把精力放在Banner和內(nèi)容排序上，而底部就顯得并不那么重要了，其實(shí)并不是的!網(wǎng)頁(yè)的底部是整個(gè)網(wǎng)站的重要部分，用戶可以從中獲得網(wǎng)站的基本信息。如果在整站制定中忽略了底部，那么你的網(wǎng)頁(yè)整體布局制定就顯得虎頭蛇尾了。

既然不能忽視底部制定，那么我們應(yīng)該如何去制定底部部分呢?

1.展示頁(yè)面信息，著作權(quán)等

頁(yè)面信息、著作權(quán)等信息一直作為最基本的FOOTER元素來(lái)使用。具體來(lái)說(shuō)，通?？梢院嫌?jì)放置版權(quán)注冊(cè)時(shí)間、使用條件、個(gè)人保護(hù)方針、網(wǎng)站地圖、著作權(quán)等等信息在FOOTER區(qū)域。這個(gè)區(qū)域會(huì)有很多信息必須要一一展現(xiàn)，因此，這部分的制定必須簡(jiǎn)單直接，不必須要過多修飾。此外，出于便捷性的合計(jì)，置頂按鈕也是必須要放置的。

2.網(wǎng)站導(dǎo)航條

網(wǎng)站導(dǎo)航條也是使用較多的元素。網(wǎng)站頂部的導(dǎo)航條和FOOTER部分的導(dǎo)航條會(huì)形成首尾呼應(yīng)，即使用戶瀏覽到頁(yè)面的最底部，也不必須要返回到頁(yè)面的頂部，這樣的制定更加方便了與其他頁(yè)面之間的跳轉(zhuǎn)。

3.利于SEO優(yōu)化

在FOOTER部分上使用較多的則是文本鏈接，這一點(diǎn)是非常有利于SEO優(yōu)化的。但是，如果在鏈接上埋入毫不相干的關(guān)鍵詞，就會(huì)使鏈接看起來(lái)不太自然，這是值得注意的一點(diǎn)，不要為了推廣而推廣。

4.網(wǎng)站地圖

在FOOTER部分放置網(wǎng)站地圖，可以方便用戶快速跳轉(zhuǎn)到指定頁(yè)面。如果在網(wǎng)頁(yè)的FOOTER部分放置網(wǎng)站地圖，就會(huì)獲得用戶更多的點(diǎn)擊機(jī)會(huì)，同時(shí)會(huì)使用戶有更好的體驗(yàn)，即使不用移動(dòng)頁(yè)面也能跳轉(zhuǎn)到很多其他頁(yè)面。

誠(chéng)然，關(guān)于頁(yè)面不是特別多的網(wǎng)站，網(wǎng)站地圖還是做得較為簡(jiǎn)單直接點(diǎn)好。如果排列的鏈接數(shù)量過多，會(huì)讓用戶感覺到網(wǎng)站很繁瑣，不易于操作。要是選擇過多的話，人們往往不知道該選擇什么。因此，網(wǎng)站的結(jié)構(gòu)在網(wǎng)站制定之前就必須要合計(jì)清楚。

5.傳達(dá)品牌理念

FOOTER與頁(yè)頭有所不同，可以放置基本不必須要選擇的元素。另外在FOOTER部分，更容易保證有足夠大的空間，我們也可以選擇一些插畫或圖形去傳達(dá)品牌理念。

6.聯(lián)系方式

在FOOTER部分可以放置號(hào)碼、企業(yè)郵箱、企業(yè)地址、地圖，資料請(qǐng)求等等的鏈接，這樣放置會(huì)極大方便用戶查找企業(yè)的聯(lián)系方式。

界面制定注意問題

1.嘗試默認(rèn)選擇

將界面做成默認(rèn)用戶選中想要使用你的產(chǎn)品，意味著如果用戶真的必須要使用，那么可以直接點(diǎn)擊確定而不必須要額外點(diǎn)選了。當(dāng)然，將界面制定成默認(rèn)選擇的樣子多少存在點(diǎn)爭(zhēng)議，有點(diǎn)強(qiáng)迫用戶的感覺。如果你想道德一點(diǎn)，你可以要么把讓用戶選擇的文字寫得模棱兩可，要么使用雙重否定這樣不那么直白的描述，這兩種方式都可以讓用戶覺得沒有那么強(qiáng)的感覺是被強(qiáng)迫選擇使用產(chǎn)品的。

2.堅(jiān)持界面一致性，不要增加用戶的學(xué)習(xí)成本

自從DonaldNorman的一系列著作面世后，界面制定中盡量堅(jiān)持一致性成了一個(gè)普遍遵循的準(zhǔn)則。在制定中堅(jiān)持一致性可以減少用戶的學(xué)習(xí)成本，用戶不必須要學(xué)習(xí)新的操作。當(dāng)我們點(diǎn)擊按鈕，或者進(jìn)行拖拽操作，我們期望這樣的操作在整個(gè)程序的各個(gè)界面都是一致的，會(huì)得到相似的結(jié)果出來(lái)。不過在讓界面變得一致之前，記住一點(diǎn)，適當(dāng)?shù)拇蚱普w的一致性也是可取的。這有時(shí)的不一致性的制定用在你必須要強(qiáng)調(diào)的地方可以起到很大的作用。所以世事無(wú)絕對(duì)，我們應(yīng)遵從一致的制定準(zhǔn)則，但適當(dāng)?shù)卮蚱七@種常規(guī)。

3.使用合適的默認(rèn)值，減少用戶的額外操作

適當(dāng)?shù)哪J(rèn)值和預(yù)先填充好的表單字段可以大量減少用戶的工作量。在節(jié)省用戶寶貴的時(shí)間上面，這是種非經(jīng)常見的做法，可以幫助用戶快速填完表單或者注冊(cè)信息。

4.遵循慣例避免重復(fù)造輪子

界面制定中遵從慣例跟之前的界面一致性準(zhǔn)則很相似。如果我們遵從了界面制定中的一些約定，用戶用起來(lái)會(huì)很方便。相反，不一致和沒有遵從慣例則會(huì)提升學(xué)習(xí)成本。有了界面制定中這些約定，我們想都不用想就知道界面右上角(大多數(shù)狀況下)的叉叉是關(guān)閉程序用的，或者點(diǎn)擊一個(gè)按鈕后我們能夠猜測(cè)到將會(huì)發(fā)生什么。當(dāng)然，慣例是會(huì)過時(shí)的，隨著時(shí)間的推移，同樣的操作也有可能被賦予新的含義。但要記住，當(dāng)你在界面中打破這些常規(guī)時(shí)一定要目的明確，并且出發(fā)點(diǎn)是好的。

5.讓用戶覺得可以避免失去而不是獲得

我們喜愛成功，沒有誰(shuí)愿意失敗。依據(jù)心理學(xué)得到的可靠結(jié)論，人們一般更頃向于避免失去擁有的東西而不是獲得新的利益。這一結(jié)論也適用于產(chǎn)品的制定和推廣中。試著說(shuō)明你的產(chǎn)品會(huì)幫助客戶維護(hù)他的利益，堅(jiān)持健康，社會(huì)地位等要好過告訴客戶這個(gè)產(chǎn)品會(huì)帶來(lái)一些他未曾擁有的東西。比如保險(xiǎn)公司，它是在銷售我們出事之后可以得到的大筆賠償呢還是在強(qiáng)調(diào)可以幫助我們避免失去擁有的財(cái)產(chǎn)?

6.具有層次的圖形化展示優(yōu)于直白的文字描述

具有層次的制定可以將界面上重要的部分與不次要部分區(qū)分開來(lái)。要讓界面層次分明，可以在這些方面做文章：對(duì)齊方式，間距，顏色，縮進(jìn)，字體大小，元素尺寸等。當(dāng)所有這些調(diào)整運(yùn)用得適當(dāng)時(shí)，可以提升整個(gè)界面的可讀性。相比在一個(gè)很直白的界面上用戶一眼就可以從上瞟到底的制定，這樣分明的制定也可以讓用戶放慢速度來(lái)慢慢閱讀。這樣也使界面更有特色一些。就好比一次旅行，你可以乘坐高鐵快速到達(dá)景區(qū)(從頁(yè)面頂部瞟到底部)，但你也可以慢行以欣賞沿途風(fēng)光。所以層次分明的制定讓眼睛有可以停留的地方，而不是對(duì)著空白單調(diào)的一個(gè)屏幕。

7.將有關(guān)聯(lián)的東西分組避免雜亂無(wú)章

將各個(gè)功能項(xiàng)分組合并起來(lái)可以提升可用性。有點(diǎn)常識(shí)的人都知道刀子和叉子，或者打開文件和關(guān)閉文件是放在一起的。將功能相近的元素放在一起也符合邏輯，符合我們平常的認(rèn)知。

8.使用行內(nèi)即時(shí)校驗(yàn)而不是提交后再告訴出錯(cuò)

在處理表單時(shí)，最好馬上檢測(cè)出用戶所填寫內(nèi)容是否符合要求然后給出驗(yàn)證消息。這樣錯(cuò)誤一出現(xiàn)能就能得到改正。相反，提交后再檢查表單會(huì)給出錯(cuò)誤消息，會(huì)讓用戶感到不爽又要重復(fù)之前的工作。

9.放寬對(duì)用戶輸入的要求

對(duì)用戶輸入的數(shù)據(jù)，盡量放寬限制，包括格式，大小寫什么的。這樣做可以更人性化一點(diǎn)，也使得界面更加友好。一個(gè)再恬當(dāng)不過的例子就是讓用戶輸入號(hào)碼的時(shí)候，用戶有很多種輸入方式，帶括號(hào)的，帶破折號(hào)的，帶空格的，帶區(qū)號(hào)和不帶區(qū)號(hào)的等等。如果你在代碼中來(lái)處理這些格式的問題，代價(jià)也只是你一個(gè)人多寫幾行代碼而以，卻可以減少無(wú)數(shù)用戶的工作量。

10.讓用戶感覺必須要快速做出響應(yīng)而不是毫無(wú)時(shí)間觀念

適當(dāng)?shù)木o迫感是個(gè)有效的戰(zhàn)術(shù)可以讓用戶馬上做出決定而不是等上個(gè)十天半個(gè)月。重要的是這種戰(zhàn)術(shù)屢試不爽，因?yàn)樗凳玖速Y源的緊缺或者活動(dòng)的時(shí)間有限，今天可以買，但明天可能就無(wú)法這么低價(jià)了。另一方面，這一戰(zhàn)術(shù)也讓用戶感到會(huì)錯(cuò)失一次大好的機(jī)會(huì)，再一次，應(yīng)用了人們害怕失去的本性。當(dāng)然，這種戰(zhàn)術(shù)會(huì)被一些人嗤之以鼻，認(rèn)為是不耿直的做法。不過，這只是種戰(zhàn)術(shù)而以，并且在堅(jiān)持合法性的前提下應(yīng)用也無(wú)傷大雅。所以請(qǐng)不要為了營(yíng)銷而在界面上制造緊迫的假象。

11.嘗試饑餓營(yíng)銷(制造稀缺感)

物以稀為貴。饑餓營(yíng)銷給出的信息就是東西不多，只剩幾件，明天再來(lái)，可能沒了。你去比較一下批發(fā)與限量版的東西他們的價(jià)格差距有多大就知道了?；剡^頭來(lái)看，那些批發(fā)商或者大零售商，他們也使用饑餓營(yíng)銷，以獲得更好的銷量。但在軟件行業(yè)，我們常常會(huì)忘記有饑餓營(yíng)銷這回事。因?yàn)閿?shù)字產(chǎn)品是可以很容易拷貝復(fù)制的，不存在缺貨的狀況。其實(shí)，在界面制定中，也可以將其運(yùn)用起來(lái)與現(xiàn)實(shí)中的資源緊缺進(jìn)行聯(lián)系。想想一次網(wǎng)上研討會(huì)的門票，想想你一個(gè)月可以服務(wù)的人數(shù)限制，這些信息都可以告知用戶是有限的。

網(wǎng)頁(yè)制定中的css用法

說(shuō)到網(wǎng)頁(yè)制定，關(guān)于大多數(shù)的制定師來(lái)說(shuō)，無(wú)非就是網(wǎng)站的布局、每個(gè)版塊的制定、網(wǎng)站中的圖片制定、以及留給優(yōu)化人員填充內(nèi)容的網(wǎng)站列表頁(yè)等。而在已上的制定中都離不開CSS樣式表的制定。因此，本文中我將與大家一起分享CSS樣式表的相關(guān)知識(shí)。

一、什么是CSS樣式表?

依據(jù)百度百科的定義：層疊樣式表(英文全稱：CascadingStyleSheets)是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)準(zhǔn)確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

通俗的講CSS樣式表就是有關(guān)于網(wǎng)站當(dāng)中每個(gè)不同頁(yè)面中所有和網(wǎng)頁(yè)樣式制定有關(guān)的代碼組合。

二、CSS樣式表的優(yōu)點(diǎn)：

有很多的網(wǎng)頁(yè)制定師認(rèn)為用表格所顯示的效果與css幾乎相同，而且css又因不同的瀏覽器支援度而有所差異，然而表格卻適用于不同的瀏覽器。那么為什么我們還要使用CSS樣式表呢?下面我們將會(huì)把表格樣式和CSS樣式表做一下對(duì)比，幫助制定師更好的選擇。

原始碼數(shù)量：我們?cè)谥谱鞅砀袷降臉邮奖頃?huì)引用大量的原始碼，這關(guān)于并非系統(tǒng)語(yǔ)言開發(fā)的制定師來(lái)講，簡(jiǎn)直就是一個(gè)災(zāi)難。而相比較于表格式，css的好處就在于能夠減少網(wǎng)頁(yè)制定過程中關(guān)于原始碼的依賴。

更新的簡(jiǎn)易性：要知道表格制定是死的，css制定是活的，制定好的表格版型因原始碼的復(fù)雜，很難再改變。再者，您可一次更新網(wǎng)站的相同內(nèi)容，而不必須要每個(gè)頁(yè)面分別修改。

三、CSS能讓我們更輕易的修改整個(gè)網(wǎng)站的制定風(fēng)格。

關(guān)于網(wǎng)站制定來(lái)說(shuō)，我們會(huì)在定期內(nèi)對(duì)網(wǎng)站的各個(gè)頁(yè)面進(jìn)行更新替換，而這時(shí)假設(shè)采納表格制定網(wǎng)頁(yè)，勢(shì)必要因?yàn)樾碌陌婷骘L(fēng)格而重新製