UI设计中B端系统设计规范总结
在 UI 设计中，B 端系统的规范主要围绕组件样式和 UI 规范两个方面展开，以确保系统具有高可用性、易用性和良好用户体验。
一、组件规范，包含但不限于按钮、面包屑、导航菜单、分页、下拉菜单、滑条、日期选择框、树、标签页、输入框、表单、上传、气泡卡片、表格、警告提示、弹窗/抽屉等。这些组件的设计需确保在不同场景下都能提供一致的交互体验，便于用户操作。
二、UI 规范，主要涵盖色彩、字体、布局和图标四个部分。色彩规范包括品牌色、辅助色和中性色，品牌色应根据产品特性、用户使用场景、产品定位等进行选择，确保色彩的延伸性；辅助色用于提示不同场景，如成功、失败、警告、无效等；中性色则用于文本、背景、边框、分割线等，需考虑深浅背景差异。字体选择中文字体如苹方体、思源黑体，英文字体如Helvetica Neue、sanf，并设定字号和行高规则。布局适应主流分辨率（1920、1440、1366等），采用动态适配布局，如左右结构或上下结构，并使用24栅格系统。图标设计以简洁为主，大小统一，便于识别。
色彩规范中，品牌色是产品形象的核心，应具有良好的延伸性，以支持换肤功能，同时提供辅助色和中性色以丰富应用场景。除了基本色彩外，还需准备“其它色”以适应特殊需求，如统计图、数据可视化、多个标签的配色方案等。
字体规范中，中文字体推荐苹方体、思源黑体，英文字体推荐Helvetica Neue、sanf。设定字号为14px、16px、18px、20px、24px、26px、28px、30px、36px等，并根据不同文字大小及使用场景设定行高，如行高=文字大小+8px 或者乘以1.5倍。
在布局规范中，B 端系统主要适应主流分辨率（1920、1440、1366等），采用动态适配布局，如左右结构或上下结构，并使用24栅格系统。左右结构常用于导航栏固定宽度，顶部栏固定高度（有顶部栏的情况下），对右边的内容展示区域进行动态缩放。上下结构则用于顶部栏固定，对下边的内容展示区域进行动态缩放，内容区域左右两边固定有最小值。
图标设计应简洁易懂，注重分类标识和点缀效果，并确保图标在大小、描边、颜色等方面视觉统一。推荐使用 iconfont.cn等在线图标库与开发团队协作，或进行图标切图下载。
以上规范旨在提供一个统一且高效的设计框架，确保 B 端系统在不同场景下都能提供一致的用户体验。后续会持续整理组件库规范，并上传实际项目案例，欢迎持续关注和交流。如有疑问，可通过私信进行沟通。
多重随机标签