独立站导航栏设计
收藏课程
取消收藏
8mins / By SHOPLAZZA Learn
收藏课程
取消收藏

导航栏是独立站店铺装修里的第一个重要板块。优秀的导航栏设计可以让消费者轻松找到想了解的内容,尽可能展示商品以及通过视觉、结构、内容设计凸显品牌调性。

导航栏结构设计要符合独立站内容结构、设置简洁的目录标签、限制目录数量、对目录进行优先级排序。在导航栏交互设计方面,要减少导航栏学习成本、固定导航栏位置、添加搜索、恰当运用广告位。导航栏视觉设计要注重色彩搭配,把通用功能图标化。此外,导航栏的二级三级目录还可以通过分析用户访问独立站的行为数据进行更新优化。

  • 0:00:13 众所周知,导航栏是独立站店铺装修里的第一个重要板块,它不仅是消费者进入品牌独立站官网首先关注到的部分,也是商家向消费者展示独立站售卖商品、品牌调性的窗口。优秀的导航栏设计就像是一只无形的手,引导消费者沿着规划的旅程前进,最终完成转化。那么,如何才算好的导航栏装修呢?结合众多大卖的成功经验,我们总结出来有以下三个标准:1.提供好的用户体验,消费者可轻松找到想了解的内容;2.尽可能展示商品,提升独立站转化率;3.通过视觉、结构、内容设计,凸显品牌调性。标准有了,那具体应该怎么做才能给客户呈现一个好的导航栏呢?今天我们就来跟大家聊一聊有关的设计技巧。
  • 0:01:11 要点一:当我们将独立站内容整理归类并体现于导航栏目录中时,目录划分要注意逻辑层次,有条理性的进行细分。一级目录直接呈现给消费者,主要包含 Shop、About US、Support、 Blog 等项目;二级目录则是对一级目录的细分,更详细地介绍项目分类;三级目录在对商品划分时被更多使用,消费者会根据指示选择自己要浏览的类别。但这里需要特别注意的是:要避免重复分类,因为重复性内容容易让访问者产生倦怠感,降低有针对性需求的消费者的购物体验; 要点二.鉴于消费者通常在导航栏停留的时间很短(可能只有几秒钟),因此消费者对目录标签的理解至关重要,标签文字应该简洁明确,避免出现难以理解的词汇,比如专业术语、缩写和个性化语言等,确保消费者能立刻理解每个标签的含义;
  • 0:02:19 要点三.导航栏中的目录项目尽可能少,如有可能确保不要超过7个。导航中的选项越多,消费者记住和处理信息的难度就越大,导致在面对多个标签选择时可能产生困惑。像下面这家售卖服饰的商店,它家的三级目录中塞满了所有可能的选项,太多的选择反而让消费者找不到重点,影响下一步转化;要点四.不同国家地区消费者的阅读习惯是不同的,所以要针对导航栏目录进行优先级排序,确保让当地消费者关注的项目排在前列,以免忽略重要信息。首因效应和近因效应,根据这两个效应,开头和结尾的内容更容易让消费者大脑记住,那么可以在导航开头或结尾放置更需要消费者注意的内容;要点五.网页导航栏在一定程度上会促使消费者学习思考下一步动作。因此,在做导航栏设计时,可以适当假想使用对象都是新用户或是没有耐心的用户,我们要尽量削弱导航需要学习的难度,第一时间满足消费者需求,不要让消费者觉得复杂繁琐。店匠SHOPLAZZA 的客户 Exway 甚至隐藏了导航栏目录,仅留下小图标,当消费者没有除购物外的其他目的时,可以略过导航栏,而专注于首页的商品展示,从而提高转化;
  • 0:03:53 要点六.注意将顶部导航选项始终保持在屏幕的可见区域。这样无论消费者向下滚动页面多深,或跳转站内其他页面,导航栏都能停留在屏幕顶部,以便满足消费者有针对性的需求。在店匠SHOPLAZZA 提供的主题模版中,已默认为独立站店铺的导航栏开启此功能;要点七.从提升用户体验的角度来说,添加搜索功能可以极大简化导航。因为搜索功能为消费者提供寻找所需内容的快捷方式,节省了访问的时间成本。在 店匠SHOPLAZZA 提供的店铺装修模版中,就提供了两种呈现方式,商户可以根据页面设计选择仅使用搜索图标还是展开搜索栏;要点八.要注意恰当运用导航栏广告位,我们要知道,导航栏不仅仅只有工具属性,它还有营销属性,导航栏里恰当融入广告位不仅不会引起消费者的反感,相反还能提升消费者的访问体验。只要注意设置消费者感兴趣的内容,对广告位的图片、标题、描述等进行精心设计,就能吸引消费者点击,提高转化率。店匠SHOPLAZZA 每个主题装修模版中都添加了广告位功能,可自主设计展示最新商品、博客、活动预告等任意信息,广告位将随消费者用户触发一级菜单一起出现,非常便利;
  • 0:05:29 要点九.从美学设计的角度来说,导航栏的颜色需结合主页整体色彩搭配,确保独立站风格统一。此外,还可以通过颜色深浅排列将导航栏与其他板块区分开。同时,在色彩的使用上应避免大片亮色,这会间接降低导航栏文字的可识别度。 像 BLUE PLANET 就将公告栏和导航栏都设置为白色,视觉冲击力大且没有视线焦点,但这正巧妙凸显了其商品太阳眼镜的功能;要点十.对于消费者来说,长期的独立站购物习惯培养使他们建立了固定的具象图形代替抽象文字认知,如放大镜代表查找、人形图标代表账户,手提袋或推车代表选购商品。这些内容都可通过图标展现,文字反而增加了时间,考虑到通用功能图标在视觉上比文字更具冲击力,并且通过传达具像事物能让消费者轻松理解其含义,我们可以尽可能多的使用这些通用功能图标;要点十一.导航栏一级目录在设置好后通常不会修改,避免给消费者造成困惑,增加学习时间。但二级三级目录可以通过分析用户访问独立站的行为数据进行更新优化,如果能在导航中推荐一些热门商品给消费者,还能促进独立站商品的售卖。在 店匠SHOPLAZZA 后台数据板块,您就可以看到消费者转化率/复购率等综合数据统计、以及搜索热词排行、商品浏览量排行等数据,可据此来调整您的目录设置,如将近期高搜索高流量的标签排在前列,为消费者提供访问向导。这些就是针对独立站导航栏设计的一些小技巧和要点分享,好了,以上就是今天的内容,希望能对你有所帮助,这里是店匠公开课,我们下期见。
