網(wǎng)頁(yè)制作有必要留意的10個(gè)元素

下面介紹的這10個(gè)元素或許很簡(jiǎn)單被你忽視，當(dāng)然關(guān)于整體要過(guò)影響也不大，可是作為細(xì)心的人會(huì)發(fā)現(xiàn)，留意他們會(huì)給用戶帶來(lái)更好的體驗(yàn)。

　　1、鏈接(link)

　　設(shè)置鏈接狀況的不同風(fēng)格，這是根底也是有必要。你或許吃驚細(xì)節(jié)被疏忽的次數(shù)。包含下面列舉的頁(yè)面上一切鏈接的狀況。

　　Normal(常態(tài))

　　這是鏈接的默許狀況。鼠標(biāo)還沒(méi)有懸停、點(diǎn)擊，或是轉(zhuǎn)向向URL的時(shí)候，這個(gè)鏈接格局大部分的規(guī)劃師會(huì)考慮到。

　　Visited(已拜訪)

　　這個(gè)鏈接是鼠標(biāo)沒(méi)有懸�；蚴屈c(diǎn)擊，可是現(xiàn)已被用戶拜訪過(guò)。

　　Active(活潑)

　　這是正在被用戶點(diǎn)擊的狀況。絕大部分開(kāi)發(fā)者會(huì)仿制Hover(懸停)狀況到這兒。

　　Hover(懸停)

　　Hover狀況是鼠標(biāo)通過(guò)、并未點(diǎn)擊。你疏忽它了嗎?

　　最常被疏忽的情況是，鏈接的各種狀況沒(méi)有方案到網(wǎng)站的一切地方。比方許多網(wǎng)站針對(duì)淡色布景會(huì)有深色的主體(body)，可是在頁(yè)腳卻恰恰相反。

　　在Full Moon BBQ，我們看到根本的紅色鏈接在內(nèi)容區(qū)域，根本的白色鏈接鄙人面的頁(yè)腳處。十分小的細(xì)節(jié)，可是毫無(wú)疑問(wèn)很重要。

　　2. 表單(Forms)

　　關(guān)于許多開(kāi)發(fā)者，表單的配置是重要的，不或許被疏忽的。可是，還有許多開(kāi)發(fā)者在事后才想到。

　　上述后者以為表單僅是代表將用戶轉(zhuǎn)為客戶的途徑，而且沒(méi)有恰當(dāng)?shù)姆桨负鸵?guī)劃，這些表單的實(shí)用性將大大下降。預(yù)備好這些元素是重要的，即使被看來(lái)要比色彩、圖片、品牌等更小的緊迫性。

　　下面的2個(gè)元素，要做重點(diǎn)考量。

　　Form label(表單標(biāo)簽)

　　表單是收集用戶數(shù)據(jù)的途徑，而且用戶是自愿提交個(gè)人數(shù)據(jù)的。精確的意圖，恰當(dāng)?shù)奶嵝延脩�，是聰明的做法�?/p>

　　Input fields and labels(輸入域和標(biāo)簽)

　　其次，頁(yè)面表單輸入域的布局，標(biāo)簽款式及導(dǎo)向性。

　　當(dāng)運(yùn)用默許值，表單會(huì)看起來(lái)很糗�？墒沁M(jìn)行恰當(dāng)?shù)念A(yù)備，網(wǎng)站會(huì)看起來(lái)會(huì)十分有作用。從好的規(guī)劃開(kāi)端，一起看看下面的例子吧。

　　Awesome 上的商業(yè)型表單很清晰。整個(gè)頁(yè)面的意圖和任務(wù)被充分考慮到。從標(biāo)題和介紹，到每個(gè)域的布局，標(biāo)簽和控制風(fēng)格，能夠說(shuō)是模板。

　　3. 按鈕行為(Button behavior)

　　按鈕可用戶實(shí)現(xiàn)各種意圖，貫穿整個(gè)網(wǎng)站�？墒撬麄兊母鞣N狀況，仍是簡(jiǎn)單被疏忽。

　　Default(默許)

　　按鈕的默許狀況，等候被點(diǎn)擊。多數(shù)規(guī)劃師記得住這個(gè)，忘記了其他。

　　Hover(懸停)

　　懸停狀況，當(dāng)用戶鼠標(biāo)通過(guò)按鈕時(shí)的狀況。該狀況提示用戶按鈕是可觸發(fā)的，這一點(diǎn)很有協(xié)助。

　　Click(點(diǎn)擊)

　　當(dāng)用戶點(diǎn)擊按鈕，狀況來(lái)進(jìn)行提示。這樣的視覺(jué)提示能夠協(xié)助下降用戶的困惑。

　　Disabled(失效)

　　按鈕的失效狀況，或許是最少被運(yùn)用的�？墒顷P(guān)于開(kāi)發(fā)者卻是很有協(xié)助，除非你現(xiàn)已為按鈕預(yù)備好了驗(yàn)證進(jìn)程。

　　它十分像鏈接的各種狀況，一定要考慮整站的按鈕狀況的運(yùn)用。從彈出框(pop-up)、登陸框(log-in)，到搜索域、報(bào)名表單等，一切的按鈕需求有一致性的風(fēng)格。

　　4. 表單驗(yàn)證(Form validation)

　　網(wǎng)站與用戶的要求或錯(cuò)誤的溝通形式，也是十分重要。下面的三個(gè)核心問(wèn)題需求考慮。

　　Required fields(請(qǐng)求域)

　　一切的請(qǐng)求域應(yīng)該被提示，一般會(huì)有星號(hào)標(biāo)記。

　　Real-time validation(實(shí)時(shí)驗(yàn)證)

