您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

导航设计:关于图标式导航的改进

作者:  来源:前端网  日期:2013-11-14 22:39:32
收藏  评论:( 0 )  阅读:659

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube 的图标式导航(移动版):

这是Squarespace的图标式导航:

AWARD的图标式导航不拘一格:

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说:操作缺乏反馈

按钮的状态不同,样式也不同,这样才能有效引导用户。

我们拿开关来举例。开关也是一种按钮,一般有两种情况:

1 )打开灯; 2)关闭灯;

所以说,图标式导航的操作缺乏反馈。点击图标能实现两种功能:展示导航菜单、关闭/隐藏导航菜单。那么图标也应该有两种外观以做区分。

解决方案: 图标转换

可以采用这种方法来提供更明显的视觉线索,从而更好的引导用户操作。

这里有一个叫做Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技术,其实技术上也不复杂,你若有心自己也能写出来。

好处便在于:

§ 提供用户视觉线索;

§ 图标更具语义,一种图标,一种状态;

§ 优秀的动效转换能够吸引用户注意,让用户迅速找到导航菜单。

对比一下,更有说服力,我用这种办法对第案例3进行了改进:

更好的指引效果,其实不仅可以改变图标形状,改变图标颜色不是也可以吗?这里就不多说了,给大家一点想象的空间。设计少不了思考,希望大家有所收获。

原文:http://www.w3cfuns.com/article-1254-1.html



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/643.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论