⽹页设计规范
感谢作者 :Arche阿北
转载，仅⾃⾏查阅使⽤。
后台产品设计规范
以下数值为参考，请结合特定产品灵活运⽤。
1. 页⾯布局
统⼀尺⼨
据统计，⽬前 PC 端⽤户屏幕分辨率占⽐排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会⽐较⼩。
适配⽅案：⾯向多个客户，后台产品设计功能型页⾯的尺⼨统⼀为 1440*900，按照栅格系统原则向上或向下适配。展⽰型页⾯以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，⼒求实现前端实现效果和⾼保真设计图误差最⼩。⾯向公司内部的后台系统，由于各个职⼯电脑
屏幕是统⼀采购、统⼀尺⼨，所以开发适配的分辨率可以统⼀尺⼨进⾏设计，这个尺⼨根据公司内部采购屏幕的尺⼨和分辨率选择即可（提前和前端沟通好）。
页⾯框架
页⾯框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三⼤区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进⾏动态缩放；上下栏布局包括顶部菜单栏和主体内容两⼤区域，其中顶部菜单栏为固定结构，主体内容进⾏动态缩放且需定义主体内容左右两边空⽩区域最⼩值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使⽤是为了解决⾃适应和响应式问题，从⽽更好地进⾏产品设计和产品开发。响应式栅格采⽤ 24 列栅格系统实现，以满⾜
2，3，4，5，6 分⽐布局等多种情况。固定宽度 Column，将间隔 Gutter 进⾏动态缩放。
需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。
⾕歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采⽤ 8px 以及 8 的倍数，但⼀些⼩组件（按钮、间隔、输⼊框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运⽤，不要被它所局限。
尺⼨设定
⼀般在整体区域左上⾓放置产品 LOGO 及产品名称，⼤部分系统顶部栏⾼度 48+8n，侧边栏宽度  200+8n。我常⽤的是顶部栏⾼度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采⽤区域内滚动或整屏滚动，视情况固定导航栏。
2. 标准⾊
颜⾊分为品牌⾊、辅助⾊、中性⾊。根据不同产品的不同需求，可能也会将统计图、标签等进⾏统⼀标准⾊设定。
品牌⾊即产品主⾊，产品主⾊的设定直接影响产品⽓质和直观感受，也是产品直接对外的形象。品牌⾊要根据产品特性、⽤户使⽤场景、产品定位等进⾏选取，尽量做好⾊彩的延伸性，可⽀持换肤。品牌⾊的应⽤场景包括操作状态、按钮⾊、可操作图标等。
辅助⾊⽤于提⽰其他场景，⽐如成功、失败、警告、⽆效等。
中性⾊常⽤于⽂本、背景、边框、分割线等，需要考虑深⾊背景和浅⾊背景的差异，可以选择同⼀⾊相控制透明度变化，⽤来表现不同的层级结构。
其他⾊如统计图、数据可视化、多个标签的不同配⾊⽅案根据项⽬情况单独设定。
3. 标准字
后台系统常⽤的字体：windows 系统，中⽂ Microsoft YaHei，英⽂ Arial；Mac 字体，中⽂ PingFang
SC，英⽂ Helvetica；除此之外可以选择的字体还有 segoe UI、思源⿊体、Hiragino Sans GB等。
后台系统中常⽤字体⼤⼩为 12px、13px、14px、16px、18px、20px、24px、30px。
⾏⾼设定，根据⽂字⼤⼩及使⽤场景设置⾏⾼，⼀般⾏⾼=⽂字⼤⼩+6px/8px。
4. 图标
图标是 UI 设计中重要组成部分，⼀般分为功能图标和应⽤图标，以图形的⽅式传达概念，可以降低理解成本，使得界⾯更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助⽤户对功能的认识。
除了某些常⽤的图标，有⼀些专业性的操作和词汇则需要设计师进⾏绘制，现在⽐较⾼效⽅便的⽅法是在 iconfont 提供的图标模板上⽤ AI 绘制，画板 1024*1024，提供圆形、正⽅形、矩形形状。图标尺⼨按照 8 的倍数进⾏延展，绘制完成后⽣成 svg 格式⽂件，提交到阿⾥巴巴⽮量图标库的项⽬组⾥，⽅便前端调⽤，调整⼤⼩和颜⾊更为⽅便，且能够优化系统内存和性能。
5. 按钮
按钮是后台产品进⾏交互设计是重要元素，提供给⽤户进⾏点击操作，是视觉上最引⼈注⽬的控件，具有⼀定的视觉受范性。常⽤按钮可分为填充按钮、线性按钮、⽂字按钮。
按钮的交互状态包括默认、悬停、点击和不可⽤。
按钮根据需求分为不同尺⼨，⼤中⼩三个级别⽤在不同的场景，⼀般按照 8 的倍数设定。如⾼度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽⾼、圆⾓及⽂字⼤⼩，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最⼩为 10px。
6. 导航
导航的类型有很多种，常⽤的⽐如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、⾯包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体⼤⼩可进⾏统⼀设定。
顶栏菜单多为⼀级菜单，点击切换，或作为下拉菜单的⽗级，将⼦级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌⼦菜单。
下拉菜单的触发⽅式⼀般有⿏标悬停和⿏标点击两种。
步骤条引导⽤户按照流程来完成任务，⼀般步骤不得少于两步。
分页的⾼度设定为 24px、30px、32px，根据应⽤场景适当增减内容，⽐如设定每页展⽰数据的条数、跳转⾄指定页等。
⾯包屑⽤于说明层级结构，使⽤户明确当前所在位置，并且可以回到任⼀上级页⾯。
徽标数⽤来通知⽤户当前有未读消息，⼀般出现在图标的右上⾓或者跟在⽂字后⾯。
7. 表单
表单多由⼀条或多条列表项组成，单⼀列表项的类型有字段输⼊框、条件选择器。
字段输⼊框的标题和输⼊框分布⽅式包括左右、上下、⽆标题。左右分布是常见的对齐⽅式，⽐较适合 PC 端的使⽤；上下分布增加了表单的整体⾼度，视情况选择使⽤；⽆标题经常应⽤在登录注册，虽然减少了⾯积，但是增加了理解难度。
输⼊框的交互状态包括默认、输⼊结果、提⽰错误、禁⽤、获取焦点。
输⼊框的尺⼨可按照8的倍数进⾏设定，⽐如 24px、32px，也可根据系统实际情况进⾏设定，我常⽤的输⼊框⾼度为 30px，宽度视情况⽽定，⽆圆⾓。上下布局的多个输⼊框上下间距为 20px，有错误提⽰时候竖向增加 10px 或横向显⽰在输⼊框右侧（预留出位置）。
表单中标题⽂字左对齐，输⼊框左对齐，标题⽂字距离输⼊框20px（多个长度不同的输⼊框算最长的）；标题⽂字右对齐，输⼊框左对齐，也是常⽤的⽅式。输⼊框内正⽂字体 14px，⽂字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为⽅形。
搜索框和选择框的⾼度为 30px 或按照 8 的倍数⾃⾏设定，通常和输⼊框保持⼀致。搜索框距离右侧
按钮 4px，内部⽂字 14px。
单选多选框尺⼨ 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
8. 表格
表格在后台产品 UI 设计中占⽐⾮常⼤，⽤来展⽰数据、统⼀管理、作为详情⼊⼝，是最清晰、⾼效的形式之⼀。在设计规范中需设定表头⾼度、表格⾏⾼、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五⼤区域：选择搜索区、操作区、表头、正⽂、底栏。选择搜索区放置筛选框和搜索框，为⽤户提供按需搜索，可以⼤⼤提⾼⽤户效率；操作区指各种对表格内容进⾏增删改查、批量处理、配置列的动作；表头展⽰列标题，⼀般具有排序功能；正⽂主要展⽰各种各样的数据，要注意⾏⾼、对齐、分割、信息层级等，要考虑是否提供⾏内操作；底栏显⽰分页、总数统计等。
表格信息⼀般主要功能为增删改查，查看和编辑是最基本的功能，表格信息⽀持筛选、搜索、排序、分页。对可批量操作的表格数据在第⼀列增加多选框。
⾏⾼
表格⾏⾼可设置为表格内字体⾼度的 2~3 倍，主表格会间隔显⽰不同颜⾊，⽤于区分不同⾏数据、加强视觉流引导，展开单⾏的内置表格可采⽤纯⾊，选中⾏应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格⾏⾼可采⽤ 36、40、48、60 等。
⾏数
表格⾏数太多加载速度会降低，延长⽤户等待时间；⾏数太少会导致⽤户不断翻页，降低使⽤效率。⽐较合适的默认表格⾏数是 20 或 50，⽤户可以根据⾃⼰需求选择默认的⾏数。设定⾏数之后，如果每页⾏数多于每屏⾏数，可在表格内引⼊滚动条，这时可以固定表头滚动内容。页面设计是什么
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展⽰效果。列内容的长度固定时，列宽应⼤于固定宽度（⽐如时间、MD5、SHA1）；列内容不固定时，能预判最⼤宽度的按照最⼤宽度设定列宽（⽐如IP地址、MAC地址、姓名），不能预判最⼤宽度的设定列宽按照常⽤宽度，多于内容省略以「…」展⽰，⿏标悬停出现完整内容（⽐如详情、描述）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。