CZen

It`s never too late to learn !

Hamburger icon的前事今盛

Hamburger icon ,有时候也会被称为Sandwish、Hotdog,主要指以下样式图标:


dig了大半天,也没dig出名字叫法从什么时候开始来的。但不难想象其因具象似汉堡而来。



有时候也会以其变形样式出现,如:

诸如此类被称之为汉堡包icon在当前移动app上随处可见,其主要用法可以归纳为以下三种:

  1. Hamburger  Menu 汉堡包菜单图标

    主要指代表菜单式,比较常见及代表性的如浏览器的工具菜单icon,点击后呼出更多的操作选项。

  2. Hamburger Drawer 汉堡包抽屉式导航

    比较多见的是将底部/顶部tab式导航转变为抽屉式交互方式,如抽屉般打开关闭,切换标签或者内容。这种导航方式明显的好处是界面视图更大更简洁,不足的是用户切换成本更高,对于抽屉里内内容感知不明显,最终导致用户点击率也甚了。有句话叫“out of sight, out of mind",这也是抽屉式导航不被待见最主要的原因。

  3. Hamburger sidebar 汉堡包侧边栏

    汉堡包侧边栏可以理解为抽屉式导航的一种拓展,主要指应用中一些次要操作及功能及切换或者个人信息、设置项等内容均整合到侧边栏页面中,页面简洁并凸显重要信息,隐藏次要功能或者操作的产品框架形态。不过通常抽屉式导航和侧边栏很少区别的清楚。


不过今天主要是八卦一下汉堡包icon本身是怎么来的,到底是谁设计的,为什么目前如此普遍常见。

最先这个三个横杆的简洁明了的icon来源于施乐公司在1981年推出的商业化个人电脑 Xerox Star8010的操作系统界面中,这是第一款图形用户界面(GUI)操作系统的电脑哦,也是首页推出鼠标的电脑。在当时售价要16500美元,一般人买不起额。

当时施乐星电脑操作系统界面的设计师是Norm Cox,这个”汉堡包“最早就是他设计出来的,当时三个横杆的icon主要示意根据不同上下文呼出的菜单选项列表,可以在以下星电脑界面操作视频中的第21:05中看到,https://vimeo.com/61556918#t=1265s  




然后设计师Geoff Alday 因为对汉堡包icon也是充满了无限的好奇,于是去年给据设计师Norm Cox发了一封资讯邮件。然后得到设计师Norm Cox的证实确实由他所设计,并介绍最初由三个横杆来代表菜单图标"Menu",主要是抽取了菜单项特征,代表多个选项的排列,能够一眼并能识别出来这是个menu的icon,像识别路标一样简单有效。

再然后Geoff Alday 在推特上发表”The origin of the hamburger icon”的推文,短期内分享再分享得到了病毒式的传播。

但是汉堡包icon被大众/设计师所熟知主要源于几个巨头app— Facebook/Google/Path上的使用,逐渐使得”Hamburger icon“流行并走红。













评论

© CZen | Powered by LOFTER