一名網(wǎng)頁(yè)設(shè)計(jì)師在做具體設(shè)計(jì)的時(shí)候應(yīng)該考慮的問(wèn)題有哪些？業(yè)務(wù)，產(chǎn)品，信息結(jié)構(gòu)，交互，視覺(jué)……別忘了還有頁(yè)面性能。所崇尚的其實(shí)一直都是小作坊似的創(chuàng)業(yè)團(tuán)隊(duì)協(xié)作開(kāi)發(fā)模式，大伙兒能快速溝通，就算設(shè)計(jì)師沒(méi)關(guān)注到頁(yè)面性能這一點(diǎn)，前端同學(xué)也能迅速提醒他，因?yàn)樗麄z就無(wú)時(shí)無(wú)刻不在一起。而現(xiàn)在在標(biāo)準(zhǔn)項(xiàng)目流程中，大家的溝通成本成倍增加了，除非是與世隔絕的閉關(guān)（就算是閉關(guān)，前端同學(xué)多半也在陪著開(kāi)發(fā)），前端同學(xué)很難在頁(yè)面設(shè)計(jì)過(guò)程中就和設(shè)計(jì)師溝通頁(yè)面性能的問(wèn)題。

　　頁(yè)面性能不僅僅是前端同學(xué)的問(wèn)題

　　頁(yè)面性能的重要性不再贅述，就個(gè)人而言，能忍受一個(gè)網(wǎng)站加載出DOM和css的時(shí)間是5秒，否則就會(huì)毫不猶豫的關(guān)閉網(wǎng)頁(yè)。實(shí)際上只想說(shuō)明一個(gè)問(wèn)題，設(shè)計(jì)師需要考慮頁(yè)面性能。實(shí)際上設(shè)計(jì)師就是一種“通才”的角色。在傳統(tǒng)設(shè)計(jì)領(lǐng)域，多數(shù)設(shè)計(jì)大師都是通曉好幾個(gè)行業(yè)，比如科拉尼。在設(shè)計(jì)過(guò)程中充分考慮到各種因素，這是設(shè)計(jì)的難點(diǎn)，也是成就一個(gè)好設(shè)計(jì)的關(guān)鍵所在。以往那種網(wǎng)頁(yè)設(shè)計(jì)師做好psd圖稿，扔給前端工程師去做DEMO的時(shí)代已經(jīng)過(guò)去了，因?yàn)榛ヂ?lián)網(wǎng)進(jìn)步了，用戶進(jìn)步了。

　　原生控件的應(yīng)用——關(guān)于頁(yè)面性能，設(shè)計(jì)師應(yīng)首先考慮的

　　瀏覽器的原生控件雖然有其不足之處：ie的外觀很難控制；不能支持更加豐富復(fù)雜的交互等等，但它對(duì)瀏覽器的兼容支持得特別好，在用戶需要費(fèi)力填寫(xiě)表單的地方，原生控件相比非原生控件會(huì)提高性能，讓用戶操作起來(lái)很流暢。這也是為什么在一些銀行的網(wǎng)站或者客戶端上，會(huì)用原生的select來(lái)代替很多支持復(fù)雜的交互控件，比如選擇銀行。在滿足設(shè)計(jì)需求的前提下，優(yōu)先考慮原生控件會(huì)讓頁(yè)面更快，兼容性更好，前端同學(xué)也會(huì)少許多抱怨。設(shè)計(jì)師應(yīng)當(dāng)了解，在寫(xiě)具體應(yīng)用中控件時(shí)，不止是展現(xiàn)出用戶可操作的部分就完事了，還有很多事情要做：驗(yàn)證，安全，兼容，框架等等。

　　在使用招行專業(yè)版客戶端的時(shí)候，遇到過(guò)一個(gè)很好的控件交互設(shè)計(jì)。需求是填寫(xiě)銀行卡的開(kāi)戶支行，給用戶一個(gè)input讓他自己去填顯然是不靠譜的。招行的做法是先給一個(gè)搜索框，讓用戶輸入關(guān)鍵字，比如住在西湖區(qū)，就輸入西湖二字，頁(yè)面刷新之后返回一個(gè)結(jié)果列表，從中用戶來(lái)選擇支行，這樣搜索過(guò)濾之后的結(jié)果，只有10條左右，容易辨認(rèn)。而我只用了兩次就學(xué)會(huì)了這種操作，額外的好處是操作過(guò)程中頁(yè)面反應(yīng)相當(dāng)快。而我在其他網(wǎng)站上選擇開(kāi)戶行支行的時(shí)候，遇到過(guò)省市，再選支行聯(lián)動(dòng)控件，輸入+下拉列表混合控件，選擇的時(shí)候都能方便且正確的選中，但是我點(diǎn)擊控件的時(shí)候相應(yīng)速度卻有延遲，心里略有不爽，這就是差別。有關(guān)原生控件和復(fù)雜控件的應(yīng)用對(duì)比，可見(jiàn)我的一篇舊文：易用且輕量級(jí)的交互設(shè)計(jì)。

　　而隨著html5的標(biāo)準(zhǔn)日益完善，新的原生控件會(huì)滿足更多的需求，比如外聯(lián)數(shù)據(jù)源xml，瀏覽器內(nèi)置的不同數(shù)據(jù)類型的驗(yàn)證，這些會(huì)大大減少js的體積。當(dāng)然這依賴著國(guó)內(nèi)ie6市場(chǎng)份額的進(jìn)一步下降（目前為60%）。相信未來(lái)一些輕量級(jí)的非原生控件，也會(huì)慢慢納入到html的標(biāo)準(zhǔn)之中，比如困擾過(guò)很多人的日期控件。

　　頁(yè)面的框架——設(shè)計(jì)師也能幫助到前端

　　并不完全贊同設(shè)計(jì)師必須要懂代碼，這應(yīng)是因人而異的。但一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師，必須要為頁(yè)面框架考慮，小到一個(gè)頁(yè)面上的一個(gè)控件，大到一個(gè)項(xiàng)目。這是經(jīng)驗(yàn)的積累，并不依靠對(duì)代碼的理解，和設(shè)計(jì)原則中的一致性是密切相關(guān)的。不僅僅是少兩張圖片，少兩行代碼，充分考慮css框架的設(shè)計(jì)，組件的重用，圖片的分割和整合，這些能讓頁(yè)面性能提高不止一個(gè)檔次，同時(shí)保證設(shè)計(jì)感。

　　感于日常工作及學(xué)習(xí)中，大家討論設(shè)計(jì)時(shí)設(shè)計(jì)頁(yè)面性能的次數(shù)十分少，而它又是項(xiàng)目中設(shè)計(jì)師和前端最主要的分歧點(diǎn)，為了消弭這種分歧，最好的做法就是大家互相增進(jìn)了解。我在公司里有給設(shè)計(jì)師分享前端知識(shí)，給前端分享photoshop知識(shí)，也是為了大家一起進(jìn)步做出更好的產(chǎn)品和應(yīng)用。其實(shí)在自己的博客上實(shí)踐提高頁(yè)面性能的各種方法，是相當(dāng)輕便且有效的，實(shí)踐過(guò)的常識(shí)經(jīng)過(guò)轉(zhuǎn)化再提煉，成為知識(shí)，這點(diǎn)我十分認(rèn)同白鴉和千鳥(niǎo)的看法。
本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://www.aoshipj.com/