专栏名称: 数英DIGITALING
数英网 DIGITALING是一个数字媒体及职业招聘于一体的资讯平台
目录
相关文章推荐
ZaomeDesign  ·  新作 | 宁德时代零碳茶馆的永续智慧 / ... ·  2 天前  
字体设计  ·  运用霓虹元素打造毕业展海报视觉效果 ·  3 天前  
字体设计  ·  从草稿到终稿! ·  3 天前  
优秀网页设计  ·  被Deepseek逼到墙角?ChatGPT搜 ... ·  4 天前  
庞门正道  ·  这只柴犬,又骚又贱啦~ ·  5 天前  
51好读  ›  专栏  ›  数英DIGITALING

小布Brompton的小程序,做得比奢侈品都精细

数英DIGITALING  · 公众号  · 小程序 设计  · 2024-10-05 14:30

正文

很早就对BROMPTON这个万元单车祛魅了,因为去门店试过后发现并不算好骑。由于折叠单车体积小,骑行时上半身肢体伸展不开。店员也说得很老实:跟大车相比它确实不是很好骑,但是在折叠单车里,小布绝对属于体验感最好的。
明白,但不买。 (开玩笑)
虽然祛了魅,但是每次看到它时还是会有“真漂亮,好一个美丽的小‘废’车。”类似的酸念头。点开BROMPTON小程序,依然会被简洁有序的视觉、丝滑的交互再触动一遍,然后承认: 这个由1200个零件组装而成,把重量控制在7.45kg——11.5kg的BROMPTON,连小程序都很产品主义。

本期就和大家分享一下BROMPTON小程序,再看看它是如何运营的。

小程序=官网+公众号+品牌手册+社群

先分享一个个人浏览习惯,如果看到一个品牌的官网搭建得很不错,会好感骤增,这可能源于心中那一点pc情怀,也可能因为看多了整齐划一的电商店铺,会更珍惜那些体现品牌特色的官网。 (在电商平台搭建店铺这件事上,品牌能自由设计的空间非常有限。不过平台也是为统一规范,能理解。)
在手机移动端,若点进一个观感和交互都很流畅的小程序,那这次体验大概率会引导我关注这个品牌。
先来看看BROMPTON小程序——

首页+分类+发现

小程序整体架构概况

首页、分类、发现、购物车、我的,5大板块分别对应5大功能区——信息直达、产品货架、品牌社区、购物车、用户主页。

相比以购物为主的小程序,它多了好几重功能:新品营销、用户社交、售后服务、品牌手册以及更多。
难得的是,在多功能属性之外,界面还能呈现得简洁有序,这得归功于那一看就很贵的UI设计:
1、每个板块最长不过5屏(除发现外)
2、每屏最多安排两列内容,视觉不拥挤
3、简化导航路径,避免大按钮套小按钮,优化交互体验

1、首页——核心推荐区

首页结构

首页全长不过5屏,最先看到的banner位置上,海报以左右滑动的形式推荐产品。竖版海报+痛点文案,兼顾着视觉调性和卖货需求。
全新12速变速系统
更快的骑行
更密的齿比
更多可能性
种草:P line 单车
载物好帮手
种草:后置货架组
解决骑行导航烦恼
种草:骑行手机支架

海报以下均为横向导航按钮,以平面为主,gif、视频为辅,丰富视觉效果的同时,也没打破整体的秩序。

后三屏均为产品推荐,值得注意的是很多小程序为了提升转化,会设计很多分类按钮,这些分类又会和整个货架区重合,让人眼花缭乱,丢失了注意力。

但是BROMPTON设计得更克制,只按照品类分为:单车、配件、箱包、服饰四个大按钮,每个品类只露出两个产品。文案也以功能性为主,言简意赅。用户只需要滑三屏就能基本了解BROMPTON产品线。
简洁清晰的导航设计
首页结构清晰,在较短的路径内就完成营销、重要服务告知、品牌内容、品类推荐这4大项。
整体视觉也延续了BROMPTON logo里的现代英伦风,偶尔以暖色来点亮整屏,也会用线条感让二维画面更生动。 总之,黑白灰是怎么玩出花的、视觉如何做到简洁又不简单、不算平铺直叙,看看BROMPTON 能学到很多。 以及还有更多的字体、排版、icon设计等等,相信专业美术能比我看到更多亮点。

2、分类——商品货架区

或许是因为产品线不复杂,也或许是参考了餐饮点单模式,总之分类按钮被设计在侧边,且每个按钮直通产品,没有大按钮套小按钮的情况。每条产品线都一览无余。
统一白底的设计让画面干净清爽,也能保证小图显示时就能凸显产品质感。 (侧边设计不多见,不信大家可以看看自己爱逛的品牌小程序)

选车如点单

产品线介绍:
A line——A to Anywhere,入门款

C Line  经典全钢版

P Line  基于C Line 革新,更轻

T Line  用钛取代钢材,仅重7.45kg起,轻而易举

服饰 和英国国宝级油蜡夹克品牌Barbour 合作推出

从2017年合作至今。

点进产品详情页——

  • 主色调不超过三种配色,巧妙的撞色设计,让整个画面看起来干净又有亮点。
  • 没有多余的文案,每条文本都短小精悍,旨在描述功能卖点,很实用主义。

  • 总之,美术语言和文本互为补充,保证了表达的有效性。

    表达遵循:少即是多

