1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

而无论 PC 还是 Mac--九分科技

时间:2021-04-16   分类:交互设计    作者:网络   来源:网络整理   点击:107

而无论 PC 还是 Mac,系统页面的导航在左侧的情景比较多,所以说如果产品是系统软件的话,纵向导航比较符合习惯。 www.9fen.net

最后

看来,决定一个导航布局,可以考虑的东西还挺多的,也未必能找到绝对的答案。对于这个问题,你还有什么别的想法呢?

www.9fen.net

本文来自九分网络

尺寸适配角度 copyright 9fen.net

他为这 8 种导航布局做了不同电商原型,让用户来买东西,并记录各种数据,结果发觉了很多有意思的数据: copyright 9fen.net

copyright 9fen.net

copyright 9fen.net

做中后台产品的设计,基本都逃不开导航布局这个大框架。

www.9fen.net

用左导航还是顶导航?我从这4个角度做了一个完整分析! 九分网络

尺寸适配角度

任何导航,都要占据屏幕不少空间,这对尺寸适配都是一件麻烦事。哪怕产品并不需要为移动端响应式布局,只要是网页端,就得考虑窗口尺寸的变化问题。因为设计师的 Mac 和大量用户的 PC 甚至平板电脑之间,展示上的差异真的不小。

九分网络

内容采集来自9fen.net

然而,更更更更更重要的是,千万不要同一个产品不同端或不同子系统的导航不一般!用户很可能一会儿用这个,一会儿用那个,结果操作习惯换来换去,人都弄晕啦!还有,就是改版换导航肯定要让老用户不满,好不容易养成习惯改起来容易吗?所以说,决定导航布局时还是要慎重才好哦。

内容采集来自9fen.net

综合这些数据,看起来整体表现较好都是「左上上」、「左左上」、「左左左」。 内容采集来自9fen.net

科学角度 内容采集来自9fen.net

内容采集来自9fen.net

科学虽然很严谨,却缺乏灵活度,例如本次试验的场景单一(电商购物),而且用来测试的界面未免也太简陋了吧! 本文来自九分网络

可是横着竖着有那么大差别吗?被人问道为什么这么挑选,该如何回答? 本文来自九分网络

然而,选项数量不多时横向是可以;选项多起来,横向导航就很拥挤了。

www.9fen.net

统一性角度 本文来自九分网络

这三层中,每一层都有横向和纵向两种可能性,所以实验总共有 2×2×2=8 种对照组:

内容采集来自9fen.net

布局角度

从占据面积的角度来看,横向导航比纵向导航省地方,因为只要细细一条就好了。 本文来自九分网络

用左导航还是顶导航?我从这4个角度做了一个完整分析!

九分网络

今天给大家些灵感,从以下四个角度分析一下: 内容采集来自9fen.net

所以,如果确定选项少可以选横向,不确定或者数量多建议保险起见选纵向。

内容采集来自9fen.net

copyright 9fen.net

不要这样用弹窗,真的很烦!!(附弹窗源文件下载)

弹窗现在越来越成为了个磨人的小妖精。 早年我们受够了太多不明错误弹窗的骚扰,现在又却要承受各种广告弹窗的轰炸。 www.9fen.net

所以我们再从其他角度思考看看。 copyright 9fen.net

用左导航还是顶导航?我从这4个角度做了一个完整分析!

内容采集来自9fen.net

用左导航还是顶导航?我从这4个角度做了一个完整分析! copyright 9fen.net

大部分网站都是横向导航,所以说如果产品是以网页版为主,且用户会时常穿插跳转使用其它网页,那么也使用横向导航比较符合习惯。

九分网络

这么看来,如果产品需要考虑很多不同尺寸适配的问题,纵向导航是最简单的挑选,除非横向导航的内容不多维护起来不麻烦。 内容采集来自9fen.net

统一性角度

我之前为了研究确定按钮放在左边还是放在右边好,做了一系列实验分析,结果得出超出我预期的结论…放哪都没多大问题,统一就好。于是,我想这个问题也可以类比一下。

九分网络

用左导航还是顶导航?我从这4个角度做了一个完整分析! copyright 9fen.net

内容采集来自9fen.net

用左导航还是顶导航?我从这4个角度做了一个完整分析! 九分网络

基于用户的 Z 字形扫描行为,重要的导航应当挑选左侧导航或顶部导航

九分网络

本文来自九分网络

科学角度

JR Kingsburg 曾经做过一次实验(A comparison of three-level menu navigation structures for web design),研究 3 层导航中,
【网站托管维护就找九分网络,最低只要600元/年起!联系:13106499520 QQ:452570709】
,哪种组合使用效率更高。 内容采集来自9fen.net

毕竟纵向导航方便滚动,横向导航很少有用户会尝试滚动查看的,「…」也不是什么方便的操作。 本文来自九分网络

用左导航还是顶导航?我从这4个角度做了一个完整分析!

内容采集来自9fen.net

布局角度 copyright 9fen.net

横向导航占据空间最小,同时也是最难做尺寸适配的。尤其是如果上面除了导航之外,还放有各种 logo、头像、图标、搜索…各种东西时。横向导航一样都有三种状态:展开、折叠和收起。但是纵向导航就简单了,只需要两个状态:展开和收起。顶多再让展开状态的宽度能够自适应变化或手动拉伸就差不多了。 内容采集来自9fen.net

标签: 优设 优设网 交互设计 优秀网 导航设计 左侧导航 顶部导航

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----