淘宝导航条设计(淘宝的导航条是什么)

淘宝导航条设计(淘宝的导航条是什么)

最近一直在做后台项目,经历了为数不多的项目,大部分项目都用过。Elemnet或者Ant Design。

作为两个流行组件,其导航栏的设计采用侧纵向导航。所以今天,让我们来探索为什么侧纵向导航很好?

在了解侧纵向导航之前,我们需要了解两个问题,什么是导航?为什么我们需要导航?

从上面的答案中,你可以知道什么是导航,那么让我们来看看现实生活中的导航是什么样的。

购物时,路牌+商场地图+购物目标构成了你的路径,你可以清楚地实现你的目的地来完成你的购物行为。在现实生活中,这种行为每天都常见的。+商场地图+购物目标构成导航。

你通过路标知道我在哪里,通过商场地图知道我要去哪里,通过购物目标完成最终的购买行为。

事实上,因为一切都有地理位置和物理对比,所以你不容易迷路,当然,道路疯狂可能会迷路。但在互联网上,当你浏览一个网页或应用程序时,因为没有实际的产品给你,一旦没有导航,你可能会在点击后丢失,或者忘记你当前的页面记录,导致你找不到你想浏览的东西。

这时,导航的作用就凸显出来了,它记录了你目前的位置,告诉你该怎么去你想去的地方。

在了解了导航的定义及其功能后,我们现在需要考虑一下我们常见的导航类型是什么?我们如何在适当的场景中使用它们?

B端系统中常见的导航栏有两种:纵向导航和横向导航。如下图所示:

淘宝导航条设计(淘宝的导航条是什么)

此外,还有更多基于上述两个导航栏的导航栏,如更多目录、缩放、叠放等,但其原型是上述两个导航,只适用于不同场景的扩展。

那么为什么B端系统的导航栏会选择侧面和顶部呢?这里需要一个新的知识点:F模式。

F形状网页浏览模式源自美国网站设计工程师杰柯伯·2006年4月,尼尔森发表了《眼睛轨迹研究》报告。

F该模式是指人们在网页上浏览内容时,往往遵循F字母的观察模式:

那为什么侧导航比横导航好呢?我们可以从布局和适应两个方面进行探索。

横向导航在布局上有优势,因为横向导航栏占据的位置很小,通常只有一行内容。

侧导航栏不同,通常需要占据一个页面 1/5 展示会影响更多其他内容。

然而,横向导航栏的一个缺点是不可避免的,即一旦导航栏内容过多,用户的操作将非常不方便,需要滚动或隐藏后续内容,导致操作成本和认知成本过高。

淘宝导航条设计(淘宝的导航条是什么)

从适应的角度来看,多端场景越来越普遍,因此横向导航将面临一个非常大的问题PC端迁移至移动端时,因为LOGO、用户头像、状态图等信息占据头部横向位置,导致导航栏内容进一步压缩。

此时,用户的运营成本进一步增加。当导航内容过多时,用户需要滑动手机屏幕来找到自己的位置,这违反了导航的初衷,即明确自己在哪里,引导用户去他们想去的地方。

侧导航栏可以避免这个问题,侧导航通常只有两种状态,移动到不同的端,我们只需要让侧栏合理显示相应的内容,用户可以在一定程度上定制,因为侧栏通常不需要与其他元素共享。

无论是侧导航还是水平导航,它们都起着明确的作用,引导用户。我们应该设计导航,并在适当的场景中使用适当的导航。当导航内容过多,使用多端设备时,由于其兼容性和操作成本较低,应考虑更多的侧纵向导航。

当您的导航内容不多,页面浏览内容多时,应考虑横向导航,提高页面利用率,减少导航栏占据的布局位置。

当然,不可否认的是,这两种导航栏都非常好。

更重要的是,我们应该保持系统中不同页面之间的导航栏一致,而不是使用纵向导航,B横向导航用于页面。统一使用有利于用户操作和优化。

题图来自 Unsplash,基于 CC0 协议

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至827202335@qq.com 举报,一经查实,本站将立刻删除。文章链接:https://www.eztwang.com/n/wdyy/5524.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年10月18日 09:01
下一篇 2022年10月18日 09:04

