協(xié)策網(wǎng)絡(luò)（上海網(wǎng)站建設(shè)）繼續(xù)接上次的提速響應(yīng)式網(wǎng)頁設(shè)計技巧，今天為大家?guī)硐旅鎺讉€關(guān)鍵點：

3、對于圖片素材的處理策略早做準備：

響應(yīng)式網(wǎng)頁中的圖片，通常是由一組多個不同尺寸的圖片組成的。比如協(xié)策網(wǎng)絡(luò)公司：http://www.580design.net，就是由一組6個圖片組成的，分辨率和尺寸各不相同，確保不同的設(shè)備都能匹配上對應(yīng)的圖片。

圖片格式和尺寸通常會讓團隊內(nèi)的上海 網(wǎng)站建設(shè)設(shè)計師和開發(fā)者之間產(chǎn)生隔閡。你可以用PNG，也可以用JPG，圖標字體和SVG也會在網(wǎng)頁上很好的運用。也就是說，并沒有一個正確的答案：用什么更多是取決于可用的內(nèi)容和資源本身。但是重要的地方在于，大家要在使用格式上達成共識，并且堅持使用下去。另外，你可能也想鉆研出一套通用的圖片尺寸體系，運用在不同的項目中。

不過對于現(xiàn)代的上海 網(wǎng)站建設(shè)響應(yīng)式網(wǎng)頁設(shè)計，這僅僅只是一個起點?，F(xiàn)在要做你至少需要兩套圖片素材，一種是給普通PPI的屏幕所設(shè)計，一種是給高PPI的視網(wǎng)膜屏所準備的。更完備的響應(yīng)式網(wǎng)頁，對于圖集和素材的要求更高，細分更多，針對性更強。

盡量避免將響應(yīng)式圖片格式的篩選決策留到項目后期。

最起碼，你得針對不同像素密度的屏幕作出基本的區(qū)分。仔細讀一下這篇關(guān)于srcset的文章，或者使用Picturefill這樣的工具來確?？鐬g覽器支持。如果你覺得整個方案不堪重負，那么不妨從小的部分開始做起。逐步調(diào)整圖片元素的srcset屬性就是一個不錯的開始，在這個過程中，你會逐步看到網(wǎng)頁的響應(yīng)越來越靠譜。

4、從基礎(chǔ)元素開始思考，使用模塊化設(shè)計。

網(wǎng)站建設(shè)響應(yīng)式網(wǎng)頁設(shè)計流程深深地受到了Brad Frost 的Atomic Web Design和Jonathan Snook 的SMACSS的影響。兩個框架都依靠小而可復用的基礎(chǔ)組件來實現(xiàn)強大的網(wǎng)絡(luò)架構(gòu)。

所以，在與開發(fā)者交接的過程中，我會優(yōu)先專注小而可復用的組件，因為它們能給不同平臺不同設(shè)備帶來相同的用戶體驗和視覺效果。這種一致性會更容易為開發(fā)團隊所消化吸收。而且，小組件在不同頁面之間的復用性也非常強，所以，如果你為上海 網(wǎng)站建設(shè)設(shè)計出了一套高效的方案，今后還會有用武之地。

想象一下，你正在設(shè)計上海網(wǎng)站建設(shè)一個帶有大標題、高清大圖和表單的注冊頁面。由于網(wǎng)頁是響應(yīng)式的，所以所有這些元素都會隨著設(shè)備和屏幕的轉(zhuǎn)換而變化尺寸。那么在項目研發(fā)早期，應(yīng)該同開發(fā)團隊一起鉆研，敲定頁面所涉及的各個細節(jié)。它看起來應(yīng)該是什么樣子？用什么樣的驗證機制？如果要輸入表單，如何配合觸摸屏和傳統(tǒng)的鍵鼠？

5、讓開發(fā)者給視覺和體驗設(shè)計做反饋。

有些上海網(wǎng)站設(shè)計師在產(chǎn)品設(shè)計會議、可用性設(shè)計環(huán)節(jié)和其他的溝通環(huán)節(jié)不讓開發(fā)者參與或提供反饋。這種放任和封閉是錯的。要知道，經(jīng)驗豐富的開發(fā)者在產(chǎn)品、體驗和設(shè)計領(lǐng)域同樣有著極為豐富的知識。讓他們參與到這些環(huán)節(jié)中，能讓產(chǎn)品更加成熟。前端和設(shè)計師在技能上的重疊就更多了。

越來越多的上海網(wǎng)站建設(shè)設(shè)計師開始自己寫代碼了，開發(fā)者也逐漸習慣于制作快速原型、先框圖，并且也會在私底下惡補美學和設(shè)計類的知識。響應(yīng)式網(wǎng)頁設(shè)計的出現(xiàn)，使得兩個職業(yè)之間的交疊越來上海 網(wǎng)站建設(shè)越多，加劇了這一趨勢。雖然沒有上海 網(wǎng)站建設(shè)設(shè)計師的頭銜掛在開發(fā)者頭上，但是他們對于上海 網(wǎng)站建設(shè)設(shè)計往往能說出驚人之語，發(fā)人深省。

當然，不同的角色和職責的劃分依然是極為重要的。但是稍微調(diào)整一些小步驟，確實能顯著提高最終產(chǎn)品。所以，你做下一輪產(chǎn)品可用性測試的時候，不妨帶著開發(fā)者一起來討論。

結(jié)語：

所有這五個技巧都需要實現(xiàn)計劃，并且不停補充。絕大多數(shù)團隊都將注意力放在產(chǎn)品的發(fā)布和卡Deadline上，這個階段再來考慮這些問題，不利于產(chǎn)品，也不適合此刻團隊內(nèi)的設(shè)計師和開發(fā)者。

項目開發(fā)之初，稍加計劃，后期的回報絕對是豐厚的。

「協(xié)策網(wǎng)絡(luò)知識講堂：」

知識和知識之間是互通的。響應(yīng)式網(wǎng)頁設(shè)計是憑空出來的么？不是，Ethan Marcotte 也是受到了建筑學的啟發(fā)，才有了這一創(chuàng)舉。

Ethan 在A List Apart上發(fā)布《Responsive Web Design》一文時，援引了響應(yīng)式建筑設(shè)計的概念：現(xiàn)出現(xiàn)了一門新興的學科

——”響應(yīng)式架構(gòu)(responsive architecture)”——提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進行響應(yīng)。結(jié)合嵌入式機使人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周圍人群的情況進行彎曲、伸縮和擴展的墻體結(jié)構(gòu)；還可以使用運動傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)”智能玻璃”：當室內(nèi)人數(shù)達到一定的閾值時，這種玻璃可以自動變?yōu)椴煌该?，確保隱私。