左侧一列是Narrow By功能列，提供了Category（子目录）、Size、Width、Brand、Color和Price六种Narrow的形式，将层级结构和分面结构糅合在一起。
《B2C电子商务系统规划与设计完全手册》 16 / 49
颜超敏：www.2ecommerce.cn（个人博客）
并且使用Ajax局部刷新技术，当选择某个特征时，展示列表立刻重新搜索，而且大部分的特征都支持多选，非常厉害！
分面形式 取值范围 分析 将子目录也糅合进Narrow By中，是Endless的设计亮点之一， 这样便减少了访客做更深目录层次的访问，对于访客而言，越快看到 产品体验越好。 对于买鞋的人，几乎都是只关心可以穿的尺寸，所以Size很必要。 而且，对于不支持或者没有库存的尺寸，是变灰，不能点击的。 和Size一致。 按照拼音排序，并且提供Find a brand，可见Endless对brand很重视， 也许访客同样如此，因为品牌忠诚度的存在。 和上面的Size、Width、Brand等一样，都支持多选。 Category（子目Man Shoe's sub categorys. 录） Size（尺寸） 4 to 20 Width（尺寸） 4A to 5E Brand（品牌） 180s,310 Motoring等数十个。 Color（颜色） 以色块加Title名称的方式展现。 采用价格横条的形式，提供最大和最小这个很好用，很精准，但是对Price（价格） 价格两个游码供访客拖动定位价格范Javascript技术要求比较高。 围。 4. 总结
将分面结构的分类方式通过收窄搜索结果的功能来配合层级结构进行使用，会显著的减少目录深度，让访客可以通过更多看重的特征和属性对搜索结果不断收窄，尽快找到合意的商品是电子商务网站应该认真考虑的。
对于如何设计好用的Narrow By功能，Endless是个相当优秀的参考例子。
《B2C电子商务系统规划与设计完全手册》 17 / 49
颜超敏：www.2ecommerce.cn（个人博客）
4.5. 产品详细页面（Product Detail Page） 4.5.1. 概述
产品页是电子商务网站的关键页面，在这里，客户可以全面的了解该产品，并作出是否购买的决定。
4.5.2. 功能规划
产品详细页面的设计复杂度一点都不比主页低，在设计之前，首先让我们确定这个页面要放置多少信息和功能。
1. 信息
? 产品主图片（一张能够清晰展示产品的图片）。 ? 产品附加图片（多张）。 ? 产品名称、编码。
? 产品各类价格：市场价、销售价、VIP价等。 ? 库存信息。
? 产品的详细描述、规格参数、包装清单、售后服务等。 2. 功能
? 加入购物车Add to Cart区域
? 选择必须的特性，如尺寸、颜色等。 ? 加入收藏夹 ? 加入意愿清单
? 查看大图或局部放大 ? 打印此页面。
? 以邮件形式发送此页面。 ? 查看评论列表。 ? 发布评论及评分。 ? 优惠套餐。（该产品和其它产品一并购买的预定义优惠套餐） ? 相关产品推荐。
《B2C电子商务系统规划与设计完全手册》 18 / 49
颜超敏：www.2ecommerce.cn（个人博客）
4.5.3. 产品详细页面的设计－AE.com
对于电子商务站点，产品详细页面的设计非常重要，让客户在“冰冷”的网页上尽可能全面的了解产品信息，而又保持页面设计的简洁美观，对于产品策划人员和界面设计人员都是一个考验。下面介绍一个优秀的设计：www.ae.com。
这个图是从该站点的截图，下面从各个方面进行分析。
1. 布局
1) 整个站点是850左右的分辨率，对于服装行业比较合适，利于用户视觉聚焦到产品
上；
2) 页面平均分为两列，左边放置图片和两个促销栏目，右侧放置产品信息、可选规格、
数量和相关按钮等。
2. 设计
1) 采用白色和灰色的底色，对图片和文字不会形成干扰，利于阅读。电子商务网站一
《B2C电子商务系统规划与设计完全手册》 19 / 49
颜超敏：www.2ecommerce.cn（个人博客）
般不要使用深色背景，深色背景＋反白字体虽然看上去比较“cool”，但是看久了会造成疲劳，而且不利于图片的展示。
2) 两侧通过底色的差异自然的呈现出立体感。 1. 功能
这个页面看上去功能好像不多，其实隐藏了很多优秀的细节，而电子商务网站往往就是细节决定成败。下面将从左到右，从上到下的分析。
1) 展示当前搜索结果的全部产品。
2) 鼠标移上View All Hoodies ，弹出所有Hoodies（带帽背心），这个功能对用户其实
很方便的，可以在不离开
这个详细页面时一次性的看到所有的同类产品。
3) 旁边有Prev Item和Next Item，同样好用的按钮，可以让在详细页面一件一件的看
完同类的产品。
想想如果没有这个功能，我们要看下一件商品时还得跑回产品列表页面，有时还忘记看到那件了。
（好的功能其中一点就是尽量让用户节省不必要的点击次数） 4) 促销推荐。
即页面下面的两个Tab页面，Most Popular和Stylist Picks。
一般的电子商务网站都设计有这个功能，我要重复说明一下的是Stylist Picks，这个推荐翻译成中文即是：精选搭配。
对于服装行业，搭配最为重要，上衣、裙裤、鞋子、包包，都要很相衬才有最佳效果，这里的精选搭配充当了
一回专业导购员的角色了。2ecommerce.cn 5) 多种外发方式和友好的提示。
《B2C电子商务系统规划与设计完全手册》 20 / 49
颜超敏：www.2ecommerce.cn（个人博客）
B2C电子商务系统规划、业务研究与设计 - 图文
