# 场地预约系统设计：Rentier的三种视图

原网页：https://www.jvds.cn/share/ui-design/rentier-space-booking-kanban-timeline-u139
语言：zh-CN
发布：2026-10-22
作者：界达设计工作室（JVDS）

Rentier没有把所有运营信息塞进一种布局。申请以看板分阶段，占用以时间轴分场地，空间以图形编辑器呈现位置。场地预约系统设计可借鉴的，是让每种关系用适合它的视图出现，再用名称、编号与筛选条件把它们连接起来。

## 看板将处理阶段摆在卡片之前

Booking Requests按NEW、WAITING、APPROVED、ACTIVE分列，列标题配颜色点与计数。卡片列客户、场地、日期和时段，附上Urgent、Room preparation等标签。阶段负责整理待办，标签负责说明条件，两种信息没有被完全压成一种[状态](https://www.jvds.cn/share/ui-design/b2b-business-state-model)。

顶部场所选择、日期条以及Table、Kanban、Gantt位于内容外层。视图选择与当前范围因此有固定位置，用户可以先明确看哪处、哪一天，再查看申请。新的申请动作又以紫色突出，与暗色次级工具拉开距离。

当前样例里，多张不同客户、场地卡使用同一个编号。编号在展示中可以占位，在实际管理中应能独立定位。审批通过也不等于准备完成，状态变化需要保留条件与记录，不能只把卡片移到另一列就结束解释。

![Rentier多状态预约申请看板](https://www.jvds.cn/upload/2026/1008/d187-tp/u139-i1.webp)

看板列标题与卡片内部｜申请阶段和服务需求采用不同信息层

## 时间轴让准备工作也获得时段

Gantt以场地为行、小时为列，客户预约横条之外，还出现Cleaning与Equipment Check。清洁和维护不再只是申请上的标签，而是在占用关系里有自己的空间。这样的排列能够让操作者看到服务之外还需要预留哪些时间。

紫色斜纹片段与普通预约条不同，提示特殊时段，文字与图形共同参与辨认。它的含义仍需图例或详情明确，[起止时刻](https://www.jvds.cn/share/ui-design/dashboard-data-visualization-mistakes)也应能直接读到。像素长度适合看重叠，不适合独自承担精确时间核对。

界达设计工作室（JVDS）认为，看板打开某份申请后，进入时间轴若能继续突出该对象，并保留场所日期条件，两种视图就能支持同一次处理。静态图只显示栏目并列，真正的连续性要由对象身份与选中状态完成。

![场地按小时展开的客户与准备时间轴](https://www.jvds.cn/upload/2026/1008/d187-tp/u139-i2.webp)

时间轴横条及斜纹片段｜客户占用与准备活动共同进入时间尺度

## 编辑器将形状与业务属性放在两侧

编辑器左侧是桌、椅、玻璃和墙等对象库，中央桌椅组合出现紫色选择框，右侧是Properties与Location。素材选择、图形操作和业务资料各有位置，画布因此可以集中表达空间关系。

右侧Coworking类型、对象名称和特性让形状开始接到可管理资源。图中Name or number为空，保存前应核对这个身份字段；一把椅子可能只是布局元素，一组工位才可能是可预约对象，选中层级需要清楚。

Rentier的启发是把任务关系直接摆出来，而不是让操作者在脑中还原一张万能表。看板回答阶段，时间轴回答占用，编辑器回答位置；共享的资源身份和范围，则负责让三种答案属于同一套管理工作。

![对象工具、选中桌椅与空间属性编辑器](https://www.jvds.cn/upload/2026/1008/d187-tp/u139-i3.webp)

中央选中对象与右侧属性｜图形位置和可预约资源身份需要对应

## 让多种管理视图相互接续

共享办公、会议场地和资源预约系统，可以先区分申请、时间占用与空间资料，再建立跨视图的对象身份和条件保留。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可协助规划运营后台、时间轴及空间编辑界面。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)