我们的界面设计理念：风格克制，操作顺手

先说结论

• 计划员、仓管员、质检员往往一开系统就是一整天，界面好不好，要看一天下来眼睛累不累、找东西快不快、会不会点错；为此我们整理了一套官网和自研业务系统共用的设计规范。
• 界面风格克制、信息优先：只用一支青色品牌色做强调，状态色只表达状态，图表用专门的数据色；颜色从统一定义的色值表里取，深浅两套主题都真正可用，对比度按无障碍标准设下限。
• 高频操作按一屏设计：整页不滚，只滚数据区，筛选条、表头和分页固定不动；错误不用会自动消失的提示报，删除这类不可逆动作先确认再执行。
• 官网和业务系统的外层布局不同，底下是同一支品牌色、同一套颜色含义、同一条对比度底线和同一套组件规则；APSer-One、APSer-Aps、APSer-Atelier 遵循同一套设计规范。

计划员、仓管员、质检员打开业务系统，往往一开就是一整天。界面好不好，最后要看一天下来眼睛累不累、找东西快不快、会不会点错。

为此我们整理了一套跨项目共用的设计规范，官网和我们自研的业务系统都按它来做。本文介绍其中两条主线：界面风格上我们取什么、舍什么；高频操作上我们在意哪些细节，以及这些做法对天天用系统的人意味着什么。

界面风格上，我们取什么、舍什么？

一支品牌色贯穿，颜色留给该醒目的地方

我们的品牌色是一支青色，偏冷、偏技术、克制。在业务界面里，它只出现在少数几个位置：当前所在的导航项、页面上的主要操作按钮、正在运行的状态、链接。整个界面只有这一支强调色，不为「好看」再引第二支饱和色。

这样做的用意在于：强调色用得越少，它出现的地方就越容易被看见。满屏五颜六色时，真正要处理的那一处反而淹没了。

系统模块多了，使用的人需要知道「我现在在哪个模块」。这份方位感我们交给导航结构、模块图标、页签层次和面包屑来提供，不给每个模块配一种主题色。模块各上一种颜色，界面就成了彩虹，颜色也失去了提示作用。

颜色只表达意思

除品牌色之外，界面里的颜色各有固定含义：

• 状态色四种：成功、注意、错误、提示。只用来表达状态，不当装饰。同一种状态又分三档用法：浅色底用于徽标和行底色，实心色用于图表里的柱和点，深一档的颜色专用于文字，保证小字也看得清。
• 图表用专门的数据色：柱状图、甘特条、分类统计用单独一组颜色，不拿品牌色或状态色来画数据。否则「红色的柱」会被误读成「出错了」，青绿色与红色相邻还会让红绿色弱的同事分不清。挑选这组数据色时，也考虑了色弱同事的辨认。

深浅两套主题，都真正可用

深色模式的问题常出在细节上：背景换深了，弹窗里的字还是黑色，某个浅色块依旧刺眼。我们的做法是：界面上的颜色只从一处统一定义的色值表里取，不在页面里写死颜色，因此切到深色时每一处都会跟着翻转。每做完一个组件，都要在深色下完整看一遍，浅色下看着没问题的地方，深色下常常才露出问题。

对比度按无障碍标准设下限：正文与背景至少 4.5:1，大字和图标至少 3:1。例如实心主按钮用更深一档的青色做底，白字才读得清；关键的颜色搭配用脚本逐对核算，不靠目测。

背景色温也在考虑之内。品牌色是身份标记，只占视野的一小块；背景占了视野的大半，它的色温决定整天盯屏的负担。所以长时间录单、排程、看板这类场景，我们倾向选暖一些的浅底；演示、投屏这类短时场景，才用对比更强的冷色搭配。

同一张订单列表的浅色与深色：状态标签、按钮、分页在两套主题下都清楚可辨。截自我们的设计规范展示台，数据为示例。

描边立结构，阴影只给浮层

卡片和面板靠一条细描边分出层次，默认不加阴影；只有弹窗、下拉这类浮在上面的东西才带一层很轻的阴影。动效同样克制：颜色变化、展开收起都在一瞬间完成，不做弹跳和装饰性循环动画；系统设置了「减少动态效果」时，界面一律照办。制造现场用的系统，首先要稳。

中文排版与表格断行

• 数字等宽对齐：数量、金额、指标列用等宽数字，上下行的个位、十位对齐，扫一眼就能比大小。
• 段尾不留单字：长段落避免最后一行只剩一个字。
• 表格不把词拦腰断开：浏览器自动排列宽时，中文任意两字之间都可能断行，「约束求解引擎」会被断成「约束求解 / 引擎」。我们让表头和首列只在标点、括号、空格处换行；窄屏下长文本列给足宽度，让表格在自己的区域里横向滑动，不压成每行两三个字的细条。

高频操作上，我们在意哪些细节？

整页不滚，只滚数据区

业务界面按一屏来设计：顶栏、导航、底部状态栏始终在原位，整个页面不出现滚动条，滚动只发生在表格或列表内部。页头、搜索框、筛选条固定不动，表头固定在表格顶部，分页和合计行钉在底部。

