《大厂 UI 开发实战》掘金小册，读后笔记（1）

注：本文为个人阅读笔记，文章版权归原作者，阅读完整版请转至掘金小册购买

前端技术栈

大厂 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....

知其所以然

滑屏应用的实现分为两大部分：

判断用户的手势动作
根据手势动作执行相应滑屏过渡动画

滑屏应用demo

手势动作判断

手势动作判断是实现滑屏应用的核心逻辑。对于上下滑屏应用，我们主要实现的手势动作有：瞬间的上下滑动和按住拖拽滑动。

瞬间的上下滑动除了要考虑滑动的始末位置，还要考虑时间间隔，即滑动速度。若满足一定的速度则代表用户是果断切换上下屏的动作，反之，则是犹豫保留在当前屏的动作。...

性能贴士

在开发滑屏应用的时候，我们应该尽可能做到以下几点来保证页面的顺畅体验：

做到延迟加载，避免浪费资源和并发加载资源数过高。
做到预加载，预加载必要的资源，避免白屏。
在滑屏动画过渡期间，不要做繁重的任务，避免因占用资源过高而导致卡顿。

本篇（1）主要记录了UI开发的几个主要步骤，下一篇（2）会就动效开发做具体展开。

背景：B2B SaaS产品 创业公司；
人设：产品转岗的运营人；
目标：完善B2B SaaS产品运营体系，完成全年引流1000+Leads的目标；
地点：浙江 · 杭州；
时间：2018年4月1日；