管理界面尺寸

管理界面宽度界定

B 端管理界面设计，分成响应式和非响应式两种。

名词解释：

B 端项目的设计，优先要确认，是响应还是定宽的设计框架。

内容定宽的结构例如京东、B站的管理后台：

管理界面示图

如果使用定宽的模式，那么基本上中央内容的区域控制在 1200px 以内，创建的画布宽度为 1440px 或者 1280px 都没有问题；

如果使用响应式设计，针对的用户没有使用固定设备，比如开放式 SAAS 服务 Teambition、语雀和管理系统电站监控 web2.0。那么我们首先要支持和考虑的分辨率都以 1280px 或 1440px 为标准。

因为对于响应式的特点来说，从小往大适配容易，但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好，甚至到了部分页面无法正常使用的地步。

所以，针对响应式的设计，设计稿优先输出小版本的尺寸（这里以1280px为设计稿首要尺寸），然后再针对常见的不同设备分辨率给出适配的方案。

名词解释：

屏幕断点（Breakpoints） 是响应式设计的基础依据，它决定了我们要适配到什么样的设备或屏幕规格，并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。

屏幕断点示例图

以「电站监控web2.0」网站为例，断点响应策略主要是列数量、槽宽度、页边距的宽度、导航栏根据窗口的宽度变化归纳成5种不同的页面布局区间；再根据每个区间设计对应的布局结构。

根据常用的设备分辨率，默认设置了5个断点：

3.1 屏幕断点上响应

页面布局只允许在屏幕宽度缩放到屏幕断点时发生变化，去响应下一个断点范围，屏幕断点上常见的响应规则有删除、堆叠、变更三种。

屏幕断点上响应示图

3.2 屏幕断点内响应

屏幕断点之间页面布局需要完全一致，不允许发生任何变化。屏幕断点内常见的响应规则有定高拉伸、等比例缩放、无删减拉伸三种。

屏幕断点内响应示图

3.3 Hover 动作兼容

在PC的交互方式主要鼠标和键盘，鼠标指针移入元素上面会出现样式上变化、展示更多的信息、产生浮层等多种情况，但平板和手机上的交互方式主要是手指，不会出现出现 PC特有的 hover 动作。