• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)頁設(shè)計(jì)師也該關(guān)注頁面性能

網(wǎng)頁設(shè)計(jì)師也該關(guān)注頁面性能

網(wǎng)頁設(shè)計(jì)師 于2020-04-15 10:50發(fā)表 閱讀次數(shù) 2141次

一名網(wǎng)頁設(shè)計(jì)師在做具體設(shè)計(jì)的時候應(yīng)該考慮的問題有哪些？業(yè)務(wù)，產(chǎn)品，信息結(jié)構(gòu)，交互，視覺……別忘了還有頁面性能。我所崇尚的其實(shí)一直都是小作坊似的創(chuàng)業(yè)團(tuán)隊(duì)協(xié)作開發(fā)模式，大伙兒能快速溝通，就算設(shè)計(jì)師沒關(guān)注到頁面性能這一點(diǎn)，前端同學(xué)也能迅速提醒他，因?yàn)樗麄z就無時無刻不在一起。而現(xiàn)在在標(biāo)準(zhǔn)項(xiàng)目流程中，大家的溝通成本成倍增加了，除非是與世隔絕的閉關(guān)（就算是閉關(guān)，前端同學(xué)多半也在陪著開發(fā)），前端同學(xué)很難在頁面設(shè)計(jì)過程中就和設(shè)計(jì)師溝通頁面性能的問題。 　　頁面性能不僅僅是前端同學(xué)的問題 　　頁面性能的重要性不再贅述，就我個人而言，能忍受一個網(wǎng)站加載出DOM和css的時間是5秒，否則就會毫不猶豫的關(guān)閉網(wǎng)頁。上面羅嗦了半天，實(shí)際上只想說明一個問題，設(shè)計(jì)師需要考慮頁面性能。實(shí)際上設(shè)計(jì)師就是一種“通才”的角色。在傳統(tǒng)設(shè)計(jì)領(lǐng)域，多數(shù)設(shè)計(jì)大師都是通曉好幾個行業(yè)，比如科拉尼。在設(shè)計(jì)過程中充分考慮到各種因素，這是設(shè)計(jì)的難點(diǎn)，也是成就一個好設(shè)計(jì)的關(guān)鍵所在。以往那種網(wǎng)頁設(shè)計(jì)師做好psd圖稿，扔給前端工程師去做DEMO的時代已經(jīng)過去了，因?yàn)榛ヂ?lián)網(wǎng)進(jìn)步了，用戶進(jìn)步了。 　　原生控件的應(yīng)用——關(guān)于頁面性能，設(shè)計(jì)師應(yīng)首先考慮的 　　瀏覽器的原生控件雖然有其不足之處：ie的外觀很難控制；不能支持更加豐富復(fù)雜的交互等等，但它對瀏覽器的兼容支持得特別好，在用戶需要費(fèi)力填寫表單的地方，原生控件相比非原生控件會提高性能，讓用戶操作起來很流暢。這也是為什么在一些銀行的網(wǎng)站或者客戶端上，會用原生的select來代替很多支持復(fù)雜的交互控件，比如選擇銀行。在滿足設(shè)計(jì)需求的前提下，優(yōu)先考慮原生控件會讓你的頁面更快，兼容性更好，你的前端同學(xué)也會少許多抱怨。設(shè)計(jì)師應(yīng)當(dāng)了解，在寫具體應(yīng)用中控件時，不止是展現(xiàn)出用戶可操作的部分就完事了，還有很多事情要做：驗(yàn)證，安全，兼容，框架等等。這里可看財(cái)付通的付款頁面的js請求數(shù)，會嚇你一跳的。 　　我在使用招行專業(yè)版客戶端的時候，遇到過一個很好的控件交互設(shè)計(jì)。需求是填寫銀行卡的開戶支行，給用戶一個input讓他自己去填顯然是不靠譜的。招行的做法是先給一個搜索框，讓用戶輸入關(guān)鍵字，比如我住在西湖區(qū)，我就輸入西湖二字，頁面刷新之后返回一個結(jié)果列表，從中用戶來選擇支行，這樣搜索過濾之后的結(jié)果，只有10條左右，容易辨認(rèn)。而我只用了兩次就學(xué)會了這種操作，額外的好處是操作過程中頁面反應(yīng)相當(dāng)快。而我在其他網(wǎng)站上選擇開戶行支行的時候，遇到過省市，再選支行聯(lián)動控件，輸入+下拉列表混合控件，選擇的時候都能方便且正確的選中，但是我點(diǎn)擊控件的時候相應(yīng)速度卻有延遲，心里略有不爽，這就是差別。有關(guān)原生控件和復(fù)雜控件的應(yīng)用對比，可見我的一篇舊文：易用且輕量級的交互設(shè)計(jì)。 　　而隨著html5的標(biāo)準(zhǔn)日益完善，新的原生控件會滿足更多的需求，比如外聯(lián)數(shù)據(jù)源xml，瀏覽器內(nèi)置的不同數(shù)據(jù)類型的驗(yàn)證，這些會大大減少js的體積。當(dāng)然這依賴著國內(nèi)ie6市場份額的進(jìn)一步下降（目前為60%）。相信未來一些輕量級的非原生控件，也會慢慢納入到html的標(biāo)準(zhǔn)之中，比如困擾過很多人的日期控件。 　　頁面的框架——設(shè)計(jì)師也能幫助到前端 　　我并不完全贊同設(shè)計(jì)師必須要懂代碼，這應(yīng)是因人而異的。但一個好的網(wǎng)頁設(shè)計(jì)師，必須要為頁面框架考慮，小到一個頁面上的一個控件，大到一個項(xiàng)目。這是經(jīng)驗(yàn)的積累，并不依靠對代碼的理解，和設(shè)計(jì)原則中的一致性是密切相關(guān)的。不僅僅是少兩張圖片，少兩行代碼，充分考慮css框架的設(shè)計(jì)，組件的重用，圖片的分割和整合，這些能讓頁面性能提高不止一個檔次，同時保證設(shè)計(jì)感。 　　我感于日常工作及學(xué)習(xí)中，大家討論設(shè)計(jì)時設(shè)計(jì)頁面性能的次數(shù)十分少，而它又是項(xiàng)目中設(shè)計(jì)師和前端最主要的分歧點(diǎn)，為了消弭這種分歧，最好的做法就是大家互相增進(jìn)了解。我在公司里有給設(shè)計(jì)師分享前端知識，給前端分享photoshop知識，也是為了大家一起進(jìn)步做出更好的產(chǎn)品和應(yīng)用。其實(shí)在自己的博客上實(shí)踐提高頁面性能的各種方法，是相當(dāng)輕便且有效的，實(shí)踐過的常識經(jīng)過轉(zhuǎn)化再提煉，成為知識，這點(diǎn)我十分認(rèn)同白鴉和千鳥的看法。

