极简桌面应用UI库 构造思路

极简桌面应用UI库 构造思路
TEST／chat／backend／WUI
文件结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

《About Face 4》
《Web 界面设计》
《界面设计模式》
《写给大家看的设计书》
《设计心理学》
《Web 表单设计：点石成金的艺术》

在进行模式、组件和语言的整理中，上述书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难

前端UI设计规范两种形式：
第一种，偏重视觉概念。
主要包括：字体（Typeface）、字型（Font）、色板、品牌标识规范（Brand Guideline）、Icon
作用：用于设计团队或设计师之间，展示产品的视觉设计风格。便于风格复用，规范第三方的品牌塑造（Branding）和接入。

第二种：偏重（Web 前端）开发概念。
主要包括：交互和动效设计。例如：常见的基础布局（Grid System）、字体排版（Typography）、按钮、菜单、列表、对话框（Dialog）、Tooltip 等等。
作用：用于团队 Web 设计和开发协作，统一产品风格。复用时提升工作效率，同时也保证用户体验质量。

material design

设计语言：
拟真ios6：模拟现实世界的物体（透视、纹理、渐变、阴影），给用户 身临其境的感觉
扁平ios7：去掉冗余的装 饰效果（透视、纹理、渐变），“信息” 本身作为核心凸显出来
三者关系：拟真 1—— material design 60—— flat 100

material／材料：
所有材料都有1dp的等高厚度
Z轴垂直屏幕，阴影越重，Z值越高，距离用户越近
阴影取值 2/3/4/6/8/16

颜色
取色：最多使用两个调色板，从主调色板选择最多三个色调，从辅调色板选择 一个强调色

深背景浅文字：
重要 （87%透明）
次重要 （54%的 透明）
提示性、被禁止文字（26%的透明）

浅背景深文字：
重要 （100%透明）
次重要 （70%的 透明）
其它 （30%的透明）

工具栏和状态栏
工具栏、大色块（色调500）
状态栏 （色调700）

强调色
动作按钮、开关、滑动条 使用强调色

排版