隨著JS和XHTML應(yīng)用的普及，網(wǎng)站上出現(xiàn)了越來越多的Web界面應(yīng)用技術(shù)，如我們常見的日歷控件、搜索下拉框等，這些Web界面應(yīng)用技術(shù)極大地豐富了網(wǎng)站的表現(xiàn)形式，本文將為您精心推薦十種最常見的Web界面應(yīng)用技術(shù)。

　　Web應(yīng)用程序界面設(shè)計(jì)的核心是網(wǎng)頁設(shè)計(jì)，但它的重點(diǎn)主要是功能。為了超越桌面應(yīng)用程序，Web應(yīng)用程序必須提供一個(gè)簡單、直觀和即時(shí)響應(yīng)的用戶界面，這樣他們的用戶就可以花更少的精力和時(shí)間來完成事情。

　　過去，我們沒有注意到Web應(yīng)用程序的方法，但現(xiàn)在是時(shí)候仔細(xì)看看一些實(shí)用的技術(shù)和設(shè)計(jì)解決方案，使Web應(yīng)用程序更加友好和美麗了。

　　一個(gè)好的網(wǎng)絡(luò)前端開發(fā)工程師不僅要有知識體系的廣度，還要有深度，所以很多大公司即使付出高薪也很難招到理想的前端開發(fā)工程師。那么如何系統(tǒng)地學(xué)習(xí)企業(yè)實(shí)用的網(wǎng)絡(luò)前端技術(shù)呢?因此，建立了網(wǎng)絡(luò)前端的直播課堂學(xué)習(xí)扣扣裙。網(wǎng)絡(luò)前端前面的數(shù)字是484.網(wǎng)絡(luò)前端中間的數(shù)字是757.網(wǎng)絡(luò)前端最后的數(shù)字是760.所以連接數(shù)字是可以的。如果你真的想學(xué)習(xí)，你可以盡量的不要浪費(fèi)大家的時(shí)間?，F(xiàn)在的重點(diǎn)不是講解技術(shù)，而是講解技巧。技術(shù)不是黑就是白，只有對錯(cuò)，技能不同。

　　1.界面元素的需求

　　在Web前端開發(fā)中，簡單的原則非常重要。任何時(shí)候，你在屏幕上顯示的控制越多，你的用戶就必須花更多的時(shí)間來了解如何使用界面。當(dāng)選擇較少時(shí)，可用的功能變得更明顯，更容易被發(fā)現(xiàn)。簡化界面并不容易，尤其是當(dāng)你不想限制應(yīng)用程序的功能時(shí)。

　　點(diǎn)擊Kontain搜索框的搜索鏈接時(shí)，會(huì)出現(xiàn)類似下拉菜單的層。因此，如果需要縮小搜索范圍，可以選擇菜單中需要的類型。這些選項(xiàng)的聚合簡化了搜索框。

　　隱藏或掩蓋高級功能是使事情更簡單的方法。找出最常用的功能，隱藏剩下的。你可以用彈出菜單和操作來做這件事，這在桌面軟件中很常見。例如，如果你的搜索欄有一個(gè)高級過濾器，把它們放在尾部的特殊下拉菜單中。如果用戶需要使用這些過濾器，他們只需點(diǎn)擊幾次就可以打開這些功能。決定隱藏什么不是一項(xiàng)簡單的任務(wù)也取決于操作的重要性和頻率。

　　當(dāng)您點(diǎn)擊Colabfinder的搜索鏈接時(shí)，您不需要打開不同的頁面。相反，下拉搜索框的控制菜單，允許您直接開始搜索。

　　2.特殊操作

　　根據(jù)情況選擇合適的界面控件非常重要。不同的情況下可以以不同的方式處理，有些控件可以比其他控件更好地完成目標(biāo)工作。

　　Backpack有一個(gè)緊湊的日歷和時(shí)間選擇器來選擇提醒日期。

　　例如，您可以通過下拉列表選擇日期，但與日歷選擇器相比，下拉列表效率不是很高。在日歷中，您可以直接點(diǎn)擊選擇您想要的一天。日歷選擇器也會(huì)讓您更容易看到日期、周期和月份(特別是工作日和休息日)，因此您可以比使用簡單的下拉列表更快地做出更明智的選擇。

　　3.禁止按下按鈕

