網頁UI設計師都需要懂哪些知識 UI設計師需要了解的知識點大全
網頁UI設計師是當下很受歡迎的崗位，不單單要懂得UI設計平常的知識點，為了在日常工作中可以跟web前端工程師更加高效的合作，肯定在專業上達到共識，才可以有效的溝通，最后做出優秀的作品。
網頁UI設計師都需要懂哪些知識 UI設計師需要了解的知識點大全
1. 尺寸
一個網頁的尺寸設置與屏幕分辨率和瀏覽器相關，我們不可能滿足所有用戶的最佳尺寸，但我們能做的是讓絕大多數用戶感覺是最佳的。
我們可以通過統計分析工具獲取用戶屏幕分辨率數據，從而為設計提供參考。例如使用Google Analytics 來獲取用戶屏幕分辨率數據。
移動端適配
移動端可根據業務需求和產品特點選擇響應式適配，還是獨立移動版設計，對于頁面結構和功能簡單的站點，適用響應式，對于大型業務復雜的站點，移動端建議獨立版本設計。移動端字體大小使用 rem 單位，以適配不同手機分辨率，保持整體縮放。移動端適配原則：文字流式、控件彈性、圖片等比縮放。
Retina 屏適配
設計師將 logo、icon、固定位圖片等圖片元素生成 2 倍大小提供給前端，前端利用 Media Query 實現 Retina 高清屏適配。
2. 字體
進行跨平臺的字體設定，力求在各個操作系統下都有最佳展示效果。
字體家族
中文字體：PingFang SC(iOS 優先)、Hiragino Sans GB(備用字體)、Microsoft YaHei(次級備用字體)。
英文字體：Helvetica Neue(優先字體)、Helvetica(備用字體)、Arial(次級備用字體)。
字體使用規范
設定字體使用規范，如主標題、次標題、小標題、正文、輔助文字、失效文字、鏈接文字等字號、顏色、樣式等。
補充
字號不得小于 12px，標準 icon 可轉成字體圖標，特殊字體可以使用 WebFont。
3. 排版
注意行高和段落、標點和空格、對齊、文案長度、層級引導。
行高和段落
行高默認為字號的 1.5 倍。段落間距一般為字號的一倍寬。
4. 色彩
設計中對色彩的運用首要應考慮到品牌層面的表達，另外很重要的一點是色彩的運用應達到信息傳遞，動作指引，交互反饋，或是強化和凸現某一個元素的目的。任何顏色的選取和使用應該是有意義的。
色彩和交互
在交互行為中需對色彩做變化時，建議采取在顏色上添加黑色或者白色并按照 n+5% 的規律遞增的方式來實現。以下圖為例，當鼠標 hover 某個特定元素，就視為浮起，對應顏色就相應增加白色疊加，相反點擊的行為可以理解為按下去，在顏色上就相應的增加黑色的疊加。
5. 布局
在布局時遵循尺寸規則、交互和視覺原則，建議使用柵格系統進行布局。
柵格系統
最常見的是 12 列柵格系統，例如 Bootstrap 的柵格系統，支持將一行分成 1 列、2 列、3 列、4 列、6 列等，并提供了強大的響應式布局方案。
6. 動畫
設計需了解一些常見動畫效果、實現手法、和 js 動效庫，例如：漸隱、縮放、移動、伸縮、搖擺等，便于和前端溝通。
通過六個基本的專業知識，讓網頁UI設計師跟前端達到共識，在工作中更加有效的溝通，普遍網頁UI設計師已經是公司 不可缺少的崗位之一。創客學院提供免費的UI在線視頻教程，小白到精通的系統學習之路。有助于在這些知識點上跟程序達成共識，更加暢通無阻的進行溝通交流。
the end
- 贊
