诺科全渠道资源管理系统 · 项目详情

概览 · Overview

项目类型 TypeB 端 SaaS · 资源管理系统（ERP）

项目职责 Role核心页面视觉 · 信息层级 · 页面布局 · 组件与关键模块

平台 PlatformWeb 桌面端 · 1440 / 24 栏栅格

设计工具 ToolsFigma · Adobe XD

诺科全渠道资源管理系统（Nuoko-ERP）是诺科企业旗下、为车辆企业量身定制的资源管理系统，全面管控业务、打通线上线下：支持多平台多网店、订单统一管理与智能审单，自动同步多仓库多平台多店铺库存，并提供库存上下限预警等精细化流程。我负责其中核心页面的视觉设计、信息层级梳理、页面布局、组件样式与关键模块设计，并在多业务线之间保持统一的视觉与结构。

职责与范围 · Role & Scope

从设计系统到业务界面的整体把控

负责范围从底层规范延伸到业务界面：先搭建可复用的设计系统，再以统一的栅格与组件，把多条业务线的复杂界面收敛为一套连贯、可扩展的系统。

设计系统先行 Design System

以原子化思路搭建组件库：栅格、色彩、字体、图标、按钮、表单等基础规范统一，业务框架变化时组件基本不变、便于复用。

复杂业务信息架构 Architecture

面向整车管理、售后服务、KD 管理、报表管理与系统管理等多业务线，规划顶部 + 侧边 + 操作区的界面框架与多级导航。

高密度数据场景 Data-dense

针对查询表单、数据录入、多字段表格与权限配置等场景，处理盒子模型、列宽与斑马纹、分页与状态色，保证信息可读、操作高效。

项目重点 · Focus

复杂业务，如何收敛为一致、可扩展的界面

系统横跨整车、售后、KD、报表与权限等多条业务线，页面类型多、字段密、层级深。处理重点是用一套设计系统统一栅格、色彩、字体与组件，再以「顶部导航 + 侧边导航 + 响应式操作区」的框架承载不同业务，让信息架构清晰可循、界面在扩展时仍保持一致。

关键判断

B 端产品的重点不在单页好看，而在于用一套设计系统把复杂业务收敛为一致、可扩展的界面框架——组件、栅格与规范先行，让多业务线在同一套语言下高效协作。

设计系统 · Design System

从设计体系到 B 端业务视觉框架

运用原子化思路，把系统设计为可组装的组件，以低耦合、高复用快速适配新需求。基础规范覆盖栅格、色彩、字体、圆角与间距、图标、按钮与表单，并统一沉淀为一套视觉框架。

信息架构与界面框架 · IA & Frame

用一套框架承载多业务线

信息架构覆盖整车、售后、KD、报表与系统管理五条主线及其下级菜单；界面框架基于格式塔邻近原则，分为顶部导航、侧边导航与响应式操作区三个板块，兼容侧边 / 顶部 / 面包屑等多种导航场景。

控制台 · Dashboard

一屏读懂的工作概览

控制台把重要信息统一组织在一屏内：工作概览（快捷打卡、工作日历、待办事项、常用文件）、数据监控（销量、库存、趋势预测）与销售分析。采用明亮、统一的配色，让数据图表清晰、内容导向明确。

高密度业务 · Forms & Tables

表单与多数据表格

针对查询、录入与多数据表格等高密度场景，从业务视角到用户视角再到 UI，逐层落到可操作的界面：表单用统一的盒子模型规范标签与输入的间距；表格保证字段完整、列宽可调，用斑马纹与状态色提升可读性，并配合分页器处理大数据量。在表单改版阶段，案例中对新旧两版表单做了 A/B 测试——以表单提交完成度与平均完成时间为指标，在约 50 人的同类用户样本下对照，新版在两项指标上均优于旧版（具体数据见图），并据此确定为下一版的迭代方案。