您的位置: 首页 >>日志>>视觉设计>详细内容

视觉设计

响应式设计案例

来源:本站原创 发布时间:2021-04-09 15:58:25 浏览次数: 【字体:

响应式设计,很多同事都有分享过这方面的知识,但是可能实际应用会比较少,刚好有个项目有这个需求,但是还没确认,这次就分享下做这个项目前找的一些响应式例子。

1、政府网站类型的,这个类型的网站总体来说还是比较保守的;

山东省政府   http://www.shandong.gov.cn/

上海市政府   http://www.shanghai.gov.cn/

安徽省政府   http://www.ah.gov.cn/index.html

福建省政府   http://www.fujian.gov.cn/  

重庆市政府   http://www.cq.gov.cn/

汕头市政府   https://www.shantou.gov.cn/

佛山市政府  http://www.foshan.gov.cn/

...

看看重庆市政府的吧,主要是学习版块在浏览器缩小的时候的走向



2、

北京大学     https://www.pku.edu.cn/

清华大学     https://www.tsinghua.edu.cn/

深圳大学     https://www.szu.edu.cn/

复旦大学      https://www.fudan.edu.cn/

武汉大学     https://www.whu.edu.cn/

南开大学     https://www.nankai.edu.cn/

...

北京大学、清华大学、深圳大学都做的很不错,带动态效果展示的不太好截图,大家自己看看,咱们看看南开大学的设计


有其他优秀的例子欢迎评论补充


总结起来,可以简单的归纳成三种组件的调整:内容增减、布局调整、样式调整。

第一种,内容增减。即部分模块在不同的分段内会有显示和隐藏的状态,尤其是一些网页端的内容觉得在小屏幕上展示会太多了,就在小屏幕场景中隐藏掉。

第二种,布局调整。主要是模块的排列和顺序发生变化,常见的就是模块一行的列数发生改变。

第三种,样式变更。即针对不同的分段设计完全不一样的样式,最多应用在导航栏的设计中,会为最小的分段使用Menu 样式


设计流程:

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

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