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