　　在Web應(yīng)用程序的表單問題之一是提交過程，這是一個(gè)非常簡單的表單。如果您快速點(diǎn)擊兩次或兩次以上的提交按鈕，表單將多次提交。這表明這是一個(gè)問題，因?yàn)樗鼤?huì)重復(fù)創(chuàng)建相同的項(xiàng)目。防止重復(fù)提交并不難，對于大多數(shù)網(wǎng)絡(luò)應(yīng)用來說，這是非常必要的。

　　它有兩層維護(hù)：客戶端和服務(wù)器端。我們不會(huì)通過服務(wù)器端進(jìn)行維護(hù)，因?yàn)檫@將取決于您使用的編程語言和后端架構(gòu)?；旧?，您應(yīng)該做的是在提交過程中添加一個(gè)檢測機(jī)制，以檢查提交的內(nèi)容是否重復(fù)，是否需要阻止提交。

　　在Yammer上，當(dāng)您的新消息提交時(shí)，更新按鈕將被禁止。

　　客戶端要簡單得多。你所需要做的就是點(diǎn)擊后禁止提交按鈕。最簡單的方法是為提交按鈕添加JavaScript，如下所示:

　　當(dāng)然，我們建議您同時(shí)檢查服務(wù)器端，以確保重復(fù)失敗。

　　4.模擬窗戶的陰影

　　彈出菜單和窗口下的陰影不僅僅是看起來漂亮。它們幫助菜單或窗口通過強(qiáng)調(diào)從背景中脫穎而出。它們還通過周圍的深色區(qū)域屏蔽背景內(nèi)容的噪音。

　　這種技術(shù)來自傳統(tǒng)的桌面軟件，幫助用戶專注于窗口。因?yàn)榇蠖鄶?shù)場景窗口不容易從桌面程序中識別出來，陰影幫助他們更接近讀者，因?yàn)樗麄冇X得窗口似乎是在其他頁面上立體浮動(dòng)的。

　　Digg的登錄窗口周圍有一個(gè)厚厚的陰影來屏蔽網(wǎng)頁噪音。

　　5.空白狀態(tài)告訴你該做什么

　　當(dāng)你設(shè)計(jì)一個(gè)Web應(yīng)用程序時(shí)，你不僅需要通過樣本數(shù)據(jù)來測試程序，最重要的是，當(dāng)沒有任何內(nèi)容時(shí)，你應(yīng)該確保它看起來很好，很有幫助。

　　當(dāng)頁面或查詢結(jié)果沒有信息時(shí)，告訴你如何處理這些空白區(qū)域是一個(gè)非常有用的信息。例如，項(xiàng)目管理應(yīng)用程序的網(wǎng)頁可能會(huì)列出用戶的項(xiàng)目，但如果沒有項(xiàng)目，您可以提供創(chuàng)建項(xiàng)目的鏈接。即使頁面上已經(jīng)有創(chuàng)建項(xiàng)目的按鈕，一點(diǎn)額外的幫助也不會(huì)丟失。

　　當(dāng)你開始建立郵件廣告時(shí)，CampaignMonitor會(huì)指導(dǎo)你正確的方向。

　　這項(xiàng)技術(shù)實(shí)際上鼓勵(lì)用戶嘗試服務(wù)，并在注冊后直接使用。通過應(yīng)用程序的單步指導(dǎo)，用戶可以幫助他/她了解程序提供的優(yōu)勢以及它是否有用。同樣重要的是向用戶呈現(xiàn)最重要的操作，只有這些—呈現(xiàn)所有功能毫無意義。請記住，用戶通常希望得到一些或多或少提供給他們的具體想法，但他們不想直接跳到詳細(xì)說明——他們既沒有時(shí)間也沒有興趣。

　　通過空白狀態(tài)激勵(lì)用戶和行為，可以大大減少輟學(xué)，幫助潛在客戶更好地了解系統(tǒng)如何工作。

　　6.按下按鈕的狀態(tài)

　　許多Web應(yīng)用程序都有自定義的按鈕樣式。這些都是以自定義圖片為背景的錨點(diǎn)或輸入按鈕。在某些情況下，默認(rèn)輸入按鈕可能不適合，有時(shí)文本鏈接太小。目前的挑戰(zhàn)是，當(dāng)你讓你的鏈接看起來像按鈕時(shí)，它們的操作應(yīng)該和按鈕一樣——這包括用戶點(diǎn)擊時(shí)按的效果。

　　這不是一個(gè)純粹的視覺調(diào)整。提供即時(shí)反饋給用戶會(huì)讓應(yīng)用感覺更有響應(yīng)性，給用戶帶來更接近桌面軟件的用戶體驗(yàn)。

　　您可以通過CSS為按鈕增加按下效果。

　　Highrise的按鈕實(shí)際上顯示了點(diǎn)擊時(shí)按下的效果，給用戶一種非常舒適的反饋感。

　　7.在登錄頁面提供注冊鏈接

　　一些沒有注冊你的應(yīng)用程序的用戶將不可避免地停止在你的登錄頁面上。他們想使用你的應(yīng)用程序，但他們不能立即找到注冊頁面。也許他們已經(jīng)嘗試訪問一個(gè)只提供給注冊用戶的特定頁面。

　　Goplan登錄頁面上有一個(gè)漂亮的彩色按鈕指向注冊頁面。

　　在您的登錄頁面上放置注冊鏈接將使一切更容易。如果他們沒有賬戶，他們就不應(yīng)該找到注冊頁面。我們的研究證實(shí)，在注冊頁面上，18%的網(wǎng)站有登錄表或鏈接到登錄頁面。

　　8.上下文關(guān)聯(lián)導(dǎo)航

　　思考用戶期望看到什么，以及他們在每個(gè)給予場景中需要什么是非常重要的。不需要在每個(gè)地方顯示相同的導(dǎo)航控件，因?yàn)橛脩艨赡懿恍枰鼈冊诿總€(gè)環(huán)境中。

　　上下文關(guān)聯(lián)控件的最佳例子之一是最近微軟office2007中的界面，其界面中默認(rèn)的工具條被帶有控件的工具條所取代。無論是圖形編輯、校對還是簡單的書面形式，每個(gè)標(biāo)簽編輯、校對還是簡單的書面形式。Web應(yīng)用程序也可以從上下文相關(guān)的控件中受益，因?yàn)樗鼈冎伙@示用戶需要的內(nèi)容，而不是顯示所有內(nèi)容。

　　Lighthouse提供熟悉的標(biāo)簽導(dǎo)航菜單，但標(biāo)簽正下方有二級菜單。這個(gè)級別只顯示當(dāng)前項(xiàng)目相關(guān)活動(dòng)的部分。

　　9.更注重主要功能

　　并不是所有的控制器都有同樣的重要性。例如，在屏幕上創(chuàng)建一個(gè)新項(xiàng)目時(shí)，您可以有兩個(gè)按鈕：創(chuàng)建和取消。這個(gè)創(chuàng)建鏈接更重要，因?yàn)樗怯脩舸蟛糠謺r(shí)間都會(huì)使用的操作。只有少數(shù)人會(huì)取消它。所以如果這些控制器被排放在旁邊，你可能不想給予同樣的關(guān)注。

　　這個(gè)Lighouse的創(chuàng)建任務(wù)按鈕。您可以看到取消鏈接以純文本格式附近。該按鈕不僅操作更重要，而且點(diǎn)擊面積大，點(diǎn)擊方便。

　　為了讓用戶的焦點(diǎn)轉(zhuǎn)向創(chuàng)建鏈接，我們可以簡單地使用不同的風(fēng)格或控制形式。一些應(yīng)用程序的表單輸入按鈕用于創(chuàng)建動(dòng)作，并將取消操作連接到文本中。這不僅給了創(chuàng)建按鈕更多的點(diǎn)擊區(qū)域，也幫助那些在搜索內(nèi)容時(shí)獲得更好的焦點(diǎn)。

　　10.嵌入式視頻

　　當(dāng)圖片和文本以一種很大的方式與您的用戶溝通，并教育您的用戶關(guān)于您程序的特征時(shí)，如果您有資源投資，視頻甚至可以成為更好的選擇。近年來，視頻在網(wǎng)絡(luò)應(yīng)用程序中越來越受歡迎。對于網(wǎng)絡(luò)應(yīng)用程序，視頻通常被用作市場網(wǎng)站上展示產(chǎn)品特征的示范電影。但這并不是使用視頻的唯一方法。

　　GoodBarry的特點(diǎn)是在頭版有示范視頻來展示產(chǎn)品，它還通過使用示范電影來教育用戶如何開始使用。

　　一些Web應(yīng)用程序使用視頻嵌入程序本身，教用戶如果使用某些特定的功能。視頻是快速顯示你的產(chǎn)品是如何使用的一個(gè)非常好的方法，因?yàn)樗菀酌枋龀^一頁的內(nèi)容，楚，因?yàn)橛^眾可以清楚地看到該怎么辦。