文档章节

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

王尘宇
 王尘宇
发布于 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
西安
WordPress 安卓应用 4.1 版本发布

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

oschina
2015/07/03
1K
4
20个2013年最值得关注的网页设计趋势

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

gbin1
2013/01/29
6.4K
29
交互设计的职能:交互设计师具体做什么

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

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

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

dwqs
2014/12/31
0
0
如何有创意的设计网站导航栏?

  网站导航设计,一个老生常谈的话题,类似的话题估计大部分学者已经看得乏味了,于是笔者一直纠结还要不要继续写这个话题呢?看到这文章想必大家已猜到笔者的心思了。没错,随着互联网时代...

程序员客栈
2016/05/14
19
0

没有更多内容

加载失败,请刷新页面

加载更多

awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
30分钟前
0
0
Spring Cloud Eureka Server高可用之:在线扩容

本文共 1591字,阅读大约需要 6分钟 ! 概述 业务微服务化以后,我们要求服务高可用,于是我们可以部署多个相同的服务实例,并引入负载均衡机制。而微服务注册中心作为微服务化系统的重要单元...

CodeSheep
43分钟前
1
0
内网esxi主机上安装CoreOS虚拟机

CoreOS是一个为专门运行容器而设计的轻量级linux发行版,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度。它没有包管理工具,运行容器化应用以提供服务;默...

hiwill
今天
1
0
20181018 上课截图

![](https://oscimg.oschina.net/oscnet/49f66c08ab8c59a21a3b98889d961672f30.jpg) ![](https://oscimg.oschina.net/oscnet/a61bc2d618b403650dbd4bf68a671fabecb.jpg)......

小丑鱼00
今天
3
0
WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部