让更多的企业接受更好的网络服务

网站设计中的响应式设计思路

来源:穿越者 | 时间:2021-07-19 | 阅读:127

响应式是什么呢?顾名思义,肯定会自动响应,响应什么?应用程序是在终端屏幕窗口中展示给用户,被用户访问的,那么就是响应屏幕的变化,不同终端屏幕尺寸大小不一致,需要针对不同尺寸屏幕进行不同的展示响应。

对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:PC优先(从电脑端开始向下设计);移动优先(从移动端向上设计);

响应式设计是一种源自技术的概念,而不是单纯的设计风格、方法,所以设计响应式设计其实就是 「面向编程设计」。

设计界面要吻合编程的真实方法和需求,而不是根据我们想怎么做就怎么做,所以整个流程不能只站在设计师自身的角度考虑,而要和前端程序员紧密沟通,首先确定响应几个宽度区间,以及它们对应的数值分别是多少。

网站设计中的响应式设计思路

然后我们就要完成对应数量页面的设计,因为前面我们说过,分段响应规则中会有明显的样式变动,这就要求设计师是一定要给出设计示例的,而不能依靠口头描述或程序员自由发挥。

完成这些设计稿以后,我们再进一步确定同一个区间内,组件的宽度适应规则是什么样的。多数情况下,这个阶段使用口述就可以,如果规则比较多,那么就可以在标注阶段把你要实现的效果记录上去即可。

全部设计稿和规则都沟通完毕以后,才进入切图导出的阶段。要提醒一次,在一些特殊的情况下,响应式的背景切图会和普通页面的背景切法不一样,尽可能让前端程序员检查一遍导出的文件。只要根据上述的流程,在遇到不确定或者不清楚的情况,就和前端程序员做沟通,那么很快就可以将项目输出出来。

响应式这个概念虽然高大上,但并不是任何项目都要无脑往上套的。因为框架规则上的限制,导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式,导致最终呈现的效果往往非常简单或者过度依赖图片的质量。所以,如果在功能较为复杂或需要复杂视觉支撑的网页中,就可以选择应用固定页面内容宽度的设计来完成。

扫码与项目经理沟通

7*24小时为您服务

解答:互联网品牌形象打造,网站建设,SEO优化,小程序制作,品牌策划,新闻推广,口碑塑造等

非常感谢您有耐心的读完这篇文章:"网站设计中的响应式设计思路",更多内容请继续浏览,我们将为您提供更多参考使用或学习交流的信息。还可为您提供:网站建设与开发网站优化品牌推广品牌策划小程序制作新闻推广、口碑塑造等服务,以"降低营销成本,提高营销效果"的服务理念,如您需要合作,请扫码咨询,将诚挚为您服务。
我要咨询
姓名 :
电话 :