Product Design Guideline.md

导航栏 navbar

导航栏用来显示和导航信息层级，同时可以对当前界面做出操作

• 44px + 3px阴影
• 深色背景
• 标题文字20px，距离上边缘14px, 颜色纯白，向下1px黑色阴影50%

工具栏 toolbar

工具栏会在对应的物件选中时从屏幕下方弹出，可针对所选中的物件进行操作。

• 50px
• 图标尺寸W36px * H30px，距离上边缘padding 6px
• 文字标签字号10px，间隔图标下边缘2px，颜色#ccc

交互栏 interbar

交互栏可以对当前页面进行操作。

• 40px + 2px阴影
• 浅色背景
• 模态窗口出现时交互栏即为其顶栏
• 交互栏中的控件高度28px

按钮 Button

• 标准按钮

标准按钮用于所有一般操作，分深浅色两色，分别用在界面上相对深色和相对浅色的背景下

* 深色背景使用btn_dark，按钮文字12px，颜色纯白，向上1px黑色阴影50%
* 浅色背景使用btn_light，按钮文字12px,颜色#666,向下1px白色阴影25%
* 在有些场景中深色背景下的btn_dark会看不清，这时也可改用btn_light

• 特殊按钮

特殊按钮分红蓝两色，用来标识具有特殊含义的操作，各有一套深浅色样式，用来配合深色和浅色的背景

* 蓝色按钮用在与·X·有关的操作，例如创建一个·X·，确认创建一个·X·等操作
* 红色按钮用在需要谨慎操作的地方，例如logout

按钮状态 Button Statue

待定

• 常态
• 按下
• 选中
• 禁用

背景渐变颜色值 Background Gradient Color

背景色用在首页、登陆页、list页等需要背景填充的地方

• #89a9cc #1c2733 通常内容页面的背景用色

• #486585 #adcced 当页面内容以展示为主，且需要露出大片背景的情况下，背景色应当作前景色处理，例如首页。此时页面最重要的信息应尽量使用白色并出现在渐变色中较为深色的区域。

按钮切图 Button slicing

按钮背景使用9格切图，左右各20px固定，中间1px拉伸。

默认头像 Default Portrait

color | # | RGB ------|-------| Blue | #87aec6 | 135 174 198 Green | #9cb981 | 156 189 129 Magenta | #b294ad | 178 148 173 Yellow | #afa178 | 184 129 96 Khaki | #bd9680 | 189 150 128 Purple | #9c9bb7 | 156 155 183