导航设计趋势!关于图标式导航的改进
导航设计趋势!关于图标式导航的改进
王尘宇 发表于3个月前
导航设计趋势!关于图标式导航的改进
  • 发表于 3个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

图标式导航的案例

这是 YouTube 的图标式导航(移动版): 为导航瘦身!关于图标式导航的改进 这是 Squarespace的图标式导航: 为导航瘦身!关于图标式导航的改进 AWARD的图标式导航不拘一格: 为导航瘦身!关于图标式导航的改进

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说: 操作缺乏反馈为导航瘦身!关于图标式导航的改进 按钮的状态不同,样式也不同,这样才能有效引导用户。 为导航瘦身!关于图标式导航的改进 我们拿开关来举例。开关也是一种按钮,一般有两种情况:   1 打开灯; 2 关闭灯;   所以说,图标式导航的操作缺乏反馈。点击图标能实现两种功能:展示导航菜单、关闭/隐藏导航菜单。那么图标也应该有两种外观以做区分。

解决方案: 图标转换

可以采用这种方法来提供更明显的视觉线索,从而更好的引导用户操作。 这里有一个叫做 Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技术,其实技术上也不复杂,你若有心自己也能写出来。 为导航瘦身!关于图标式导航的改进 为导航瘦身!关于图标式导航的改进 好处便在于:   § 提供用户视觉线索; § 图标更具语义,一种图标,一种状态; § 优秀的动效转换能够吸引用户注意,让用户迅速找到导航菜单。   对比一下,更有说服力,我用这种办法对第案例3进行了改进:   更好的指引效果,其实不仅可以改变图标形状,改变图标颜色不是也可以吗?这里就不多说了,给大家一点想象的空间。 设计少不了思考,希望大家有所收获。     原文地址: http://designinstruct.com/web-design/navicon-transformicons/
标签: 设计趋势
共有 人打赏支持
粉丝 0
博文 451
码字总数 469575
×
王尘宇
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: