淘宝网站导航设计的优点是什么(店铺导航设计方法)

一、扁平导航:标签导航、舵式导航、宫格导航、Tab导航、超级菜单式导航

1、标签导航(选项卡式导航)——始终存在与界面底部,具有选中态和非选中态,同时选中态以高亮的方式区别于非选中态,用户通过标签快速在页面之间导航。适合功能复杂和信息庞大的APP,如微信、淘宝、网易新闻。

优点:直接展示重要的入口,帮助提升产品的转化率,减少界面跳转的层级,方便用户在各入口间频繁跳转。

缺点:固定在界面底部,会遮挡一部分显示内容,且不易于单手操作。

2、舵式导航(标签导航的延伸)——当页面上存在同一层的几大部分内容,同时又需要一个非常重要且频繁操作入口时,就可以采用舵式导航。通常中间项的设计有区别于其他标签,以鲜亮的颜色或图标存在于标签栏中间,方便用户发现和操作。适合功能复杂和信息庞大且有频繁操作功能的APP,如微博、NICE、一下等社交应用的拍照功能。

优点:位于标签栏的中间,颜色和形状醒目突出,用户易于发现且快捷操作。

缺点:中间项的设计样式太过于突出,导致其他标签使用率低,并且与其他标签不一致,造成标签栏视觉不和谐,对设计要求比较高。

3、宫格导航(跳板式导航)——利用网格布局将主要入口全部聚合在当前视图,超出屏幕的标签下平铺展开,需要滚动屏幕进行的浏览,或隐藏在二级页面,用户点击更多按钮进入聚合页面进行查看。通常这种导航方式支持用户自定义排列,根据自己的使用频率调整入口的先后顺序,以方便日常操作使用。适合工具类型的APP,如支付宝、美图秀秀的主页。

优点:入口都采用相同的设计样式,整个界面非常整齐,让每一个入口都非常清晰地展示在用户面前,易于操作。

缺点:排版没有主次之分,用户无法第一时间分清楚内容,同时太多的入口堆积,也让用户选择压力大。

4、Tab导航——是iOS独有的一种导航方式,其本质与标签导航相同,通常用于二级页面。当信息结构庞大,又不想将应用层级隐藏得太深,可以采用tab导航。最常见的场景是用于改变的当前的视图,或对当前页面内容进行分类浏览。Tab导航通常存在于界面顶部,不易用户操作,可将次级重要的标签放到上方。适合需要信息分类的APP,如系统电话中的所有来电和未接来电,以及APP的排行榜分类。

优点:帮助页面分类信息,减少不必要的层级,用户可以在当前视图进行查看,提升了浏览效率。

缺点:位于界面顶部,使用大屏手机时不易单手操作,通常未选中态较少用户点击,导致转化率偏低。

5、超级菜单式导航——超级菜单式导航方式与抽屉式导航有异曲同工之妙,当内容项分类很多且各内容之间切换不频繁时可采用这种导航方式。通常出现在界面顶部,由非常多的标签形式组成一组导航栏,超出屏幕的标签隐藏起来,通过左右滑动屏幕露出。用户点击折叠按钮将一个较大的覆盖面板从界面顶部滑下,展示所有标签的聚合,还可以对其进行设置排序,满足不同人群的个性需求。适合信息分类非常多的APP,常见于新闻资讯类,如网易新闻、今日头条。

优点:在狭小的空间里展示了全部的信息分类,满足产品的业务需求和所有用户的内容需求。

缺点:未默认露出的标签几乎没有用户去点击,导致转化率极低,但又不能没有。

二、层级导航:列表式导航、跟随式导航、抽屉式导航、弹出式导航

1、列表式导航——这种导航方式结构单一,信息排布简单,非常易于用户理解和浏览,帮助用户快速导航到相应的页面。在APP中,列表长度没有任何限制、可以向下无线延长,通过上下滚动屏幕浏览查看。因此,有时会将列表分组,或在列表的右侧增加索引,提升导航效率。适合展示数量多的并列元素,如通讯录、设置顶、聊天列表、商品列表等。

