移动端Flutter页面样式规范书

移动端Flutter页面样式规范书【排版与格式标准】1.层级标记体系：一、标题文字（顶格）（一）标题文字（缩进2字符）（二）标题文字（缩进2字符）.......（三）标题文字（缩进2字符）（四）标题文字（缩进2字符）.......（五）标题文字（缩进2字符）（六）标题文字（缩进2字符）.......1.标题文字（序号与标题之间不加空格，缩进4字符）二、标题文字（顶格）（一）标题文字（缩进2字符）1.标题文字（缩进4字符）2.标题文字（缩进4字符）3.标题文字（缩进4字符）（二）标题文字（缩进2字符）1.标题文字（缩进4字符）2.标题文字（缩进4字符）3.标题文字（缩进4字符）4.标题文字（缩进4字符）（三）标题文字（缩进2字符）1.标题文字（缩进4字符）2.标题文字（缩进4字符）3.标题文字（缩进4字符）三、标题文字（顶格）（一）标题文字（缩进2字符）1.标题文字（缩进4字符）2.标题文字（缩进4字符）3.标题文字（缩进4字符）4.标题文字（缩进4字符）5.标题文字（缩进4字符）（二）标题文字（缩进2字符）1.标题文字（缩进4字符）2.标题文字（缩进4字符）3.标题文字（缩进4字符）2.数量与结构约束：一、标题：全篇数量不得少于6个。二、二级标题：每个一级标题下设置2-5个不等，各章节二级标题数量不得相同。三、三级标题：涉及具体操作步骤、执行标准、量化指标的章节，必须使用“1.2.3.”三级标题；涉及宏观原则、组织架构、附则说明的章节，严禁使用三级列表，直接用段落融合阐述。3.序号后置规范：（一）权责划定。各单位主要负责人是第一责任人。（二）执行监督。建立月度检查机制。（三）奖惩机制。对未达标部门进行通报。【一级标题创作规范】1.风格边界：必须使用书面语，庄重、简练、准确。2.标题长度：6-15个汉字。3.禁止模板：严禁所有一级标题使用“XXXX与XXXX”句式。【文档类型架构库】一、总则说明移动端Flutter页面样式规范旨在统一产品视觉风格，提升用户体验，确保跨平台一致性。本规范适用于所有基于Flutter框架开发的应用程序，包括但不限于iOS和Android平台。二、色彩体系规范（一）主色调定义。主色调为0056b3，用于品牌标识和关键按钮。1.色值标准：RGB（0,86,179）；2.十六进制代码：0056b3；3.应用场景：启动页背景、主要操作按钮。（二）辅助色规范。辅助色为f5f5f5，用于信息提示和分隔线。1.色值标准：RGB（245,245,245）；2.应用场景：内容区域背景、分割线。（三）强调色规范。强调色为ff4081，用于危险操作和重要提示。1.色值标准：RGB（255,64,129）；2.应用场景：删除按钮、警告信息。三、字体排印规范（一）标题层级。一级标题使用思源黑体，字号24px；二级标题使用思源宋体，字号18px；三级标题使用思源黑体，字号16px。（二）正文排版。正文使用思源宋体，字号14px，行间距1.5倍。（三）特殊处理。数字和代码使用等宽字体，字号保持一致。四、布局结构规范（一）栅格系统。采用12列栅格布局，基础网格宽度为20px。1.内容区域：占比8列；2.侧边栏：占比4列。（二）间距标准。垂直间距：16px；水平间距：24px。（三）响应式适配。使用Flex布局实现自适应，关键断点设置在750px和1100px。五、图标与插画规范（一）图标风格。统一使用线性图标，线条粗细1px。1.标准色：666666；2.禁用色：cccccc。（二）图标分类。包括操作类、状态类、提示类，需建立图标库。（三）插画要求。插画风格需与品牌调性一致，保持线条简洁。六、交互反馈规范（一）点击状态。按钮点击后颜色变暗，透明度降低20%。（二）加载状态。使用旋转进度条，颜色与主色调一致。（三）错误提示。弹出模态框，背景色为fff0f0。七、组件开发规范（一）按钮组件。1.尺寸：高度44px；2.圆角：4px；3.状态：正常、禁用、加载。（二）输入框组件。1.边框：1pxsolide0e0e0；2.聚焦状态：边框变粗；3.占位文字颜色：999999。（三）列表组件。1.分隔线：1pxsolidf0f0f0；2.项高：56px；3.选中状态：背景色e6f7ff。八、特殊场景规范（一）暗黑模式。主色调改为333333，辅助色为4a4a4a。（二）无障碍设计。1.字体大小：支持1.5倍放大；2.颜色对比度：最小4.5:1。（三）国际版本。需考虑中英文长度差异，预留10%布局空间。九、附则说明本规范自发布之日起生效，由技术部负责解释和修订。各开发团队需在项目启动前完成规范培训，确保100%执行。【公文语体规范】1.禁止口语化。2.禁止主观抒情。3.禁止非规范时间表述。4.禁止非规范称谓。5.动词规范。使用“制定”“执行”“检查”等标准动词。6.