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

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

1、鏈接(link)

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

Normal(常態(tài))

這是鏈接的默許狀況。鼠標還沒有懸停、點擊，或是轉(zhuǎn)向向URL的時候，這個鏈接格局大部分的規(guī)劃師會考慮到。

Visited(已拜訪)

這個鏈接是鼠標沒有懸?；蚴屈c擊，可是現(xiàn)已被用戶拜訪過。

Active(活潑)

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

Hover(懸停)

Hover狀況是鼠標通過、并未點擊。你疏忽它了嗎?

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

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

2. 表單(Forms)

關(guān)于許多開發(fā)者，表單的配置是重要的，不或許被疏忽的?？墒牵€有許多開發(fā)者在事后才想到。

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

下面的2個元素，要做重點考量。

Form label(表單標簽)

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

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

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

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

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

3. 按鈕行為(Button behavior)

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

Default(默許)

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

Hover(懸停)

懸停狀況，當用戶鼠標通過按鈕時的狀況。該狀況提示用戶按鈕是可觸發(fā)的，這一點很有協(xié)助。

Click(點擊)

當用戶點擊按鈕，狀況來進行提示。這樣的視覺提示能夠協(xié)助下降用戶的困惑。

Disabled(失效)

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

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

4. 表單驗證(Form validation)

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

Required fields(請求域)

一切的請求域應(yīng)該被提示，一般會有星號標記。

Real-time validation(實時驗證)

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

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

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

5. 狀況音訊(錯誤、警告、承認等)

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

在Life Today上，我看到一些驗證音訊，可作為錯誤音訊，風格契合全球各地。對色彩和圖標進行少數(shù)更改，也能夠用作警告，真是承認音訊。

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

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

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

7. HTML根本元素

HTML根本元素是根底，而且不能被疏忽?？墒窃谠S多商場為導(dǎo)向的網(wǎng)站上，凌亂的布局，懸殊的視覺風格，根本元素都被遺忘。

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

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

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

我從未見任何規(guī)劃師規(guī)劃網(wǎng)站郵件，它很簡單被疏忽是因為它不是網(wǎng)站核心焦點?？墒青]件是提升和拓寬服務(wù)的強大東西。

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

郵件列表注冊承認。

登記承認。

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

購買后的訂單驗證

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

9. 頁面拉伸

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

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

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

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

標準的HTML/CSS網(wǎng)站，動畫和轉(zhuǎn)化很簡單被疏忽。一旦疏忽，作用會很不適宜。

列舉如下，請謹記。

Tooltips(東西提示)

當鼠標通過某元素時的提示。

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

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

Lightbox(燈箱)

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

每個動畫元素都有明顯的視覺風格，比方合適它本身。

為什么很在乎?

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

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

當前題目：網(wǎng)頁制作有必要留意的10個元素
當前路徑：http://www.bm7419.com/news47/74047.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、標簽優(yōu)化、網(wǎng)站營銷、靜態(tài)網(wǎng)站、虛擬主機、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)