优点:层次简单清晰且冷静高效,横屏可以展示较长的标题和层次内容。

缺点:形式单一,没有主次之分,当同级内容过多时,用户在浏览时容易产生视觉疲劳,无法聚焦。

2、跟随式导航——跟随式导航也被称为扩展列表式导航,是由列表式导航延伸出来的一种变体。具有列表式导航同样的优点,而列表式导航在内容较多时无法聚集的缺点在跟随式导航上优化了这一点。在用户上下滚动屏幕时,列表分组的标题保持顶部、侧边和底部导航栏固定,当所包含的子级内容全部浏览完毕,就被下一个分组标题替换。方便用户查看统一分类的内容,并可以迅速定位目标,提升浏览效率。如通讯录和APP更新页面。

优点:将信息合理分类,结构变得清晰且富有层次,用户可以通过分类进行快速导航。

缺点:使用场景并不丰富,在视觉上打乱了整齐划一的排版,对设计要求较高。

3、抽屉式导航——一般从底部和顶部拉出,如果从左右两侧拉出,通常称为侧边导航栏。隐藏非核心的操作和功能,保持界面内容的干净美观,可以让用户更专注在核心内容上。这种导航极大的节省了屏幕空间,同时界面与抽屉之间流畅的过渡动画,也给用户带来体验上的愉悦感。适合功能结构庞大的APP,如QQ、小咖秀。

优点:除了节省页面展示空间外,还具有良好的扩展性,任何次要且不频繁操作的入口都可以放进去。

缺点:导航按钮非常隐蔽,用户不易发现,无论是导航按钮还是抽屉菜单在大屏手机时都不易单手操作。

4、弹出式导航——弹出式导航与抽屉式导航的核心思想一致,也是将内容隐藏起来,折叠在屏幕某个角落的按钮中,在用户需要操作时点击按钮弹出菜单项。菜单以弹出框的形式出现,并在当前视图覆盖一层蒙版,与底层内容视图分离开,让用户聚焦在当前的操作上,且用户不用跳出当前视图。弹出框仅在需要的时候才弹出,以节省屏幕空间。适合支持快捷工具操作的APP,如微信右上角的加号按钮。

优点:节省了页面展示空间,可在当前界面进行操作,不必跳出界面,用户体验比较连贯。

缺点:导航按钮非常隐蔽,用户不易发现,如果放置在界面中又会干扰用户视线,影响浏览效率。

三、内容导航:轮播式导航、陈列式导航、瀑布式导航

1、轮播式导航——轮播式导航是像轮播图一样,用户可以通过左右滑动屏幕进行浏览内容。轮播图下方展示一组分页点,包括了指示当前视图的选中态和未选中态,通过分页点可以清楚的地知道轮播数量以及当前所处的位置。它将并列关联但又独立的信息聚合在一个单独的页面、能够最大程度的保证界面的简洁高效,用户通过这种导航方式在并列项之间进行选择。轮播时平滑的过渡动画也直观地呈现在用户面前,具有非常流畅的用户体验。适合并列项数量多且包含信息可聚合的APP,如系统天气应用。

优点:把页面内容通过整理设计后聚合在一起,形成一块视觉焦点,方便用户进行全局性浏览查看。

缺点:对设计要求极高,如果排版混乱会导致用户在第一眼无法浏览所有内容。

2、陈列式导航——陈列式导航也被称为瀑布流式导航,它是将各个并列的内容项的主要信息聚合在一起,以卡片的形式直接展示在界面视图中。每一个卡片保持同样的外观,按排序列向下无线延伸,用户通过上下滚动屏幕进行浏览查看,因非常像飞流直下的瀑布而得名。但受限于手机屏幕尺寸的宽度,通常横屏只并列两个卡片,超过两个就会让界面内容展示过于密集,用户无法正常浏览。适合有图片展示商品的APP,如淘宝、口袋购物。

优点:卡片式的设计内容丰富,最大限度地直接露出主要内容,直观的信息呈现帮助用户提升产品的转化率。

