设计沉思录｜设计师应该了解的响应式知识

断点的设置一定是基于页面具体内容，并参考网站用户的设备分辨率数据。设计过程中在一定区间内拉升或压缩，已经无法用相同的布局内容时，必须改变内容展现方式时，而产生的关键尺寸的节点。请参考文章上结构模块变化参考图。

需要注意的是，在选择断点时，不应选择将断点设置为与某些常见设备宽度相同，而是应该确保常见设备宽度能够很简单地落入到某一设计范围之内。可以在各类设备上对设计进行测试并以此来调整断点。

那么完全不考虑设备吗？

不是的，设备仍然很重要，只是不应首先考虑它们。在一开始最好是不要只考虑页面设计在特定设备上的显示效果，而是应该从更通用的访问设备，比如手机尺寸、平板电脑尺寸及桌面显示器尺寸去考虑它。

在设计中遇到的其他问题

Q：如何解决icon放大造成的变形及模糊问题？

A：当你的产品做成响应式设计的时候，可能会遇到图标在适应屏幕尺寸的时候拉伸或挤压变形导致模糊，这个时候可以将图标做成字体。

它的优点在于：

1. Icon是矢量的，可以自由适应各种尺寸大小，不会模糊；

2. 占用空间很小，250个图标的字体只有不到300K；

3. Icon Font可控性更高，可以用代码去控制大小、颜色、透明度、特效等；

4.兼容性高，甚至是低版本ie浏览器。

Q：设计稿要怎么设计，要做几套？

A：设计几套取决于这个网站你会设置几个断点，而设置多少个断点由网站的内容决定，设计师需要根据网站的实际内容找到合适的断点，设法避免列间空白太宽或太窄的情况。

参考文献：

• 9 basic principles of responsive web design
• 《学习响应式设计》

作者：孙妍，UI设计师

本文来源于人人都是产品经理合作媒体@58用户体验设计中心（微信公众号@58UXD），作者@孙妍

题图来自 Unsplash，基于CC0协议。

本文素材来自互联网

（编辑：广西网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!