设想一位计划员在几百张订单里翻到后面，想按交期再筛一遍：筛选条还在眼前，列名还在头顶，不用先滚回页首。每天重复几十次的动作，省下的就是这些来回。

内容区从左边铺开、填满到右下角，不在宽屏两侧留大片空白；数据还没到时，加载和空状态同样撑满区域，界面不会忽然跳动。

业务工作台按一屏设计：左侧导航、顶部页签、筛选与表头固定，只有数据区滚动，分页钉在底部。截自我们的设计规范展示台，数据为示例。

表格：好查、好比、不丢信息

带搜索、筛选、分页的业务数据表统一用同一套表格组件，规范对它定下这些做法：

• 搜索：输入多个词时，同时包含这些词才算命中，例如「急单 注塑」。
• 筛选与排序：状态筛选一点即切，列头点击排序。
• 合计与分组小计：按仓库、工序、客户分组小计，合计按全部数据计算，不只算当前这一页。
• 保存视图：采购、生产、质检看同一张库存表，各自关心的筛选、排序、列可以存成自己的视图，下次打开直接用；改了还没保存时，视图名后会带一个星号提醒。
• 列宽有上限：某一列内容特别长时自动折行，不把其他列挤出屏幕；带操作按钮的列固定在右侧，横向滑到哪里都点得到。
• 窄容器按重要度取舍：容器变窄时，先把次要列折进该行的展开区，主键、状态、关键指标始终留在主行。

其中合计与分组小计、保存视图、按重要度折叠三项，规范已经写明，表格组件还在逐步补齐。

状态与反馈：每种消息有它的位置

报什么消息、放在哪里，按场景查表决定：

• 成功用几秒后自动消失的提示，不打断手上的操作。
• 错误绝不用会自动消失的提示报。错误一闪而过，人来不及读，也无处复看；它应当留在页面上，或者弹出需要确认的对话框。
• 表单多处出错时，把错误汇总成一张清单，点其中一条就跳到对应的输入框。
• 删除这类不可逆动作，先确认再执行。
• 等待不到 1 秒的动作不显示「加载中」，免得指示一闪而过；超过 1 秒的，用和内容结构相似的灰色占位块代替转圈。加载失败就地给出「重试」。

对话框底部最多两个按钮：一个主操作、一个取消。取消永远不做成醒目的实心按钮，免得把人引向「放弃」；工具栏空间不够时，主操作也不会被收进「更多」菜单。只有图标的按钮都带文字提示。内容超长的对话框，标题和底部按钮固定，只滚动中间部分。

提示条按信息、成功、警示、危险区分颜色与图标；空态、加载、出错三种状态各有固定样子。

多页签：同时开几件事

一天的工作很少只看一个页面。计划员可能一边看订单，一边看机台负荷。按我们的规范，业务界面可以在同一窗口打开多个页签，切回某个页签时，滚动位置、搜索词、填了一半的表单都还在；两个页签可以左右并排分屏，比例可以拖动调整。有未保存改动的页签标题会带星号，关闭时会先提醒；常用的看板页签可以固定，不会被「全部关闭」误关。

密度、键盘与窄屏

• 按场景选一种疏密：桌面办公默认紧凑，触屏设备上把可点区域加大；同一页面只用一种疏密，行高不会忽高忽低。
• 键盘可用：键盘操作时焦点位置清晰可见，对话框可用 Esc 关闭，页签可用方向键切换。
• 窄屏重新排布：窗口变窄时，侧栏收成抽屉，多栏变单栏，仍然一屏内完成操作，不堆成一条长页；浏览器缩放到 125% 或 150% 时，界面同样自适应。

官网和业务系统怎样共用一套规范？

官网和业务系统是两种界面语言。官网是展示页，面向第一次了解我们的人：长页面滚动阅读，大标题，段落按句分行，便于在手机上一眼读完一句。业务系统是工作台，面向天天用它的人：一屏装下，信息密集，稳定不跳。

两者的外层布局不同，底下是同一套东西：同一支品牌色，同一套颜色含义，同一条对比度底线，同样的深浅主题，同一套组件规则。我们的自研产品 APSer-One、APSer-Aps、APSer-Atelier 遵循同一套设计规范。

以下是我们的看法

• 界面风格服务于判断。克制的意义在于让异常跳出来：颜色越少，红色越显眼；装饰越少，数据越清楚。
• 操作体验藏在重复动作里。一个动作每天做几十次，少滚一次、少点一次，积累下来就是使用的人一天的精力。
• 规范要写成能检查的规则。「好看」「简洁」难以落实；「错误不用自动消失的提示」「表头与首列不在两个汉字之间断行」可以逐条核对，每个项目都能照做。
• 深色模式和窄屏同样是正式的使用场景。夜班、强光车间、平板巡检，都是真实的使用环境，值得按同样的标准来做。

如果您在选型或使用业务系统时，对界面和操作有自己的体会或困扰，欢迎与我们交流。