2017-02-18 分類: 網(wǎng)站建設(shè)
下面介紹的這10個(gè)元素或許很簡單被你忽視,當(dāng)然關(guān)于整體要過影響也不大,可是作為細(xì)心的人會(huì)發(fā)現(xiàn),留意他們會(huì)給用戶帶來更好的體驗(yàn)。
1、鏈接(link)
設(shè)置鏈接狀況的不同風(fēng)格,這是根底也是有必要。你或許吃驚細(xì)節(jié)被疏忽的次數(shù)。包含下面列舉的頁面上一切鏈接的狀況。
Normal(常態(tài))
這是鏈接的默許狀況。鼠標(biāo)還沒有懸停、點(diǎn)擊,或是轉(zhuǎn)向向URL的時(shí)候,這個(gè)鏈接格局大部分的規(guī)劃師會(huì)考慮到。
Visited(已拜訪)
這個(gè)鏈接是鼠標(biāo)沒有懸?;蚴屈c(diǎn)擊,可是現(xiàn)已被用戶拜訪過。
Active(活潑)
這是正在被用戶點(diǎn)擊的狀況。絕大部分開發(fā)者會(huì)仿制Hover(懸停)狀況到這兒。
Hover(懸停)
Hover狀況是鼠標(biāo)通過、并未點(diǎn)擊。你疏忽它了嗎?
最常被疏忽的情況是,鏈接的各種狀況沒有方案到網(wǎng)站的一切地方。比方許多網(wǎng)站針對(duì)淡色布景會(huì)有深色的主體(body),可是在頁腳卻恰恰相反。
在Full Moon BBQ,我們看到根本的紅色鏈接在內(nèi)容區(qū)域,根本的白色鏈接鄙人面的頁腳處。十分小的細(xì)節(jié),可是毫無疑問很重要。
2. 表單(Forms)
關(guān)于許多開發(fā)者,表單的配置是重要的,不或許被疏忽的??墒牵€有許多開發(fā)者在事后才想到。
上述后者以為表單僅是代表將用戶轉(zhuǎn)為客戶的途徑,而且沒有恰當(dāng)?shù)姆桨负鸵?guī)劃,這些表單的實(shí)用性將大大下降。預(yù)備好這些元素是重要的,即使被看來要比色彩、圖片、品牌等更小的緊迫性。
下面的2個(gè)元素,要做重點(diǎn)考量。
Form label(表單標(biāo)簽)
表單是收集用戶數(shù)據(jù)的途徑,而且用戶是自愿提交個(gè)人數(shù)據(jù)的。精確的意圖,恰當(dāng)?shù)奶嵝延脩簦锹斆鞯淖龇ā?/p>
Input fields and labels(輸入域和標(biāo)簽)
其次,頁面表單輸入域的布局,標(biāo)簽款式及導(dǎo)向性。
當(dāng)運(yùn)用默許值,表單會(huì)看起來很糗??墒沁M(jìn)行恰當(dāng)?shù)念A(yù)備,網(wǎng)站會(huì)看起來會(huì)十分有作用。從好的規(guī)劃開端,一起看看下面的例子吧。
Awesome 上的商業(yè)型表單很清晰。整個(gè)頁面的意圖和任務(wù)被充分考慮到。從標(biāo)題和介紹,到每個(gè)域的布局,標(biāo)簽和控制風(fēng)格,能夠說是模板。
3. 按鈕行為(Button behavior)
按鈕可用戶實(shí)現(xiàn)各種意圖,貫穿整個(gè)網(wǎng)站??墒撬麄兊母鞣N狀況,仍是簡單被疏忽。
Default(默許)
按鈕的默許狀況,等候被點(diǎn)擊。多數(shù)規(guī)劃師記得住這個(gè),忘記了其他。
Hover(懸停)
懸停狀況,當(dāng)用戶鼠標(biāo)通過按鈕時(shí)的狀況。該狀況提示用戶按鈕是可觸發(fā)的,這一點(diǎn)很有協(xié)助。
Click(點(diǎn)擊)
當(dāng)用戶點(diǎn)擊按鈕,狀況來進(jìn)行提示。這樣的視覺提示能夠協(xié)助下降用戶的困惑。
Disabled(失效)
按鈕的失效狀況,或許是最少被運(yùn)用的??墒顷P(guān)于開發(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è)核心問題需求考慮。
Required fields(請(qǐng)求域)
一切的請(qǐng)求域應(yīng)該被提示,一般會(huì)有星號(hào)標(biāo)記。
Real-time validation(實(shí)時(shí)驗(yàn)證)
用戶完結(jié)表單就會(huì)有驗(yàn)證,這種類型的驗(yàn)證要將各種數(shù)據(jù)處理信息趕快告訴用戶。你能夠借助jQuery驗(yàn)證插件:
Post-back validation(回發(fā)驗(yàn)證)
該類型驗(yàn)證發(fā)作在用戶現(xiàn)已提交表單,與實(shí)時(shí)驗(yàn)證的風(fēng)格可重復(fù),可是別的一個(gè)選項(xiàng)是將一切問題歸于一條信息,就像Moo:
5. 狀況音訊(錯(cuò)誤、警告、承認(rèn)等)
用戶在網(wǎng)站上執(zhí)行一些動(dòng)作,一般需求一些類型的反饋。這很像提交表單后的場景??墒窃S多其他的事情也會(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)用。絕大部分布景很簡單,不需求更多的預(yù)備,可是也存在凌亂的需求(梯度、圖案和意象)。
考慮到大的顯示器現(xiàn)已十分普及,大部分規(guī)劃師僅規(guī)劃960像素寬度,疏忽了許多的顯示器。假如你的布景凌亂,你理應(yīng)拓寬至更大的屏幕。
7. HTML根本元素
HTML根本元素是根底,而且不能被疏忽??墒窃谠S多商場為導(dǎo)向的網(wǎng)站上,凌亂的布局,懸殊的視覺風(fēng)格,根本元素都被遺忘。
標(biāo)準(zhǔn)網(wǎng)頁模板規(guī)劃好,很重要,根本元素包含:段落,標(biāo)題1至6,規(guī)整的列表,列表數(shù)據(jù),表單域,粗體文本,斜體文本。
我在許多網(wǎng)站作業(yè)過,總結(jié)款式如下,以助開發(fā)者。
8. 網(wǎng)站郵件(Website emails)
我從未見任何規(guī)劃師規(guī)劃網(wǎng)站郵件,它很簡單被疏忽是因?yàn)樗皇蔷W(wǎng)站核心焦點(diǎn)。可是郵件是提升和拓寬服務(wù)的強(qiáng)大東西。
我的主張是在規(guī)劃階段,仔細(xì)查看站點(diǎn)內(nèi)容。
郵件列表注冊(cè)承認(rèn)。
登記承認(rèn)。
表單完結(jié)承認(rèn)(比方一聯(lián)系表單)
購買后的訂單驗(yàn)證
假如你真想做好網(wǎng)站郵件,那么還要預(yù)備好郵件營銷模板。
9. 頁面拉伸
頁面拉伸以適應(yīng)內(nèi)容的改動(dòng),很少用,可是也很重要。例子如下:
網(wǎng)站Full Moon BBQ有個(gè)緊湊的主頁,每個(gè)元素都有特定的尺度和方位。那么假如決定加長歡迎信息或者添加圖片,將會(huì)發(fā)作什么?走運(yùn)的是,他們考慮了這一點(diǎn)??疵靼琢寺?能夠登錄網(wǎng)站一試。
預(yù)備很多內(nèi)容的布局的版別,你疏忽了嗎?
10. 動(dòng)畫:彈出框、東西提示、轉(zhuǎn)化等
標(biāo)準(zhǔn)的HTML/CSS網(wǎng)站,動(dòng)畫和轉(zhuǎn)化很簡單被疏忽。一旦疏忽,作用會(huì)很不適宜。
列舉如下,請(qǐng)謹(jǐn)記。
Tooltips(東西提示)
當(dāng)鼠標(biāo)通過某元素時(shí)的提示。
Image rotators(圖片旋轉(zhuǎn))
首頁幻燈片至今仍很盛行,關(guān)于轉(zhuǎn)化與風(fēng)格可有更多的選項(xiàng)。
Lightbox(燈箱)
規(guī)劃的風(fēng)格,不只燈箱,還有轉(zhuǎn)化。
每個(gè)動(dòng)畫元素都有明顯的視覺風(fēng)格,比方合適它本身。
為什么很在乎?
這兒列出的大部分的元素,關(guān)于開發(fā)者比規(guī)劃師更有用。假如你提前預(yù)備好這些元素,開發(fā)者會(huì)對(duì)規(guī)劃師的作業(yè)另眼相看。假如你是開發(fā)者,相同做到這一點(diǎn),那么老板對(duì)你也會(huì)是刮目相看。
記住并做到這些,意味著你至少享用到了web規(guī)劃作業(yè)一半的樂
網(wǎng)站題目:網(wǎng)頁制作有必要留意的10個(gè)元素
網(wǎng)站網(wǎng)址:http://www.rwnh.cn/news/74047.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、外貿(mào)建站、定制開發(fā)、做網(wǎng)站、建站公司、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容