30天打造品牌特色电商网站 Day.12 一定要有的导览列

导览列(Navigation)是每个网站必要且重要的元件，当使用者进到网页想马上找寻想要的资讯，好的导览列设计能最快速、最有效率的引导使用者，减少使用者找寻资讯的烦躁感。

导览列的类型

这边将导览列分类成三种来讨论：

1. 都在上面型，在最上方将连结列成一排
   这应该是蛮常见的方式，将主要的连结选项放在上面一目了然，而点进商品列表中，可考虑在侧边设计更细的分类选项，还有将列表的筛选功能放置在这边，这边建议超过5项连结导致画面太挤就可以考虑下一种模式喔！
   适合商品数量较少、较专一的电商。

2. 放在旁边型，在侧边展开或是侧边某区块，直行排列各式连结
   这样的方式因为能垂直排列，较能够展示更多的页面连结，再分成两种：

   • 导览列可能放几个功能，旁边放个侧边展开的汉堡选单
     用在想让画面更多留白更有空间感的设计，或是连结数量在上排已经放不下的情况，而各类型手机版也应换成这样的模式。这边也能设计各连结点击有下一层的分类，让导览列有细项分类但又能省空间。
     手机版当然适用，电脑上则适合较多连结页面的网站，或是特别想着重画面中央区块的设计。

   • 一进网页就在侧边
     这样的方式能马上看到有哪些商品群，因容纳大量分类、大量产品，也或许点击时能展开该选项更深的分类，这样的形式适合什麽都卖的电商网站。
     适合商品数量较多、较多元的电商。

3. 一键触发型，按下选单按钮，将跳出整个画面的导览选项
   这是一个比较特别且算少见的模式，但因为选单展开成全画面，优点在於弹性设计容纳少至多的选项排列。若放较少的物件可以呈现大块留白展现质感；而多物件的排列上，可以有较详细的说明，或是直接将常用功能放进来（例如购物车画面）。
   适合...想用这种设计的人！

导览列常见的物件

放在导览列通常是重要的商品总览、资讯、功能等等

1. 商标Logo
   常以Logo作为连结，点击可以回到首页。
2. 商品分类
   依需求列出几项连结，比如：最新商品、商品列表、热销...等等页面
3. 资讯项目
   依相关功能性提供顾客重要资讯，可能关於品牌、关於店家。
   比如：贩卖衣服提供尺寸比例图、运送QA。
4. 购物车
   通常是快速浏览当前购物车的内容物、总金额等资讯，另外附上前往结账的按钮。
5. 搜寻
   让使用者能搜寻商品。
6. 会员专区
   点击至登入页面，登入完成後，登入按钮可设计换成会员相关资讯，或是改为“登出”按钮。

补充：页尾footer

相对於导览列，页尾可以说是网页地下下方的导览列，因为这个区域较不易被看到，最主要的功能是使用者浏览到网站到底时，有各式连结可以快速转换页面，所以这部分可以因店家而异，放上各种细项连结，这边建议几项常见的物件：

1. 订阅电子报的email输入框
   如果有电子报的服务，直接在这边输入email就能订阅，对使用者来说很方便。
2. 品牌有关社群连结
   放上像是facebook粉丝专页、Instagram帐号、Line官方帐号等等。
3. 品牌讯息
   有关品牌的说明理念，跟品牌联络的方式、甚至有分店查询、加盟合作等。
4. 帮助中心
   可能有关线上交易的条款、货物退换须知、隐私条款...等客人可能会需要帮助。
5. 网站设计版权
   通常放在最後一行，写法如下：
   Copyright © [年份] [版权所有人或公司]. All rights reserved.
   或是改成中文
   版权所有 © [年份] [版权所有人或公司]

以上就是今天的分享，关於导览列的框架及程序会再简单向大家说明，感谢观看！