極簡(jiǎn)桌面應(yīng)用UI庫(kù) 構(gòu)造思路
TEST／chat／backend／WUI
文件結(jié)構(gòu)：
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 界面設(shè)計(jì)》
《界面設(shè)計(jì)模式》
《寫(xiě)給大家看的設(shè)計(jì)書(shū)》
《設(shè)計(jì)心理學(xué)》
《Web 表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù)》
在進(jìn)行模式、組件和語(yǔ)言的整理中，上述書(shū)籍給了我們很多的啟示窗宇，幫助我們節(jié)約了大量時(shí)間锌仅，并成功克服了很多困難
前端UI設(shè)計(jì)規(guī)范兩種形式：
第一種脐湾，偏重視覺(jué)概念虎眨。
主要包括：字體（Typeface）贤旷、字型（Font）叮姑、色板唉地、品牌標(biāo)識(shí)規(guī)范（Brand Guideline）、Icon
作用：用于設(shè)計(jì)團(tuán)隊(duì)或設(shè)計(jì)師之間传透，展示產(chǎn)品的視覺(jué)設(shè)計(jì)風(fēng)格耘沼。便于風(fēng)格復(fù)用，規(guī)范第三方的品牌塑造（Branding）和接入朱盐。
第二種：偏重（Web 前端）開(kāi)發(fā)概念群嗤。
主要包括：交互和動(dòng)效設(shè)計(jì)。例如：常見(jiàn)的基礎(chǔ)布局（Grid System）兵琳、字體排版（Typography）狂秘、按鈕、菜單躯肌、列表者春、對(duì)話框（Dialog）、Tooltip 等等清女。
作用：用于團(tuán)隊(duì) Web 設(shè)計(jì)和開(kāi)發(fā)協(xié)作钱烟，統(tǒng)一產(chǎn)品風(fēng)格。復(fù)用時(shí)提升工作效率嫡丙，同時(shí)也保證用戶體驗(yàn)質(zhì)量拴袭。
material design
設(shè)計(jì)語(yǔ)言：
擬真ios6：模擬現(xiàn)實(shí)世界的物體（透視、紋理曙博、漸變拥刻、陰影），給用戶 身臨其境的感覺(jué)
扁平ios7：去掉冗余的裝 飾效果（透視父泳、紋理般哼、漸變），“信息” 本身作為核心凸顯出來(lái)
三者關(guān)系：擬真 1—— material design 60—— flat 100
material／材料：
所有材料都有1dp的等高厚度
Z軸垂直屏幕惠窄，陰影越重逝她，Z值越高，距離用戶越近
陰影取值 2/3/4/6/8/16
顏色
取色：最多使用兩個(gè)調(diào)色板睬捶，從主調(diào)色板選擇最多三個(gè)色調(diào)，從輔調(diào)色板選擇 一個(gè)強(qiáng)調(diào)色
深背景淺文字：
重要 （87%透明）
次重要 （54%的 透明）
提示性近刘、被禁止文字（26%的透明）
淺背景深文字：
重要 （100%透明）
次重要 （70%的 透明）
其它 （30%的透明）
工具欄和狀態(tài)欄
工具欄擒贸、大色塊（色調(diào)500）
狀態(tài)欄 （色調(diào)700）
強(qiáng)調(diào)色
動(dòng)作按鈕臀晃、開(kāi)關(guān)、滑動(dòng)條 使用強(qiáng)調(diào)色
排版
