1、从电子商务网站 F 型眼球轨迹分析其网站布局一、F 型眼球轨迹理论介绍尼尔森 F 形网页浏览眼球轨迹的研究理论来源于据 2006 年美国长期研究网站可用性的著名网站设计师 Jakob Nielsen 发表的眼球轨迹的研究报告。该报告称，大多数情况下浏览者都不由自主地以”F”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现 F 形的关注热度。电子商务网页浏览者眼光聚集的热度图如下：第一步：对比和快速筛选；第二步：获取更多信息以帮助判断； 第三步：研究并决策 下一步动作或放弃。二、十五家电子商务网站调研分析1、十五家电子商务网站调研信息汇总 LOGO， 核 心 业 务 菜 单 栏 ， 三
2、级 商 品 细 分 目 录 a. 定 做 流 程 公 示 Flash广 告 ， 合 作 企 业 b. 提 供 紧 急 订 单 业 务 商 品 目 录 c. 产 品 目 录 以 百 货 大 楼 楼 层 显 示 方 式 分 类d. 不 注 册 看 产 品 设 计 效 果 图e. 以 合 作 客 户 案 例 做 产 品 介 绍 LOGO， 产 品 三 级 目 录 Flash广 告 设 计 工 具 ， 主 打 产 品 LOGO 设 计 工 具 LOGO， Flash广 告 a. 网 站 配 色 凸 显 产 品 （ 黑 底 ） 热 销 定 制 商 品 b. 图 片 为 主 ， 文 字 简 洁 定 制 流
3、 程 c. Facebook分 享 送 礼 LOGO， 购 物 车 ， 建 立 项 目 ， 我 的 账 户 a. 建 立 副 品 牌 Valumark定 义 超 值 低 价 折 扣 产品 二 级 商 品 目 录 （ 图 片 +文 字 ） ， Flash广 告 b. 订 单 状 态 在 线 查 询 功 能 醒 目 下 方 菜 单 （ 图 片 形 式 ） c. 网 站 中 部 横 幅 文 字 广 告 色 彩 搭 配 恰 当d. 整 站 配 色 合 理 ， 首 页 右 上 角 区 域 配 色 效 果完 美 ， 能 够 凸 显 建 立 项 目 快 捷 键 ， 有 效 引 导 客 户e. 注 册 信 息
4、 详 尽 ， 注 册 环 节 放 置 在 产 品 确 认之 前 ， 帮 助 过 滤 无 意 向 客 户f. 产 品 展 示 页 面 同 时 有 库 存 查 询 及 运 费 查 询功 能 ， 方 便 快 捷 LOGO， 菜 单 栏 （ 一 级 ） a. 不 提 供 在 线 订 购 ， 仅 展 示 商 品 样 本 一 级 商 品 目 录 b. 内 容 页 面 包 屑 导 航 条 商 品 图 片 展 示 区 LOGO， 菜 单 栏 （ 三 级 ） a. 分 经 销 商 、 供 应 商 及 内 部 人 员 及 行 业 协 会入 口 ， 严 格 过 滤 访 客 身 份 Flash广 告 b. 新 用 户
5、 填 具 详 细 注 册 信 息 后 ， 经 审 批 通 过可 获 得 30天 试 用 用 户 登 录 区 LOGO， Slogan, 搜 索 a. Logo与 Slogan颜 色 相 搭 ， 凸 显 品 牌 口 号 Flash广 告 b. 高 级 搜 索 功 能 键 通 过 配 色 和 简 洁 箭 头 设 计成 功 凸 显 菜 单 栏 （ 二 级 +图 片 ） c. 菜 单 栏 采 用 图 片 +文 字 的 形 式 展 现 商 品 ， 较为 直 观d. 高 级 搜 索 功 能 较 为 详 尽 、 完 备 ， 实 现 高 精度 、 按 实 体 颜 色 搜 索 （ 所 见 即 所 得 ） LOG
6、O， 荣 誉 金 标 , 首 订 有 礼 促 销 广 告 a. 首 次 订 购 优 惠 100美 元 ， 广 告 凸 显 Flash广 告 ， 二 级 文 字 目 录 树 ， 热 销 商 品 b. 满 额 折 扣 （ 促 销 ） 分 类 目 录 （ 文 字 ） c. 回 购 折 扣 （ 自 动 ）d. 打 印 及 email to friends LOGO a. 设 计 工 具 箱 提 供 海 报 模 版 、 设 计 样 例 展 示、 Vedio解 说 等 Flash广 告 b. 商 品 相 关 价 格 、 运 输 等 注 释 信 息 详 尽 三 级 文 字 目 录 树 LOGO， 热 线 电
7、 话 a. 许 愿 单 Flash广 告 b. “enter quantity or glide”效 果 ， 滑 动 鼠标 显 示 满 额 折 扣 快 速 链 接 ， 热 销 商 品 ， 低 价 ,新 品 c. 产 品 页 显 示 客 户 评 论 （ 评 星 ） LOGO， 搜 索 栏 ， Flash广 告 a. 商 品 展 示 页 面 下 方 显 示 同 类 产 品 推 荐 热 销 商 品 ， 特 色 商 品 b. 商 品 展 示 页 面 下 方 显 示 其 他 用 户 浏 览 商 品 二 级 商 品 目 录 树 （ 文 字 +图 片 ） LOGO， Flash广 告 分 类 目 录 （ 图
8、 片 ） 热 销 商 品 ， 定 制 商 品 清 仓 LOGO， 搜 索 栏 ， 所 有 商 品 分 类 目 录 （ 文 字 ） a. 首 页 布 局 配 色 凸 显 搜 索 栏 Flash广 告 b. 趣 味 性 ， 所 有 商 品 分 类 采 用 小 图 标 +文 字 热 门 分 类 c. 独 创 性 ， 热 门 分 类 鼠 标 移 至 图 片 ， 滑 动 呈 现文 字 细 分 目 录d. 单 次 多 款 同 类 型 商 品 实 现 同 步 下 单 LOGO， 二 级 商 品 目 录 (文 字 +图 片 )， 首 字 母 搜 索 a. 将 优 惠 政 策 以 优 惠 券 的 形 式 展 现
9、 Flash广 告 b. 今 日 客 户 搜 索 产 品 排 行 榜 分 类 目 录 （ 文 字 ） c. Back to top 快 捷 键a. 按 商 品 使 用 场 景 分 类 检 索pricegrabber 综 合 B2C 2栏 宽 屏Branders 礼 品 B2B 2栏 宽 屏DH婚 礼 用 品 B2C 2栏 居 左Positivepromotions礼 品 B2B 2栏 居 左NORWOOD礼 品 B2B 2栏 居 左4imprint 礼 品 B2B 2栏 居 中Legend Life衣 帽 服 饰 B2B 2栏 居 左HALO 礼 品 B2B 2栏 居 左HAOLI 户 外 用
10、 品 B2B 2栏 居 中SAGE 礼 品 B2B 2栏 居 中Madcore 球 衣 B2B 2栏 宽 屏Logomark 礼 品 B2B 2栏 居 中Customizo服 装 及 配 饰 B2B 2栏 居 中 a. 3D设 计 工 具integrity 服 装 B2B 1栏 居 中 对齐 a. Loading时 间 过 长网 站 名 称 商 品 类 型 面 向 对 象 整 站 布 局 特 点优 礼 品 礼 品 综 合 B2B 2栏 宽 屏首 页 -眼 球 轨 迹*注：某些功能或者特色非某个网站专有，其他网站若有类似功能，则在本表中不再一一赘述。2、十五家电子商务网站首页 F 型眼球轨迹内容
11、分布分析 LOGO 15/15菜 单 3月 15日 2月 15日分 类 目 录 4月 15日 4月 15日 6月 15日Flash广 告 3月 15日 10月 15日搜 索 4月 15日设 计 工 具 1月 15日 1月 15日快 速 链 接 1月 15日热 销 商 品 3月 15日 2月 15日低 价 /新 品 1月 15日主 打 产 品 1月 15日定 制 流 程 1月 15日根据本图分析结果显示，十五家案例网站首页中，在 F 型眼球轨迹中内分布中，优先级为的位置出现频率最高的依次为企业 LOGO、分类目录、菜单和 Flash 广告。优先级为的位置中，出现频率最高的为 Flash 广告、分
12、类目录、热销商品和设计工具。在优先级为的位置中，出现频率最高的为分类目录、菜单、热销商品等等。以上结论，说明在案例电子商务网站中，F 型眼球轨迹中较受关注的部分按优先级排名依次为企业 LOGO、分类目录和 Flash 广告。三、以十五家电子商务网站分析结果模拟网页布局1、模拟电子商务网站首页版面布局根据以上结论，在绘制电子商务参考首页布局中，以如下红橙绿三个色块为 F 型眼球轨迹中受关注更多的区域。以上示意图根据十五家案例电子商务网站统计分析结果绘制，仅作研究探讨，实际网站版面布局以供应商设计样例为准。2、模拟电子商务网站内容页版面布局根据调研分析中十五个电子商务网站的各自特点，总结出模拟网站
13、内容页概略图，实际内容页版面布局以供应商设计为准。四、电子商务网站网页设计常见布局探讨1、电子商务网站网页设计结构电子商务网站的布局类别繁多，按栏位分有两栏式、三栏式、多栏式，按对齐方式分有居中对齐、左对齐，按照宽度分也有宽屏和非宽屏之分。2、十五家样例电子商务网站各布局结构使用频率布局 1 栏居中对齐 2 栏宽屏 2 栏居中 2 栏居左频率 1/15 4/15 5/15 5/15根据网页设计常见布局分析，以及 15 家样例电子商务网站信息汇总，得出左右结构布局（ 2 栏）为电子商务网站首页最适合的版面布局，其中 2 栏居中和 2 栏居左在此次调研样例中使用更为普遍。3、国外电子商务网站布局参
14、考下面的数据是电子商务治理咨询公司 groovecommerce 通过对全球 100 家电子商务网站进行统计，所得出的网站布局比例：布局方式 网站数（百分比） 代表网站3 栏左对齐 3（3%） CVS3 栏居中对齐 10（10%） 1800 Pet Meds3 栏宽屏 6（6%） Amazon2 栏居中对齐 47（47%） Cafe Press2 栏左对齐 28（28%） Neiman Marcus2 栏宽屏 4（4%） Ritz Camera1 栏居中对齐 2（2%） Abercombie & Fitch数据说明，采用两栏式布局的电子商务网站占到 8 成。由于两栏式布局一般都是采用左边导航，
15、右边内容的设置，所以该布局的网站内容显得更少，操作更具有可预见性和可控性，具有更强的可用性。正是由于其可用性更强的优点而受到大部分电子商务网站的青睐。三栏式布局也有它的优势，比如此布局可以放置更多的内容。不过内容越多也意味着用户需要接受的越多，用户学习成本高，所以在可用性方面显得稍差一点。综上所述，结合十五家案例电子商务网站的调研结果，我们可以得出，两栏式布局对电子商务网站可用性方面更胜一筹，而三栏式布局则容量更大。在网站产品品类并不十分繁多的情况下，两栏式布局将更为适合。五、电子商务网站分类根据上述 15 家电子商务网站页面内容的分析结果，总结出电子商务网站的分类规律。1、按商品品类多少划分
16、根据商品品类多少，分为产品导向型网站和设计导向型网站：（1）产品导向型（商品品类全）电子商务网站包含的内容：搜索栏Flash 广告热销商品热门分类（货架式）新品上市导购（按人群、场合等）个性定制客户评论本站推荐（猜您喜欢等）（2）设计导向型（商品品类少）电子商务网站包含的内容：大幅 Flash 广告品牌传播（Slogan）菜单栏产品明细分类高精度搜索功能设计工具箱效果图展示区推荐搭配同类最热销排名2、按网站对用户信息的需求划分根据电子商务网站读取客户信息的方式，分为信息获取型网站和目标客户型网站。（1）信息获取型网站的特点持续获取并解读用户情报，分析用户浏览习惯，根据用户浏览网页的顺序、次重点以及用户离开网站的界面，持续对消费者行为进行分析，并对网站页面布局、内容结构设计策略加以改进。信息获取型网站流程案例一：客户无需先行注册，即可使用网站设计工具，在线提交公司 LOGO，自助设计产品样式，可以帮助电子商务网站管理者对客户关注热点进行分析。信息获取型网站流程案例二：（2）目标客户型网站的特点此类电子商务网站有明确的目标客户群体，对浏览该网页的用户优先进行客户筛选过滤，排除无意向客户，减少无效数据处理量。目标客户型网站流程案例一：注册信息详尽，包含:在建立项目之前，帮助网站管理者过滤掉无意向客户。目标客户型网站流程案例二：在线产品 30 天免费试用申请流程：
