我在花墨里偷偷藏了些小心思
花墨其实藏了许多再花特意设计的小巧思,你有发现吗?
花墨里藏着不少小巧思。它们并不显眼,也不会专门展示出来,需要留心才能发现。
可能有些人觉得网站只需要做好展示就好了,但我却一直热衷于在网站的各个角落偷偷塞一些小巧思。
就像认识我的人,也总是能在我身上发现许多反差的“萌点”或者说意想不到的设定。
例如比较经典的,我是一个工科男 + 程序员,但是我会塔罗牌占卜,且对心理学有浓厚兴趣。
我觉得很有意思。
当你在花墨发现某个小巧思,并因此会心一笑时,那便是我为你准备的小礼物。
最近我针对首页又进行了一些小巧思设计,借机来讲讲花墨这两年慢慢更新添加的细节。
如果你早就发现了,那真是太好了。
首页
先讲讲我最近做了什么,其实只有首页这一块儿。
一个是头像,另一个是动画。
头像透视
如果你每次进入花墨首页,都会看一看本花的头像,你可能会注意到最近头像变得更灵动、立体了一些。
那并不是错觉,而是我做了个透视设计。
最初,首页只是把头像图片裁成圆形展示,和 QQ 头像差不多。
而现在,我把透明背景的头像叠在白色圆形底图上,让头像的一部分突破圆框,产生了一点立体感。
你可以从下面两张图看出明显的区别:

更新前的样子,静态圆形头像。

更新后的样子,两个图层叠加,实现透视效果,显得更灵动。
我特意微调了参数,让头顶和圆框基本对齐,使头像整体依旧保持圆形的视觉感受,而不是变成长方形。
最后只让两只猫耳探出圆框,看起来也更可爱。
在这里展示一下最初的废案,也就是上面提到的“长方形”:

这样的头像透视感会更明显,但头像整体变为了长方形,与之前的视觉差异过大,会有明显违和感。
而且咪娘小小的更可爱,过大的设计也有些太过抢眼。
随机动画
最初,花墨首页只有一种动画,头像、欢迎语和按钮会按照这个顺序依次平滑渐入。

这样的动画很简约、很迅速,我一直都很喜欢。
但我在做了头像透视后,想再做一种更灵动、活泼的动画,配合更新后的头像效果会更好。
因为我已经有思路了,于是直接进行了开发:

然后我给首页做了一个动画组,每次进入首页时,都会从动画组中随机选取一种进行播放,后续如果有更多动画,往里塞即可。
你可以在花墨首页的网址后添加 ?hero=a 或 ?hero=b,查看指定的动画;不添加参数时,则会随机播放。目前一共有两种:
后续如果你发现有没见过的,那肯定就是我新添加的啦!
动画 B 的灵感有一部分来自于 雨眠碎碎念,它的首页动画非常灵动可爱,我特别喜欢。
我尝试把动画录制成 GIF,但由于画质损失太严重,背景的细节变得有点“狰狞”,想看的话可以直接点击前往!
以上就是我为首页所做的两个小巧思。
可能大部分人并不会注意伸出来的猫耳,也并不会发现首页的动画其实有两种。
但我确实乐在其中,即使只有我自己知道,我也会因为自己的小巧思洋洋得意,并在别人不经意间发现告诉我后嘴角上扬传出一声轻哼。
其他小巧思
虽然有一丢丢卖弄的意思,但我也确实想在这里为你介绍一些我在花墨所做的小巧思,并且你可以在看完这篇文章后前去尝试。
我会按照我设计的顺序对部分小巧思进行展示和讲解。
回到顶部
早期,我和方导约稿画过一组趴趴图,原型就是我们当时的猫娘形象。
你可以在这里找到关于原型的更多讲解:来试试猫猫夫妇表情包吧! - 表情包原型

这组趴趴图一共有三张:我和方导各自单独的一张,以及我们两个人贴贴的一张。
花墨的回到顶部按钮,则是我自己的趴趴,鼠标移入后方导就会出现并和我贴贴!

一个好笑的事情:
早期建站时,图片加载一直很慢,那时候我还没有接入 CDN。鼠标移入后,贴贴图经常没办法及时加载出来,我差点就放弃了这个设计。
谁是再花?
这个设计可能没人发现过吧……因为应该没人会无聊到在评论的时候填写站长的信息。
如果你在评论区表单中,把昵称填写为“再花”、网址填写为 https://flowersink.com,邮箱填写为本花的邮箱,就能触发不同的提示,可以自己尝试一下哦!
不需要担心会污染之前填写的信息,只有评论成功后才会进行缓存,尝试后刷新页面就可以啦。
昵称只有“再花”会有相关设计,而不是任何包含“再花”的词语。
因为那个时候我自恋地想,说不定有人会填写“再花的粉丝”呢(不是)
便捷跳转
我在网页交互方面的设计主旨一直是:把用户当成傻逼。
这句话虽然不是很好听,但主要的意思是让用户尽可能的减少操作步骤,降低理解成本。
所以除了导航栏外,你可以从很多地方快速跳转到花墨的核心内容,以现在的花墨首页为例:
- Hero 页的
头像:跳转到“关于” - Hero 页的
博客数量:鼠标悬停时会显示交互效果,跳转到“文归档” - Hero 页的
点滴数量:鼠标悬停时会显示交互效果,跳转到“点滴” - Hero 页的
运行天数:鼠标悬停时会显示交互效果,跳转到“关于” - Hero 页的
看看再花为你精选的文章:带有动态抢眼效果,跳转到“精选文章”
在早期的时候,“关于”是分为“关于我”和“关于网站”两个部分,
运行天数跳转的其实是“关于网站”,后来两部分合并为了单个“关于”。
精选文章右侧的个人卡片,也有几个便捷跳转:
最近更新:跳转到"最新发布的博客"最近在玩:跳转到“游戏库”最近点滴:跳转到“最新发布的点滴”
这些设计可能并不会被所有人注意到。但只要能让哪怕一个人更快找到自己感兴趣的内容,它们就有了意义。
404 页面
花墨专门设计了一个 404 页面,用来处理用户访问不存在的页面时的情况。
通常正常用户并不会访问未定义的路由,这个页面很难被访问到。
所以你可以访问 404 页面来看看它长什么样,因为这就是一个未定义的页面
设计得很简单,哈哈。
隐藏页面
在花墨,有许多隐藏页面,这些页面的入口可能在某篇博客中、在某个页面的角落中。
这些隐藏页面,是为那些喜欢花墨、愿意进一步了解再花的人准备的。它们藏着更多关于我和花墨的信息。
因为对于初访者,这些页面并没有什么吸引力,反而会带来更繁杂的信息。
如果他们喜欢这里,迟早会找到入口。
如果他们不喜欢这里,那么入口藏在哪里也没那么重要了,毕竟他们可能都不会再来。
游戏、装备、设计规范、开发日志……如果你感兴趣的话,一定可以找到的!
最后
其实还有一些更细节的小巧思,例如:鼠标悬停在表情包上,会显示对应的名字;在博客详情页点击“想法”数量,则可以跳转到本文第一条想法的位置。
这些因为太小太细就没必要再提了,如果你哪天发现了,只要不是 BUG,那一定是我刻意为之。
远处传来再花的一声轻哼——
不知道你有没有发现这些小巧思呢?你会喜欢这些小巧思吗?
无论答案是什么,我依旧会一直往花墨里塞的啦!
因为我很喜欢它们。