欧美成人粉红派对在线不卡_亚洲精品口爆av美女_国产成人乱码一二三区性色qery_日韩加勒比无码成人精品_国产口爆骚妇一区色色

當前位置: 首頁 > 設(shè)計資訊 > 理論文摘 > 正文

Web開發(fā)者加以重視的10個設(shè)計元素

2012-02-27 8540 0
  這些細節(jié)往往容易錯過,因為他們不會影響網(wǎng)站的整體外觀和感覺。問題是,這些細節(jié)往往會如影隨形。而它恰恰是對用戶體驗忠誠度的體現(xiàn)。

  下面列出10個關(guān)鍵元素,記住它,你將避免走回頭路。

  1、鏈接(link)

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

  Normal(常態(tài))

  這是鏈接的默認狀態(tài)。鼠標還沒有懸停、點擊,或是轉(zhuǎn)向向URL的時候,這個鏈接格式大部分的設(shè)計師會考慮到。

  Visited(已訪問)

  這個鏈接是鼠標沒有懸?;蚴屈c擊,但是已經(jīng)被用戶訪問過。

  Active(活躍)

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

  Hover(懸停)

  Hover狀態(tài)是鼠標經(jīng)過、并未點擊。你忽略它了嗎?

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

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

  2. 表單(Forms)

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

  上述后者認為表單僅是代表將用戶轉(zhuǎn)為客戶的路徑,并且沒有適當?shù)挠媱澓驮O(shè)計,這些表單的實用性將大大降低。準備好這些元素是重要的,即使被看來要比顏色、圖片、品牌等更小的緊迫性。

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

  Form label(表單標簽)

  表單是收集用戶數(shù)據(jù)的途徑,而且用戶是自愿提交個人數(shù)據(jù)的。準確的目的,適當?shù)奶嵝延脩?,是聰明的做法?/FONT>

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

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

  當使用默認值,表單會看起來很糗。但是進行恰當?shù)臏蕚洌W(wǎng)站會看起來會非常有效果。從好的規(guī)劃開始,一起看看下面的例子吧。

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

  3. 按鈕行為(Button behavior)

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

  Default(默認)

  按鈕的默認狀態(tài),等待被點擊。多數(shù)設(shè)計師記得住這個,忘記了其他。

  Hover(懸停)

  懸停狀態(tài),當用戶鼠標經(jīng)過按鈕時的狀態(tài)。該狀態(tài)提示用戶按鈕是可觸發(fā)的,這一點很有幫助。

  Click(點擊)

  當用戶點擊按鈕,狀態(tài)來進行提示。這樣的視覺提示可以幫助降低用戶的困惑。

  Disabled(失效)

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

  它非常像鏈接的各種狀態(tài),一定要考慮整站的按鈕狀態(tài)的運用。從彈出框(pop-up)、登陸框(log-in),到搜索域、報名表單等,所有的按鈕需要有一致性的風(fēng)格。

  4. 表單驗證(Form validation)

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

  Required fields(請求域)

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

  Real-time validation(實時驗證)

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

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

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

  5. 狀態(tài)消息(錯誤、警告、確認等)

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

  在Life Today上,我看到一些驗證消息,可作為錯誤消息,風(fēng)格符合全球各地。對顏色和圖標進行少量更改,也可以用作警告,真是確認消息。


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

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

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

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

  7. HTML基本元素

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

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

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

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

  我從未見任何設(shè)計師規(guī)劃網(wǎng)站郵件,它很容易被忽略是因為它不是網(wǎng)站核心焦點。然而郵件是提升和拓展服務(wù)的強大工具。

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

  郵件列表注冊確認。

  登記確認。

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

  購買后的訂單驗證

  如果你真想做好網(wǎng)站郵件,那么還要準備好郵件營銷模板。

  9. 頁面拉伸

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

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

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

  10. 動畫:彈出框、工具提示、轉(zhuǎn)換等

  標準的HTML/CSS網(wǎng)站,動畫和轉(zhuǎn)換很容易被忽略。一旦忽略,效果會很不合適。

  列舉如下,請謹記。

  Tooltips(工具提示)

  當鼠標經(jīng)過某元素時的提示。

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

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

  Lightbox(燈箱)

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

  每個動畫元素都有明顯的視覺風(fēng)格,比如適合它本身。

  為什么很在乎?

  這里列出的大部分的元素,對于開發(fā)者比設(shè)計師更有用。如果你提前準備好這些元素,開發(fā)者會對設(shè)計師的工作另眼相看。如果你是開發(fā)者,同樣做到這一點,那么老板對你也會是刮目相看。

  記住并做到這些,意味著你至少享受到了web設(shè)計工作一半的樂趣


95
評論區(qū)(0)
正在加載評論...
相關(guān)推薦