设计师如何设计优秀的网页导航栏

二、“更多”项

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

设计师如何设计优秀的网页导航栏,PS教程,

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

设计师如何设计优秀的网页导航栏,PS教程,

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

例如:Facebook

设计师如何设计优秀的网页导航栏,PS教程,

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

三、折叠菜单

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

设计师如何设计优秀的网页导航栏,PS教程,

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

例如:BBC

设计师如何设计优秀的网页导航栏,PS教程,