Serai 美容院:把「附近有没有好的美容院」变成 WhatsApp 预约

Serai 概念 demo:奶油底、大声的橘红字、一个手写字。往下一滑,紧接着就是完整价目表，因为每个来看美容院网站的人,心里真正揣着的就是那个问题。

想象这个访客:她住 Taman Molek 或 Bukit Indah,在 Google 打了「facial JB」,开着四个分页。每一家美容院都承诺让你发光。她真正怕的,是所有网站都不会写的那件事，敷着面膜躺在床上,被人一路推销一个 RM 3,000 的配套。这个首页赢的方式,是在她开口之前,先把这个恐惧回答掉。

01为什么价目表是整页第二块?

因为价钱是第一个问题,也是最难开口问的问题。大部分美容院网站把它藏在「价格请 WhatsApp 询问」后面,在第一次来的人眼里,这句话读起来就是「看你像付得起多少」。Serai 把十五个疗程连时长带价钱,分成三组，面部、眉毛与睫毛、脱毛与身体，直接放在 hero 下面,标题叫「Full price list, no surprises」。真正干活的是下面那一句:每个价钱都包含咨询和术后讲解;你在这里看到的,就是你在柜台付的。

这个顺序是刻意改过的。第一版的价目表在半页之后,排在信任条和招牌疗程后面。把它往上提,导航也得跟着改，菜单里 Prices 现在排在 Treatments 前面，让菜单顺序跟页面滚动顺序一致。一个会让你前后乱跳的菜单,感觉就像一个不知道要你先看什么的网站。

02「现在开没开?」页面自己实时回答

一张一周营业时间表,是在叫访客自己算:今天星期几、现在几点、今天是不是例外那天。Serai 的营业时间区块帮她算好了。它读访客自己的时间,在整周表上方只显示一行，「Open now, until 20:00」、「Opens today at 10:00」,或「Closed now, opens tomorrow」，同时把今天那一行标亮。星期二休息,直接用字写出来,另加一句「公共假期在 Instagram 公布」。这段逻辑用九组边界时间验过,因为一个错过一次的实时状态,比没有状态还糟。

03新山的美容院,需要什么吉隆坡的不需要?

新加坡客人。新山美容院有相当一部分预约是过长堤来的,而他们脑子里想的是新币。所以价目表下面放了平平的一句话:RM 188 大约是 SGD 56;离新山关卡 15 分钟车程,门口免费停车。三个事实,每一个都回答了一个新加坡人原本要自己去查的问题。三条评价里有一条来自一位每六周过关来接睫毛的新加坡熟客：对的评价,给对的访客看。

剩下的是国外模板永远会漏掉的马来西亚基本功。Waze 跟 Google Maps 并排,因为这里开车的人更多用 Waze。地址那一行写着「找橘色那扇门」,因为一整排店屋从马路上看都长一样。页脚先列 DuitNow QR、Touch 'n Go、GrabPay、FPX,再列信用卡。疗程名在英文下面带一行中文，水光补水护理、韩式雾眉，因为很多新山客人就是这样搜、这样问的。

04首次体验价,承诺的是「少」,不是「多」

配套区块的主角是水光补水护理首次 RM 88,原价 RM 188。每一家美容院都有体验价;这一个有效,靠的是后面那一句:七十五分钟、完整咨询,结束时不签任何配套。折扣让她好奇。「不签配套」这一句才是让她真的按下预约的原因,因为它点名了她最怕的那件事,然后直接把它拿掉。

配套还是有，六次面部 RM 998、会员卡、补睫毛，但它们放在一张比较安静的卡里,标题是「If you come back」。顺序本身就是讯息:先来试,再决定。品牌故事用自己的话把同一件事又讲一次(「你躺着的时候,没有人会向你推配套」),信任条再讲一次,叫 Price on the wall。同一个承诺在三个地方说出来,一家小美容院才让人信。

05手机上的轮播,为什么一定有暂停键

在手机上,十五个价钱加四张招牌卡,会是一段非常长的滑动。所以在 768px 以下,两块都变成可以横滑的轮播,每三秒自己换一张,卡片出血到屏幕边缘,让下一张露出一角。但自动轮播本身也是问题:客人正在看睫毛的价钱,卡片在她读到一半时被抽走了。所以圆点旁边有一个暂停键，不是装饰,而是因为会自己动的内容,必须给人一个让它停下来的方法(WCAG 2.2.2)。

该停的时候它也会自己停:手指一碰(六秒后恢复)、区块滑出屏幕、分页切到背景,以及手机开了「减少动态效果」时整个不动。WhatsApp 按钮在手机上也换了形状，原本是一颗会糊进 hero 照片里的小圆图标,改成横贯全宽、写着「Book on WhatsApp」的一条,页面底部同时留了空位,它永远不会盖住最后一行字。

06为什么是大声的橘红,而不是米色配金

米色、黄铜、深咖啡,是美容院最泛滥的一套配色。它看起来很平静,也看起来跟她开着的另外三个分页一模一样。店主给的参考是一间明亮、俏皮的工作室,所以 Serai 走反方向:暖奶油底 #FBF3E1、一个橘红 #F4561E、一个桃粉 #EC6E8C,全页没有任何冷色：连中性色都是暖的。标题用全大写的 Archivo Black;手写体 Caveat 全页只用五次,让它一直是「签名」,而不是变成主题。

亮橘色正是无障碍标准会咬人的地方。它压在奶油底上大约 3.1:1,白字压在它上面大约 3.4:1，做大标题都可以,做按钮字都不及格。所以亮橘只拿来填色块和写大字;每一个按钮和标签都用更深的橘 #A63009,白字在上面过 6.9:1。橘色的面板上,正文用深墨色(4.9:1)而不是白色。粉色也照样处理:品牌粉在奶油底上只有 2.7:1,所以手写字改用更深的 #D94A6E,过大字标准。

那些不规则色块、星芒、小花、波浪线全部是内联 SVG,不是图片:六个形状只定义一次、到处复用,颜色跟着主题走。放大多少倍都清楚,下载量一点也不增加。照片就是另一回事了,这里值得说白:demo 上的每一张照片、每一张顾客的脸都是 AI 生成的;评价、4.8 的评分和地址都是示意。每个图片槽位都标了「待替换」,顾客照片只有在真实客人书面同意之后才会上线。