在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師需要考慮各種問(wèn)題，如業(yè)務(wù)需求、產(chǎn)品特點(diǎn)、信息結(jié)構(gòu)、交互設(shè)計(jì)和視覺(jué)效果等。然而，有一個(gè)重要的問(wèn)題經(jīng)常被忽略，那就是頁(yè)面性能。作為一名網(wǎng)頁(yè)設(shè)計(jì)師，我們應(yīng)該意識(shí)到頁(yè)面性能的重要性。

在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師需要考慮各種問(wèn)題，如業(yè)務(wù)需求、產(chǎn)品特點(diǎn)、信息結(jié)構(gòu)、交互設(shè)計(jì)和視覺(jué)效果等。然而，有一個(gè)重要的問(wèn)題經(jīng)常被忽略，那就是頁(yè)面性能。作為一名網(wǎng)頁(yè)設(shè)計(jì)師，我們應(yīng)該意識(shí)到頁(yè)面性能的重要性。

我一直崇尚小團(tuán)隊(duì)協(xié)作開(kāi)發(fā)模式，因?yàn)檫@種模式可以快速溝通，即使設(shè)計(jì)師沒(méi)有關(guān)注到頁(yè)面性能，前端開(kāi)發(fā)人員也可以提醒他。然而，在標(biāo)準(zhǔn)項(xiàng)目流程中，溝通成本增加了很多，前端開(kāi)發(fā)人員很難在頁(yè)面設(shè)計(jì)的過(guò)程中與設(shè)計(jì)師及時(shí)溝通頁(yè)面性能的問(wèn)題。因此，設(shè)計(jì)師自己就必須考慮頁(yè)面性能。

設(shè)計(jì)師應(yīng)該是一種“通才”的角色。在傳統(tǒng)設(shè)計(jì)領(lǐng)域，大部分優(yōu)秀的設(shè)計(jì)師都通曉多個(gè)行業(yè)。設(shè)計(jì)的難點(diǎn)在于充分考慮各種因素，并將其融入到設(shè)計(jì)中。以前，網(wǎng)頁(yè)設(shè)計(jì)師只需要設(shè)計(jì)好PSD圖稿，然后交給前端工程師制作DEMO。但現(xiàn)在，互聯(lián)網(wǎng)進(jìn)步了，用戶也進(jìn)步了。設(shè)計(jì)師需要更多地考慮頁(yè)面性能。

在設(shè)計(jì)中，原生控件的應(yīng)用是關(guān)于頁(yè)面性能的一個(gè)重要方面。盡管原生控件有一些不足之處，比如IE的外觀難以控制，無(wú)法支持復(fù)雜的交互等，但它們對(duì)瀏覽器的兼容性支持很好。在用戶需要填寫(xiě)表單的地方，相比非原生控件，原生控件可以提高性能，讓用戶操作更加流暢。因此，在滿足設(shè)計(jì)需求的前提下，設(shè)計(jì)師應(yīng)該優(yōu)先考慮使用原生控件，這樣可以使頁(yè)面加載更快，兼容性更好，并且減少前端開(kāi)發(fā)人員的抱怨。

此外，設(shè)計(jì)師還應(yīng)了解在編寫(xiě)具體應(yīng)用程序控件時(shí)，不僅僅是展示用戶可操作的部分，還涉及到驗(yàn)證、安全、兼容性和框架等方面。這些都會(huì)影響頁(yè)面的性能。例如，我曾經(jīng)在招商銀行的專(zhuān)業(yè)版客戶端中遇到過(guò)一個(gè)很好的控件交互設(shè)計(jì)。用戶需要填寫(xiě)銀行卡的開(kāi)戶支行，而不是直接給他們一個(gè)輸入框讓他們自己填寫(xiě)。招商銀行的做法是提供一個(gè)搜索框，讓用戶輸入關(guān)鍵字，然后刷新頁(yè)面并返回結(jié)果列表，用戶從中選擇支行。這樣，經(jīng)過(guò)搜索過(guò)濾的結(jié)果只有約10條左右，容易辨認(rèn)。我只用了兩次就學(xué)會(huì)了這種操作方式，而且頁(yè)面反應(yīng)非?？?。相比之下，在其他網(wǎng)站上選擇開(kāi)戶行支行時(shí)，遇到過(guò)省市、再選支行聯(lián)動(dòng)控件和下拉列表混合控件，盡管在選擇時(shí)非常方便和準(zhǔn)確，但點(diǎn)擊控件時(shí)響應(yīng)速度卻有延遲，讓人心里稍感不爽。這就是原生控件和復(fù)雜控件之間的差別。

隨著HTML5標(biāo)準(zhǔn)的不斷完善，新的原生控件可以滿足更多需求，例如外聯(lián)數(shù)據(jù)源XML和瀏覽器內(nèi)置的不同數(shù)據(jù)類(lèi)型驗(yàn)證等，這些都可以大大減少JavaScript的體積。當(dāng)然，這也依賴(lài)于IE6在國(guó)內(nèi)市場(chǎng)份額的進(jìn)一步下降（目前為60%）。相信未來(lái)一些輕量級(jí)的非原生控件也會(huì)逐漸納入HTML標(biāo)準(zhǔn)中，比如日期控件等。

除了原生控件，設(shè)計(jì)師還能通過(guò)設(shè)計(jì)頁(yè)面框架來(lái)幫助前端開(kāi)發(fā)人員提高頁(yè)面性能。一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師不僅僅要考慮頁(yè)面上的每個(gè)組件，還要考慮整個(gè)項(xiàng)目的框架。這需要積累經(jīng)驗(yàn)，并與設(shè)計(jì)原則中的一致性緊密相關(guān)。在設(shè)計(jì)中充分考慮CSS框架的設(shè)計(jì)、組件的重用以及圖片的分割和整合，可以大幅提高頁(yè)面性能的同時(shí)保持設(shè)計(jì)感。

在日常工作和學(xué)習(xí)中，我們很少討論頁(yè)面性能在設(shè)計(jì)中的重要性，然而它卻是設(shè)計(jì)師和前端開(kāi)發(fā)人員之間最主要的分歧點(diǎn)。為了消除這種分歧，最好的方法就是相互增進(jìn)了解。我在公司中分享前端知識(shí)給設(shè)計(jì)師，也分享Photoshop知識(shí)給前端開(kāi)發(fā)人員，這樣可以共同進(jìn)步，創(chuàng)造出更好的產(chǎn)品和應(yīng)用。另外，在自己的博客上實(shí)踐頁(yè)面性能的優(yōu)化方法也是非常有效的，通過(guò)實(shí)踐轉(zhuǎn)化為知識(shí)，提高自己的能力。

總結(jié)起來(lái)，作為網(wǎng)頁(yè)設(shè)計(jì)師，我們不能忽視頁(yè)面性能。在設(shè)計(jì)過(guò)程中，要考慮使用原生控件和設(shè)計(jì)頁(yè)面框架來(lái)提高性能。通過(guò)相互的溝通和學(xué)習(xí)，我們可以共同進(jìn)步，為用戶提供更好的體驗(yàn)。