视觉设计规范 - 设计稿尺寸、布局与适配 - 《A03-交互设计》

设计稿分辨率

最好是结合具体的业务情况，看绝大多数的客户用的是什么大小的屏幕分辨率，这样可以以这样的分辨率为标准进行适配。
如果无法得到比较合理的分辨率区间，则建议使用375*667px进行设计

最好是结合具体的业务情况，看绝大多数的客户用的是什么大小的屏幕分辨率，这样可以以这样的分辨率为标准进行适配。
如果无法得到比较合理的分辨率区间，则建议使用1440*820px（高度减去浏览器顶部页签和地址栏高度）进行设计，这样向上向下适配都不会很困难。

自适应和响应式都是根据不同的分辨率使用不同的CSS文件，自适应多套代码，响应式一套代码。
响应式：适合官网，使用栅格系统，所有的内容可以使用百分比代替固定数值。
自适应：功能全面，交互频繁，用户量大的选择该类型，但是需要多端同时更新，一对一界面设计。

基础技术
布局方式	实现方式	概述	优点	缺点
固定布局	固定数值	选择一个分辨率做设计稿，不论什么分辨率都是固定大小，大的分辨率有很多留白，小的分辨率会出现进度条		没有自适应，（古老）不建议，除非所有的客户电脑都是这个分辨率大小
流体布局	使用百分比，栅格系统	所有的内容都是百分比式，分辨率小，变窄；分辨率大，拉宽。一部分内容会被拉变形。使用栅格系统。
混合布局	一部分固定数值，一部分百分比	一部分固定，一部分flex（流体）
两种方向
响应式（流体布局+媒体查询）	确认断点，使用媒体查询，判断经过什么断点使用什么样式规则，改变布局	确定断点，每次越过断点，进行相应的布局变化，比如卡片样式改变，换行；隐藏一部分内容。杂糅了流体布局和弹性布局。
自适应	开发多套页面，js判断使用何种设备，不同的视窗大小使用不同的.css文件	开发多套页面，不同视窗下使用不同.css文件。 web页面无论怎么拖动，都不会流动变化。

混合布局和响应式和自适应又有什么关系吗？又没有穷举

一共有左右布局，上下布局，混合布局几种布局。
需要选择一个合适的布局，各个布局的优缺点如下：

	优点	缺点	扩展性
上下布局	1. 编辑的内容区域较大	1. 横向可容纳菜单数量少 2. 字数有限制	差
左右布局	1. 可容纳菜单数量多，可容纳较长字数菜单。 2. 可以同时浏览很多菜单，配合搜索方便快速定位	1. 左侧菜单减少沉浸感，容易打断 2. 占地面积大，内容区域被压缩	中
混合布局	1. 可容纳菜单数量非常多，可容纳较长字数菜单。	1. 占地面积很大，内容区域被压缩。 2. 两次点击，交互路径较长。	好