相信大部分设计师都很熟悉响应式布局这个词，也能清楚的知道它的基本呈现效果。


但是在具体操作和与开发人员合作的时候，可能会遇到很多问题。


找资料的时候发现大部分教程都是针对前端开发工程师的，伴随着很多晦涩难懂的专业术语，很难理解。


本文希望通过简单明了的文字和图形介绍，明确说明我们在设计响应性网站时经常出现的问题。


场景一:自适应和响应有什么区别？ A：许多人会混淆响应布局和自适应布局。


事实上，它们的原理非常相似。


它们都是检测设备，根据不同的设备使用不同的设备css。


至于它们之间的差异，有一个非常简单的方法：当同一页面访问不同尺寸的屏幕时，看看网站是否相同，只有一个网站是响应性的，有多个不同的网站是自适应性的。


另一个区别是：是否需要一对一的设计界面，是自适应。


例如下图： 上图显示了响应和自适应的区别 那么，如何选择自适应和响应式呢？ A：如果页面功能不多，用户互动少，不需要经常升级，从操作难度和维护方便性来看，响应设计会更好。


只要网页端完成，其他一切都完成了。


自适应设计更适合页面的个性化和多功能，因为它可以更好地为用户提供一个全面的功能和更好的用户体验界面。


例如，功能复杂、用户交互频繁的网站和电子商务网站更适合用户数量大的网站。


场景2问题：响应页面的条件是什么？ A：有两个前提可以响应： 页面布局规律，必须建立灵活的网格基础，元素宽高可以用百分比代替固定值； 网页图片必须可伸缩(页面图片不固定宽/高)。


这两点也是网格系统本身的典型特征，所以使用网格系统进行响应设计是合乎逻辑的，但也更高效和快速，所以响应和网格自然是一对好的合作伙伴。


网格是创建一个设计精良的网站的关键。


在《秩序之美——网页中的网格设计》一书中，他解释说，成功设计的目的是在混乱中创造秩序。


现在流行的8点网格是结合基准网格(8pt）设计纵向格栅。


那么用8点格栅设计的价值是什么呢？ 设计师：提高效率，减少决策，同时保持元素之间的协调节奏。


对于团队：设计师和前端工程师之间更容易达成默契，前端可以很容易地用肉眼测量8倍，而不是躺在数像素上。


对用户来说：这使得他们信任的品牌能够保持高质量的一致性体验。


而且在自己的设备上也不会出现模糊的半像素偏移。


场景3问题：常见的动态布局方法是什么？ A：包括固定布局、流体布局、混合布局、响应布局。


此外，在布局响应式时，如何改变模块结构，简要介绍几种常见的变化形式： 布局不变，模块内容左右伸缩(见下图) 本页的响应效果相对简单，即等比缩放。


布局不变，模块内容换成平铺(见下图) 有时为了节省页面空间，平铺设计了模块。


布局不变，模块内容增减(见下图) 最常见的响应效果： 布局变化，模块位置变化(见下图) 页面本身是左右布局，左导航移动到上部，位置发生变化。


布局变化，模块内容数量变化(见下图) 这是一个特殊的灵活布局网站。


当响应时，模块被隐藏和删除。


场景四提问:什么是媒体查询？什么是断点？ A：这里有一个新名词，媒体查询（media query），事实上，这是一种实现断点的方法。


前端工程师采用设备宽度/高度、窗口宽度/高度、设备手持方向、分辨率等简单方法获取不同设备的特点。


这里还有一个术语：断点，用浏览器打开响应网站，检查元素，右上角显示当前的分辨率，慢慢缩小窗口的宽度，找到页面布局的变化点，即上述断点或次要断点。


上图中的每条线代表一个断点，那么如何选择断点呢？ 断点的设置必须基于页面的具体内容，并参考网站用户的设备分辨率数据。


当设计过程中在一定范围内拉升或压缩时，必须改变内容显示模式产生的关键尺寸节点。


请参考文章中结构模块的变化。


需要注意的是，在选择断点时，不应选择将断点设置为与一些常见设备相同的宽度，而应确保常见设备的宽度能够简单地落入一定的设计范围。


设计可以在各种设备上进行测试，以调整断点。


不考虑设备吗？ 不，设备仍然很重要，但不应该先考虑它们。


一开始，最好不要只考虑页面设计在特定设备上的显示效果，而是考虑更通用的访问设备，如手机尺寸、平板电脑尺寸和桌面显示器尺寸。


设计中遇到的其他问题 Q：如何解决icon扩大引起的变形和模糊？ A：当您的产品进行响应设计时，图标在适应屏幕尺寸时可能会拉伸或挤压变形，导致模糊。


此时，图标可以制成字体。


它的优点是: 1. Icon它是矢量的，适应各种尺寸，不模糊； 2. 占用空间很小，250个图标的字体不到300K； 3. Icon Font大小、颜色、透明度、特效等都可以用代码来控制； 4.高兼容性甚至低版本ie浏览器。


Q：如何设计设计稿，做几套？ A：设计几套取决于你会在这个网站上设置多少个断点，多少个断点取决于网站的内容。


设计师需要根据网站的实际内容找到合适的断点，尽量避免列间空白过宽或过窄。


参考文献： 9 basic principles of responsive web design 学习响应式设计 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营合作伙伴提供便利。


网站收集的公共内容来自互联网或用户提交，这并不意味着网站同意其观点，也不对网站内容的真实性负责。


如有侵权行为，请联系网站管理员删除，。