Web應用程序

Web應用程序是一種允許用戶在Internet瀏覽器執行業務邏輯的Web（分布式C/S）系統，業務邏輯可以放在服務器和/或客戶端。

當一個網頁作為Web應用程序的入口時，可以將其看成是一種特殊的主窗口。

Web應用系統中的用戶事件是通過菜單項、動作按鈕、超鏈接實現的。

一個網頁鏈接到其他網頁的方式：

• 網頁標題下的菜單欄
• 菜單欄下面的面包屑區域
• 左邊和右邊的菜單面板

Web應用系統的使能技術

使能技術（Enabling Technology）是指一項或一系列的、應用面廣、具有多學科特性、為完成任務，而實現目標的技術。

維基百科對使能技術的定義是：使能技術是指能夠對用戶的能力或文化產生根本性變化的發明或創新，其最明顯的特征是一般會在不同領域快速形成衍生技術。

大多數Web應用系統的核心使能技術是Web服務器，它給瀏覽器提供網頁，維護著應用系統的狀態以跟蹤在線用戶的動作。

Cookie是應用服務器監控用戶狀態的一種簡單技術。

Script和Applet用于創建動態的客戶端頁面，Script是一個由瀏覽器解釋執行的程序，Applet是一個編譯好的在瀏覽器沙盒環境中執行的組件。

服務器頁中的腳本使用標準數據訪問庫，典型的使能技術包括ODBC、JDBC、RDO、ADO等。

Web服務器的使能技術一般有HTML、ASP、JSP等。

網頁使能技術一般有客戶端腳本、XML文檔、JavaApplet、JavaBean、ActiveX控件等。

客戶端通過HTTP從服務器獲得網頁，頁面可以包含腳本，或是已經編譯好的可執行的DLL模塊，如ISAPI、NSAPI、CGI、Servlet等。

部署體系結構支持更先進的Web應用系統，包括四個層次的計算節點：

• 瀏覽器客戶端：在客戶端運行瀏覽器外的應用代碼（腳本或小程序）。
• Web服務器：處理來自瀏覽器的頁面請求，并動態生成頁面和要在客戶端執行和顯示的代碼。
• 應用服務器：在系統實現涉及分布式對象時，應用服務器不可或缺，它處理業務邏輯。
• 數據庫服務器：業務構件封裝存儲在數據庫中的持久數據。

內容設計

內容設計的目標：

• 如何將網站或Web應用系統的可視內容展現在用戶的Web瀏覽器上。
• 設計必須具更具有適應性，并考慮到不同用戶的需要、興趣、技能和偏好。

Web應用系統是一個包含部分或全部未確定頁面內容的網站。

靜態網頁和動態網頁之間的區別原語Web服務器和應用服務器之間的區別。
Web服務器管理管理靜態網頁，而應用服務器管理動態網頁。

表單在頁面顯示信息給用戶，允許輸入數據或發送信息組合給服務器處理并顯示結果。

導航設計

導航風格依據Web應用系統的復雜性不同而不同。

菜單和鏈接

菜單和鏈接網頁之間導航的兩個主要工具。

菜單和鏈接具有類似的功效（指用戶期望GUI項具有的行為），鏈接的功效是進入另一個頁面，菜單的功效也是移動到另一個頁面，但偶爾菜單項可以在呈現另一個頁面時做一些附加的處理。
菜單可以分層，一些菜單可以進入一個新的頁面，另一些則是展示一個子菜單的下拉列表。

菜單可以分為：

• 頂部菜單用于整個網站的導航。
• 左手菜單用于導航到達網站控制以外的網頁。
• 右手菜單用于顯示網站范圍內的網頁。

面包屑和導航面板

面包屑和導航面板提供了當前頁所在位置的可視化，并用于導航到此頁。

面包屑區域通常放在頁面的頂部，剛好在頂部菜單下面。該區域由一組超鏈接標簽組成，用于告訴用戶它們的當前位置。導航項隨用戶在頁面之間的導航而改變。通常情況下，它們還允許用戶后退到以前訪問過的頁面。

導航面板顯示了一個工作流程的所有步驟，且除非取消工作，否則不允許返回以前的步驟。
導航面板在頁面上的位置取決于設計師的判斷，有可能不再頁面的頂端。

按鈕

在Web應用系統中，按鈕是調動動作的主要工具，而菜單項只用于導航目的。
按鈕的功效是按下之后做一些事情。

按鈕的設計原則如下：

• 如果按鈕被放置在一個相關的按鈕組中，且它們的文字數量沒有明顯不同，則它們的大小相同。
• 把它們一起放在頁面的按鈕區域上，與輸入數據的區域分開。
• 如果網頁比窗口長，則在頂部和底部重復放置相同的按鈕。
• 謹慎放到框架標簽上，區分應用于個別標簽的動作和應用于整個框架標簽的動作。
• 編程時忽略不耐心用戶的多次點擊。
• 準確命名以顯示將觸發的動作（某些動作會保存在數據庫，而某些只是暫時保存，用戶可以撤銷）。

總結

以上是生活随笔為你收集整理的【UI/UX】Web应用GUI设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。