Web前端常用的十種技術(shù)

Web前端應(yīng)用十種常用技術(shù)坞淮，隨著JS與XHTML的應(yīng)用普及伴挚，越來越多的web界面應(yīng)用技術(shù)出現(xiàn)在網(wǎng)站上趁曼，比如我們常見的日歷控件，搜索下拉框等异赫，這些web界面應(yīng)用技術(shù)大大的豐富了網(wǎng)站的表現(xiàn)形式，本文將為您精心推薦十種最常見的web界面應(yīng)用技術(shù)头岔。

Web應(yīng)用程序的界面設(shè)計塔拳，其核心就是網(wǎng)頁設(shè)計 ，但它的重點主要是在功能方面切油。要超越桌面應(yīng)用程序蝙斜， Web應(yīng)用程序必須提供簡單、直觀和即時響應(yīng)的用戶界面澎胡，讓他們的用戶花更少的精力和時間去完成事情孕荠。

以前，我們并沒有注意到web應(yīng)用程序這個方式攻谁，但是現(xiàn)在是時候仔細(xì)看看一些實用的技術(shù)和設(shè)計解決方案稚伍，讓W(xué)eb應(yīng)用更友好更漂亮。

1戚宦、界面元素的需求

在Web前端開發(fā)中个曙，簡單這個原則是很重要的。在任何時候，你在屏幕上顯示越多的控制垦搬，您的用戶將不得不花費(fèi)更多的時間去搞清楚如何使用界面呼寸。當(dāng)選擇變少時，可用的功能變得更加明顯更容易被發(fā)現(xiàn)猴贰。簡化的界面雖然是不容易的对雪，尤其是如果你不想限制應(yīng)用程序的功能的時候。

當(dāng)你點擊 Kontain 搜索框的搜索鏈接時米绕，會出現(xiàn)一個類似于下拉菜單的層瑟捣。所以，如果您需要來縮小搜索范圍栅干，您可以選擇菜單中你所需要的類型迈套。這些選項的聚合簡化了搜索框。

隱藏或者掩蓋高級功能 是使事情更加簡單的一種方法碱鳞。找出最常用的功能桑李，并且把剩下的藏起來。你可以用彈出式菜單和操作來做這件事窿给，這在桌面軟件中很常見芙扎。例如，如果您的搜索欄擁有高級過濾器填大，把它們放在尾部的一個特別的下拉菜單中戒洼。如果用戶需要使用這些過濾器，他們只需幾下點擊便可以開啟這些功能允华。決定該保留什么隱藏什么不是一個簡單的任務(wù)圈浇，也會取決于重要性和操作時的頻繁程度。

當(dāng)你點擊 CollabFinder 的搜索鏈接時你不需要打開不同的頁面靴寂，相反磷蜀，搜索框的控制菜單下拉下來，允許你能夠直接開始搜索百炬。

2褐隆、專門操作

根據(jù)情況選擇合適的界面控件 是很重要的。不同情況下可以用不同的方式處理剖踊，而且某些控件會比其他控件能夠更好地完成他們的目標(biāo)工作庶弃。

Backpack 里有一個緊湊的日歷和時間選擇器選擇提醒日期。

例如德澈，你可以通過一個下拉列表來選擇年月日歇攻，但是和日歷選擇器相比下拉列表不是非常高效的，在日歷里你可以直接通過點擊選擇你想要的某一天梆造。日歷選擇器也會讓你更容易看到日期缴守、周期和月份（特別是工作日和休息日），因此能夠讓你比用簡單的下拉列表更快地做出更明智的選擇 。

3屡穗、禁用按下按鈕

在web應(yīng)用程序的表單問題中有一個就是提交過程贴捡，非常簡單的表單，如果你快速地點擊兩次或者更多次“提交”按鈕村砂，這個表單會被多次提交栈暇。這顯示是個問題，因為它會重復(fù)創(chuàng)建相同的項目 箍镜。防止重復(fù)提交的不是很難，而且對于大多數(shù)Web應(yīng)用程序來說做到這一點是非常必要的煎源。

它有兩層維護(hù)：客戶端和服務(wù)器端 色迂。我們不會通過服務(wù)器端維護(hù)是因為這將取決于您使用的編程語言和你的后端架構(gòu)∈窒基本上你應(yīng)該做的就是在提交過程中添加一個檢測機(jī)制歇僧，去檢查被提交的內(nèi)容是否重復(fù)，并且是否需要阻止提交