　　用戶完結(jié)表單就會(huì)有驗(yàn)證，這種類(lèi)型的驗(yàn)證要將各種數(shù)據(jù)處理信息趕快告訴用戶。你能夠借助jQuery驗(yàn)證插件:

　　Post-back validation(回發(fā)驗(yàn)證)

　　該類(lèi)型驗(yàn)證發(fā)作在用戶現(xiàn)已提交表單，與實(shí)時(shí)驗(yàn)證的風(fēng)格可重復(fù)，可是別的一個(gè)選項(xiàng)是將一切問(wèn)題歸于一條信息，就像Moo：

　　5. 狀況音訊(錯(cuò)誤、警告、承認(rèn)等)

　　用戶在網(wǎng)站上執(zhí)行一些動(dòng)作，一般需求一些類(lèi)型的反饋。這很像提交表單后的場(chǎng)景。可是許多其他的事情也會(huì)發(fā)作。規(guī)劃好你站點(diǎn)的音訊機(jī)制，是杰出的交互性的需求。

　　在Life Today上，我看到一些驗(yàn)證音訊，可作為錯(cuò)誤音訊，風(fēng)格契合全球各地。對(duì)色彩和圖標(biāo)進(jìn)行少數(shù)更改，也能夠用作警告，真是承認(rèn)音訊。

6. 拓寬布景到更大的屏幕

　　根據(jù)網(wǎng)站風(fēng)格的不同，布景元素可有更好的運(yùn)用。絕大部分布景很簡(jiǎn)單，不需求更多的預(yù)備，可是也存在凌亂的需求(梯度、圖案和意象)。

　　考慮到大的顯示器現(xiàn)已十分普及，大部分規(guī)劃師僅規(guī)劃960像素寬度，疏忽了許多的顯示器。假如你的布景凌亂，你理應(yīng)拓寬至更大的屏幕。

　　7. HTML根本元素

　　HTML根本元素是根底，而且不能被疏忽。可是在許多商場(chǎng)為導(dǎo)向的網(wǎng)站上，凌亂的布局，懸殊的視覺(jué)風(fēng)格，根本元素都被遺忘。

　　標(biāo)準(zhǔn)網(wǎng)頁(yè)模板規(guī)劃好，很重要，根本元素包含：段落，標(biāo)題1至6，規(guī)整的列表，列表數(shù)據(jù)，表單域，粗體文本，斜體文本。

　　我在許多網(wǎng)站作業(yè)過(guò)，總結(jié)款式如下，以助開(kāi)發(fā)者。

　　8. 網(wǎng)站郵件(Website emails)

　　我從未見(jiàn)任何規(guī)劃師規(guī)劃網(wǎng)站郵件，它很簡(jiǎn)單被疏忽是因?yàn)樗�不是網(wǎng)站核心焦點(diǎn)。可是郵件是提升和拓寬服務(wù)的強(qiáng)大東西。

　　我的主張是在規(guī)劃階段，仔細(xì)查看站點(diǎn)內(nèi)容。

　　郵件列表注冊(cè)承認(rèn)。

　　登記承認(rèn)。

　　表單完結(jié)承認(rèn)(比方一聯(lián)系表單)

　　購(gòu)買(mǎi)后的訂單驗(yàn)證

　　假如你真想做好網(wǎng)站郵件，那么還要預(yù)備好郵件營(yíng)銷(xiāo)模板。

　　9. 頁(yè)面拉伸

　　頁(yè)面拉伸以適應(yīng)內(nèi)容的改動(dòng)，很少用，可是也很重要。例子如下：

　　網(wǎng)站Full Moon BBQ有個(gè)緊湊的主頁(yè)，每個(gè)元素都有特定的尺度和方位。那么假如決定加長(zhǎng)歡迎信息或者添加圖片，將會(huì)發(fā)作什么?走運(yùn)的是，他們考慮了這一點(diǎn)�？疵靼琢寺�?能夠登錄網(wǎng)站一試。

　　預(yù)備很多內(nèi)容的布局的版別，你疏忽了嗎?

　　10. 動(dòng)畫(huà)：彈出框、東西提示、轉(zhuǎn)化等

　　標(biāo)準(zhǔn)的HTML/CSS網(wǎng)站，動(dòng)畫(huà)和轉(zhuǎn)化很簡(jiǎn)單被疏忽。一旦疏忽，作用會(huì)很不適宜。

　　列舉如下，請(qǐng)謹(jǐn)記。

　　Tooltips(東西提示)

　　當(dāng)鼠標(biāo)通過(guò)某元素時(shí)的提示。

　　Image rotators(圖片旋轉(zhuǎn))

　　首頁(yè)幻燈片至今仍很盛行，關(guān)于轉(zhuǎn)化與風(fēng)格可有更多的選項(xiàng)。

　　Lightbox(燈箱)

　　規(guī)劃的風(fēng)格，不只燈箱，還有轉(zhuǎn)化。

　　每個(gè)動(dòng)畫(huà)元素都有明顯的視覺(jué)風(fēng)格，比方合適它本身。

　　為什么很在乎?

　　這兒列出的大部分的元素，關(guān)于開(kāi)發(fā)者比規(guī)劃師更有用。假如你提前預(yù)備好這些元素，開(kāi)發(fā)者會(huì)對(duì)規(guī)劃師的作業(yè)另眼相看。假如你是開(kāi)發(fā)者，相同做到這一點(diǎn)，那么老板對(duì)你也會(huì)是刮目相看。

　　記住并做到這些，意味著你至少享用到了web規(guī)劃作業(yè)一半的樂(lè)