一個(gè)網(wǎng)頁中的圖片,通常由一組具有不同大小的圖片組成。例如我在個(gè)人網(wǎng)站首頁上方的大圖,就是由一組6張不同分辨率和大小的圖片組成的,確保不同設(shè)備可以匹配上相應(yīng)的圖片。圖像的格式和大小通常會(huì)使團(tuán)隊(duì)中的設(shè)計(jì)師和開發(fā)人員產(chǎn)生分歧。PNG或者JPG都可以,圖標(biāo)字體和SVG在網(wǎng)頁上也能很好的使用。這就是說,沒有正確的答案:用什么比什么更重要,這取決于可用的內(nèi)容和資源本身。但最重要的是,每個(gè)人都能就格式的使用達(dá)成共識(shí),并堅(jiān)持下去。此外,您可能還希望深入了解一套通用的圖片尺寸系統(tǒng),用于不同的項(xiàng)目。
但是對(duì)于現(xiàn)代響應(yīng)式網(wǎng)站設(shè)計(jì)來說,這僅僅是個(gè)開始。目前你至少需要兩組圖片材料來完成,一組是為普通PPI屏幕而設(shè)計(jì)的,另一組是為高PPI視網(wǎng)膜屏幕而設(shè)計(jì)的。更加完整的響應(yīng)網(wǎng)頁,對(duì)圖集和素材要求更高,細(xì)分更多,更具針對(duì)性。在項(xiàng)目的后期要盡量避免使用響應(yīng)式圖片格式進(jìn)行篩選。至少,您必須對(duì)不同像素密度的屏幕進(jìn)行基本區(qū)分。認(rèn)真閱讀有關(guān)srcset的文章,或使用諸如Picturefill之類的工具來確保瀏覽器之間的支持。假如你覺得整個(gè)計(jì)劃已經(jīng)超出了你的能力,不妨從小的方面著手。漸進(jìn)式地調(diào)整圖片元素的srcset屬性是個(gè)很好的開始,在此過程中,您將逐漸看到頁面的響應(yīng)越來越可靠。
四是從基本要素出發(fā),采用模塊化設(shè)計(jì)。
BradFrost的AtomicWebDesign和JonathanSnook的SMACSS深刻地影響了響應(yīng)式網(wǎng)頁設(shè)計(jì)過程。這兩種框架都依賴于小型、可重用的基本組件,以實(shí)現(xiàn)強(qiáng)大的網(wǎng)絡(luò)架構(gòu)。
因此,在對(duì)于鄭州網(wǎng)站建設(shè)公司向開發(fā)者移交時(shí),我將優(yōu)先關(guān)注小型、可復(fù)用的組件,因?yàn)樗鼈兛梢詾椴煌脚_(tái)的不同設(shè)備提供相同的用戶體驗(yàn)和視覺效果。這樣的一致性更容易被開發(fā)團(tuán)隊(duì)消化吸收。另外,小組件在頁面間的復(fù)用能力也很強(qiáng),因此,如果您設(shè)計(jì)出了一套有效的方案,那么您就還有用武之地。假設(shè)您正在設(shè)計(jì)一個(gè)注冊(cè)頁面,其中包含大標(biāo)題、HD圖片和表單。因?yàn)閃eb頁面是響應(yīng)式的,所有這些元素的大小都隨設(shè)備和屏幕的變化而變化。然后,在項(xiàng)目研發(fā)的早期,就應(yīng)該與開發(fā)團(tuán)隊(duì)一起深入研究,最終確定頁面所涉及到的細(xì)節(jié)。應(yīng)該是個(gè)什么樣的樣子?采用何種驗(yàn)證機(jī)制?在輸入窗體時(shí),如何配合觸摸屏和傳統(tǒng)鍵鼠。
讓開發(fā)者對(duì)視覺和體驗(yàn)設(shè)計(jì)做出反饋。
一些設(shè)計(jì)者沒有讓開發(fā)人員參與,也沒有在產(chǎn)品設(shè)計(jì)會(huì)議、可用性設(shè)計(jì)以及其它交流環(huán)節(jié)提供反饋。這樣的自由與封閉是錯(cuò)誤的。眾所周知,在產(chǎn)品、體驗(yàn)和設(shè)計(jì)等領(lǐng)域,有經(jīng)驗(yàn)的開發(fā)者同樣擁有極其豐富的知識(shí)。使他們參與到這些環(huán)節(jié)中,可以使產(chǎn)品更成熟。在技術(shù)上,前端和設(shè)計(jì)者的交集更大。
隨著越來越多的設(shè)計(jì)師開始自己編寫代碼,開發(fā)人員也逐漸習(xí)慣于快速生成原型,繪制框圖,并且私下也會(huì)對(duì)美學(xué)和設(shè)計(jì)類的知識(shí)產(chǎn)生反感??焖倬W(wǎng)頁設(shè)計(jì)的出現(xiàn),使兩個(gè)職業(yè)之間的重疊越來越多,加劇了這種趨勢(shì)。盡管對(duì)于鄭州網(wǎng)站建設(shè)開發(fā)者們并沒有看到設(shè)計(jì)師這個(gè)頭銜,但他們卻常常能夠用令人驚嘆的設(shè)計(jì)語言來發(fā)人深省。