美文网首页
购物网站中导航栏的那些“小心思”

购物网站中导航栏的那些“小心思”

作者: Sincerely丶 | 来源:发表于2017-03-21 23:31 被阅读0次

读了这篇文章,我希望能帮助你明白:导航栏的一些设计方面的和很多心理学方面的“小心思”。




购物网站是我平常最常用的东西,自己也是计算机专业的童鞋,对于互联网产品和技术十分感兴趣哦,平常经常使用一些购物网站,也是“剁手党”中的一员。

那么,购物中能不能学习一些知识呢?理解一些内容呢? 当然OK啦~^.^

我把自己的使用感受以及原来读的一些书中的知识写出来,供产品的童鞋来学学咯!新人还望多多关照批评指点。

那么,正文来了。首先我说说自己对购物网站的看法了(他爸,天猫,京东,YOHO!等很多优秀的购物网站我就不一一列举咯)。


首先,购物网站有一些很明显的特点:

1.网站太大。(真的太大了!)

                解决:需要点击过后的链接变色,给我们一种已经访问了多少内容的直观感觉。

2.网站找不到方向感。

                没有左右上下,只要一个个页面和上下滚动。 需要给出 层级菜单。

3.用户会感觉不到自己的“当前位置”。

                 我们在购物或者寻找某个商品时,我们浏览后再次来到时不知道上次的物品在哪儿。

                  浏览历史,购物车,历史购买一样,可以“记住”自己上次的“体验”,(找到上次自己走过的路)。


其次,购物网站上用户(剁手党童鞋)的一些小特点:

1.用户上网站,更多的记住了“页面层级”,而不是“物理感觉”上的“我在哪儿”。 那种具体的物理世界中的地址感觉消失了。取而代之的是网站给我们的信息扁平化。

            所以说呢,网站的标配 ---“书签”,浏览器的标配“后退按钮”是多么的重要 。 - -!

2.网站上没有“当前位置地点” 的清晰定位。用户身处“网络”是迷路的。

所以呢 “层级导航”(或者说是 “面包屑”)很重要。这其实给了用户一种“得知自己位置”的感受。 这就好比是一个身处丛林中的猎人手上的GPS,只不过你的用鼠标点击,而不是手指按。

             web导航用 层次菜单 来弥补了物理空间的缺失感。


自己关于 “导航” 的一些小思考:

导航它像一个超市地面和货架上的导航。 超市要立体的“网”。而导航是平面的“锁链”。二者有立体和线性的不同表现和感受,但却有相同的功能 --- 指引用户的方向。

它如同自己的名字。

身处现实世界,我得知自己具体在哪儿,知道怎么去安全的地方 --- 这是“安全感”的保障。

在琳琅满目的购物网站中,物品繁多,层级众多,链接无数 , 导航如同GPS给了我们知道自己“当前位置和如何到达安全地区”的感觉 --- 这是身处购物网站中“安全感”的由来。

导航的“告诉我在哪里”的标签(或者导航)带来的安全感带来了信任,信任带来了消费。

导航有很多特点哦,你知道么?

导航的特点我想了很多,比如简单、突出、美观等。但我想,导航不是艺术品,回归到它最初的价值,导航 按钮两个最重要的特点:

“明显”。明显才能突出“线索”。不然导航就成了“噪声”。

“准确”。用户急急忙忙,需要准确简洁的提醒和导航。

导航的那些作用:

告诉用户这里有什么。 导航让我知道这里有什么,而不用花费额外力气去多想。

告诉我们如何使用网站。 上购物网站的用户的目的性很强,购买某一种物品,导航的设计好坏决定了用户购买你而不是其他网站的东西需要跨过多大的门槛。

它给了我们对于网站建造者的信心。 导航的好坏很大程度虎让我对网站拥有者产生信任或怀疑。好的设计无疑是加分项。为用户省时间,恰恰是购物网站建立的目的吧。

web导航有习惯的用法。所以网站的导航设计要注意以下几点:

持久导航应该包括4个元素:

站点的名称(腾讯网,天猫,京东…),我知道自己当前在哪儿,需要在每个页面看到站点名称或logo(通常在左上角)。

实用工具(购物车…),帮助我们使用站点。

搜索框

栏目(当前具体在哪儿),主导航条。

导航有统一格式。用户进入你的网站只需要学习一次就会永久使用了。

我自己关于购物网站的(感觉所有网站都相似)一些额外的小思考和感悟:

