下面，我将简要概述在创建Web布局以将其进一步转移到布局时需要注意的强制性要点 。
他们将帮助您：
- 考虑更深的布局
- 避免不必要的问题
- 得到更好的结果
- 与前端开发人员保持朋友关系
一般
- 命名布局 （页面，框架-必填）应清楚地传达其本质和目的，并应与站点或其他大型实体的逻辑页面绑定在一起。
（例如：“家庭-平板电脑”，“主设备-移动设备”，“按钮”）
[屏幕示例] - 使用图层，组，组件和屏幕时， 有必要观察文档的结构 ，并给它们取全面的名称
（例如：主背景，设置，按钮，注册页面移动设备）
（错误示例：第1帧，第45组，iPhone XR）
[屏幕示例] - 如果需要移动版本 ，则应该为每个屏幕开发320px宽（iPhone SE）布局，此外，您还可以创建高分辨率布局。
[屏幕示例] - 图标 （svg，...）应可下载并在浏览器中正确打开。 svg画板的大小必须与内容和流程匹配。 您可以在各个画板上收集图标集。
[屏幕示例] 图片 （图形内容）必须上传。 分辨率至少为2倍。 无需预处理即可卸载。 （例如：圆角，透明度，阴影）。 除非已明确请求进行此类处理。
[屏幕示例]
- 必须考虑内容区域的大小以及该大小因分辨率而异的事实。 因此，应考虑“连接点”。
- 内容图像应作为单个图像上传。
（例如：我们有一个带有[背景]的矩形块，该矩形块将发生变化。因此，如上例所示，图片应完全与背景一起卸载。）
- 字体颜色不应包含Alpha通道（透明度），除非该字体在不同的背景（渐变或图像）上使用，因此应具有此逻辑。
- 首先，应提供项目中使用的字体的完整列表 （zip.archive）（在开始进行正面工作之前）。
- 选择与自定义字体类似的安全字体 （在所有Windows，Mac，Linux等操作系统上都可用）也无害，因此可以在自定义字体加载错误的情况下替换它
（例如：“ Roboto”，无衬线） - 如果我们使用的是自定义图标字体 ，则应该对图标进行相应的处理，即：您需要将它们沿基线对齐，以使行中的几个图标的大小和缩进不同。 同样，应从图标到图标保留面的数量，面的基本厚度，细节级别，否则它们看起来将是异类的，就像从不同的字体集中一样。
- 在没有对行为逻辑的特殊要求的情况下，流中的块在适应要求中反映的那些分辨率时必须保持其位置顺序。
- 逻辑应体现在设计中 。 例如，几个相同的卡，在每个卡中显示不同数量的内容，不同的图像，不同的状态等，从而可以跟踪依赖性。
- 除了布局之外， 还欢迎对元素的操作进行文字描述 。
- 指定文本溢出时元素的行为
（例如，裁剪长文本并在其中加上省略号等） - 在动画元素和行为不能仅通过布局唯一确定的元素上（以任何方式） 留下评论和描述 。
- 页面404，500和其他标准屏幕应存在。
指南和网格上的以下所有段落均可在样式页面上绘制，所有页面都将在此处进行结构化。
指南，GUI，UI-kit，样式指南
- 在文档的一节中给出了通过通用功能连接的块的描述和布局。
（例如，所有弹出窗口都有白色背景，圆角为10px，按钮为...） - 应在单独的画板上描述和排版字体 。
（例如：第一级的所有标题都缩进到40px以下的24px。第二级的所有标题...，段落...等） - 所有链接，按钮，复选框和其他交互式元素应以被动，感应，主动状态绘制。 同样，手机（触摸设备）应具有状态-被动，瞬间按下。 状态：（链接，悬停，活动，关注，访问，禁用，处理）。
[复选框示例]
[按钮示例] - 应当在所有状态（活动，先前，阻止，...）下绘制面包屑，并考虑换行符。
- 分页应在所有状态下呈现（在第一个，最后一个，中间步骤），并考虑到大量（3个以上的字符）数字，并使用不同数量的步骤（1，许多）。
- 输入 （输入字段），表单应在所有状态下绘制：默认情况下，具有焦点，按下，锁定，错误消息，正确性消息等时都应有焦点
[输入示例] 限制使用的颜色和阴影数量
[颜色级别示例] 。
- 所有使用的颜色都必须作为指导。
（版式中的任何新颜色都将被认为是错误的，将等同于指南中最接近的颜色） - 在功能方面独特的颜色应加以描述或与本质联系在一起。
（例如，万圣节股票小部件带有一个橙色背景：橙色是万圣节股票的颜色）
网眼
- 缩进和元素大小必须是相同值的倍数。
（2px，4px，8px，5px ...）
[屏幕示例]
[示例后] - 网格 （如果有的话）应该被描述并且不矛盾
布局。 列的大小，数量等 - 容器的尺寸应在每个提出的标签上说明
权限。 - 应该描述断点的值。
- 流中块的垂直填充应标准化。 （类似于排版）
信件，邮件，邮件列表，邮件
- 您需要使字母的设计尽可能简单 。 重要的是要了解layout和<table>标签如何工作 。 信件放在桌子上。 （显示：块，弯曲，绝对位置-不能在字母中应用）。 自适应尽可能简单，而不会改变块在流中的位置。 理想的普通“橡胶”和1套样式
- 不要在字母中使用自定义字体
当然，如果您画“运球”等 您可以做您想做的事，但是对于一个严肃的项目，这些项目是100％必要的。