純干貨，理論不細(xì)談。主要是要開始設(shè)計前要留意的幾點。
去年工作中總結(jié)的，一直忘記分享出來，現(xiàn)在看看應(yīng)該還有用，以及可以思考的地方。
------開始-----
一、顏色
配色工具網(wǎng)站：
http://www.peise.net/tools/web/-
常用的色值
image
選取搭配色時的配色原則
http://www.xueuiba.com/jiaocheng/secaidapei/2015/09/11/869.html
二、字體
為確保移動終端的通用性，首選 PingFang SC 作為中文字體，以兼顧 Web 版和 Mobile 端。
字號
apple和google都在官方文檔中，對Typo進(jìn)行了定義。
http://www.ui.cn/detail/165581.html
考慮到中文和英文的區(qū)別，在實際使用情況下：
| 文字類型 | 字號（PX） |
|---|---|
| 頂部標(biāo)題，大按鈕文字 | 36 |
| 單行列表內(nèi)左側(cè)的標(biāo)題 | 34 |
| 單行列表的右側(cè)操作文字（右箭頭旁邊的） | 32 |
| 列表表頭標(biāo)題，備注信息，說明文字 | 28 |
| 時間版權(quán)信息等用戶不關(guān)心的文字 | 24 |
| 最小提示文字 | 22 |
移動端設(shè)計稿中 （750寬度尺寸）文字最小不小于22px
| 文字類型 | 字號（PX） |
|---|---|
| 頂部標(biāo)題，大按鈕文字 | 36 |
| 單行列表內(nèi)左側(cè)的標(biāo)題 | 34 |
| 單行列表的右側(cè)操作文字（右箭頭旁邊的） | 32 |
| 列表表頭標(biāo)題，備注信息，說明文字 | 28 |
| 時間版權(quán)信息等用戶不關(guān)心的文字 | 24 |
| 最小提示文字 | 22 |
網(wǎng)頁端設(shè)計稿，網(wǎng)頁字號最小12px，常用微軟14px/16px作為正文
| 文字 | 字號（px） |
|---|---|
| h1 | 36 |
| h2 | 30 |
| h3 | 24 |
| h4 | 18 |
| h5 | 14 |
| h6 | 12 |
字重（加粗）
使用文字組合時，注重對比，通過字重（weight）加粗
三、圖標(biāo)
圖標(biāo)風(fēng)格要保持一致，色塊型就都用色塊，線條型就都用線條，不要混用。
ICON主要使用以下幾個網(wǎng)站資源：
- 1.Google Design 圖標(biāo)庫 https://design.google.com/icons/ （自行翻墻）
- 2.icomoon 三種類型的圖標(biāo)pack, 多種線條，線條，塊面
https://icomoon.io/#icons - 3.fontawesome http://fontawesome.io/
- 4.阿里巴巴圖標(biāo)庫 http://www.iconfont.cn/
純色圖標(biāo)如需變色，可使用SVG格式，程序可以控制其變色，節(jié)約資源。
四、排版和布局
1.行高和行間距
行高通常情況下設(shè)置為字號的1.5-2倍
字體越大，四周需要的空間就越多，設(shè)計師在設(shè)計時需要尤其注意，修改字號時，越大的字，越要在周圍留足空間。
文字排版時要充分利用對比原則，避免整個頁面無重點，所有元素太過相似。
如不同，就截然不同。
2.間距和柵格
一定要借助網(wǎng)格做設(shè)計
間距決定頁面中的親疏關(guān)系，信息結(jié)構(gòu)的分類
一個頁面中的間距體現(xiàn)出的親疏關(guān)系是一致的，有規(guī)律的。
網(wǎng)格可以幫助在設(shè)計中，提醒設(shè)計師遵循間距的一致性和規(guī)律。
柵格則幫助頁面在進(jìn)行響應(yīng)式設(shè)計時，保持相應(yīng)的比例。
PC網(wǎng)頁端：通常為12等分，每欄之間間距(gutter)30px （每列左右均有 15px）
柵格的gutter可以修改，借助網(wǎng)站http://grid.guide/ 可以選擇合適的grid
如需留白較多的頁面設(shè)計，則可以將gutter設(shè)置較大。
移動端:
移動端柵格化不像PC網(wǎng)頁那么重要，常見的柵格方案有4或者6,有興趣可以研究。
4欄，每欄之間間距16dp（32PX）
https://material.io/devices/
6欄
http://www.sohu.com/a/134535396_613159
實踐中，考慮到移動頁面的信息密度高，布局多樣。如果嚴(yán)格按照柵格會令頁面死板。所以我們內(nèi)容區(qū)域還是以最小單位8作為間距基礎(chǔ)，元素與元素之間按照8,16,24,32的倍數(shù)規(guī)律調(diào)整間距親疏關(guān)系。
行業(yè)中對于設(shè)計的最小單位沒有完全一致，5,6,8都有。我們秉承一個原則：一旦你選擇了一個最小單位，整個頁面的間距都要依照這個單位的倍數(shù)表現(xiàn)，控制布局的疏密節(jié)奏。
五、組件
1.響應(yīng)式網(wǎng)頁
響應(yīng)式的網(wǎng)頁則建立在上述柵格系統(tǒng)中，元素的寬度沒有固定大小，按照百分比顯示。頁面采用彈性布局（flex-flow）和流式布局(fluid)。
- 組件
網(wǎng)頁組件使用現(xiàn)成的網(wǎng)頁前端框架
element UI
http://element.eleme.io/#/zh-CN/component/radio
Bootstrap
http://v3.bootcss.com/components/
Semantic UI
https://semantic-ui.com/introduction/getting-started.html
- 實例
bootstrap網(wǎng)頁模板
https://startbootstrap.com/template-categories/all/
2.Android
- 組件
官方網(wǎng)站最全組件
Google Design Resources https://design.google.com/resources/
實例
一些使用MD風(fēng)格的APP設(shè)計
https://ui8.net/products/material-ui-kit
說明：MD的風(fēng)格在國內(nèi)并不為主流，國內(nèi)安卓手機(jī)大多為定制系統(tǒng)，UI設(shè)計風(fēng)格更加趨近于IOS。所以在實際開發(fā)中，為了使用一套設(shè)計稿適配多端，我們不采用MD設(shè)計風(fēng)格。按照IOS和移動網(wǎng)頁的通用風(fēng)格進(jìn)行設(shè)計。
但是google design出品的官方文檔仍然值得閱讀學(xué)習(xí)，MD圖標(biāo)資源庫可以使用，思源字體可以使用。
3.iOS
4.移動網(wǎng)頁
- 組件
微信weUI: https://weui.io/
weUI設(shè)計資源文件 https://github.com/weui/weui-design
vux:https://vux.li/demos/v2/?x-page=v2-doc-home#/
--------END---------
