一致性是用户体验设计的根本

Basic consistency is the fundamental to UX design

颜色

品牌主色
  • 默认色值

    #3C88F2

  • 不可点击

    #D8E7FC

  • 悬停/点击

    #3A7AD5

  • 下拉悬停模块

    #F5F9FE

中性色
  • 正文文本

    #333333

  • 辅助文本

    #666666

  • 次要/提示文本

    #999999

  • 导航icon

    #ADADAD

  • 分割线

    #E7E7E7

  • 灰背景

    #EFEFEF

  • 灰背景

    #F8F8F8

  • 白色

    #FFFFFF

辅助色
  • 重要/错误提示

    #FF0000

  • 标签色

    #FE9800

  • 标签/背景模块

    #FF6768

  • 标签/评分

    #F1C233

  • 标签色/成功

    #19AF18

  • 标签色

    #8338AE

字体/字号

字体
  • PingFang SC

  • HanHei SC

  • STHeitiSC-Light

中文字体:Windows 优先使用(HanHei SC),如果没有则使用(STHeitiSC-Light)。OS X优先使用(PingFang SC),如果没有则使用默认(HanHei SC)。
  • arial

英文字体:Windows /OS X优先使用(arial)
字号中文字号范围建议11-22号,日常使用推荐带蓝点 12号、13号、14号、16号、18号。字号不做绝对限制、强调可以加粗字体
30px PingFang SC用于装饰性文字
26px PingFang SC用于装饰性文字
24px PingFang SC用于装饰性文字
22px PingFang SC用于装饰性文字
20px PingFang SC用于装饰性文字
18px PingFang SC用于大标题文字
16px PingFang SC用于标题导航文字
14px PingFang SC用于正文文本
13px PingFang SC用于注释
12px PingFang SC用于气泡/标签

行距/线

行距
字号 行距 字距
标题类(16~18px) 30px 默认
标题类(16~18px) 25px 默认
正文类 14 px 30px 默认
正文类 14 px 25px 默认
提示/按钮/标签类(12px) 30px 默认
提示/按钮/标签类(12px) 25px 默认
特殊字体组合 实际效果定义 默认
线
用法 状态 样式 border值
编辑框/分割线 默认 1px solid #E7E7E7
按钮边框/编辑框悬停 悬停/hover/点击 1px solid #3C88F2
禁用颜色 悬停/hover/点击 1px solid #D8E7FC
编辑框报错样式 报错 1px solid #FF0000
虚线 默认 1px dashed #E7E7E7

布局

首页布局
列表布局

按钮

基础样式
反白样式
注:以上块状按钮,文字颜色会跟随背景色改变而改变
带图标样式带图标的按钮可增强辨识度
状态
注:
以上反白样式,块状按钮,文字颜色会跟随背景色改变而改变。反白样式悬停/点击/禁用/加载不给具体色值,只需要白色修改透明度。
块状:悬停/点击背景“透明度80%”。禁用/加载中背景+字体“透明度60%”
线性:禁用/加载中线框+字体“透明度60%”
尺寸/布局
注:
以上所有按钮均不固定宽度,宽度以文本内容+左右边距决定。icon不管在左还是在右,只需要距离文本“5px”即可。
方形样式圆角“2px”。全圆按钮高度不变,圆角则是“高度÷2”即可
特殊场景可不按照以上规范规定宽度。例如登录注册
超大尺寸:字号“16px”。默认尺寸:字号“14px”。中尺寸:字号“12px或14px”,小尺寸:字号“12px”
按钮文字行高均不固定;一般按钮高度等于文字行高

单选框

状态
布局/尺寸
使用场景

复选框

状态
布局/尺寸
使用场景

编辑框

基础样式
状态
尺寸/布局

下拉菜单

