第 4 节 · 顾客评价 #voices
下面有这一节的现状截图和 4 个骨架不同的新版式。推荐：方案 C——上一节是居中大字深底，这一节换成「左边评分、右边引语」的侧栏结构、深一档纸色，节奏最稳。
怎么用：点右上角「✎ 批注」按钮（按钮上那串英文是这一页批注的存档名），在任意方案、任意一句话上点一下写意见（比如「选 B，但标题换居中」）。选定后这一节可以单独再开一轮。
内容大纲（照现在线上预览版的原文）
- 眉标 // Voices · What customers actually say
- 标题 Real reviews, real customers.
- 导语：We don't write our own testimonials…
- 4 句引语（Yelp 1 · Google 1 · 媒体 2），每句带来源
- 按钮：All Yelp reviews · Google reviews · Tell us your story
- 4 句里有 2 句是媒体报道（Palo Alto Online、Smile Politely），跟下一节「媒体报道」重复。建议（待 Jack）：这一节只放顾客，或者两节合并成一节「别人怎么说」。
- Palo Alto Online 那句写「as fast as 45 seconds」，第一屏写「135s per order」——读者会觉得两个数打架。
现状
小号标题块 → 导语 → 4 格等宽引语卡 → 一排按钮。跟上一节、下一节几乎同一个模子。
方案 A · 一句大引语，底下小点换下一句
适合：一次只读一句，字能放很大，最有人味。 代价：其余几句要点才看得到；自动轮播容易被嫌烦。
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
手机上引语字号缩到一屏放得下，小点在下面。
两个框里是同一份小样，按框的宽度自动排版——跟真网页在手机上的表现一致。
方案 B · 错落便签墙：长短不一的评价卡，中间夹一张大评分
适合：看起来像真的一面留言墙，评价越多越好看。 代价：现在只有 2 句顾客原话（另 2 句是媒体，建议挪去媒体一节），墙不够满；高低不齐，有人会觉得乱。
Real reviews, real customers.
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
“Meticulously prepared beverages and a welcoming vibe. The Matcha Latte with Oat Milk and Strawberry Cold Foam is a perfect blend.”
Real reviews, real customers.
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
“Meticulously prepared beverages and a welcoming vibe. The Matcha Latte with Oat Milk and Strawberry Cold Foam is a perfect blend.”
手机上变成一列卡片，评分卡排第一张。
两个框里是同一份小样，按框的宽度自动排版——跟真网页在手机上的表现一致。
方案 C · 左边一个大评分，右边引语一行一条推荐
适合：先用 4.8★ 立住，再给原话佐证；引语再多也只是往下加一行。 代价：引语变成列表，单句的分量比大卡片轻。
Real reviews,
real customers.
Our Green Street matcha bar holds a perfect 5.0★ over 337 reviews.
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
Yelp · Palo Alto · 170 University Ave · ★★★★★ ↗“Meticulously prepared beverages and a welcoming vibe. The Matcha Latte with Oat Milk and Strawberry Cold Foam is a perfect blend.”
Google · Champaign · Yummy Future Matcha House · ★★★★★ ↗- All Yelp reviews · Palo Alto Google reviews · Champaign
Real reviews,
real customers.
Our Green Street matcha bar holds a perfect 5.0★ over 337 reviews.
“The robot making coffee is fascinating and fun to watch. The staff provides excellent service.”
Yelp · Palo Alto · 170 University Ave · ★★★★★ ↗“Meticulously prepared beverages and a welcoming vibe. The Matcha Latte with Oat Milk and Strawberry Cold Foam is a perfect blend.”
Google · Champaign · Yummy Future Matcha House · ★★★★★ ↗- All Yelp reviews · Palo Alto Google reviews · Champaign
手机上评分在上占一行，引语在下一条一条排。
两个框里是同一份小样，按框的宽度自动排版——跟真网页在手机上的表现一致。
方案 D · 两条自动慢慢滚的引语带
适合：有动感、占地小，适合当两个大节中间的过门。 代价：字在动，读完一句要追着看；系统开了「减少动态」时只能静止。
Real reviews, real customers.
Real reviews, real customers.
手机上只留一条带，一次露出一句半。
两个框里是同一份小样，按框的宽度自动排版——跟真网页在手机上的表现一致。
照片和文案全部取自官网已有的内容；小样里的数字只用现在线上预览版出现过的（测试会查）。回总览 →