「星客多」线下智能交互终端 2017年

「星客多」线下智能交互终端 2017年

在星客多“高效、透明、极简”的无人值守/快时尚美发模式中,线下智能交互终端(智能大屏)承载了打通 O2O(线上到线下)闭环的核心使命。该大屏终端直观地伫立于门店入口及等位区,是引导用户进行数字化自助下单、分流调度与建立品牌第一信任状的“交互中枢”。
基于“不推销、不办卡”的克制品牌理念,该终端界面通过极致的信息降噪与自适应布局,为用户提供了低摩擦、高透明度的全自助消费体验。


色彩美学与视觉心理规范

根据界面色彩规范,系统通过高度精简的色彩矩阵来管理用户的注意力和情绪流量,最大程度降低由于信息冗余带来的商场杂乱感:

主色(白色 Base White): 大面积作为背景色使用,确保界面整体最大程度的简洁与高光感,即使在商场和超市等高频嘈杂环境下,也能提供极高信息辨识度。

辅色(星客多蓝 Deep Blue): 用于顶部导航、核心功能标题及关键操作引导,沉淀品牌的专业感与科技心智。

优惠色(活力橙 Vibrant Orange): 专门用于“新用户立减”等增值福利信息,高明度、强唤醒,有效提升首单转化率。

提示色与警示色(浅粉 / 纯红): 用于发型师档期约满状态提示(如“今日约满”底色)及价格波动、系统警告等,确保视觉层级分明。


界面功能架构与交互层级(Information Architecture)

大屏界面从上至下严格按照用户的“认知 -> 决策 -> 触发”心理路径进行线性排布:

顶部全局信息锚点(Brand & Location Header)

视觉呈现: 品牌 Logo + 当前门店名称+ 营业时间。

UX 价值: 强化“星客多”的直营专业形象;同时帮助在多渠道混杂下单的用户快速进行空间定位,确保“在此地、下此单”。

2. 动态叫号与动态社交证明区(Queue & Social Proof Marquee)

叫号触发态: 当轮到下一位顾客时,该区域会采用从右到左的动态弹窗方式,高调流转出叫号人信息(如:正在叫号 W180 顾客),起到强烈的空间声音与视觉双重提醒。

常态( fallback 状态): 无叫号时,该区域轮播真实用户的高分好评与真实评论。将传统沙龙店员生硬的口头推销,转译为高信任度的“社交证明”。

3. 核心价格与即时决策区(Core Conversion Zone)

优惠与价格直达: 界面中心直接展示核心价格区间(从 19.9 元到 39.9 元不等,满足非高峰期与极致性价比心智)。价格下方贴心标注“价格波动提示”,杜绝隐形消费。

最早可预约时间: 动态显示“当前最早可预约时间:13:00”,为处于“剪还是不剪”犹豫期或时间紧迫的顾客提供明确的决策依据。

双平台聚合支付码: 提供微信、支付宝双渠道聚合二级码。由于星客多全面依赖小程序生态承载服务动线,该二维码可引导用户扫码极速跳转,实现线下到线上的无缝迁移。


门店发型师矩阵:屏效最大化的自适应自平衡布局(Responsive Grid)

界面最下方的“发型师展示区域”是整块大屏交互最复杂、也是体验最细腻的核心模块。它承载了发型师头像、优惠状态、排号档期(几点已被约、几点区间可约)等高频变动数据。
为了解决不同门店由于地理位置、面积导致的发型师人数差异,系统设计了一套极其严谨的自适应动态栅格机制(Responsive Layout)
[ 门店发型师总数 ] 
       
       ├─► 1-2  (极简饱满模式) ────► 块面整体放大 / 强化单人细节 / 避免界面空旷
       
       ├─► 3-4  (标准横排模式) ────► 黄金分割比例横向一字排开 / 视觉天平最完美
       
       └─► 5-8  (矩阵竖向模式) ────► 切换为紧凑的高密度竖向列表 / 确保多人数不溢出
[ 门店发型师总数 ] 
       
       ├─► 1-2  (极简饱满模式) ────► 块面整体放大 / 强化单人细节 / 避免界面空旷
       
       ├─► 3-4  (标准横排模式) ────► 黄金分割比例横向一字排开 / 视觉天平最完美
       
       └─► 5-8  (矩阵竖向模式) ────► 切换为紧凑的高密度竖向列表 / 确保多人数不溢出
[ 门店发型师总数 ] 
       
       ├─► 1-2  (极简饱满模式) ────► 块面整体放大 / 强化单人细节 / 避免界面空旷
       
       ├─► 3-4  (标准横排模式) ────► 黄金分割比例横向一字排开 / 视觉天平最完美
       
       └─► 5-8  (矩阵竖向模式) ────► 切换为紧凑的高密度竖向列表 / 确保多人数不溢出

发型师人数

界面动态行为分析 (如文件 4_6.jpg 所示)

设计核心目的

1 - 2 人 门店

发型师的头像区域、排号时间色块整体按比例放大,纵向或大块面平铺展示。

消除视觉空洞: 避免在小型门店或夜班交接时,大屏幕底部出现大量“留白死角”,让界面看起来依然充实、饱满且富有生气。

3 - 4 人 门店

采用最完美的标准横排一字延伸布局,头像与下方圆形排号序列呈黄金比例契合。

最佳认知视效: 这是最符合大屏幕视觉惯性的标准状态,顾客一眼即可横向扫视完店内全部师资与档期。

5 - 8 人 门店

界面自动解构横排逻辑,切换为多列、紧凑型的竖向排列栅格(Vertical List Grid)

认知降噪与防溢出: 在旗舰店或高峰期多人在线时,通过缩略单体体积、改为竖向对齐,确保所有发型师档期在一屏内完整展现,免去用户翻页的物理摩擦。