一个网页中的图片,通常由一组具有不同大小的图片组成。例如我在个人网站首页上方的大图,就是由一组6张不同分辨率和大小的图片组成的,确保不同设备可以匹配上相应的图片。图像的格式和大小通常会使团队中的设计师和开发人员产生分歧。PNG或者JPG都可以,图标字体和SVG在网页上也能很好的使用。这就是说,没有正确的答案:用什么比什么更重要,这取决于可用的内容和资源本身。但最重要的是,每个人都能就格式的使用达成共识,并坚持下去。此外,您可能还希望深入了解一套通用的图片尺寸系统,用于不同的项目。
但是对于现代响应式网站设计来说,这仅仅是个开始。目前你至少需要两组图片材料来完成,一组是为普通PPI屏幕而设计的,另一组是为高PPI视网膜屏幕而设计的。更加完整的响应网页,对图集和素材要求更高,细分更多,更具针对性。在项目的后期要尽量避免使用响应式图片格式进行筛选。至少,您必须对不同像素密度的屏幕进行基本区分。认真阅读有关srcset的文章,或使用诸如Picturefill之类的工具来确保浏览器之间的支持。假如你觉得整个计划已经超出了你的能力,不妨从小的方面着手。渐进式地调整图片元素的srcset属性是个很好的开始,在此过程中,您将逐渐看到页面的响应越来越可靠。
四是从基本要素出发,采用模块化设计。
BradFrost的AtomicWebDesign和JonathanSnook的SMACSS深刻地影响了响应式网页设计过程。这两种框架都依赖于小型、可重用的基本组件,以实现强大的网络架构。
因此,在对于郑州网站建设公司向开发者移交时,我将优先关注小型、可复用的组件,因为它们可以为不同平台的不同设备提供相同的用户体验和视觉效果。这样的一致性更容易被开发团队消化吸收。另外,小组件在页面间的复用能力也很强,因此,如果您设计出了一套有效的方案,那么您就还有用武之地。假设您正在设计一个注册页面,其中包含大标题、HD图片和表单。因为Web页面是响应式的,所有这些元素的大小都随设备和屏幕的变化而变化。然后,在项目研发的早期,就应该与开发团队一起深入研究,最终确定页面所涉及到的细节。应该是个什么样的样子?采用何种验证机制?在输入窗体时,如何配合触摸屏和传统键鼠。
让开发者对视觉和体验设计做出反馈。
一些设计者没有让开发人员参与,也没有在产品设计会议、可用性设计以及其它交流环节提供反馈。这样的自由与封闭是错误的。众所周知,在产品、体验和设计等领域,有经验的开发者同样拥有极其丰富的知识。使他们参与到这些环节中,可以使产品更成熟。在技术上,前端和设计者的交集更大。
随着越来越多的设计师开始自己编写代码,开发人员也逐渐习惯于快速生成原型,绘制框图,并且私下也会对美学和设计类的知识产生反感。快速网页设计的出现,使两个职业之间的重叠越来越多,加剧了这种趋势。尽管对于郑州网站建设开发者们并没有看到设计师这个头衔,但他们却常常能够用令人惊叹的设计语言来发人深省。