--- title: 第一版个人主页的设计与实现 date: 2020-02-27T00:00:00.000Z lastmod: 2024-04-10T00:00:00.000Z tags: [tech, design] description: 一些对于实现细节与设计理念的梳理陈列 summary: 系统整理 v1.ceynri.cn 主页的实现细节与设计理念：从交互动画、视差与性能优化到页面结构与样式思路的复盘。 canonical_url: https://ceynri.cn/blog/v1-ceynri-cn-tech-and-design/ --- # 第一版个人主页的设计与实现 > 系统整理 v1.ceynri.cn 主页的实现细节与设计理念：从交互动画、视差与性能优化到页面结构与样式思路的复盘。 > 注意：本文所记录的页面现已暂停使用，仅保留体验地址： > > 关于本文所提到的页面对应的搭建心路历程，可以先行阅读《[记第一次建站的心路历程](https://ceynri.cn/blog/v1-ceynri-cn-build-summary/)》。 > > 本文全文较长，故提供简要的目录说明内容结构： > > - [技术要点](#技术要点) > - [JavaScript](#JavaScript) > - [效果实现](#效果实现) > - [性能优化](#性能优化) > - [CSS](#CSS) > - [HTML](#HTML) > - [移动端](#移动端) > - [网站](#网站) > - [设计思路](#设计思路) > - [色彩](#色彩) > - [样式](#样式) > - [交互](#交互) > - [手法](#手法) # 技术要点 本站的实现对我而言是一次较为完整的学习与实践，对本站所用到技术相关内容进行简单的记录。 ## JavaScript ### 效果实现 - 光标 - 页面载入动画 - 平滑滚动 - 渐变滚动 - 视差滚动 - 视差浮动 - 3D 透视 - 进度条 ### TweenMax.js **TweenMax.js** 提供了丰富的缓动动画效果，具有较高的性能与非常好的兼容性。本站在绝大部分元素的以下属性的变化上，都使用了 TweenMax.js 进行动画处理以求达到流畅的视觉效果体验： - 元素大小 - 元素的空间属性 - 颜色变化 - 透明度改变 使用最多的是 `TweenMax.to()` 函数，其能接受 `paused` 参数将动画保存下来，然后对保存的函数调用 `play()` 与 `reverse()` 方法实现动画的正向/逆向播放。 > `reverse()` 虽然大大简化了代码，使代码更加漂亮，但也给我带来了不少的 bug（主要是动画相互冲突的 overwrite 问题）。 #### 光标 光标代码是我写的最大的一个 js 文件，其大致流程是： 绑定页面内的光标元素组 -> 设置相关属性 -> 生成动画 -> 为不同元素的事件绑定相应的动画 为了设计光标的交互效果改了不少的版本，更麻烦的是鼠标这种掌握在用户手中的元素很容易产生许许多多的 bug，调教好它是我花费时间最久的一个部分。 （图：光标结构） （图：光标交互效果） #### 页面载入动画 因为页面的内容比较重视整体，所以让用户看到未加载完成的页面一点一点并不连贯的加载并不美观，引入载入动画，让其在页面加载完成后再显示主题页面，在视觉上使加载页面的过程是连贯的（因为加载中时的页面内容是被遮挡住的）。 但坏处是如果用户访问页面时有文件请求被阻塞、或者网速过慢，使页面一直处于加载状态，可能会导致整个页面无法浏览，一直被载入动画的遮罩挡住。解决办法是超时时引导用户重新刷新页面、或者强制播放载入完成动画显示页面的已加载部分。 （图：载入动画） #### 滚动 滚动效果方面分为了平滑滚动、渐变滚动和视差滚动三个部分，分别负责不同的效果。 其中，平滑滚动的实现是将整个页面的所有内容作为一个元素包裹起来，并且不与 body 元素绑定，即浏览器窗口滚动时，并不会造成页面的滚动，从而屏蔽默认的滚动效果。再用代码实现平滑的滚动效果，让页面接收到滚动事件时执行相应的缓动动画。 渐变滚动指的是页面的第二部分——「about」部分，文字的渐入与渐出效果，通过监听当前文段在窗口坐标系下的坐标改变透明度实现。 （图：渐变滚动&视差滚动） #### 视差 视差滚动则对于特定的元素监听滚动的距离，将其乘以对应的倍率即可。简单的元素可以使用 CSS 的 `perspective` 属性实现，但是如果元素稍微复杂一点、超出了一层的父子关系，则使用 JavaScript 计算对应的 `transform` 值来实现更加合适。（效果见上面的「渐变滚动」） 视差浮动是对鼠标窗口坐标的监听，改变不同元素的空间坐标，增强元素的空间感（仅运用在第一部分（主标题）和背景中）。 （图：视差浮动） #### 3D 透视 3D 透视指的是 My Works 部分有关鼠标于 work 方块的交互。首先实现的是基本类，允许 work 方块根据鼠标与其的相对坐标进行三维空间上的旋转，同时有 z 轴方向上的位移，以在旋转中能够产生透视感；再写专门的类去对应不同的 work 方块，增加它们之间不同的交互特性，给用户更加新奇的交互感。 （图：3D 透视-笔记卡片） （图：3D 透视-喷气式背包飞行员卡片） #### 进度条 进度条在这里承担了进度条的外观和滚动条的功能，所以在交互逻辑上需要在一般的滚动条基础上做改进。假设根据鼠标按下的位置划分为「在进度条已达到位置」和「进度条未达到位置」，则： - 「点击」（鼠标按下后无移动即抬起），会跳转到对应的页面位置，无论其点击的位置是进度条已到达位置还是未到达位置。 - 「拖拽」则分两种情况： - 如果是尚未达到的进度位置，则先跳转至鼠标按下位置所对应的页面位置，然后再允许用户拖动进度条； - 如果按下的位置是进度条已达到的进度位置，则表现为滚动条的交互逻辑：不跳转页面位置，允许用户拖动当前的进度条以当前位置为起始点上下移动。 （图：可拖动可点击的进度条） ### 性能 #### 流畅性 大量的交互动画往往会带来更大的性能问题，优化它们是非常必要的，毕竟流畅是网页浏览体验中最重要的体验之一，失去流畅感，即便再有意思也会让人觉得很可惜。 本网页陆续采用了几个角度对网页的流畅性进行了性能优化： - 优化代码结构 - `requestAnimationFrame` - 调整`EventListener` - `{ passive: true }` - 用低频动画代替高频动画 - 直接砍掉产生性能瓶颈的脚本 #### 优化代码结构 优化代码结构是最朴实的方法，这一点不论在什么阶段都应该注意它。大的方面可以讲代码复用、方法提取，小的地方可以是 DOM 元素引用保存、if 判断结构优化等等。优化代码是一个很泛的目的，通过不断地学习、阅读优秀的源码，我们可以学到更多的精彩的代码写法。 #### requestAnimationFrame 对于做 JS 动画，`requestAnimationFrame` 是一个很棒的 API。 与 `setTimeout` 相似的是，它们会被「定时」执行，但不同的地方在于：`requestAnimationFrame` 会在浏览器进行每一帧的渲染之前执行并完成。 而与各种 `EventListener` 相比，`requestAnimationFrame` 一般在 1s 内只会执行 60 次，即 60FPS。`EventListener` 则没有频率限制，如果执行太快，超过了屏幕刷新率，会产生无效的渲染和重绘，反而导致页面的性能下降，出现卡顿。 而且 `requestAnimationFrame` 从语义上告诉了浏览器我们要执行一个动画，浏览器会去优化它，还可以根据当前 CPU 负载情况调整帧数。 #### EventListener 减少不必要的 `EventListener` 也是有效的方法之一。 我们不应该滥用 `EventListener`，这会导致一个事件的发生会执行更多的代码，如果我们仅仅为了在不同的代码区域获取鼠标位置而反复添加 `EventListener`，会产生较大的代码冗余的情况。 另外，可以不在 `EventListener` 内执行的代码都应该提出来放在外边执行，尽可能精简一个 `Event` 触发所要执行的代码。 对于不同的 `EventListener`，我们也要根据触发频率来不同的对待。像鼠标移出事件 `mouseleave`、点击事件 `click` 往往只会执行一次，即便事件回调函数性能稍差也不会带来巨大的影响；而像页面滚动事件 `scroll`、鼠标移动事件 `mousemove`，它们是相对连续的，往往会在一个时间段反复被触发。如果事件回调的代码消耗性能较强，则直接会对页面的流畅性产生非常大的影响。 而且如果可以使用低频的事件实现相同的效果，就不要使用高频事件。例如：我们需要在鼠标移入某一区域时改变该区域的背景颜色，如果使用监听该区域的 `mousemove` 事件是同样可以实现这样的效果的，但它每一次鼠标移动都会触发它，而其实我们只需要`mouseenter` 事件一次执行该效果就可以了。类似地，我们还应分清诸如 `mouseout` 与 `mouseleave`、`mouseover` 与 `mousemove` 的区别，选用更合适的事件以提升代码性能。 最后，如果某一个事件只用触发一次之后就不会再使用到，最好在该事件的回调函数中的结尾处进行 `removeEventListener`，这既是为了性能考虑，也可以节省不必要的内存占用。 #### `{ passive: true }` 除了要更加注重这些高频事件的代码性能以外，我们还可以通过设置 `EventListener` 方法的第三个参数为 `{ passive: true }`，来更好地减少事件回调所要计算的代码。 `{ passive: true }` 的意思是让 `EventListener` 不再先阻止原来会发生的事件，即 `preventDefault()`。 对于默认情况，浏览器是不知道 `EventListener` 所回调的事件中有没有包含 `preventDefault()`，所以会先阻止默认事件执行，然后等回调事件执行完毕后再执行默认事件；但是大部分时候，我们其实并不会阻止默认事件，比如页面滚动，我们可能只是想获取滚动的参数，而不是禁止页面滚动。所以 2015 年 DOM 规范新增了 `addEventListener` 的第三个参数可以接收一个对象的规定，通过设置 `{ passive: true }` 来使 `preventDefault()` 失效，使默认事件变得流畅。 > 这种优化一般只用于触摸、滚动事件，其他事件没有必要使用 #### 减少高频动画 「减少动画」与我们原本「增加动画」的目的其实是背道而驰的，这里体现的是「理想效果」与「视觉效果」的权衡。 本网页一开始增加了许多的动画效果，并在开发的时候暂时忽略了流畅性的要求，而在后期进行性能优化时，发现过多的高频动画本身（如只要鼠标移动，标题、背景图就会跟着反方向移动；页面滚动时，若干元素还会自己增加/减少自己的滚动距离）就是一个性能瓶颈。到了这种程度时，最好能够考虑优化它们的触发方式以减少它们的频率。如果仍然有性能问题，最后的方法就是舍弃它们，以保证用户的流畅体验，这也是在保证其他动画的视觉效果。 #### 其他性能 提到「网页性能」可能新手（包括我）第一个想到的是网页「运行」的性能，即网页浏览、动作响应时的流畅性，其实除了这方面，页面的加载与渲染速度同样是非常重要的指标。如果一个网页加载或者渲染得太久，用户的烦躁程度会大幅上升。对于这方面，我们可以从以下角度进行努力： - 压缩代码、多文件合并 - 启用 GZip 压缩 - 压缩图片为 webp 格式、base64 转码内嵌 - JS 代码异步加载/预加载（async、defer、prefetch） - 懒加载 - 精简 DOM 元素个数 - 缓存、CDN 优化 --- ## CSS 作为偏向于视觉设计的网页，CSS 相关的代码也不比 JavaScript 要少。不过更多的都是排版相关的基础问题，碰到了只要解决后总结好基本下次变得更加熟练。 - SCSS 预处理器 - 动画 - transition / translate / scale / rotate / opactiy - animation / keyframe - 复杂动画交给 JavaScript - 性能 - translate3d / will-change - var 变量 - fix-blend-mode ### SCSS 预处理器 在本项目中我第一次尝试 SCSS 语法来编写 CSS 代码，实际上非常容易上手，简单阅读完文档并做好[完整的笔记](https://notes.ceynri.cn/notes/css/sass.html)后，编写 CSS 确实要方便许多。 ### 动画 **动画**方面，就是 `transition` 渐变效果与 CSS3 新出的 `animation` 属性相配合，多加使用后简单的 CSS 代码也能写出很棒的动画，即便是在普通的网站中，使用它们也能够在小细节上给用户好感。 不过，复杂动画使用 CSS3 可能就不一定合适了，这主要看是否属于 CSS 的强项领域中，否则遇到兼容性等问题还是没有办法的事情，毕竟其不是编程语言，具有一定的限制。 ### 性能优化 #### 「黑科技」 如果遇到了**性能**问题，CSS 黑科技 `translate3d` 和 `will-change` 作为最后的手段说不定能帮你一忙。 在现代浏览器中，遇到 3D 变换会启用 GPU 进行硬件加速，而 `translate3d` 是非常具有代表性的 3D 变换，所以在一些 2D 动画较多的地方使用它代替 `translate` 有可能能够对性能有所帮助。 `will-change` 则是在 CSS 代码中提前告知浏览器，某些属性可能会发生动画效果，促使浏览器积极地调用硬件加速去优化它，但这个属性是最后的手段，并不应该随便使用。 #### 减少高频动画 和 JS 一样的，触发频率过高的 CSS 动画（甚至只是通过伪类进行单纯的属性值改变）同样会引发性能问题，本站中鼠标与 42 个 ABOUT 文本元素原本都会产生 `:hover` 动画，但如果在页面滚动时鼠标不断触发该动画，在低端的设备上会容易产生卡顿问题。 （图：点击 ABOUT） 我的解决方法是将 `:hover` 的触发条件改为了 `:active`，这样鼠标移动+页面滚动就不会频繁触发该动画。 ### var 变量 CSS3 新引入的 **var 变量**也是一个不错的玩意，常用的是将颜色定义为 CSS3 变量，便于使用 JS 替换该变量值，达到一键更换主题配色的效果，无需到处更改各种元素的颜色属性值。 ### fix-blend-mode 页面的反色效果使用的是 `fix-blend-mode: exclusion` 实现的，这属性很酷，我很喜欢，点名表扬一下。 > 还有 `filter` 也是可以很酷的属性，但在本页面中没有什么使用（用了 `drop-shadow`），有视觉效果需求的话 `filter` 属性是非常值得了解的对象。 --- ## HTML 作为一门标记语言，HTML 是每个程序员的基本功了。 - Emmet 语法 - HTML5 语义化标签 ### Emmet 语法 Emmet 是一种提供自动补全的语法。举个简单的例子，我们可以输入 `!`，然后输入Tab键，即可自动补全以下内容： ```html Document ``` 再比如： ```html table>.row>.elem+.elem ``` 按下tab键，我们可以得到： ```html
``` > 如果对 Emmet 语法有兴趣，可以看看这篇我写的 [Emmet 笔记](https://notes.ceynri.cn/notes/html/emmet.html) ### 语义化标签 语义化是 HTML5 的重点之一，这部分我也是一边学习、一边通过别人的优秀代码中了解到不同的语义化标签，`
`、`
`、`