在 Yammer 上锋拖，當(dāng)你的新消息被提交之后诈悍，“更新”按鈕將被禁止。

客戶端則是簡單得多兽埃。所有您需要做的就是在點擊之后禁用“提交”按鈕 侥钳。最簡單的方法就是為“提交”按鈕添加一段JavaScript，如下所示：

當(dāng)然柄错，我們會建議您同時還對服務(wù)器端進(jìn)行檢查舷夺，以確保重復(fù)不會獲得通過。

4售貌、模擬窗口的陰影

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

這種技術(shù)來源于傳統(tǒng)的桌面軟件敢伸，幫助用戶把他們的焦點放在出現(xiàn)的窗口上。由于大多數(shù)情景窗口是不容易從桌面程序中辨識出來恒削，所以陰影幫助他們更接近于讀者池颈，因為感覺上窗口似乎是三維地浮在其他頁面上。

Digg 的登錄窗口有一個厚厚的陰影圍繞它來屏蔽網(wǎng)頁噪音钓丰。

5饶辙、空白狀態(tài)告訴你要做什么

當(dāng)你設(shè)計一個Web應(yīng)用程序時，你不僅需要通過樣本數(shù)據(jù)去測試這個程序斑粱，而且最重要的是當(dāng)什么內(nèi)容都沒有的情況下弃揽，你要確保它看起來不錯而且是有幫助的 。

當(dāng)在頁面或者查詢結(jié)果沒有信息時，告訴你如何才能處理這些空白區(qū)域是一條很有幫助的信息矿微。例如痕慢，一個項目管理應(yīng)用程序的網(wǎng)頁可能會列出用戶的項目，但如果沒有項目涌矢，你可以提供一個創(chuàng)建項目的鏈接掖举。即使已經(jīng)有創(chuàng)建項目的按鈕存在在頁面上，但一點額外的幫助并不會有損失 娜庇。

Campaign Monitor 會在你開始建立一個郵件廣告時指導(dǎo)你正確的方向塔次。

這種技術(shù)實際上鼓勵用戶試用服務(wù)，并在注冊之后直接使用這項服務(wù)名秀。通過應(yīng)用程序的單步指導(dǎo)用戶能夠幫助他/她去了解程序提供的優(yōu)勢以及是否有用励负。同樣重要的是把最重要的操作呈現(xiàn)給用戶并且只有這些而已——把所有功能都呈現(xiàn)出來并沒有意義。請記住匕得，用戶通常希望得到一些或多或少提供給他們的具體構(gòu)思继榆，但是他們不想要直接跳到詳細(xì)說明去——他們既沒有時間也沒有興趣。

通過空白狀態(tài)去激勵用戶和行為汁掠，可以大大減少“輟學(xué)”略吨，并且?guī)椭臐撛诳蛻簦玫亓私庠撓到y(tǒng)如何工作考阱。

6翠忠、按鈕的按下狀態(tài)

許多Web應(yīng)用程序有自定義的按鈕樣式。這些都是用自定義圖片作為他們背景的錨點或輸入按鈕乞榨。默認(rèn)輸入按鈕可能不適合在一些情況下负间，以及文字鏈接有時過于渺小。目前的挑戰(zhàn)是姜凄，當(dāng)你把你的鏈接弄得看上去像按鈕時政溃，它們的操作也應(yīng)該和按鈕一樣——這包括當(dāng)用戶點擊它們時會有被“按動”的效果 。

這不是一個純粹的視覺調(diào)整态秧。提供即時反饋給用戶將使應(yīng)用程序感覺更有響應(yīng)性董虱，并且給用戶帶來更接近于桌面軟件的的用戶體驗。

你可以通過CSS為按鈕增加按下的效果申鱼。

Highrise 的按鈕實際上是在你點擊的時候顯示一個按下的效果愤诱，給用戶一個非常舒適的反饋感覺。

7捐友、在登陸頁面提供注冊的連接