相关推荐

  • 抖音小店的个人店、个体店、企业店,新手应该怎么选择

    大家好 想开抖音小店的朋友们要注意了,千万不要盲目开店,开错的话不能换店铺类型,还得关店再重新开店,可谓是费时又费心,所以大家在开店之前尽量做好功课,避免给自己带来不必要的麻烦。 这篇文章就给大家详说一下抖店的个人店、个体店、企业店的区别和优缺点,以及我们应该选择哪个? 第一个、个人店 优点:不用办理营业执照,可以直接使用个人身份证开店,开店的时候可以暂时不…

    2024年6月13日
    1200
  • 抖音小店怎么开(开通抖店主要有几大步骤)

    新手小伙伴们想要做抖音小店,第一步就是先要开通一家抖店。 那么如何开通呢?开通需要准备什么呢?相信这些是让新手朋友们很头疼的事情。 接下来,小布就来手把手带大家来开通抖音小店,看完直接上手开店。 一、材料准备 入驻小店之前,把所需要的东西准备好,包括营业执照、抖音号、个人身份证、银行账户信息、保证金等等。 这里小布重点说一下营业执照。 我们个人来开抖音小店,…

    2024年3月8日
    400
  • 淘宝开店流程及费用2024

    一、准备工具:1张身份证、2张银行卡、1个手机号、1部手机、1台电脑1根网线;手机需要安装的APP:千牛、支付宝、钱盾、淘宝;银行卡提前充入2000元。特别注意:主账号只登陆注册时的电脑,查询电脑之前是否登陆过其他店铺,有无售假历史。 二、开店流程 1、用手机号注册支付宝,记录好登陆密码和支付密码。如何注册支付宝可以百度“支付宝注册流程”。2、支付宝完成认证…

    2024年3月6日
    1400
  • 千牛怎么免费推广(千牛上面的怎样为低价引流)

    大家好,今天给大家演示一下,我们店铺上线之后,产品已经上架,价格已经设定,包括我们优惠券各方面,做好之后我们下步怎么做?我们下步应该是做引流,引流从哪个地方去操作?我先给大家讲一下。 ·首先打开千牛,这边打开直接跳过来,这边要是左侧工具栏面下面有个推广,要看到没,推广这边来看推广服务有直通车、引力模仿、万象台、靠近推广、淘宝联盟,不动创意、品牌形象。 ·大家…

    2024年2月23日
    1100
  • 直通车最好的投放时间(直通车投放技巧)

    淘宝在运营的时候,为了提高店铺点击率,会选择使用一些付费的推广工具,直通车推广是很多商家都会使用的一种,那么开直通车的技巧有哪些了? 2012年04月23日,北京,2012北京车展。淘宝网展台。 1、主图吸引人 我们都知道直通车主图的点击率会影响到排名和质量得分的高低。而这些又直接影响到你的点击费用。所以,主图的制作一定要重视起来。一个吸引人的主图会给你带来…

    2024年1月17日
    1200
  • 淘宝直通车一个月大概多少钱(淘宝直通车一般出价多少)

    淘宝直通车是旨在为卖家店铺提供吸引客流量的工具,按照点击付费,宝贝的排名=出价*质量得分,您想吸引多少流量就能花多少钱,这个是不固定的。 现如今选择在淘宝上开店的卖家是非常多的,所以在开店后很多卖家都会利用直通车的推广方式进行产品的运营,能够获得更多的效果,但是开淘宝直通车一个月最少花多少钱了?下面一起来了解清楚。 淘宝直通车是旨在为卖家店铺提供吸引客流量的…

    2024年1月12日
    900
  • 小店随心推和千川区别(小店随心推一定会出单吗)

    在抖音平台做电商,就要按照抖音的规则和规律来做运营,而现在千川又是众多电商主要使用的推广工具,它分为不同的版本,功能类似又有对应的侧重点。接下来重点说一下巨量千川和小店随心推的区别,以及小店随心推在功能方面的特点。 一、巨量千川和小店随心推的区别 1.总体上说,千川分为三个版本,其中包括PC端的极速推广与专业推广,以及手机端的小店随心推。 2.所以说,小店随…

    2024年1月12日
    1000
  • 拼多多目标投产比设置多少合适(拼多多投产比越低越好吗)

    拼多多虽然是0元入驻,入驻门槛低,风险小,但是店铺要开起来需要交保证金以及做一些付费推广的,在进行付费推广中就会涉及到拼多多店铺投产比,如果店铺的投产比低该怎么办呢?如何提高拼多多投产比,下面跟着小编一起看看吧! 投产比(ROL)的计算公式是:ROL=点击量*转化率*客单价/点击量*平均点击花费。从这个公式就可以看出,投产比与转化率、客单价以及点击付费都是有…

    2023年2月9日
    3900

发表回复

登录后才能评论

联系我们

18312384410

在线咨询: QQ交谈

邮件:827202335@qq.com

添加微信