pc端响应式布局教程,pc端和手机端响应式布局

首页 > 经验 > 作者:YD1662022-10-25 08:55:57

例如在电脑端为左右布局,在移动端改变为多级页面。

其中,前三种多用于屏幕断点内响应,后三种多用于屏幕断点间响应。

四、设计方案落地

4.1 扩展策略

在设计方案实施过程中,通常先确定基准分辨率,作为设计尺寸输出设计方案,再扩展到其他分辨率。分辨率扩展时遵循的策略,一般有以下3种。

优雅降级:优先考虑PC端,其核心是追求产品完美表达,再降级适配到限制更大的移动端设备;

渐进增强:优先考虑移动端,其核心是保证主要功能的完善性,再做增强扩展,目前业界认可度较高;

用户设备优先:这是我本人在工作中总结出的一种方法,针对自己的产品,如果可确定目标用户使用的设备中,某分辨率占比较多,我们可以以此为基准分辨率进行设计,再向其他分辨率扩展。

4.2 三种典型页面框架

上下布局:

pc端响应式布局教程,pc端和手机端响应式布局(17)

顶部为导航,导航以下为内容区。在C端产品或内容型网站中较为常见。

T型布局:

pc端响应式布局教程,pc端和手机端响应式布局(18)

一般顶部为最高层级菜单或跳转链接,左侧为二级导航,同时也是核心业务相关的导航。一般用于B端后台类产品、工具类产品、或架构较为复杂的其他产品。

左右布局:

pc端响应式布局教程,pc端和手机端响应式布局(19)

一般应用于产品框架较为扁平,但导航层级较多的情况。可与以上两种布局互相转换。

4.3 T型框架的响应式设计过程

T型布局基本包含了其他两种布局的属性,故以T型布局为例,详细介绍响应式设计落地实操方法。

A. 框架层响应

pc端响应式布局教程,pc端和手机端响应式布局(20)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.