缺点:对设计要求极高,如果排版混乱会导致用户在面对满屏的内容时无所适从。

3、瀑布式导航——瀑布式导航与陈列式导航相似,是把信息、图像、文字、按钮等一系列数据聚合到矩形区域内,用户可以直接在当前视图进行转发、点赞、收藏等操作。通常是横向全屏展示,因外形像一张卡片,常把这样的设计称为卡片设计。这种导航方式能够合理利用空间,对每个卡片作为一个独立整体进行设计,清爽的列出全部信息。卡片与卡片之间相互独立,互不干扰阅读。适合图片社交或资讯的APP。

优点:方便用户对于感兴趣的内容进行预判,且可以快捷操作,卡片式的设计使得浏览更清晰。

缺点:每一个卡片占用空间较大,视觉压力偏重,并对结构设计和图片质量要求极高。

本文来自管理员投稿,不代表资源分享网立场,如若转载,请注明出处:https://duduzhe.cn/fb3f6AgQ8UAZcDVdT.html

打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年12月11日
下一篇 2024年12月11日

相关推荐

  • 淘宝店铺logo设计教程(免费设计店铺logo图片)

    在马爸爸的带领下,电商行业发展迅速,众多创业者进军电商行业,开起了淘宝店铺,开店首选得有个LOGO吧?那么如何在线制作一个淘宝店铺LOGO呢?今天logofree君教大家在线制作淘宝店铺LOGO。其实呢,制作淘宝店铺LOGO,有两个方法:在线制作LOGO高端LOGO定制今天我们就分享第一

    2024-12-11 09:43:25
    75 0
  • 淘宝网页面设计分析怎么写(电商详情页设计思路)

    店铺页面容易给消费者留下印象,设计一个好的页面也很重要的。如何设计一个好的页面,首先得确定一下页面的设计思路:1.页面色调要与店铺统一,在设计页面时,先观察店铺,避免与主色调产生强烈的对比。2.根据产品亮点来确定背景色,背景色不能单纯当页面设计,要做出一张漂亮的

    2024-12-11 09:05:29
    56 0
  • 电商详情页设计所用的软件有哪些(电商详情页设计流程)

    用鼠标点击就能设计的详情页设计工具!内置海量模板让你轻松搞定商品的详情页设计需求。下面跟着小编的乔拓云工具使用教程,教你如何在线设计详情页,轻松完成商品详情页的排版和抠图!进入在线设计网站,登录账号进入后台,找到【云设计】点击(去管理)。 如图在设计管理中

    2024-12-11 08:41:26
    59 0
  • 淘宝主图设计用什么软件(电商主图设计思路及方法)

    关键词:制作主图适用行业:服装类目适用店铺:中小店铺淘宝宝贝主图怎么设计?宝贝主图如果做得好,具有吸引力,那么就能吸引买家继续关注,如何做好宝贝主图设计呢?今天给大家讲讲淘宝宝贝主图制作方法淘宝宝贝主图制作得好能够吸引买家眼球,实现转化和成交。需要特别注意

    2024-12-11 08:36:37
    56 0
  • 淘宝店铺设计怎么做(网店设计的教程介绍)

    1.首先需要把第一张图片设置为大图,也就是产品整体展示的一个大海报,这张图片要能够显示出产品的特色,能瞬间吸引买家的注意。2.然后插入我们准备的卖点图,在第二张、第三张中,要包括这个产品有什么款式、什么颜色、何种面料等。也就是要说出我们这种产品和其他产品的不同

    2024-12-11 08:25:04
    43 0
  • 淘宝店招设计是怎么做的(淘宝店招制作教程)

    设计思路指导● 第1点:使用了大量的卡通素材进行搭配,给人可爱、亲近的感觉。● 第2点:画面中使用了多种色相丰富、纯度高且明度适中的色彩,营造出鲜艳、活泼的视觉效果,给人带来愉悦的心情。● 第3点:使用外形有弧度的字体,与卡通素材风格一致,营造出一种童趣、天真的

    2024-12-11 07:38:27
    43 0

发表回复

8206

评论列表(0条)

    暂无评论