购物网站的 Home 键 --- 左上的网站logo :点击回到主页。相当于电脑的“重启键”。

网站的导航层次是3层的目的 --- 简单明了,符合用户的心理,不要让用户思考(《Don't make me think》 是本很好的书哦)。

这3层导航要注意:

                每一个页面需要一个名称。

                页面名称需要在合适位置。

                名称引人注意。

                名称要和点击的链接一致。

导航有很多表现形式呢。比如:

       面包屑---告诉当前位置,GPS的另一种表现方式。特点:

                         设计好,方便持久。

                         面包屑在醒目位置。

                          “>”进行间隔,视觉上像“水流”一样暗示沿着各个页面在移动。

       标签:另一种“模糊”的 导航 。特点:

                         不言而喻

                         很难错过

                         很灵活

                         激活标签与其他标签的区别让人们更加方便确认。


以下是我对于一下关于网站导航的设计好坏如何测试的想法:

网站导航的设计好不好? 想象一下突然给你一个陌生的页面,看这个网页,自己问问自己:“我从这个网页中知道了下面这些内容了么?”:

               这是什么网站?(站点id和logo)

               我在哪个网页上?(站点的面包屑或子一级页面名称)

               这个网站主要栏目是什么?(标签)

               我在导航系统的什么位置?(面包屑或标签想要的按钮突出显示)

               我怎么搜索?我怎么去我想去的地方?(搜索框)


那如何测试一下我设计的导航栏如何呢?

“摘掉眼镜”。想像一下近视眼摘掉眼镜的痛苦,但是面对像素,这也是一个美丽的世界,细节被屏蔽掉了,完整的框架天然的呈现在你面前。 “模糊的视线”让人能更好地发现自己设计的导航产品的不足。好的导航一目了然,清楚无误地呈现,依赖整体外观,而不是看细节。

“拿在手里”。你可以换个与平时观察不同的角度,观察并圈出导航,看看能否快速定位各个项目:

              站点id

              页面名

              栏目,主导航

              页内导航 

              当前所在位置指示器

              搜索


最后呢,想说一说。 一个购物网站的最伟大之处在于第一次的流量就给了新用户一种难得的“信任感”。信任感的来源于 专业与细致。网站的一点小出错,不匹配,用户的感到挫折,信任感可能会降低唉。

我不善于写深奥的观点,简单明了直接说点干货,我想是所有产品童鞋和研发童鞋最期待的文章。希望大家喜欢,欢迎批评指正哦!

相关文章

  • 购物网站中导航栏的那些“小心思”

    读了这篇文章,我希望能帮助你明白:导航栏的一些设计方面的和很多心理学方面的“小心思”。 购物网站是我平常最常用的东...

  • Bootstrap 导航栏

    导航栏 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。 导航栏在应用或网站中作为导航页头的响...

  • 配置导航栏和tabbar

    导航栏 自定义导航栏 page.json中的配置项 页面中给小程序自定义导航栏 tabbar

  • jsbin

    alert效 表单效果 模态框效果 导航栏效果 导航栏效果 字体图标 作品库1 简历 个人网站 导航栏 模糊框

  • 网站导航栏

    导航栏也是一种列表。下面通过代码进行说明 设计方法主要是对列表的每一元素按逐个设计可呈现如下结果

  • 无懈可击的web设计学习笔记(三)

    本文主要讲的内容为:可伸缩的导航栏,让网站导航栏能够适应任意大小的文字或者任何数量的内容。 html 就导航栏而言...

  • 界面设计之添加导航栏

    一个网页的界面中,不仅有页头、正文内容、侧边栏等,导航栏也是很重要的一个结构,它可以告知用户一个网站大致有那些界面...

  • 5.1从0实现响应式导航栏

    本节将分享如何从0实现一个响应式导航栏。 响应式导航栏是静态网站特别常见的需求,多数网站都是基于Twitter推出...

  • HTML中想要定位页面的一些元素

    通常情况下,将网站的导航放在左侧的栏中,广告或增补信息则放在右侧栏中。 基本的链...

  • iOS设置导航栏样式到AttributeString富文本总结

    一、iOS开发中导航栏设置1.1、导航栏透明的设置方法 1.2设置导航栏背景色 1.3 设置导航栏中titleLa...

网友评论

      本文标题:购物网站中导航栏的那些“小心思”

      本文链接:https://www.haomeiwen.com/subject/essnnttx.html