课程评论

看看学员怎么说

发表评论
顾客评论
已到底部
最新评价时间
按点赞数从大到小
按评分从高到低
按评分从低到高
×
class SpzCustomFileUpload extends SPZ.BaseElement { constructor(element) { super(element); this.uploadCount_ = 0; this.fileList_ = []; } buildCallback() { this.action = SPZServices.actionServiceForDoc(this.element); this.registerAction('upload', (data) => { this.handleFileUpload_(data.event?.detail?.data || []); }); this.registerAction('delete', (data) => { this.handleFileDelete_(data?.args?.data); }); this.registerAction('preview', (data) => { this.handleFilePreview_(data?.args?.data); }); this.registerAction('limit', (data) => { this.handleFileLimit_(); }); this.registerAction('sizeLimit', (data) => { this.handleFileSizeLimit_(); }); } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } setData_(count, file) { this.uploadCount_ = count; this.fileList_ = file; } handleFileUpload_(data) { data.forEach(i => { if(this.fileList_.some(j => j.url === i.url)) return; this.fileList_.push(i); }) this.uploadCount_++; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileUpload", { count: this.uploadCount_, files: this.fileList_}); if(this.fileList_.length >= 5){ document.querySelector('#review_upload').style.display = 'none'; } if(this.fileList_.length > 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '8px'; } } handleFileDelete_(index) { this.fileList_.splice(index, 1); this.uploadCount_--; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileDelete", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; if(this.fileList_?.length === 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '132px'; } } handleFilePreview_(index) { const finalPreviewData = this.fileList_[index]; const filePreviewModal = document.getElementById('filePreviewModal'); const fullScreenVideo = document.getElementById('fullScreenVideo'); const fullScreenImage = document.getElementById('fullScreenImage'); const previewModalClose = document.getElementById('previewModalClose'); const previewLoading = document.getElementById('previewLoading'); filePreviewModal.style.display = 'block'; previewLoading.style.display = 'flex'; if(finalPreviewData?.type === 'video'){ const media = this.mediaParse_(this.fileList_[index]?.url); fullScreenVideo.addEventListener('canplaythrough', function() { previewLoading.style.display = 'none'; }); fullScreenImage.src = ''; fullScreenImage.style.display = 'none'; fullScreenVideo.style.display = 'block'; fullScreenVideo.src = media.mp4 || ''; } else { fullScreenImage.onload = function() { previewLoading.style.display = 'none'; }; fullScreenVideo.src = ''; fullScreenVideo.style.display = 'none'; fullScreenImage.style.display = 'block'; fullScreenImage.src = finalPreviewData.url; } previewModalClose.addEventListener('click', function() { filePreviewModal.style.display = 'none'; }); } handleFileLimit_() { alert(window.AppReviewsLocale.comment_file_limit || 'please do not upload files more than 5'); this.triggerEvent_("handleFileLimit"); } handleFileSizeLimit_() { alert(window.AppReviewsLocale.comment_file_size_limit || 'File size does not exceed 10M'); } clear(){ this.fileList_ = []; this.uploadCount_ = 0; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleClear", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; } mediaParse_(url) { var result = {}; try { url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { try { result[key] = decodeURIComponent(value); } catch (e) { result[key] = value; } }); result.preview_image = url.split('?')[0]; } catch (e) {}; return result; } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, name, data); this.action.trigger(this.element, name, event); } } SPZ.defineElement('spz-custom-file-upload', SpzCustomFileUpload);
The review would not show in product details on storefront since it does not support to.