设计规范摘录

产品：行政通

摘录：张伟

确认：陈静

适用版本：V1.0

日期：0000-00-00

一、摘录范围

这篇摘行政通浏览器页面正在用的色彩、字体、按钮、表单和间距，方便刘洋实现时和张伟的稿子用同一套数。页面是员工订会议室、请假、登记访客、领用办公用品的首页和四个模块。

摘录以 9月18日 上线的界面为准。手机只收企业微信通知，不在这篇里规定手机版布局。张伟在 9月20日 用浏览器开发者工具量过主按钮和页边距。色值、字号和 36 像素高度另写在一页纸上，贴在刘洋工位旁。圆角 4 像素只用于按钮和输入框。

二、色彩

主按钮和链接用蓝色 #0000ff。完成状态用绿色 #008000。需要员工处理的进行中用橙色 #ffa500。提交失败和冲突提示用红色 #ff0000。次要说明用棕色 #a52a2a，只用于辅助句子，不用于按钮。

1. 「立即预订」「提交请假」「提交登记」「提交申领」使用蓝色。
2. 状态「完成」使用绿色，「处理中」使用橙色。
3. 「该时段刚刚被预订」「暂时缺货」使用红色。
4. 页面背景保持浅色，正文用默认深色，不用黄色做字色。

三、字体

中文用系统默认无衬线字体。页面标题 20 像素，区块标题 16 像素，正文和表单 14 像素，辅助说明 12 像素。标题和按钮文字加粗，正文不加粗。一行正文的长度控制在 28 个字以内，空状态说明也按这个上限。

1. 四个入口的名称用 16 像素加粗。
2. 占用条上的时间用 12 像素，张伟在走查里认为偏小，10 月准备提到 14 像素，该项未开始。
3. 错误提示用 14 像素红色，不用全页大标题来报错。
4. 企业微信通知不套这套字号，沿用微信自己的排版。

四、按钮

主按钮高度 36 像素，左右内边距 16 像素，圆角 4 像素，一页只有一个主按钮。未满足条件时按钮为灰色，点击不提交。次按钮用线框，高度同样 36 像素，用于「返回首页」「查看我的预订」。

1. 主按钮文案用动词，已定稿的四句见色彩一节。
2. 提交中把文案改为「提交中」，连续点击只保留第一次。
3. 缺货时主按钮变灰，旁边用 14 像素红色写「暂时缺货，请联系行政」。
4. 危险操作只有「取消预订」，使用红色文字按钮，放在详情页而不是列表上。

五、间距与表单

页面左右边距 24 像素，模块之间 16 像素，表单行间距 12 像素。输入框高度 36 像素，与按钮对齐。标签在输入框上方，必填在标签后加红色星号。

1. 会议室主题限 20 字，访客事由限 20 字，张伟准备把事由调到 80 字，尚未改规范，进展未开始。
2. 日期选择和时段选择使用同一套 36 像素高度。
3. 错误出现在对应输入框下方，不集中到页顶。
4. 首页四个入口卡片间距 16 像素，两列排列，周敏要求一屏看全。

六、核对记录

9月20日 张伟核对了首页、会议室、请假、访客、用品五页的主按钮颜色和高度，五页都是蓝色、36 像素，记为完成。占用条时间字号改为 14 像素的规范修订未开始。事由 80 字的修订进行中，等 10月8日 和退回文案一起改。刘洋实现新页面时按本篇的像素和色值，色值写在样式里用上面列出的五个。