一个网页 icon 的创意
2017-06-06 14:38
190 查看
浏览器允许你在每个页面都指定一个 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 的项目图标:
至少这样不用想那么多,不是吗?
百度的 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 的项目图标:
至少这样不用想那么多,不是吗?
相关文章推荐
- 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico)
- 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico)
- 解决高分辨率看网页字体太小问题的一个方法
- 在网页上显示一个会移动的透明时钟的代码。。。
- 一个好网页,不错,聊天记录,记下。
- [转贴]用C#编写一个抓网页的应用程序
- php 定向到另外一个网页
- .Net/C#: 一个将在线简体中文网页转为繁体中文页简单方法 (尚不完善 IHttpHandler Proxy / Response.Filter)
- 如何在网页中加入一个ActiveX控件?
- .Net/C#: 一个将在线简体中文网页转为繁体中文页简单方法 (尚不完善 IHttpHandler Proxy / Response.Filter)
- [C#]在网页中动态的生成一个gif图片
- 在网页中动态的生成一个图片
- 把一个网页文件的内容导入到word里
- 用Ruby下载一个网页上的所有图片
- 在网页中动态的生成一个gif图片
- 用C#编写一个抓网页的应用程序
- 一个网页设计师的情书
- 随便写的一个python小程序,从网页中下载图片
- 通过JavaScript脚本复制网页上的一个表格
- .Net/C#: 一个将在线简体中文网页转为繁体中文页简单方法