加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_泰州站长网 (http://www.0523zz.com/)- 视觉智能、AI应用、CDN、行业物联网、智能数字人!
当前位置: 首页 > 运营中心 > 网站设计 > 佳作 > 正文

图标设计!展现汉堡图标的新玩法的20个设计方案

发布时间:2016-09-30 20:14:25 所属栏目:佳作 来源:优设网
导读:副标题#e# 作为目前网站和APP中最简单、最具功能性也最令人难忘的组件,汉堡图标菜单图标,最近这几年可谓出尽了风头,它逐渐成为现代UI设计中必不可少也极具代表性的视觉元素和设计符号。 如果向上追溯汉堡图标的历史,可以到30多年之前。惊才绝艳的Norm C

这其实是一篇好玩的文章,探讨汉堡图标设计趋势,你可以在这里发现一些有趣的争论。汉堡图标和汉堡的关系是怎样的?单色好还是多色好?反正挺开脑洞的。

       Open & Close Menu by Romain Passelande

图标设计欣赏 图标设计 UI设计问题

汉堡图标并非一成不变的,在APP和网站中,不同状态下图标状态是会改变的,这个案例中,设计用GIF动画展示了这一过程。

       Hamburger Menu by Liam Spradlin

图标设计欣赏 图标设计 UI设计问题

这个带有明显Material design 风格的汉堡图标像是复古的图书,大胆而略显粗犷。

       Burger Icon vs. Word “Menu” by Andrey

图标设计欣赏 图标设计 UI设计问题

当“菜单”遭遇“菜单”的时候,下面的设计就是答案。虽然两者重叠看起来有点多余,但是你不能否认这样的设计非常优雅,毫无违和感。

       Open / Close by Armantas Zvirgzdas

图标设计欣赏 图标设计 UI设计问题

当你看到这个图标的时候会想起“菜单”,汉堡图标被封装到框中之后,按钮的意象得到了强化,当你点击按钮的时候,汉堡图标会在框中旋转打开,菜单之意通过动画展现在你面前。

       Animated Menu Icon – The Process by Sebastiano Guerriero

图标设计欣赏 图标设计 UI设计问题

这个汉堡图标的设计同样非常值得学习,设计师通过分解动画展现了汉堡图标和返回按钮之间的状态变化。

       结语

细小的汉堡图标真的不重要么?我能确定的是,当你为汉堡图标注入想象力的时候,它可以变得如此的生动,有着点睛之笔的作用。

延伸阅读:

  • 聊聊图标设计流程及小技巧
  • 古老的图标设计 还能引起年轻人的共鸣吗?
  • 20个优秀的Photoshop图标设计教程
  • 图标设计欣赏——Mouse Category
  • 图标设计欣赏——icondoctor
  • 告诉你背后的故事:10大Icon图标设计隐喻

(编辑:云计算网_泰州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读