工作经验分享

此网站内容是:工作经验分享类网站: 网页制作经验谈、小工具应用、XXX的研发日志、前端经验分享、自动化测试开源、文字极客、个人开发测试使用网站、PHP 开发等。


只需要在热水哥后面加 / 再加 代码,如“111.html” 就能查库存

库存= 111.html | 华润 = hr.html

hr库存地址
华润查单工具电脑版
原主页
交流群3千人①群:14106910
交流群3千人②群:7579001
交流群③群:671587189

放货①群:5651997
放货②群:720048909
放货③群:313374010

建设过程

基本构想

国内外很多网页设计师都建议在开工之前先画草稿(线框)图,但我一般不用这种方法,只是在一个记事本里记下在脑海里一闪而过的想法。因为每次计划做一个网站的时候,我脑子里就已经浮现出了它大概的样子,虽然很模糊,但我觉得它没必要太清晰。很多创意的灵感都是在做的过程中发现的,所以只要脑子里有一个大概的方向就可以开工了,具体的细节部份一边做一边想即可,没必要一开始就把自己的思维给框住。根据大概的构想,我先整理出了一个大概的制作流程:

基本构想 → 设计规划 → 框架构建 → 优化文字 → 细节粗调 → Retina 处理 → 响应式处理 → 动画制作 → 细节微调 → 回迁上线 → 离线缓存和 Web App → 多语言版本

设计规划

谈到这个网站的设计,就必然要谈到 Bootstrap。这是我首次使用 Bootstrap 框架制作网站。其实开始我一直在犹豫要不要用它,因为它预置了很多 CSS 样式和框架,用起来太方便了,以致于我觉得会减少那种完全自己设计制作的成就感。后来由于开发时间有限,就采用了它,但主要只使用了它的框架系统,界面元素部份以自己写的为主。页面由七个独立模块组成,按顺序分别是:简述、旅行、摄影、创造、Apple、联系和关于,每个模块都有它自己的特点。这种模块化的设计也方便做响应式处理。

框架构建

解析测试版域名,挂一个简单的页面测试

引入 Bootstrap,测试

研究了一下 Bootstrap 的文档,做出了大概的框架,开始做地图的部份

细节粗调

这一步把所有的元素都摆到位,实现各元素基本的功能。

逐步录入地图的坐标点数据

坐标点数据录入完成,简单做一下完善地图的细节

给 header 换个背景看看

用简单的文字先拼出各个模块大概的样子

当时的记事本草稿

Retina 处理

Retina 也就算高清视网膜屏幕的支持,作为一个“果粉”,这点当然不能放过。技术方面,我先试用了一些 jQuery Retina 插件,但普遍都有加载速度慢的问题。看来还是不能偷懒,只有自己写。思路是用 JavaScript 检测 devicePixelRatio,若是 Retina 屏幕就将值写入 Cookie,然后刷新页面,再用 PHP 读取该 Cookie,输出对应的图片(高清或普通)。在 Retina 的 Macbook Pro 上测试还遇到了各种各样的奇葩问题,逐个修复后最终效果确实不错。后来发现 iPhone 等小屏幕 Retina 设备不需要使用针对 Retina Macbook / iPad 制作的大尺寸图片,只要将普通尺寸的图片缩小即可,所以再给 JS 增加了检测 screenwidth,PHP 再做相应的调整,提高了小屏幕 Retina 设备的加载速度。

响应式处理

其实我在响应式设计开始流行之前,就已经在试着应用了,到现在可以说已经比较熟悉了,所以没有遇到太多技术问题。

动画制作

动画的设计和制作花费了不少时间,既要有特色,又要够酷炫,又不可浮夸,还要考虑性能和兼容性等等。本来还设计了一些动画,但经过反复调试,发现容易使在某些设备和浏览器崩溃,于是又移除掉了。但这个联系方式的交互还是我比较喜欢的,在一个邮箱地址中隐藏了几个不同的联系信息,可以分别切换显示。

细节微调

有一些略为浮夸的设计也换掉了,比如下面这两个就是被换掉的头像彩色阴影和 Apple 模块的角标

回迁上线

测试完成,从测试服务器迁回主服务器,解析域名。把网站发给身处各地、使用不同网络的朋友们测试。

离线缓存和 Web App


个人网站第七次改版

从 2010 年起,我每年都会重新设计与开发一次自己的个人网站,每次改版都会整理自己在过去一年里所学到的东西并与大家分享。直到 2015 年,几乎是在准备第六次改版的同时,我忽然有了二维信息流、模块化内容和私密社交网络的想法,于是开始构思如何将这些想法转化为一个产品、设计基本界面、开发交互原型

2016 年开始,我几乎所有的时间精力都用在了 Vary 的开发上,无暇顾及个人网站,持续到 2017 年底才暂告一段落,紧接着又开始为我的个人摄影作品展示平台 Camarts 重新设计和开发全新版本,直到今年首个测试版 PWA 上线之后,我才有心思回顾这些年的成长历程,开始第七次改版。

迟到了三年的第七版,终于在今天正式上线。

新版运用了时下流行的超大字号、渐变文字、弥漫投影、错位堆叠等设计元素,继续保持极简风格;技术方面大量应用了 CSS Grid 和 CSS 变量等新规范,也首次尝试使用 GSAP 开发基于页面滚动的渐进式视差动画效果;这也是我首个贯彻 Progressive Enhancement 理念——即内容优先,将页面布局和基本浏览体验与 JS 解耦,无框架或构建工具等硬性依赖,使用纯手写的静态 HTML 与原生 JS 使得在 iPad 上开发成为可能……更硬核的东西就暂且省略,如果大家有兴趣我再另起一篇技术文章详述。

好了,那就不多说,点击这个链接即可体验新版:

One More Thing

先总结下前一个版本的优缺点吧。对我而言,2014 版是一个具有里程碑意义的版本,它将我的网页前端开发水平提升到了一个全新的高度。它不仅有大量炫丽的动画和视差效果,还有各种动态响应技术以及独立开发的移动版本,甚至还有一个基于 WebGL 技术的彩蛋。在硬件配置足够好的设备上浏览的效果自然没得说,但对多数人来说,浏览时总会或多或少地有点不太流畅的感觉,在某些极端情况下,甚至会遇到 Webkit 内核的渲染 bug,把“设计和编程”部分的背景直接卡没了!见下图: