公用樣式模板的設計制作_網頁設計

這個話題是應騰訊ISD同仁之邀在WebReBuild三周年交流會上做的主題分享。由于臨場等原因有些問題當時沒有講明白，回來后按原有思路形成了一篇小論文，對其中一些問題進行了進一步闡述。現場有位同行朋友提出了對使用表現性語義的質疑，當時沒有給出讓他滿意的答復，因此文章中花了較多的篇幅來探討語義性有關的問題，算是對那位朋友的解答。 一、 公用樣式模板的“公用”的含義 1. 能夠應用在不同功能的web系統上（用在哪？） 企業的web開發團隊除了開發一些在公共平臺運營為公司用戶服務的web產品，也會開發一些供公司內部團隊使用的信息管理系統(IMS，Information Management System)，用以優化流程，提高辦公效率。例如企業ERP（Enterprise Resource Planning）、人事管理、工作流程管理、銷售管理、倉庫資源管理等系統。這類系統主要供內部部門使用，功能繁雜，注重信息的組織和功能的實現，對前臺界面的個性化要求不高，不必要每個系統都重新設計制作界面，提供一套公用樣式模板可以有效地提高開發效率。 2. 提供給不同專業背景的人使用（給誰用？） 有一類web頁面時效性很強，需要非常快速地制作上線，例如一些新聞專題；另外有些頁面總量很大，但結構相似，例如上面提到的IMS系統的很多不同的功能模塊。這類頁面由于時間限制或者根本沒有必要由專業的重構人員來精細制作，寫好每一個頁面每一個標簽的代碼，所以也有必要提供一套使用方便的公用樣式模板，供內容編輯、或者后臺開發人員直接使用。 二、 公用樣式模板的設計要求 能夠應用在多個web系統上要求 1. 公用模板設計需要具備抽象性、代表性 (1). 整體規劃頁面層次邏輯 h1,h2,h3,h4,h5,h6 的整體規劃 一本書的目錄部分，往往能很清晰地體現出這本書的結構層次，第一章第一節第一小節，次序井然。好的網頁也應該有清晰的層次邏輯，網頁大標題、次級標題、段落內容等，層層展開。(X)HTML網頁標記語言本身也給我們提供了標識網頁層次的標簽：h1/h2/h3/h4/h5/h6。在公用模板中要整體規劃好網頁內容的結構層次，并恰當地使用這些標簽來體現。在禁用CSS的情況下，可以從瀏覽器默認樣式方便地看到網頁的結構層次。 清晰的導航菜單和面包屑(crumb)標識 在做好上面合理地規劃h(n)標識的情況下，導航菜單和面包屑導航在網頁上能更加直觀地體現網頁的層次，也是增強網頁可用性必須具備的網頁元素。 (2). 具有代表性的頁面布局結構 網頁結構布局也有一定的范式，往往包括頁頭、導航菜單、主體內容和頁腳。遵循這些最普遍的布局原則才能最大程度保證公用模板的通用性。 (3). 具有代表性的頁面元素 1、Logo、網頁大標題 Logo具有品牌標識作用。大標題最直接地告訴用戶網頁/系統的內容/用途，但不是必備的，有些網頁只有logo和副標題，因此設計時網頁大標題可以作為可選項目。 2、導航菜單 導航菜單的重要作用不再強調。需要注意的是，在設計模板菜單樣式的時候，要有標識當前項的樣式，以及需要特別強調的進行高亮顯示的項目樣式。還要考慮多級菜單對子菜單進行下拉或者折疊顯示的情況。設計的時候考慮周全，在需要的時候可以方便地進行拓展。 3、面包屑導航 不多強調，相當于網頁上的GPS。 4、數據表格、文本內容 這類元素往往是網頁的主體內容，用以呈現格式化的信息。在設計制作數據表格的表頭、單元格樣式的時候，需要考慮根據不同的數據形式，樣式可能也會不同。比如較長的文本內容可能需要在單元格里左對齊，而數字類型數據，為了直觀地比較數位大小，通常需要右對齊。有時候數據內容比較多，需要分頁進行顯示，所以也有必要提供一個具有良好用戶體驗的分頁樣式。 5、數據錄入表單 用以錄入數據的表單組件：單選框、復選框、下拉框、文本框等等。可以根據需要對這類網頁原生的交互組件的默認外觀進行統一的初始化。如果對交互效果要求比較高，需要設置鼠標、鍵盤事件與表單項進行交互時的不同樣式（如 onmouseover、onclick、onfocus等）。由于IE6-對偽類選擇器（hover、focus）支持不完善，制作這些效果的時候要使用腳本進行一些兼容處理。另外，還有一些填寫表單時的注意事項等提示類信息，以及對錄入數據進行驗證出錯時的錯誤提示信息，這些信息通常會顯示在表單旁邊，驗證錯誤時還需要將出錯的表單項進行高亮顯示，這些樣式在公用模板里都需要進行設計。 6、各類備注、報錯、提示信息 包括上面提到的附加在元素旁邊顯示的表單填寫提示及驗證報錯，和一些對內容進行解釋的備注說明等，還有一些可能會以單獨模塊出現，例如用戶操作成功、失敗或者是登陸超時等提示信息。 7、交互UI組件：切換標簽、下拉菜單和模態彈窗等 除了網頁表單控件以及瀏覽器提供的消息組件（alert、confirm、prompt），經常還需要用到一些自定義的交互組件，例如切換標簽、下拉菜單，以及考慮到易用性問題而對瀏覽器消息組件進行封裝的模態彈窗等（例如lightbox、thickbox），可以選擇最常用組件集成到公用模板中。