網頁制作有必要留意的10個元素 |
發(fā)布時間:2020-03-10 文章來源:本站 瀏覽次數:2368 |
下面介紹的這10個元素或許很簡單被你忽視,當然關于整體要過影響也不大,可是作為細心的人會發(fā)現,留意他們會給用戶帶來更好的體驗。 1、鏈接(link) 設置鏈接狀況的不同風格,這是根底也是有必要。你或許吃驚細節(jié)被疏忽的次數。包含下面列舉的頁面上一切鏈接的狀況。 Normal(常態(tài)) 這是鏈接的默許狀況。鼠標還沒有懸停、點擊,或是轉向向URL的時候,這個鏈接格局大部分的規(guī)劃師會考慮到。 Visited(已拜訪) 這個鏈接是鼠標沒有懸;蚴屈c擊,可是現已被用戶拜訪過。 Active(活潑) 這是正在被用戶點擊的狀況。絕大部分開發(fā)者會仿制Hover(懸停)狀況到這兒。 Hover(懸停) Hover狀況是鼠標通過、并未點擊。你疏忽它了嗎? 最常被疏忽的情況是,鏈接的各種狀況沒有方案到網站的一切地方。比方許多網站針對淡色布景會有深色的主體(body),可是在頁腳卻恰恰相反。 在Full Moon BBQ,我們看到根本的紅色鏈接在內容區(qū)域,根本的白色鏈接鄙人面的頁腳處。十分小的細節(jié),可是毫無疑問很重要。 2. 表單(Forms) 關于許多開發(fā)者,表單的配置是重要的,不或許被疏忽的?墒,還有許多開發(fā)者在事后才想到。 上述后者以為表單僅是代表將用戶轉為客戶的途徑,而且沒有恰當的方案和規(guī)劃,這些表單的實用性將大大下降。預備好這些元素是重要的,即使被看來要比色彩、圖片、品牌等更小的緊迫性。 下面的2個元素,要做重點考量。 Form label(表單標簽) 表單是收集用戶數據的途徑,而且用戶是自愿提交個人數據的。精確的意圖,恰當的提醒用戶,是聰明的做法。 Input fields and labels(輸入域和標簽) 其次,頁面表單輸入域的布局,標簽款式及導向性。 當運用默許值,表單會看起來很糗?墒沁M行恰當的預備,網站會看起來會十分有作用。從好的規(guī)劃開端,一起看看下面的例子吧。 Awesome 上的商業(yè)型表單很清晰。整個頁面的意圖和任務被充分考慮到。從標題和介紹,到每個域的布局,標簽和控制風格,能夠說是模板。 3. 按鈕行為(Button behavior) 按鈕可用戶實現各種意圖,貫穿整個網站?墒撬麄兊母鞣N狀況,仍是簡單被疏忽。 Default(默許) 按鈕的默許狀況,等候被點擊。多數規(guī)劃師記得住這個,忘記了其他。 Hover(懸停) 懸停狀況,當用戶鼠標通過按鈕時的狀況。該狀況提示用戶按鈕是可觸發(fā)的,這一點很有協助。 Click(點擊) 當用戶點擊按鈕,狀況來進行提示。這樣的視覺提示能夠協助下降用戶的困惑。 Disabled(失效) 按鈕的失效狀況,或許是最少被運用的。可是關于開發(fā)者卻是很有協助,除非你現已為按鈕預備好了驗證進程。 它十分像鏈接的各種狀況,一定要考慮整站的按鈕狀況的運用。從彈出框(pop-up)、登陸框(log-in),到搜索域、報名表單等,一切的按鈕需求有一致性的風格。 4. 表單驗證(Form validation) 網站與用戶的要求或錯誤的溝通形式,也是十分重要。下面的三個核心問題需求考慮。 Required fields(請求域) 一切的請求域應該被提示,一般會有星號標記。 Real-time validation(實時驗證) 用戶完結表單就會有驗證,這種類型的驗證要將各種數據處理信息趕快告訴用戶。你能夠借助jQuery驗證插件: Post-back validation(回發(fā)驗證) 該類型驗證發(fā)作在用戶現已提交表單,與實時驗證的風格可重復,可是別的一個選項是將一切問題歸于一條信息,就像Moo: 5. 狀況音訊(錯誤、警告、承認等) 用戶在網站上執(zhí)行一些動作,一般需求一些類型的反饋。這很像提交表單后的場景。可是許多其他的事情也會發(fā)作。規(guī)劃好你站點的音訊機制,是杰出的交互性的需求。 在Life Today上,我看到一些驗證音訊,可作為錯誤音訊,風格契合全球各地。對色彩和圖標進行少數更改,也能夠用作警告,真是承認音訊。 6. 拓寬布景到更大的屏幕 根據網站風格的不同,布景元素可有更好的運用。絕大部分布景很簡單,不需求更多的預備,可是也存在凌亂的需求(梯度、圖案和意象)。 考慮到大的顯示器現已十分普及,大部分規(guī)劃師僅規(guī)劃960像素寬度,疏忽了許多的顯示器。假如你的布景凌亂,你理應拓寬至更大的屏幕。 7. HTML根本元素 HTML根本元素是根底,而且不能被疏忽。可是在許多商場為導向的網站上,凌亂的布局,懸殊的視覺風格,根本元素都被遺忘。 標準網頁模板規(guī)劃好,很重要,根本元素包含:段落,標題1至6,規(guī)整的列表,列表數據,表單域,粗體文本,斜體文本。 我在許多網站作業(yè)過,總結款式如下,以助開發(fā)者。 8. 網站郵件(Website emails) 我從未見任何規(guī)劃師規(guī)劃網站郵件,它很簡單被疏忽是因為它不是網站核心焦點?墒青]件是提升和拓寬服務的強大東西。 我的主張是在規(guī)劃階段,仔細查看站點內容。 郵件列表注冊承認。 登記承認。 表單完結承認(比方一聯系表單) 購買后的訂單驗證 假如你真想做好網站郵件,那么還要預備好郵件營銷模板。 9. 頁面拉伸 頁面拉伸以適應內容的改動,很少用,可是也很重要。例子如下: 網站Full Moon BBQ有個緊湊的主頁,每個元素都有特定的尺度和方位。那么假如決定加長歡迎信息或者添加圖片,將會發(fā)作什么?走運的是,他們考慮了這一點?疵靼琢寺?能夠登錄網站一試。 預備很多內容的布局的版別,你疏忽了嗎? 10. 動畫:彈出框、東西提示、轉化等 標準的HTML/CSS網站,動畫和轉化很簡單被疏忽。一旦疏忽,作用會很不適宜。 列舉如下,請謹記。 Tooltips(東西提示) 當鼠標通過某元素時的提示。 Image rotators(圖片旋轉) 首頁幻燈片至今仍很盛行,關于轉化與風格可有更多的選項。 Lightbox(燈箱) 規(guī)劃的風格,不只燈箱,還有轉化。 每個動畫元素都有明顯的視覺風格,比方合適它本身。 為什么很在乎? 這兒列出的大部分的元素,關于開發(fā)者比規(guī)劃師更有用。假如你提前預備好這些元素,開發(fā)者會對規(guī)劃師的作業(yè)另眼相看。假如你是開發(fā)者,相同做到這一點,那么老板對你也會是刮目相看。 記住并做到這些,意味著你至少享用到了web規(guī)劃作業(yè)一半的樂 |