没有成功Web项目是在设计师与开发人员沟通不畅的前提下完成的,合作是做好项目的基础。我见过经验丰富的设计师和开发人员因沟通不畅和误解而失败。我也见过新手设计师和开发团队通过高效的合作,制作出惊人的设计项目。在项目开始时充分磨合可以使项目在后续的快速迭代中更加顺畅。和谐的沟通不仅有利于工作,而且使整个团队保持情绪稳定。在响应性网页设计项目中,设计师与开发者之间的沟通是否顺畅更为重要。在设计响应性网站时,整个团队必须充分考虑大量不同尺寸屏幕的设备。习惯于准确像素的设计师和开发者需要充分准备流量界面和大量不同比例的设备。总之,响应式设计使整个项目的交付面临着许多不确定性,这也是响应式网站项目的难点。希望以下五个小技巧能帮助各团队顺利解决这个项目的沟通障碍和技术问题。1.优先考虑极端尺寸invisionpost_rwdrange当你面对手机屏幕和桌面显示器的极端屏幕尺寸时,问题自然会出现。一些设计师从动态的角度开始设计,但绝大多数设计师仍然从静态页面开始:选择固定的高度和宽度,绘制相应的草图或视觉草图。这导致了几个问题:你的开发团队优先考虑什么尺寸?设计团队首先交付的高保真视觉稿是什么尺寸?从技术限制的角度来看,你应该优先考虑哪些设备?我一直建议从用户的基本极端尺寸入手,推荐目前(2016年)常用设备中小、大的情况:320x568px(iPhone5.因为是视网膜屏幕,我们通常遵循72dpi但是iPhone实际显示实际上是144px,所以我们给出了这样的设计尺寸。作为UI你应该很清楚设计师@2x和@3x的问题) 1600×1000px(桌面显示器的常见尺寸)当然,您的用户的实际情况可能略有不同,稍加调查,确定极端情况。响应网页项目刚刚开始,从用户常见的大小尺寸设计入手。”当你面对小屏幕时,你需要在小屏幕上展示重要的内容。如何选择是一件非常麻烦的事情。但面对大屏幕,你所想的是完全相反的:如何显示太多的内容?由于过宽,分栏的易读性降低了吗?如何选择元素来避免这样的问题?之后,面对两个不同尺寸的界面,你也应该考虑它们所涉及的输入模式。触摸屏和虚拟键盘通常在小屏幕上,传统键盘鼠标大多在大屏幕上。这里重要的是,你需要选择两个界面尺寸,而不是传统的屏幕设计,然后完成剩余的部分。设计师和开发者在这个问题上存在分歧,对后续影响很大。2.讨论不同断点之间的内容布局在日常的网页设计中,我们非常关注静态线框图,但在做响应设计时,我们应该始终记住页面中的布局是流动的。这意味着绝大多数用户在你的网页上体验到的页面实际上是它的中间态。所以,你必须考虑随着屏幕尺寸大小的转变,布局设计的每一个调整和改变。例如,当屏幕尺寸变小时,文本内容需要收缩,与文章混合的图片将收缩到一栏。尽量不要和你的开发团队一起假设或推测这些适应问题。在你负责开发的同事做太多之前,积极确定这些信息,并与他们达成共识。对于复杂的布局变化,提前绘制框图或草图单独解释是非常明智的选择。对于一些不那么重要的特征,通过简短的讨论或电子邮件通知就足够了。3.提前准备图片素材的处理策略invisionpost_rwdimages响应网页中的图片通常由一组不同尺寸的图片组成。例如,我个人网站页面顶部的大图片由一组6张图片组成,分辨率和大小不同,以确保不同的设备能够匹配相应的图片。图片格式和尺寸通常会使团队中的设计师和开发者疏远。你可以用PNG,也可以用JPG,图标字体和SVG它也将很好地应用于网页。换句话说,没有正确的答案:使用什么更多地取决于可用的内容和资源本身。但重要的是要在使用格式上达成共识,坚持使用。此外,您还可能希望在不同的项目中研究一通用的图片尺寸系统。但对于现代响应式网页设计来说,这只是一个起点。现在你至少需要两套图片材料来做,一种是给普通人PPI屏幕设计,一种是高PPI准备的视网膜屏。响应性网页更完整,对图集和素材要求更高,细分更多,针对性更强。尽量避免在项目后期保留响应图片格式的筛选决策。至少,你必须基本区分不同像素密度的屏幕。仔细阅读这篇文章srcset文章,或使用Picturefill确保跨浏览器支持的工具。假如你觉得整个计划不堪重负,那么不妨从小部分开始。逐步调整图片元素srcset属性就是一个不错的开始,在这个过程中,你会逐步看到网页的响应越来越靠谱。4.从基本元素出发,使用模块化设计我的响应式网页设计流程深深地受到了BradFrost的AtomicWebDesign和JonathanSnook的SMACSS的影响。两个框架都依靠小而可重用的基本组件来实现强大的网络架构。因此,在与开发人员交接的过程中,我将优先考虑小型和可重复使用的组件,因为它们可以给不同的平台和设备带来相同的用户体验和视觉效果。这种一致性将更容易被开发团队消化和吸收。而且,小组件在不同页面之间的重用性也很强,所以,如果你设计了一高效的解决方案,将来会有用。想象一下,你正在设计一个带有大标题、高清图片和表单的注册页面。因为网页是响应性的,所有这些元素都会随着设备和屏幕的转换而变化。然后,在项目研发的早期阶段,我们应该与开发团队一起研究,确定页面涉及的细节。应该是什么样子?用什么样的验证机制?如何配合触摸屏和传统键鼠输入表单?5.让开发者反馈视觉和体验设计一些设计师不允许开发者参与或反馈产品设计会议、可用性设计和其他沟通环节。这种放任和封闭是错误的。要知道,经验丰富的开发者在产品、经验和设计领域也有非常丰富的知识。让他们参与这些链接,使产品更加成熟。前端和设计师在技能上的重叠更多。越来越多的设计师开始自己编写代码,开发人员逐渐习惯于制作快速原型和先框图,并私下补充美学和设计知识。响应式网页设计的出现,使得两个职业之间的交叠越来越多,加剧了这一趋势。虽然开发者头上没有设计师的头衔,但他们往往能对设计说出惊人的话,发人深省。当然,不同角色和职责的划分仍然非常重要。但稍微调整一些小步骤,确实可以显著改进最终产品。因此,当您进行下一轮产品可用性测试时,您不妨与开发人员讨论。结语所有这五项技能都需要实现计划并不断补充。绝大多数团队都关注产品的发布和卡片Deadline现阶段再考虑这些问题,不利于产品,也不适合团队中的设计师和开发者。项目开发之初,稍加规划,后期回报绝对丰厚。