網(wǎng)頁(yè)制作必須注意的事項(xiàng)

1、鏈接(link)

設(shè)置鏈接狀態(tài)的不同風(fēng)格，這是基礎(chǔ)也是必須。你可能吃驚細(xì)節(jié)被忽略的次數(shù)。包括下面列舉的頁(yè)面上所有鏈接的狀態(tài)。

Normal(常態(tài))

這是鏈接的默認(rèn)狀態(tài)。鼠標(biāo)還沒(méi)有懸停、點(diǎn)擊，或是轉(zhuǎn)向向URL的時(shí)候，這個(gè)鏈接格式大部分的設(shè)計(jì)師會(huì)考慮到。

Visited(已訪問(wèn))

這個(gè)鏈接是鼠標(biāo)沒(méi)有懸停或是點(diǎn)擊，但是已經(jīng)被用戶訪問(wèn)過(guò)。

Active(活躍)

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

Hover(懸停)

Hover狀態(tài)是鼠標(biāo)經(jīng)過(guò)、并未點(diǎn)擊。你忽略它了嗎?

最常被忽略的情況是，鏈接的各種狀態(tài)沒(méi)有計(jì)劃到網(wǎng)站的所有地方。比如很多網(wǎng)站針對(duì)淺色背景會(huì)有深色的主體(body)，但是在頁(yè)腳卻恰恰相反。

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

2. 表單(Forms)

對(duì)于很多開(kāi)發(fā)者，表單的配置是重要的，不可能被忽略的。然而，還有許多開(kāi)發(fā)者在事后才想到。

上述后者認(rèn)為表單僅是代表將用戶轉(zhuǎn)為客戶的路徑，并且沒(méi)有適當(dāng)?shù)挠?jì)劃和設(shè)計(jì)，這些表單的實(shí)用性將大大降低。準(zhǔn)備好這些元素是重要的，即使被看來(lái)要比顏色、圖片、品牌等更小的緊迫性。

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

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

表單是收集用戶數(shù)據(jù)的途徑，而且用戶是自愿提交個(gè)人數(shù)據(jù)的。準(zhǔn)確的目的，適當(dāng)?shù)奶嵝延脩?，是聰明的做法?br />
Input fields and labels(輸入域和標(biāo)簽)

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

當(dāng)使用默認(rèn)值，表單會(huì)看起來(lái)很糗。但是進(jìn)行恰當(dāng)?shù)臏?zhǔn)備，網(wǎng)站會(huì)看起來(lái)會(huì)非常有效果。從好的規(guī)劃開(kāi)始，一起看看下面的例子吧。

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

3. 按鈕行為(Button behavior)

按鈕可用戶實(shí)現(xiàn)各種目的，貫穿整個(gè)網(wǎng)站。但是他們的各種狀態(tài)，還是容易被忽略。

Default(默認(rèn))

按鈕的默認(rèn)狀態(tài)，等待被點(diǎn)擊。多數(shù)設(shè)計(jì)師記得住這個(gè)，忘記了其他。

Hover(懸停)

懸停狀態(tài)，當(dāng)用戶鼠標(biāo)經(jīng)過(guò)按鈕時(shí)的狀態(tài)。該狀態(tài)提示用戶按鈕是可觸發(fā)的，這一點(diǎn)很有幫助。

Click(點(diǎn)擊)

當(dāng)用戶點(diǎn)擊按鈕，狀態(tài)來(lái)進(jìn)行提示。這樣的視覺(jué)提示可以幫助降低用戶的困惑。

Disabled(失效)

按鈕的失效狀態(tài)，可能是最少被使用的。但是對(duì)于開(kāi)發(fā)者卻是很有幫助，除非你已經(jīng)為按鈕準(zhǔn)備好了驗(yàn)證過(guò)程。

它非常像鏈接的各種狀態(tài)，一定要考慮整站的按鈕狀態(tài)的運(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)證)

用戶完成表單就會(huì)有驗(yàn)證，這種類型的驗(yàn)證要將各種數(shù)據(jù)處理信息盡快通知用戶。你可以借助jQuery驗(yàn)證插件:

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

該類型驗(yàn)證發(fā)生在用戶已經(jīng)提交表單，與實(shí)時(shí)驗(yàn)證的風(fēng)格可重復(fù)，但是另外一個(gè)選項(xiàng)是將所有問(wèn)題歸于一條信息，就像Moo：

5. 狀態(tài)消息(錯(cuò)誤、警告、確認(rèn)等)

用戶在網(wǎng)站上執(zhí)行一些動(dòng)作，一般需要一些類型的反饋。這很像提交表單后的場(chǎng)景。但是很多其他的事件也會(huì)發(fā)生。規(guī)劃好你站點(diǎn)的消息機(jī)制，是良好的交互性的需要。

在Life Today上，我看到一些驗(yàn)證消息，可作為錯(cuò)誤消息，風(fēng)格符合全球各地。對(duì)顏色和圖標(biāo)進(jìn)行少量更改，也可以用作警告，真是確認(rèn)消息。

??????? 6. 拓展背景到更大的屏幕

依據(jù)網(wǎng)站風(fēng)格的不同，背景元素可有更好的運(yùn)用。絕大部分背景很簡(jiǎn)單，不需要更多的準(zhǔn)備，但是也存在復(fù)雜的需要(梯度、圖案和意象)。

考慮到大的顯示器已經(jīng)非常普及，大部分設(shè)計(jì)師僅規(guī)劃960像素寬度，忽略了大量的顯示器。如果你的背景復(fù)雜，你理當(dāng)拓展至更大的屏幕。

下面是我創(chuàng)建的例子，木式背景可做更大的延伸。

7. HTML基本元素

HTML基本元素是基礎(chǔ)，并且不能被忽略。但是在許多市場(chǎng)為導(dǎo)向的網(wǎng)站上，雜亂的布局，迥異的視覺(jué)風(fēng)格，基本元素都被遺忘。

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

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

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

我從未見(jiàn)任何設(shè)計(jì)師規(guī)劃網(wǎng)站郵件，它很容易被忽略是因?yàn)樗皇蔷W(wǎng)站核心焦點(diǎn)。然而郵件是提升和拓展服務(wù)的強(qiáng)大工具。

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

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

登記確認(rèn)。

表單完成確認(rèn)(比如一聯(lián)系表單)

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

如果你真想做好網(wǎng)站郵件，那么還要準(zhǔn)備好郵件營(yíng)銷模板。

9. 頁(yè)面拉伸

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

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

準(zhǔn)備好多內(nèi)容的布局的版本，你忽略了嗎?

10. 動(dòng)畫(huà)：彈出框、工具提示、轉(zhuǎn)換等

標(biāo)準(zhǔn)的HTML/CSS網(wǎng)站，動(dòng)畫(huà)和轉(zhuǎn)換很容易被忽略。一旦忽略，效果會(huì)很不合適。

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

Tooltips(工具提示)

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

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

首頁(yè)幻燈片至今仍很流行，對(duì)于轉(zhuǎn)換與風(fēng)格可有更多的選項(xiàng)。

Lightbox(燈箱)

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

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

網(wǎng)站名稱：網(wǎng)頁(yè)制作必須注意的事項(xiàng)
網(wǎng)站路徑：http://www.muchs.cn/news47/315397.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、企業(yè)建站、網(wǎng)站策劃、做網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)

廣告

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