本博客已停止维护,仅供浏览存档内容。了解详情 »

我的个人主页第五次改版介绍

经过近 300 小时的设计与开发,我个人主页(www.dandyweng.com)的第五个版本终于和大家见面了。这个版本对于我在网页设计和开发领域来说,具有里程碑意义。

mpr mockup 02
新版页面整体采用目前最流行的全屏视差滚动设计,将页面从上到下整体分割为七个部份,每个区域都有着相对独立的内容、设计风格、层级关系和动画效果,并使用了大量的视觉效果来突出页面的层次感,同时尽可能地保持页面整体的一致性,还综合运用了全屏图片背景、半透明模糊、和 Low-Poly(低多边形)等今年流行的设计元素。

perspective-display-desktop

设计方面不必多说,相信大家自己也能感受得到,接下来重点谈谈技术方面的内容。

我个人主页此前的四个版本都是静态网页,也就是说,几乎没有任何后端程序,开发的重点仅局限于前端的设计和交互的效果而已,这一点也曾被一些后端技术大牛们吐槽过。其实我也并非故意忽略后端开发,而是……我根本没学过啊!还好,经过一段时间的恶补,算是了解了些相关的知识,试着将这次的新版打造成一个真正的动态网页,终结了没有后端程序的历史。

开发应用程序接口(API

在上一个版本中,展示的摄影作品都是直接写在代码里的,维护起来非常麻烦,所以那几张照片从来都没有更新过。而在新版中,我在我的摄影作品展示网站 Camarts 上开发了一个 API 来随机显示精选作品,可通过 ajax 刷新,并且图库会随着 Camarts 的照片发布进度实时更新。旅行足迹地图中的坐标数据也使用了数据库来管理,可以很方便地通过 API 来查询、调用或更新数据。

在新版的网页最底部有一个留言框,在这里留言后,内容会被同步保存到这个博客的留言板中。从技术角度上来讲,我的博客和个人主页是两个完全独立的网站,由于纯 ajax 无法实现数据跨域 POST 提交的请求,所以实现这个功能还真经过了不少周折。还好,后来开发了一个后台中转程序,通过服务器端来请求博客 API 的方式实现了这个功能。

comment-posting-processes

独立设计开发的移动版

新版本在页面加载时,会在服务器端进行检测,为不同的设备提供相应的版本。当使用手机或平板等移动设备访问时,会自动进入一个专门针对移动触屏设备独立设计和开发的版本,就称之为“移动版”吧。移动版根据 Mobile First 原则设计,实现了基于硬件加速的 1:1 触摸滑动,应用了一些适合在触屏设备上的交互方式,比如滑动翻页、拉动刷新、双指缩放等。大家可以在手机上输入网址或者直接扫描下面的二维码来体验:

iPhone-6-in-hand-with-QR

基于重力感应的视差效果

HTML 5 已支持调用移动设备底层的重力感应器和加速度感应器的数据,这次在移动版上我也试着将它们综合地应用一下,在某些界面元素上实现了基于重力感应的视差效果。类似于 iOS 7 系统自带的特效,晃动手机就可以看到,有一点点裸眼 3D 的感觉。当然,在桌面浏览器上也可以用光标来模拟重力和视点变化,移动鼠标就能看到效果,就像这样:

parallax-gif

动态响应和检测

响应式设计早已是老生常谈,但很多人对“响应式设计”的印象还停留在“根据屏幕大小调整页面显示”而已。我认为,真正的响应式设计,是应该根据访客的更多信息来提供相应的内容和设计,从而提供更好的浏览体验,不仅仅是响应屏幕尺寸而已。网页智能化,相信会是未来的趋势。在这方面,我也做了一些初步尝试,比如:

响应系统语言

网页加载时检测访客操作系统和浏览器的语言,如果不是中文,就会自动进入英文版。因为英文更简洁,而且字体选择的空间也更大,所以实际上看起来会比中文版更好看一些,大家可以切换到英文版感受一下。

响应界面风格

页面程序会自动根据访客设备的系统版本适配相应风格的界面,如果使用的是 iOS 7 或 OS X Yosemite 及以上版本,那整体的风格就会更扁平一些,更好地与浏览器和系统 UI 的整体风格融合在一起。所以……就别再争论这次的设计是拟物化还是扁平化了吧,嘿嘿。

检测网络状态

新版中全面应用了服务器端图片压缩技术,会根据移动设备当前的网络环境动态调整图片的压缩率,在 2G 和 3G 环境下将图片压缩得更小一些,以节省流量和提升加载速度;而 LTE 和 Wi-Fi 环境中则是以显示效果优先(暂时仅支持微信内置浏览器)。

检测防火长城

播放我的演讲视频时,会检测天朝的墙,如果访客在墙内就从优酷加载视频,在墙外就从 YouTube 加载,确保境内外的同学们都能顺利看到。大家可以自己搬梯子体验一下。

检测重力

在重力感应方面,除了之前提到的视差效果外,还利用重力实现了一些有趣的小功能。比如,我的头像会根据设备的倾斜度自动调整,无论你怎么旋转,头像始终保持与地面垂直。还有更多,大家自己去发现吧。

服务器端静态缓存

我的个人主页平常访问量并不大,我的单核 CPU 和 512M 内存的小服务器尚可悠然运行。可是每当微博或微信上的一些大号们偶尔推荐了一下我网站的时候……请看下面这个丧心病狂的访问量曲线图:

visits-oct-2014

那么现在问题就来了,为了这 N 久一次的不定期访问量暴增而添置更牛 X 的服务器显然并不现实。再说了,我的所有网站均无广告,所有的运营费用都是自己负担,咱也不是壕,想换更好的服务器也换不起呀!于是只有开动脑筋,想出了静态缓存这个“土办法”:当服务器负载过大时,为一部分访客提供纯 HTML 的静态缓存版本。

这样一来,就算是所有的数据库和 API 服务器全部宕机,还是能看到页面中的绝大部份内容,只是之前提到的那些动态检测功能中有一部份无法使用罢了。

其他方面的改进

CSS 动态化
在新版中,除了基本样式外,把整个 CSS 样式表按照不同功能拆分成几十个文件,再根据前端程序的判断情况用 ajax 分别载入使用,确保每次访问都只加载了需要用到的样式,节约服务器资源,提升加载速度。

应用 WebP 图片格式
WebP 是由 Google 开发的一种全新的图片格式,可以在保证图片质量的前提下最大限度地减少文件体积。在新版中,绝大多数需要占用大量带宽的图片将全部提供 WebP 格式。可惜目前只有 Chrome 和 Opera 浏览器对该格式提供原生支持,对于不支持的浏览器,则自动适配传统的 jpg 和 png 格式图片。

应用 rem 字号
最初,我一直在使用 px 来定义字体大小,后来为了考虑到在浏览器上缩放字体的需求,采用了 em 字号,但它是根据其父元素的字号来调整的,当页面嵌套得很复杂的时候,就会常常导致一些很麻烦的问题。还好,随着 CSS 3 的推进,rem 出现了,它依然有着弹性优势,并且是相对于 HTML 根元素调整字体大小,避免了 em 的问题,用起来非常方便。

应用轻量级框架
由于这次我决定自己设计所有的界面元素和细节,便放弃了自带大量样式和插件的 Bootstrap,转而使用灵活的轻量级框架 skel,它有着非常强大的栅格系统和跨平台支持能力。最重要的是,skel 由于没有内置任何 CSS 样式,所以真的很“轻”,只有 23kb。

彻底放弃 IE 9
因为新版的视差设计是依靠 CSS 3 的特性实现的,在 IE 9 及以下版本中看起来简直惨不忍睹。虽说再花些时间精力可以让它“勉强看得过去”,但似乎并无必要:根据我个人主页最近 90 天的访问统计,IE 9 及更低版本(含其内核)浏览器使用率的总和仅有区区 1.83%,更何况还有对 IE 支持相对更完备些的 2013 版可以看。所以,彻底淘汰的时候来到了,就让它去吧。

大彩蛋!

在新版主页中,隐藏了一个重量级的彩蛋。它应用了一个基于 HTML 5 和 WebGL 的 2D 物理引擎,用于实现一些逼真的碰撞和反弹效果……

怎么找到它呢?其实很简单:连续点击“自由的身心”处,或者在移动设备上“摇一摇”即可(暂不支持部份 Android 设备)。

写在最后

有不少同学都反映新版有些卡顿,这是因为固定背景和视差滚动效果需要耗费大量的运算资源,对显卡的要求比较高。在开发过程中,我曾经尝试动态检测画面帧率来阶梯减少动画,可惜最后没能实现,如果大家还有别的解决方法,欢迎提出。

另外,为了让大家可以直观地看到新版页面在不同设备上的浏览效果,我制作了一个页面来展示一些效果图,不过目前仅有一些我自己测试时的图片,数量很少,希望大家可以多提供一些。将图片外链至此处留言、给我发 Email 或者发送到微博并 @dandyweng 都可以,记得附上设备、浏览器的名称和版本喔。

刚发现新版被国外一个著名的网页设计评选网站 CSS Winner 提名了,如果你喜欢,可以点击这里给我投上一票。

扫描二维码可分享到微信
或点击此处分享到新浪微博