一些沒有注冊你的應(yīng)用程序的用戶將不可避免地停在你的登錄頁面上淫半。他們想要使用你的應(yīng)用程序，但是卻不能立刻找到注冊頁面匣砖】瓶裕可能他們已經(jīng)試過訪問一個只提供給注冊用戶的特定頁面昏滴。

Goplan 的登陸頁面上有個漂亮的彩色按鈕指向注冊頁面。

在你的登陸頁面上放上注冊的連接 會讓一切容易很多对人。如果他們沒有賬戶谣殊，他們不應(yīng)該去尋找注冊頁面。我們研究證實：在注冊頁面牺弄，有18%的網(wǎng)站有登錄表單或者鏈接到登陸頁面的連接姻几。

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

思考什么是用戶期望看到的以及在每個給與的情景 中他們需要什么是很重要的势告。你不需要在每個地方顯示同樣的導(dǎo)航控件因為在用戶可能不是在每個環(huán)境中都需要它們蛇捌。

上下文關(guān)聯(lián)控件的最佳范例之一是最近在微軟office 2007中的界面，在它的界面中默認(rèn)的工具條被帶裝控件代替咱台。每個標(biāo)簽上有不同控件相關(guān)的特定操作络拌，無論是圖形編輯，校對或者簡單書面形式吵护。web應(yīng)用程序也可以受益于這種上下文關(guān)聯(lián)的控件，因為這些控件通過只顯示用戶需要的內(nèi)容來幫助整潔界面表鳍，并非顯示所有的內(nèi)容 馅而。

Lighthouse 提供一個熟悉的標(biāo)簽導(dǎo)航菜單，但是它在標(biāo)簽正下方有二級菜單譬圣。這個層級只顯示當(dāng)前項目相關(guān)活動的部分瓮恭。

9、更加重視主要功能

不是所有控件擁有相同的重要性 厘熟。例如屯蹦，在屏幕上創(chuàng)建一個新項目，你可以有兩個按鈕：“創(chuàng)建”和“取消”绳姨。這個“創(chuàng)建”的鏈接更重要一些登澜，因為是用戶大部分時間會去用的操作。只有少數(shù)才會去取消飘庄。所以如果這些控件挨著排放脑蠕，你可能不會想要給于相同的重視。

這個 Lighhouse 的“創(chuàng)建任務(wù)”按鈕跪削。你可以看到“取消”鏈接在旁邊以純文本格式谴仙。這個按鈕不僅具有更重要的操作而且會有較大的點擊區(qū)域并且容易去點擊。

為了讓用戶的重點轉(zhuǎn)向“創(chuàng)建”鏈接碾盐，我們可以簡單地利用不同的樣式或者控件形式晃跺。一些應(yīng)用程序的表單輸入按鈕用來作為創(chuàng)建動作，并且把取消操作作為一個文字連接毫玖。這樣不僅給與創(chuàng)建按鈕更多的點擊區(qū)域 掀虎，而且也幫助那些在搜尋內(nèi)容的用戶獲得更好的焦點目光 凌盯。

10、嵌入式視頻

當(dāng)圖片和文字作為一種很大的方式去和你的用戶溝通并且教育你的用戶有關(guān)你程序的特點時涩盾，如果你有資源去投入十气，視頻甚至可以成為更好的選擇。視頻在最近幾年的web應(yīng)用上已被越來越受歡迎春霍。對于Web應(yīng)用程序砸西，視頻通常作為展示產(chǎn)品特點的示范影片 被用于市場網(wǎng)站中。但是這不是使用視頻的唯一方法址儒。

GoodBarry 特點是在頭版有示范視頻去展示產(chǎn)品芹枷，它也通過利用示范影片去教育用戶如何開始使用

一些Web應(yīng)用程序使用視頻嵌入在程序本身教導(dǎo)用戶如果使用某些特定功能。視頻是一種非常好的方式去快速展示你產(chǎn)品是被怎么使用的莲趣，因為它更容易描述超過一頁文字的內(nèi)容鸳慈，也清楚得多，因為觀眾可以清楚地看到該怎么辦喧伞。

一位好的Web前端開發(fā)工程師在知識體系上既要有廣度走芋，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師潘鲫。

想要學(xué)習(xí)前端的同學(xué)可以加我的前端學(xué)習(xí)交流群562862926翁逞，全套前端開發(fā)資料自取

歡迎大家評論留言