设计师设计优秀的网页导航栏六大要点
随着手机屏幕的扩大,侧抽屉导航对于移动(和桌面)端的用户体验带来的困扰逐渐凸显。对于深度互联网用户而言,其较低的可发现性和使用效率显而易见。想象一下只用一只手去触及屏幕左上角,便可感受到这种设计的不便。众多应用和网站正在积极寻找解决方案,力图优化用户体验。
有趣的是,即便侧抽屉导航的开山鼻祖Youtube也摒弃了这种设计。目前市面上有多种替代方案可供参考。
一、选项卡导航
对于选项不多且使用频率较高的应用,选项卡导航是一种有效的解决方案。在设计时需要注意:选项数量不宜过多,一般不超过五个,视觉上需要强化选项的突出性。随着用户的使用习惯,选项的优先级应逐级降低。除了用户熟悉的图标外,其他图标应配合文字标签进行说明。例如,淘票票和开眼等应用就采用了这种设计。
二、 “更多”项的设计
当主要部分超过五个选项时,可以将四至五个优先级最高的选项展示出来,其余归为一个“更多”项。该方案的设计原则与选项卡基本一致,用户可以在导航页面的下拉菜单中查看更多项的子类。尽管有人认为这种方案的使用效率与抽屉导航相差无几,但对于大多数用户而言,只要可见项的优先级足够高,有四至五个高频功能,便能极大地降低学习成本,改善用户体验。Facebook便是一个典型的例子,动态消息、好友请求、通知和搜索始终可见,其余功能则隐藏在“更多”菜单里。
三、折叠菜单
在网页设计中,采用标签加更多的导航设计能够自适应屏幕宽度,显示尽可能多的选项。当屏幕宽度减小时,“更多”项中包含的子项数量会增加,不足的选项会进行折叠。当屏幕宽度处于中间值时,这种设计的灵活性提供了最佳的用户体验。BBC的网页设计就是典型的折叠菜单设计。
四、滚动导航
如果导航项数量较多且优先级相近,采用滚动视图列出所有项目可能更为合适。这种设计的缺点是用户只能看到有限数量的选项,但为用户探索内容如购物或新闻提供了方便。视觉设计上需要提供足够的线索,表明有更多元素可水平滚动查看。C Channel的设计便是一个典型的滚动导航案例。
五、下拉菜单
当下拉菜单作为页面标题使用时,虽然选项隐藏其下,但向下箭头为用户提供了快速切换的可能。多邻国通过下拉菜单快速切换练习语言就是一个典型的例子。不过对于大多数用户来说,下拉菜单的交互方式并不常见。值得一提的是侧抽屉导航并不一定糟糕,其较低的发现性可能意味着它更适合于二级导航选项的设计场景。用户体验的优化需要综合考虑各种因素和设计原则,选择最适合的解决方案来提升用户体验和便利性。重塑导航设计:从Uber到红点,一切都是为了更流畅的用户体验
在这个数字化的时代,无论是乘坐一辆优步的网约车还是浏览红点设计博物馆,我们都沉浸在各种应用界面的导航体验中。而这一切的核心,都是为了让用户在瞬息万变的信息世界中,能够轻松地找到他们想要的东西。今天,我们就来探讨一下导航设计的精髓。
导航设计并非一成不变。当我们谈论导航时,我们谈论的是一种用户体验的极致追求。它不是孤立存在的,而是与产品定位、用户需求以及内容信息紧密相连。适用于其他应用的导航设计,未必能在你的应用中大放异彩,反之亦然。这是因为每一个优秀的导航设计,背后都是对优先级、信息架构、逻辑结构和用户需求的精准把控。
以优步应用为例,用户在屏幕上的一切操作都是为了请求一辆车。这种简单的目的使得导航设计极其重要。想象一下,如果一个用户在寻找车辆时遇到了复杂的导航结构或者二级选项不清晰,那么他们的体验将会大打折扣。像历史和设置这样的二级选项,不应该比主要的请求车辆功能更加突出。它们应该被巧妙地隐藏在幕后,只在用户需要时才出现。
再来看红点设计博物馆的导航设计,它可能会以展示各种设计作品为主,使得用户可以轻松浏览和了解各种设计理念和创新。这种设计的核心是为了展示和分享设计作品,因此导航设计需要突出展示这些作品的重要性。
导航设计是一门关于平衡的艺术。它需要我们在满足用户需求、展示内容信息和保持简洁之间找到平衡点。在这个数字化的时代,每一个优秀的导航设计都是为了让用户能够更轻松地找到他们想要的东西,享受更流畅的用户体验。对于每一个设计师来说,深入理解用户需求、产品定位和内容信息都是至关重要的。只有这样,他们才能创造出真正符合用户需求的导航设计,让用户在每一次操作中都感受到极致的体验。
平面设计师
- 设计师设计优秀的网页导航栏六大要点
- CDR中人民币符号怎么打-CDR各种钱币字符的输入方
- AI绘制Sweet Christmas圣诞节图标教程
- cad怎样画折断线- cad折断线绘制的图文教程
- CAD怎么使用命令快速确定圆心-
- flash怎么给图片添加水波流动的动态效果-
- maya中的曲面模型怎么转换成多边形-
- CAD布局视图怎么移动调整图形-
- maya怎么给高达模型渲染上色-
- Illustrator(AI)设计打造一个漂亮的海底世界场景实
- flash网格工具怎么使用- flash网格的设置方法
- cdr绘制漂亮的儿童照片墙教程
- 浅谈-设计师为什么很苦逼-设计师真的很苦逼吗
- cad怎么画小鸟- cad临摹小鸟的教程
- Illustrator(AI)把照片设计制作成抽象的线稿效果实
- flash怎么画绿色的小草-