DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 成功Web應用程序的最佳做法
成功Web應用程序的最佳做法
編輯:關於網頁技巧     

無事看到不錯的外文,簡單翻譯了一下共享出來,希望對大家有用。(轉載請表明出處,以下為譯文全部。

當今越來越多的應用程序遷移到web平台上。由於沒有平台的限制和安裝的要求,SAAS的模式看起來非常有吸引力。Web應用程序的界面設計,其核心就是網頁設計,但它的重點主要是在功能方面。要超越桌面應用程序, Web應用程序必須提供簡單、直觀和即時響應的用戶界面,讓他們的用戶花更少的精力和時間去完成事情。

以前,我們並沒有注意到web應用程序這個方式,但是現在是時候仔細看看一些實用的技術和設計解決方案,讓Web應用更友好更漂亮。本文主要介紹的是在現代Web應用程序中,我們對設計模式以及有效設計解決方案進行大量研究並得到結果的第一部分,您可以在下面找到10個收集到的實用界面設計技術以及在許多成功Web應用程序中得出的最佳做法。

你可以提出進一步的看法,第二部分會盡快出版。你也可以閱讀以下相關文章:

  • 5 Useful Coding Solutions For Designers and Developers
  • 10 Useful Techniques To Improve Your User Interface Designs
  • 10 Principles Of Effective Design
  • Five More Principle Of Effective Design
  • Getting Creative With Transparency In Web Design

    1、界面元素的需求

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

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

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

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

  • 2、專門操作

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

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

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

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

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

    3、禁用按下按鈕

    在web應用程序的表單問題中有一個就是提交過程,非常簡單的表單,如果你快速地點擊兩次或者更多次“提交”按鈕,這個表單會被多次提交。這顯示是個問題,因為它會重復創建相同的項目。防止重復提交的不是很難,而且對於大多數Web應用程序來說做到這一點是非常必要的。

    它有兩層維護:客戶端和服務器端。我們不會通過服務器端維護是因為這將取決於您使用的編程語言和你的後端架構。基本上你應該做的就是在提交過程中添加一個檢測機制,去檢查被提交的內容是否重復,並且是否需要阻止提交。

    在 Yammer 上,當你的新消息被提交之後,“更新”按鈕將被禁止。

    客戶端則是簡單得多。所有您需要做的就是在點擊之後禁用“提

    1234下一頁
    XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
    Copyright © DIV+CSS佈局教程網 All Rights Reserved