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

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

　　1、界面元素的需求

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

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

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

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

　　2、專門操作

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

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

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

　　3、禁用按下按鈕

　　在web應(yīng)用程序的表單問題中有一個(gè)就是提交過程，非常簡單的表單，如果你快速地點(diǎn)擊兩次或者更多次“提交”按鈕，這個(gè)表單會被多次提交。這顯示是個(gè)問題，因?yàn)樗鼤?strong>重復(fù)創(chuàng)建相同的項(xiàng)目。防止重復(fù)提交的不是很難，而且對于大多數(shù)Web應(yīng)用程序來說做到這一點(diǎn)是非常必要的。

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

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

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

<input type=”submit”value=”Submit” onclick=”this.disabled=true”/>

it知識庫：Web前端應(yīng)用十種常用技術(shù)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。