文档章节

导航设计趋势!关于图标式导航的改进

王尘宇
 王尘宇
发布于 2017/09/07 00:05
字数 433
阅读 1
收藏 0

图标式导航的案例

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

问题所在

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

解决方案: 图标转换

可以采用这种方法来提供更明显的视觉线索,从而更好的引导用户操作。 这里有一个叫做 Navicon Transformicons 的演示便很棒使用了 SCSS 以及jQuery技术,其实技术上也不复杂,你若有心自己也能写出来。 为导航瘦身!关于图标式导航的改进 为导航瘦身!关于图标式导航的改进 好处便在于:   § 提供用户视觉线索; § 图标更具语义,一种图标,一种状态; § 优秀的动效转换能够吸引用户注意,让用户迅速找到导航菜单。   对比一下,更有说服力,我用这种办法对第案例3进行了改进:   更好的指引效果,其实不仅可以改变图标形状,改变图标颜色不是也可以吗?这里就不多说了,给大家一点想象的空间。 设计少不了思考,希望大家有所收获。     原文地址: http://designinstruct.com/web-design/navicon-transformicons/

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
20个2013年最值得关注的网页设计趋势

日期:2013-1-29 来源:GBin1.com 在过去的一年中,我们都看到了网页设计趋势在日益增长。或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其...

gbin1
2013/01/29
6.4K
29
WordPress 安卓应用 4.1 版本发布

6月中旬,WordPress发布了WordPress for Android 4.1版本,该版本重新设计了界面,告别了传统的汉堡按钮式导航菜单,换成了4个标签页进行导航,更加方便易用。目前该版本已经可以从Google市场...

oschina
2015/07/03
1K
4
交互设计的职能:交互设计师具体做什么

Ⅰ、 先了解一下交互设计的基本概念: 交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为,让用户更方便更有效率的通过产品去完成自己...

Amamatthew
2014/09/12
0
0
CSS:响应式下的折叠菜单(条纹式)

原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么制作响应式的移动导航...

dwqs
2014/12/31
0
0
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

异步化,高并发大杀器

今天来聊聊如何让项目异步化的一些事。 在进入正文之前,顺便给大家推荐一个Java架构方面的交流学习群:698581634,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分...

Java大蜗牛
17分钟前
0
0
织梦dedecms安全设置

网站本身做好防范: 1、修改默认后台名。 打开网站根目录,找到[dede],这个文件夹就是后台的路径,可以随意修改,比如修改为[adminbuy],此时后台登陆的路径为:http://www.*****.com/admi...

雨季2014
18分钟前
0
0
完美Python入门基础知识点总结,看完你的Python就完全入门了!

Python标识符 在 Python 里,标识符有字母、数字、下划线组成。 在 Python 中,所有标识符可以包括英文、数字以及下划线(_),但不能以数字开头。 Python 中的标识符是区分大小写的。 以下划线...

糖宝lsh
24分钟前
0
0
Java关于前后台传输中文乱码以及Excel下载乱码解决

针对乱码,一般情况是前后台以及中间件编码格式不同导致.故需要保证编码格式相同即可. 1.前台页面格式指定,这里用的是jsp,故需要将pageEncoding指定为"UTF-8" 2.指定服务器编码格式,比如用的t...

勤奋的蚂蚁
26分钟前
0
0
Flutter组件 - Flexible

Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。 Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如,Row在水平方向,Column在垂直方向),但是...

一箭落旄头
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部