设计师设计优秀的网页导航栏六大要点

所属分类: 平面设计 / 平面其它 阅读数: 1105
收藏 0 赞 0 分享

手机屏幕尺寸越做越大,作为互联网的深度用户,我相信你已经深刻体会到侧抽屉导航在移动(和桌面)端是如何降低用户体验的。先不谈它较低的可发现性和使用效率,拿出你的手机试着只用一手去按屏幕左上角。

欣慰的是,越来越多的应用和网站正在尝试用更有效的方法解决这个问题。这里我整理出了市面上能见到的所有方法进行比较。有趣的是,Youtube 作为侧抽屉的开山鼻祖,它也不用了。

一、选项卡

如果应用的选项不是很多(一般不超过5个),而且使用频次较高用户需要经常来回切换,选项卡导航是个不错的解决方案:

这样做似乎非常行之有效,但是,需要在设计考虑一些事情:

选项不建议超过5个

选项在视觉观感上应得到强化

选项优先级随顺序逐级降低,符合用户心理预期

除了被用户所熟知的图标(如主页、图片、个人中心等)其它图标建议标签文字说明

例如:淘票票 和 开眼

二、“更多”项

当主要部分超过5个时,一个切实可行的解决方案是显示四至五个优先级最高的选项,将其它的归位一类叫做更多项:

这个方案的设计原则和选项卡基本一致,更多项的子类可以在导航页面的下拉菜单中显示:

你可以说这种方案的使用效率比抽屉导航强不到哪去,对大多数用户而言,只要可见项优先级足够高,有四至五个可见的高频功能会极大的降低学习成本,改善用户体验。

例如:Facebook

动态消息、好友请求、通知和搜索总是可见,剩下的所有功能是可以在“更多”菜单里

三、折叠菜单

在网页设计中,情况稍显复杂,采用标签+更多的导航设计,能够自适应屏幕宽度,显示尽可能多的选项,其它的归到更多项:

这意味着更多项中包含的子相会随着屏幕宽度的减小而变多,没有足够的空间项目就会折叠起来。尤其当宽度处于中间时,这个解决方案的灵活性提供了一个更好的用户体验。

例如:BBC

四、滚动导航

如果导航项的数量较大,而且优先级几乎没什么区别,采用“更多”项将会是一个糟糕的妥协,另一个方案是滚动视图中列出的所有项目:

这种方案的缺点是用户只能看到可见范围内的几个选项,其余的选项用户不可预知。尽管如此,当用户探索购物或新闻类选项时,这依然是可接受的解决方案。

作为视觉设计,需要确保提供足够的视觉线索,表明在水平滚动后有更多的元素,弱化边缘元素就是个不错的办法。

例如:C Channel

荣获 2016年度 Material Design 设计奖(创意导航组)

五、下拉菜单

当其他部分的可见性和可访问性并不重要时,一个少见但有趣的方案是使用下拉菜单:

下拉菜单有一个双重角色:首先,它作为一个页面标题,虽然选项隐藏其下,向下箭头表明有可能迅速切换到相似的部分。其二,除了切换同级选项,切换到下级项目也是能被用户接受的。

例如:多邻国

通过下拉菜单快速切换练习语言

六、抽屉导航不一定很糟

对于大多数用户来说,下拉菜单的交互方式并不常见。令人意外的是,抽屉导航可能是一个不错的选择。它的主要缺点是较低的可发现性,当设计二级导航选项是,这种模式可能是一个适当的解决方案。

例如:Uber(优步) & Red Dot(红点)

屏幕上的一切都是为了请求一辆车,诸如历史、设置这类的二级选项不应该比从一个汉堡包菜单更突出

结论

没有万能的导航栏设计,它取决于产品定位、用户需求以及内容信息。适用于其它应用的导航可能不会为你工作,反之亦然。每一个优秀的导航设计,是对优先级、信息架构、逻辑结构和用户需求的高度把控。

更多精彩内容其他人还在看

八种很漂亮的排版方法和技巧分享

这一篇教程的版式设计主要针对的是画册设计中的版式排版设计,作者一共总结了八种很漂亮的排版方法和技巧给大家分享出来,希望这篇教程能对大家有所帮助
收藏 0 赞 0 分享

怎样才能恰如其分地运用对比提升设计品质呢?

对比实际上是每一项设计都应体现的重要原则,因为对比能够组织设计并构建设计的层次,也就是说它能够告诉观众什么才是最重要的部分。恰当地运用对比不仅能强调焦点,还可以增添视觉趣味性。那么怎样才能恰如其分地运用对比提升设计品质呢?我们来看看吧
收藏 0 赞 0 分享

如何努力成为一名复合型设计师?UI设计师需要其他技能盘点

复合型人才应该是在各个方面都有一定能力,在某一个具体的方面要能出类拔萃的人,那么也就是说作为一名“单纯”的UI界面设计师,理应具备其他技能,这样才能更具竞争力。那么UI设计师可以有哪些其他技能呢?来看看吧
收藏 0 赞 0 分享

实用:40个标志设计的心得技巧

好的标志设计不仅需要让你的作品显得富及创意及好看,它还需要能够与受众产生品牌信息的沟通。今天就为大家分享40个标志设计的心得技巧,对于初学者来说非常值得学习,好了,下面我们来学习吧
收藏 0 赞 0 分享

连续法法则 连续性在平面设计中的应用

利用连续性的心理法则,我们可以在设计中创造一种张力——从而形成一种吸引力,今天为大家分享连续性在平面设计中的应用,很实用,值得大家学习,推荐过来,希望能对大家有所帮助
收藏 0 赞 0 分享

电商banner和海报文字排版的几个实用小技巧

今天为大家分享电商banner和海报文字排版的几个实用小技巧,教程真的很实用,非常适合初学者来学习,值得大家来学习,推荐到脚本之家,来看看吧
收藏 0 赞 0 分享

两个实战案例帮你一窥专业设计师才会的设计思维

我们平时评判一个设计的好与坏,很多时候都是从色彩好不好看、使用时有没有可用性的问题等等角度来做出判断,今天为大家分享通过两个实战案例帮你一窥专业设计师才会的设计思维技巧,一起来看看吧
收藏 0 赞 0 分享

5个维度来说说视觉设计师的设计风格

想要把设计风格讲清楚,的确不是一件容易的事。但绝对要避免从感性的角度来阐述事实的这种习惯,毕竟现在的移动产品从视觉表现力方面正在逐步降低要求,这种环境的变化也是要求视觉设计师应该主动去加强设计思路的原因,下面从5个维度来说说视觉设计师的设计风格
收藏 0 赞 0 分享

电商设计师究竟该如何正确认知自己的价值呢?

要想知道电商设计师的价值是什么,就先要知道电商设计师是谁是做什么的,那么电商设计师是做什么的呢?今天为大家分享电商设计师究竟该如何正确认知自己的价值,一起来看看吧
收藏 0 赞 0 分享

超实用:字体设计之笔体笔划知识全攻略

汉字的基本笔划有点、横、竖、撇、捺、挑、折、勾8种,每种在此基础上又细分出很多同类笔划,今天为大家分享字体设计之笔体笔划知识全攻略,非常实用,值得大家学习,一起来看看吧
收藏 0 赞 0 分享
查看更多