基础样式
注:文本字号:14px。文本行高:30px
使用场景
注:按钮/文本下拉菜单都需要检测浏览器宽度决定是以内容垂直左对齐、还是右对齐。下拉样式最大高度240px
布局/尺寸下拉框最大高度(240px)。超出出现滚动条
注:宽度不做绝对限制,下拉框下拉菜单在内容+左右10px未超过下拉框本身宽度时则如样式一相同。如果超过则是“内容+左右10px”等于下拉框宽度
浏览器宽度决定是以内容垂直左对齐、还是右对齐。
注:搜索下拉框宽度等于搜索框输入框宽度
注:宽度不做绝对限制,宽度是“内容+左右10px”等于下拉框宽度
浏览器宽度决定是以内容垂直左对齐、还是右对齐。

进度条

基础样式
使用场景
70%
新鲜
不新鲜
注:蓝色样式一般用于百分比显示、百分比显示越高蓝色进度条显示占比越大。红、绿进度条用于职位状态显示,50%以下显示红色不新鲜,50%或50%以上显示绿色新鲜
使用场景
注:进度条宽度均不固定,根据使用场景设定宽度

步骤条

基本样式
  • 推荐候选人步骤

  • 注册步骤

  • 时间进度条

状态
  • 推荐候选人步骤

  • 注册步骤

  • 时间进度条

布局/尺寸
  • 推荐候选人步骤

  • 注册步骤

  • 时间进度条

注:注册步骤:不做绝对的宽度设定,宽度根据设计实际效果。 发布职位:高度可根据产要求按照布局添加。

浮层

样式
  • 特殊样式

  • 基础样式居左

  • 基础样式居右

使用场景
  • 特殊样式

  • 基础样式居左

  • 基础样式居右

注:特殊样式一般都以横向对齐内容居中方式、基础样式需要检测浏览器宽度决定是以内容垂直左对齐、还是右对齐
布局/尺寸
  • 特殊样式

  • 基础样式居左

  • 基础样式居右

注:特殊样式一般建议上下左右边距15px,不做绝对限定。基础样式文本行高30px

标签切换

样式
注:标签切换的悬停点击样式都与选中样式相同
布局/尺寸
注:候选人切换样式、模块不做绝对限制“内容+左右边距30px等于模块宽度”。系统消息选中样式蓝线宽度跟随内容“内容多宽蓝色线则有多宽”、内容与内容之间间隔30px

滚动条

样式
注:内容超出可视区域时出现滚动条。
尺寸/布局
注:滚动条高度不做固定,样式按照上方即可

加载

弹窗加载
注:详细交互动画可参照element
区域加载
注:详细交互动画可参照element
整页加载整页加载、加载3秒后消失
注:详细交互动画可参照element

评分

评分样式
  • 基础样式

  • 辅助文字:用辅助文字直接地表达对应分数

显示样式
  • 显示样式允许出现半星形式

布局/尺寸/状态
  • 基础样式

  • 辅助文字:用辅助文字直接地表达对应分数

颜色选择器

样式
使用场景
标注/布局

弹窗

样式
注:基础弹窗一般用于操作提示,功能弹窗一般用于表单填写。不排除有其他情况,具体看实际设计效果
布局/边距
注:基础弹窗样式一宽高不做绝对限制、可根据内容撑大弹窗,最小尺寸弹窗如上图所示、最大弹窗宽“不能超过790px、最大高度不能超过600px”,建议字号:18px。
注:基础弹窗样式二宽高不做绝对限制、可根据内容撑大弹窗,最小尺寸弹窗如上图所示、最大弹窗宽“不能超过790px、最大高度不能超过600px”,建议标题字号:18px。建议内容字号:14px。
注:功能弹窗宽高不做绝对限制、可根据内容撑大弹窗,最小尺寸弹窗如上图所示、最大弹窗宽“不能超过790px、最大高度不能超过600px”,建议字号:14px。
注:表单文本对齐方式“右对齐”,文本建议行高“30px”。编辑框间距“10px”、文本编辑:“5px”
HUNTERON UED 团队