除了每天分享案例以外，偶尔也具体分析一下一些不错的设计案例好在哪里，帮助大家更好的吸收别人的设计方式和思考。

B&O 官网链接（一定要开音响，边听边看）：

地址：https://beoplay.cn

1、首页

首页应该没应用完整的栅格，在1210画布中，使用了30间距4列的网格。并且，整体使用了高逼格的白色边框设计，通过对上下左右增加白色遮罩的形式制造相框的观赏感。



在头部 Banner 部分，使用了高质量的官方配图。作为一家准 “时尚” 公司的耳机品牌，总有一副时尚大片的架势，即使当成服装品牌的宣传照片也没毛病。



首页比较突出的就是下方这些产品卡片了。如果只使用一样的卡片样式，每个卡片占一格，那么看着肯定相当的枯燥，所以在长宽的组合里，出现了多种组合排列方式，在有序的网格系统中营造节奏感。

并且，在简洁的产品照片中，也通过了不同的照片类型来制造差异，比如纯色背景中采用不同的颜色，有的只放产品照片，有的带有人物或者家居摆设。

而在整体的用色上，使用了饱和度明度相对较低且较冷的色彩，综合了时尚和工业科技的个性。

2、产品列表页



产品列表页的设计相对中规中矩。但是产品封面图的使用上，需要减分，因为部分商品是拍出完整的视图，部分只有细节，而这样的区别给的还不够强烈，所以显得特别别扭。

3、产品详情页

整个官网设计最有趣的地方，其实不在外面的重要模块页面里，而是每个商品详情页。不同商品的详情页设计方式、规格也各不相同。

可以左右拖动切换显示层的效果

对场景拆分

左右视差滚动的特效

有年代感的产品时间线


模拟声波的竖状波纹线

最让我惊喜的细节，就在这个模拟声波的竖状波纹中，会贯穿下方的其它内容。



在动画上做的滚屏，效果非常拔群（好犯规，我这种穷逼公司根本没有这样的摄影素材没法做）。



还有，在产品图展示上，不像普通电商详情页做个幻灯效果去切换，而是做成了这样不规则的模块组合，眼前一亮是没错的。

4、其它页面



新品发布页面，各种全新配色，牛逼动效，我第一次发觉原来数码产品也可以根据当季时尚流行色彩发布新品……



相对其他页面，这个就显得很马虎了，缺少摄影图的陪衬，排版也不理想。

5、总结

这是家舍得在设计上投入的公司。从产品的设计，各种拍摄内容到介绍的呈现，大法输了、三角输了、深海输了……只有侧 B 可堪一战（当然定价策略上也是）。

虽然作为一家做声音的公司，最重点的竞争力应该放在音质表现的技术水平上，但是 B&O 在官网的呈现中营造出产品对生活和时尚的融合，是相当到位的（可能发烧死宅不服），浏览下来只想说中了商家的圈套，忍不住要下单买买买了！！！

虽然其中不足也很多，包括英文数字使用字体磅值过低，部分页面完全就是英文排版照搬表现出水土不服，栅格系统没有完整应用导致的分裂感……但是如果每个商品页面从设计到实现都能有良好的支持，那么这个设计过程一定相当有趣的（请给我来一百个这样的客户）。



本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：超人的电话亭！