網(wǎng)頁設(shè)計(jì)師也該關(guān)注頁面性能相關(guān)標(biāo)簽：網(wǎng)絡(luò)公司，網(wǎng)站設(shè)計(jì)公司，企業(yè)建站，網(wǎng)頁制作

相關(guān)熱點(diǎn)推薦

企業(yè)網(wǎng)絡(luò)營銷的成功策略 網(wǎng)站優(yōu)化之整站優(yōu)化的過 網(wǎng)站的營銷“密碼” 什么是自助建站？ 前端開發(fā)中的一些用戶體 如何生成eot文件 SEO需要掌握什么 網(wǎng)站首頁設(shè)計(jì)的好看，這 動態(tài)網(wǎng)頁路徑與靜態(tài)路徑 英文網(wǎng)站的推廣與維護(hù) 企業(yè)網(wǎng)站建設(shè) 建網(wǎng)站的五個“要”五個 百度搜索你了解多少？ 小網(wǎng)站的結(jié)構(gòu)我們可以用 如何讓網(wǎng)站訪客變成你的 建網(wǎng)站的基本流程 標(biāo)題、描述和關(guān)鍵詞的選 提高網(wǎng)站排名穩(wěn)定性最佳 企業(yè)建站后進(jìn)行網(wǎng)站推廣 優(yōu)質(zhì)的內(nèi)容的優(yōu)化 天涯為什么這么火 “老 50個美麗且對用戶友好 百度每個月的收錄時間分 政府網(wǎng)站建設(shè)要按照“一 分析網(wǎng)站設(shè)計(jì)常犯的十大 網(wǎng)站建設(shè)經(jīng)驗(yàn)十條 企業(yè)建站的優(yōu)勢 擺脫Google：六大 怎樣設(shè)置關(guān)鍵字才可以被 網(wǎng)站建設(shè)內(nèi)容為主的創(chuàng)作 企業(yè)建站如何才能夠賺錢 一個設(shè)計(jì)師談怎么樣才能 怎樣讓網(wǎng)站友情鏈接交換 網(wǎng)頁美的原則 一家公司的網(wǎng)站應(yīng)該有哪 提高頁面顯示速度的秘技 網(wǎng)站推廣技巧之Emai WEB可用性測試的問題

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