2010-11-24
頁面性能不僅僅是前端的問題？
頁面性能的重要性不再贅述，就我個人而言，能忍受一個網站加載出DOM和css的時間是5秒，否則就會毫不猶豫的關閉網頁。實際上只想說明一個問題，設計師需要考慮頁面性能。實際上設計師就是一種“通才”的角色。在傳統設計領域，多數設計大師都是通曉好幾個行業，比如科拉尼。在設計過程中充分考慮到各種因素，這是設計的難點，也是成就一個好設計的關鍵所在。以往那種網頁設計師做好psd圖稿，扔給前端工程師去做DEMO的時代已經過去了，因為互聯網進步了，用戶進步了。
原生控件的應用——關于頁面性能，設計師應首先考慮的
瀏覽器的原生控件雖然有其不足之處：ie的外觀很難控制;不能支持更加豐富復雜的交互等等，但它對瀏覽器的兼容支持得特別好，在用戶需要費力填寫表單的地方，原生控件相比非原生控件會提高性能，讓用戶操作起來很流暢。這也是為什么在一些銀行的網站或者客戶端上，會用原生的select來代替很多支持復雜的交互控件，比如選擇銀行。在滿足設計需求的前提下，優先考慮原生控件會讓你的頁面更快，兼容性更好，你的前端同學也會少許多抱怨。設計師應當了解，在寫具體應用中控件時，不止是展現出用戶可操作的部分就完事了，還有很多事情要做：驗證，安全，兼容，框架等等。這里可看財付通的付款頁面的js請求數，會嚇你一跳的。
在使用招行專業版客戶端的時候，遇到過一個很好的控件交互設計。需求是填寫銀行卡的開戶支行，給用戶一個input讓他自己去填顯然是不靠譜的。招行的做法是先給一個搜索框，讓用戶輸入關鍵字，比如我住在西湖區，我就輸入西湖二字，頁面刷新之后返回一個結果列表，從中用戶來選擇支行，這樣搜索過濾之后的結果，只有10條左右，容易辨認。而我只用了兩次就學會了這種操作，額外的好處是操作過程中頁面反應相當快。而我在其他網站上選擇開戶行支行的時候，遇到過省市，再選支行聯動控件，輸入+下拉列表混合控件，選擇的時候都能方便且正確的選中，但是我點擊控件的時候相應速度卻有延遲，心里略有不爽，這就是差別。有關原生控件和復雜控件的應用對比，可見我的一篇舊文：易用且輕量級的交互設計。
而隨著html5的標準日益完善，新的原生控件會滿足更多的需求，比如外聯數據源xml，瀏覽器內置的不同數據類型的驗證，這些會大大減少js的體積。當然這依賴著國內ie6市場份額的進一步下降(目前為60%)。相信未來一些輕量級的非原生控件，也會慢慢納入到html的標準之中，比如困擾過很多人的日期控件。
頁面的框架——設計師也能幫助到前端
并不完全贊同設計師必須要懂代碼，這應是因人而異的。但一個好的網頁設計師，必須要為頁面框架考慮，小到一個頁面上的一個控件，大到一個項目。這是經驗的積累，并不依靠對代碼的理解，和設計原則中的一致性是密切相關的。不僅僅是少兩張圖片，少兩行代碼，充分考慮css框架的設計，組件的重用，圖片的分割和整合，這些能讓頁面性能提高不止一個檔次，同時保證設計感。
