表格列数太多 页面怎么设计_B端产品设计规范分享

 

加入彩虹的一年来，接触的都是B端产品大大小参与设计了七八个项目，从中总结了一些经验给大家参考，当然依旧还会有一些不足，后期也会不定期优化更新。B端设计与C端大有不同。C端Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。

B端的数据后台复杂、庞大逻辑缜密，对于设计来说也会有一些附加要求，了解数据、了解架构，只有做到了对产品的准确认知才能带来更加 「精准」的设计，在这里我用了精准一词，而不是好看、丰富、独特，这就是B端与C端产品的差异，B端产品内容庞大丰富更看重的是可用性和易用性，正是因为产品的庞大更加会看重规范，在我们公司设计属于共享资源几乎不可能参与所有项目的深度设计(当然也顶不住甲方爸爸的强烈要求)，一般来讲只能从规范上来告知前端同学，从最初的原型图了解框架和图表结构把涉及到的内容预先设计写一个完整的设计规范，规范不会因为设计的交付而停滞，我们会根据产品的新增需求持续更新。

• 制定设计规范的意义

1. 对产品——统一视觉设计规范及某些特定交互设计规范，同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出；

2. 对自己——组件化同类元素，提高工作效率，建立产品的组件库，以便不同项目的复用及设计延展；在同一个项目中也能更好的把控该项目的视觉规范，提高效率；

3. 对团队——设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作；

4. 对客户——制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更高效的输出。同时在进行产品迭代时，设计规范的组件化调整也大大提高了工作效率。

• 设计规范

前言

B端业务种类繁多、流程复杂，在B端设计中我们更加看重的是易用性和可用性，帮助客户快速掌握业务流程与管理体系。

设计规范的目的是：保证项目设计的统一性，辅助开发提高效率、方便产品迭代等；让前端工程师对项目的UI有整个了解，快速查找部分基础样式(如：标准色、标准色、间距、按钮、表格、表单等)提升设计还原度，提高质量。

(1)统一尺寸据统计，目前PC端用户屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900；现在电脑的分辨率普遍增大，我们设计主要采用1920*1080，当然不一样的公司设计标准不一样可灵活变通；(2)页面框架页面框架自定义布局，保持间距不变，在适当的位置放适当的图表即可灵活布局，但主要框架不变，市面上框架主要分为左右栏布局和上下栏布局。

1. 左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；
2. 上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；
3. 左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

    

   后台系统常用的字体：WIN系统：中文Microsoft YaHei，英文Arial；Mac系统：中文PingFang SC，英文Helvetica；一些企业有自己的商业版权统一采用他们的字体即可。后台系统中常用字体大小为12px、14px、16px、18px、20px、24px、30px、32px、36px行高根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。  

按钮是后台产品进行交互设计的重要元素，提供给用户进行点击操作。常用按钮可分为主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。按钮的交互状态包括默认、悬停、点击和不可用。按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照8的倍数设定，如高度分别设定为24、32、40px。规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。填充按钮之间间距最小为10px。

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。输入框的尺寸可按照8的倍数进行设定我在设计时输入框常用40px。表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px；也可以标题文字右对齐，输入框左对齐，个人比较常用的是左对齐，视觉上看起来更加整齐。输入框内正文字体14px，文字和左右两边边框的边距20px。选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择等。搜索框和选择框的高度为32px/40px，通常和输入框保持一致。搜索框距离右侧按钮4px，内部文字14px。单选多选框尺寸16*16px，多个选项横向排列间距16px，纵向排列间距8px。开关按钮外框40*20px。 

表格在B端产品设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。

1. 选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；
2. 操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；
3. 表头展示列标题，一般具有排序功能；
4. 正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；
5. 底栏显示分页、总数统计等。

表格中的信息可批量操作的数据通常在第一列增加复选框。(1)行高表格行高可设置为表格内字体高度的2.5+-倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用36、40、48、60等。(2)行数表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是20-40，产品设计时可加入行数自定义可小于40时可内部加入滚动条，若条数过多可设置分页。(3)列宽列宽根据内容字段长短设置不同的默认值，使得表格字段有良好的展示效果。B端项目列宽一般都是固定的，可以最初预判改列的最大宽度给出默认数值，为了更好的兼容可以实现为可拖拽的列宽，给出预判的最小值如果文字过多不重要的信息可以“…”展示，鼠标悬停出现完整内容(比如详情、描述)。(4)列数表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必须列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要固定基本信息列和操作列。(5)对齐方式表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，VIN号虽然是一串数字可以像文文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似IP地址、VIN、域名这样的信息，也可以根据产品需要在文本前面增加“复制”图标，方便用户调用。(6)详情入口表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。    用户当前所在页的页码应该与其它页码的样式有所区别我们设计常用的是颜色和粗细进行区分，以此来提示用户当前所在的位置便于导航

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

1. 弹框——弹框出现时增加黑色蒙版#000000，透明度50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭，则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
2. 侧滑框——又称抽屉，出现在右侧，固定宽度400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
3. 骨架屏——为某些特定数据提供数据加载等待时的占位图形组合。
4. 全局提示——建议停留时间3s，可根据文字字数调整停留时间，文字内容限制在30以内。
5. 警告提示——用不同颜色和样式展示需要关注的信息。
6. 通知提醒——消息通知和告警信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留3s后自动关闭。

占位符常作为无数据和网络错误使用。

地图在B端设计中是最重要的设计之一，最常用的是地图热力图一目了然看到数据信息。

1. 大屏采用深色系地图地图背景底色参考 #030C20  其他颜色参考：#004A5E、#00345B、#002846、001D32、#1F485E；地点文字颜色参考#5A83A0；
2. 大屏除文字外不可使用白色；
3. 大屏弹窗 background color : #000000; opacity: 50% ；
4. 内页采用高德浅色系地图；
5. 主色系蓝色为常用色系、橙色系使用为最严重色系、荧光色系为一般中间色使用，若超出三色参考延展色系；

 

仅允许数据标准数字值，可定义范围。 

• 选择器

当选项过多时，使用下拉菜单并选择内容。 在建立企业级B端产品一致性设计规范及度量标准的道路上，我们还有很长的路要走。我也在不断思考，如何让设计规范更符合设计原则、设计审美和业务场景，而不是设计师拍脑袋的想法。后续还会持续更新欢迎大家关注我们～

* 部分图片来源于网络