另外,还有那些功能性标识,虽说容易被忽略但是很可爱、加分。每一类产品都有专属特性icon,就连同一特性在不同品类中,都会有不同表达。
比如:

单车的英伦典范 VS 其他产品的英伦典范
单车的直邮到家 VS 其他产品的直邮到家

其他符号化表达,也非常具象。轮胎“滚阻较小”VS 内胎“气密性好”。

不得不说,好设计不仅本身看上去贵,也让产品和品牌更有调性和品质感。细节能证伪,细节也可无声自证。

如果再逛逛天猫旗舰店就会发现,以上我们提到的种种亮点,几乎是小程序专属。可见,品牌有意要在这片拥有更大话语权的地方打磨出风格,也给国内的布友们提供一个能快速达成审美共识、更有可能玩到一起的乐园。

3、发现——品牌社区

这里聚集着数量最大的BROMPTON中国区用户群,也是品牌在重点运营的社群。
“布落” 是用户分享生活的地方,有很强的社交属性。
“活动” 囊括了全国范围内的BROMPTON骑行活动信息,有正在报名中的,也有已经结束了的,用户依然能从活动海报中看到大致玩法。
“学院” 下的内容,均由品牌发布。其中用标签再分为品牌和技术两大类,前者关联的是品牌层内容,后者对应到和产品使用维修的教程。

1)布落

布落下设有7个话题区,用户可根据个人需求和兴趣选择加入。

用户能参与的所有话题概况

整体来看,骑迹、门店、出行、穿搭、技术、摄影、生活 7个话题,基本能满足男女/理性和感性/技术控与生活方式爱好等不同人群的个性化需求。

而用户发布的内容也能作为镜子,反映出一个具体的骑行者他平时的24h生活;也能折射到一整个群体,人群的多样性以及生活方式的多面性。能讲的远远不只骑行这一个动作哦~


就说浏览量最高的#骑迹#,在此之下又细分出4个骑行场景:

  • 城市骑行 ——“分享骑行路线,打卡城市景点”
  • 通勤骑行 ——“工作日小布陪你上下班”

  • 户外骑行 ——“用四轮去远方,用两轮更深入”

  • 夜骑 ——“与众不同的夜骑故事”

随机掉落几个用户分享


其中,BROMPTON折叠扮演了什么角色呢?
是作为一个骑行工具,改变了生活半径,让我们探索也遇见;
还是给了让人出门娱乐休闲的契机,像是成年人的大玩具;
或者更像一个社交工具,人们在活动中能更快速链接彼此,组一次局、促成一个小圈子?
角色可以很纯粹,也可以很复合。在不同骑行场景里,同一台BROMPTON会流露出不同含义。就像人是环境动物那样,消费品也是场景的产物。

2)活动

其中的主题玩法值得说一说。活动有路线型、挑战型、游戏型、运动燃脂;去海边、田野、音乐节;也有更趣味的,比如以着装为主题、喝酒喝咖啡、拍摄、宠物趴、车零件DIY……

透过各个城市骑行活动,我们也能看到当地特色的骑车环境,比如青岛沿海骑活动、地处河谷平原的太原有山谷骑行、杭州环西湖骑、宁波夜骑东湖等等。

另外,BROMPTON也会和品牌搭子一起玩,比如拥有庞大女性群lululemon、车圈内最宠车主的蔚来、同为英伦范儿的MINI…一起组局。大家彼此可以勾兑勾兑兴趣,品牌也能有机会拉一波潜在人群。

3)学院

学院中囊括了品牌公众号、知乎账号的精华,也有“独家”信息。

点击到#品牌#中, 我们能了解到最新合作(与英国腕表品牌 Bremont 、手工制鞋工坊 Cheaney,合作简称BBC ),也能看到关于BROMPTON更多一手资料,包括第一款单车的问世、车标的含义、怎么选择适合自己的车型、车配件都有什么作用…

进入#技术#中, 能找到各个零部件的维修/安装调换操作指南,这里就像一个在不断更新的电子说明书,还附有视频教程。

综合内容体量和功能性来看,BROMPTON小程序基本等于官网+公众号+社群+品牌手册的总和。

文章想就其中的社群,展开一二。BROMPTON和用户的关系不同于普通的买卖供需交易,是一个比较好的社群样本。

它呈现出一种生态感,社群的特征诸如共识性、共益、共建、公共性等,在其中体现得很具体 ——用户和品牌会基于审美共识、基本价值观认同,组织并共建出有公共性、能共益的活动/内容。
● 生态也具有自发性,自发生产内容也生产联系,这也保证了社群在不断发展的同时,不丢失向心力。
另外相比于那种买完单即结束的的消费路径,消费是上述的起点,之后用户要怎么玩、怎么参与到其中成为社群的一份子,这才是关键。(不只BROMPTON,我们能从很多善于运营社群的品牌中看到这一点。)
小程序上线时,小布发布了与FREITAG的联名新品

再追问一步,为什么BROMPTON能建立起社群?

答案或许要追溯到品牌的由来:A bike born in the City. Changing the way people live in cities.






请到「今天看啥」查看全文