注：本文為個人閱讀筆記，文章版權歸原作者，閱讀完整版請轉至 掘金小冊 購買
大廠 UI 開發概述
UI 開發
隨著 HTML5 和 CSS3 相關技術標準的出現與普及，重構工程師除了前面提及的基本工作，還要肩負「CSS3 動效開發」等 UI 相關的工作，「重構」的工作定義已然無法契合新時代的要求，于是便有了「UI 開發」的概念。一名合格的「UI 開發工程師」不僅需要會做「PC 端網頁」、「移動端網頁」，還需要會做各類強交互、多動效的[ HTML5 營銷活動頁面]，甚至還要做動效及腳本邏輯復雜的[HTML5 小游戲]。-
UI 開發的能力模型
UI 開發的能力模型
這個能力模型長著一張三角臉，往下代表能力的基礎性，往上代表能力的進階。
其中「基礎頁面開發」、「響應式頁面開發」、「滑屏應用開發」以及「動畫效果開發」是崗位的基礎能力要求，「游戲開發」是高階能力要求。
換一個說法，掌握「基礎頁面開發」，我們就能應付「PC 端網頁」的開發；掌握「響應式頁面開發」，我們可以擼「移動端網頁」；掌握了「滑屏應用開發」以及「動畫效果開發」，我們能開發各類強交互、多動效的「 HTML5 營銷活動頁面」；而掌握了「H5 游戲開發」，我們才能做動效及腳本邏輯復雜的「HTML5 小游戲」。
基礎頁面開發
依據設計稿（PSD 或 Sketch）及交互要求，利用 JavaScript、HTML 和 CSS 等技術將設計稿高保真轉換為網頁的能力。
除了熟練使用 JavaScript、HTML 和 CSS 等基礎的網頁技術，「基礎頁面開發」另一個非常重要的技能是「切圖」
5個步驟完成頁面開發
- 設計稿審查
- 確定設計稿的開發友好性（是否有還原成本高或無法還原的地方）
- 確定一些特殊的元素是否有合理的邊界處理（如文案超出外層容器的邊界怎么辦）
- 確定頁面的框架結構（Layout）
- 確定跨頁面可復用的組件（Site Component）
- 確定當前頁面可復用的組件（Page Component）
- 編寫頁面骨骼框架
- 填充網頁血肉內容
- 方法1 - Extract Assets 資源生成器
- 方法2 - Export Artboards, Layers, and more
- 方法3 - PS 動作切圖
- 潤色 - 類、id命名優化
- 兼容性測試
漸進增強與平穩退化。
在低端瀏覽器能夠保持可用性和可訪問性，然后再漸進增強，逐步增加功能及優化用戶體驗。
如果遇到兼容性問題，可以按如下步驟處理：
- 確認觸發的場景：什么瀏覽器，什么版本，什么情況下觸發的問題，做到穩定復現。
- 找出問題原因：是什么問題導致的，具體表現如何？
- 確定解決辦法：參考現成的解決方案，如哪些屬性不能使用以及相應的 Hack 處理
- 收集兼容性處理方法，積累成文檔...
響應式頁面開發
利用一套代碼實現頁面的布局和排版以適配不同分辨率的設備。
響應式頁面開發要求我們解決兩大問題：
- 為不同特性（如橫屏還是豎屏等）的瀏覽器視窗使用不同的樣式代碼
- 讓頁面元素的尺寸能夠依據瀏覽器視窗尺寸變化而平滑變化
步驟 1 - 添加 viewport meta 標簽
<meta name="viewport" content="width=device-width, initial-scale=1">
步驟 2 - 使用 Media Queries
6個參數
| 參數名稱 | 參數描述 |
|---|---|
| min-width | 視窗寬度大于或等于指定值時，@media 規則下的樣式將被應用 |
| max-width | 當視窗寬度小于或等于指定值時，@media 規則下的樣式將被應用 |
| min-height | 當視窗高度大于或等于指定值時，@media 規則下的樣式將被應用 |
| max-height | 當視窗高度小于或等于指定值時，@media 規則下的樣式將被應用 |
| orientation=portrait | 當視窗高度大于或等于寬度時，@media 規則下的樣式將被應用 |
| orientation=landscape | 當視窗寬度大于高度時，@media 規則下的樣式將被應用 |
2種用法
- 方法 1，使用 link 標簽，根據指定特性引入特定的外部樣式文件
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
- 方法 2，直接在 style 標簽或 樣式文件內使用 @media 規則
@media (max-width: 640px) {
/當視窗寬度小于或等于 640px 時，這里的樣式將生效/
}
樣式斷點
| 斷點名稱 | 斷點描述 |
|---|---|
| mobile | 移動設備斷點，視窗寬度 ≤ 768 px |
| tablet | 平板電腦設備斷點，視窗寬度 ≥ 769 px |
| desktop | 桌面電腦斷點，視窗寬度 ≥ 1024 px |
| widescreen | 寬屏電腦斷點，視窗寬度 ≥ 1216 px |
| fullhd | 高清寬屏電腦斷點，視窗寬度 ≥ 1408 px |
步驟 3 - 使用 Viewport 單位及 rem
- 方法 1 - 僅使用 vw 作為 CSS 長度單位
- 方法 2 - vw 搭配 rem，尋找最優解
- 給根元素的字體大小設置隨著視窗變化而變化的 vw 單位，這樣就可以實現動態改變其大小
- 其他元素的文本字號大小、布局高寬、間距、留白都使用 rem 單位
- 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度，實現布局寬度的最大最小限制...
滑屏應用開發
利用 JavaScript 和 CSS3 來實現單頁面應用的滑屏效果，包括上下滑屏、左右滑屏，以及局部元素的滑動切換效果。
善用利器
在平時工作過程中，考慮到項目的緊迫性和實現成本，我們大多數時候會使用業界已有滑屏組件，如：
- Swiper：Most modern mobile touch slider with hardware accelerated transitions....
知其所以然
滑屏應用的實現分為兩大部分：
- 判斷用戶的手勢動作
- 根據手勢動作執行相應滑屏過渡動畫
手勢動作判斷
手勢動作判斷是實現滑屏應用的核心邏輯。 對于上下滑屏應用，我們主要實現的手勢動作有：瞬間的上下滑動和按住拖拽滑動。
瞬間的上下滑動除了要考慮滑動的始末位置，還要考慮時間間隔，即滑動速度。若滿足一定的速度則代表用戶是果斷切換上下屏的動作，反之，則是猶豫保留在當前屏的動作。...
性能貼士
在開發滑屏應用的時候，我們應該盡可能做到以下幾點來保證頁面的順暢體驗：
- 做到延遲加載，避免浪費資源和并發加載資源數過高。
- 做到預加載，預加載必要的資源，避免白屏。
- 在滑屏動畫過渡期間，不要做繁重的任務，避免因占用資源過高而導致卡頓。
本篇（1）主要記錄了UI開發的幾個主要步驟，下一篇（2）會就動效開發做具體展開。
背景：B2B SaaS產品 創業公司；
人設：產品轉崗的運營人；
目標：完善B2B SaaS產品運營體系，完成全年引流1000+Leads的目標；
地點：浙江 · 杭州；
時間：2018年4月1日；
