一个网页 icon 的创意

浏览器允许你在每个页面都指定一个 icon,然后浏览器会把它显示到需要的地方。一般在收藏夹、tab 标签,都会显示 icon,增加网页的个性。比如百度的 icon 在 chrome 的 tab 标签的效果:

百度的 icon 是一个动物的脚印,可能代表凭足迹去寻找的意思吧。可以肯定的是,给网页指定 icon,可以增加识别度。人对图形的认知比起文字,认得更快,记得更久。

我的工作是写代码,我不会用 PhotoShop。以前试过用 Fireworks 做简单的图片处理,但是毕竟没有美术功底,想象很美好,却无法用键盘鼠标表达出来。所以我给自己的网站设计了一个动态 icon 的方案,用网页 title 的第一个字画在图片上作为网页的 icon:

其实把文字画在图片上,本质上还是文字,而不是图标,不过总比浏览器默认的图标要好,而且这样比较有趣,只要是标题不同的网页,icon 都是不同的。

给动态 icon 地址不同的参数:

http://bibaoke.com/icon?char=我
http://bibaoke.com/icon?char=是
http://bibaoke.com/icon?char=一
http://bibaoke.com/icon?char=个
http://bibaoke.com/icon?char=很
http://bibaoke.com/icon?char=帅
http://bibaoke.com/icon?char=的
http://bibaoke.com/icon?char=程
http://bibaoke.com/icon?char=序
http://bibaoke.com/icon?char=员

会显示指定文字的 icon:

icon 的发展,有三个阶段。第一阶段是完全由用户自定义,比如我们在 QQ,微信,社交网站上上传自己的头像,以前的做法,如果没有上传,显示的就是默认头像,比如 QQ 的企鹅;第二阶段是随机分配,现在注册 QQ,如果不上传自定义的头像,你会得到一个随机分配的头像,也有网站是不完全的随机,比如我在网站填写了年龄,它分配给我一个“中年大叔”的卡通头像;第三个阶段是程序生成,Git 上的项目图标就是这样的,当然了,它比我的做得更好,它有随机的底色,并和文字形成撞色的视觉效果,钉钉上的默认头像也采取了这样的做法。

即使不是程序生成的,也有做成程序生成的效果的,比如 Bootstrap 的项目图标:

至少这样不用想那么多,不是吗?

广州必简信息科技有限公司 版权所有 粤ICP备15047625号-2