您好,歡迎來到一站式眾包服務(wù)平臺-威客牛網(wǎng)
當(dāng)前位置:威客牛首頁 > 知識百科 > IT軟件 > UI設(shè)計(jì) > web界面設(shè)計(jì)教程

web界面設(shè)計(jì)教程

2022-12-04作者:網(wǎng)友投稿
  當(dāng)今越來越多的應(yīng)用程序遷移到web平臺上。由于沒有平臺的限制和安裝的要求,SAAS的模式看起來非常有吸引力。Web應(yīng)用程序的界面設(shè)計(jì),其核心就是網(wǎng)頁設(shè)計(jì),但它的重點(diǎn)主要是在功能方面。要超越桌面應(yīng)用程序,Web應(yīng)用程序必須提供簡單、直觀和即時響應(yīng)的用戶界面,讓他們的用戶花更少的精力和時間去完成事情。以下就是贏在威客網(wǎng)小編為您整理的web界面設(shè)計(jì)教程。

  主要介紹的是在現(xiàn)代Web應(yīng)用程序中,對設(shè)計(jì)模式以及有效設(shè)計(jì)解決方案進(jìn)行大量研究并得到結(jié)果的第一部分,您可以在下面找到10個收集到的實(shí)用界面設(shè)計(jì)技術(shù)以及在許多成功Web應(yīng)用程序中得出的最佳做法。

  1、界面元素的需求

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

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

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

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


  2、專門操作

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

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

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

  

  MyBankTracker的APY計(jì)算器功能,通過使用容易控制的滑塊去快速嘗試不同的推測結(jié)果。

  另一個很好的例子是滑塊。是的,您可以隨時手動輸入一個數(shù)字,但某些情況下,滑塊控件做了更好的工作。不僅由于他們易于使用 -- 只需單擊并拖動--而且你也可以看清楚如何在最小和最大的范圍之間進(jìn)行合適地選擇。

  3、禁用按下按鈕


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

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