2013年6月16日星期日

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

這個話題是應騰訊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)標識的情況下,導航菜單和面包屑導航在網頁上能更加直觀地體現網頁的層次,也是增強網頁可用性必須具備的網頁元素。

1 条评论: