vlambda博客
学习文章列表

网站建设中的响应式设计思路是什么(如何把网站做到与众不同)

网站建设中的响应式设计思路是什么(如何把网站做到与众不同)


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

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

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

网站建设中的响应式设计思路是什么(如何把网站做到与众不同)

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

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

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

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

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