Dr. Choi’s Breast & Thyroid ClinicDr. Choi’s Breast & Thyroid Clinic
我们把一家诊治乳腺与甲状腺的医院网站，
以夜晚的影片与白天的镜头，分两个方向重新描绘。
这是徽标里本来就有的形状。A方案的影片，从一条缎带飘动、继而系成粉红丝带的画面开始。
这是超声探头观察体内时画面的形状。检查和组织活检都在这个扇形上进行，所以两个设计方案都在这个形状里说明组织活检的过程。
颈部前方的甲状腺，左右两叶在中间相连，形似蝴蝶。徽标里原本缺少的另一半，就用这个形状补上。
Dr. Choi’s Breast & Thyroid Clinic 是位于盆唐亭子站前的一家外科诊所，提供乳腺检查、真空辅助乳腺活检（麦默通）、乳房整形、甲状腺检查和射频消融术。现网站是2014年用 WordPress 搭建的，五组共二十八页的菜单里，密密地装满了医院的说明。
打开这家医院网站的人，大多怀着不安。有人摸到了肿块，有人的体检报告上写着需要进一步检查，有人被告知颈部有肿块。所以我们把同样的内容做成了两种温度：带着不安走进来的夜晚画面，以及听完结果后离开的白天画面。
2014
当前网站版权年份使用 WordPress 创建的五组菜单28
现有菜单的页数医院介绍 9 · 乳腺·检查 5 · 乳房整形 8 · 甲状腺·射频消融 3 · 社区 32
两种温度的设计方案夜晚的 Ribbon Motion Film · 白天的 Lens & Bloom722
滚动影片的帧A方案丝带 240 · B方案首屏 241 · 玉兰 241五组菜单、共二十八页的 WordPress 网站。首页的三张轮播图用的都是同一句文案。
在深梅子色背景上，丝带化作粉红丝带、再变成超声扇形、最后成为蝴蝶形甲状腺，我们用这段影片串起十二个场景。
在明亮的珍珠色背景上，用两段影片串起十一个场景：一段是镜头慢慢靠近窗边的一个人，一段是玉兰绽放。
我们把B方案的首屏，从放大文字的透镜图形，改成了慢慢靠近一个人的影片。
整理了我们重新解读徽标、描绘患者的等待、改写2014年文案的过程。
现在的徽标读作「최성림 +U 외과」。名字正中的「유」（读作 yu，即“乳”）写成了粗体洋红色的 U，左侧竖笔上系着一条粉红丝带。
「유(乳)」是韩语“乳房”一词的第一个字，读作 yu，徽标把它写成了拉丁字母 U。U 内侧的空白处还用小字写着韩文「유」，让读音和字义一起呈现。
丝带绕过 U 的左侧竖笔：一端斜斜地从竖笔前方穿过，另一端绕到竖笔后面，向下垂落。
横向伸出的尾端与向下垂落的一端交叠成十字，整个徽标因此读作「+U」。
英文名称是 Breast & Thyroid Clinic，徽标里却没有代表甲状腺的形状。两个设计方案都用蝴蝶填补了这个空缺。
当前徽标
#E8517C#F59DAB#AD6491为便于解说，徽标图形参照现有徽标图片（424 × 111）重新绘制；颜色取自徽标图片的实测值。
这家医院的诊疗，大多从「看」开始：先用乳腺X线摄影和超声来看，必要时一边看超声一边取组织。所以两个设计方案用三种形状来描绘这家医院：徽标里的丝带、超声画面的扇形、甲状腺的蝴蝶。
这是徽标里本来就有的形状。A方案的影片，从一条缎带飘动、继而系成粉红丝带的画面开始。
这是超声探头观察体内时画面的形状。检查和组织活检都在这个扇形上进行，所以两个设计方案都在这个形状里说明组织活检的过程。
颈部前方的甲状腺，左右两叶在中间相连，形似蝴蝶。徽标里原本缺少的另一半，就用这个形状补上。
我们把患者从第一次查找这家医院，到接到结果电话的这段时间，分成七个时刻，并为每个时刻确定网站要做的事。
心悬得最高的时候，是检查结束后等待结果的4~5天。两个设计方案都把这几天单独做成了一个场景。
摸到了肿块，或者体检报告上写着需要进一步检查。
网站要做的事让人在首屏就能找到电话预约，并用「如果出现这些变化」的勾选项，帮助判断是否需要就诊。
最先想知道的是该去哪里、今天能不能去。
网站要做的事把电话预约按钮固定在画面顶部和底部，同时显示门诊时间以及现在是否在门诊中。
同一天接受乳腺X线摄影和乳腺超声检查。
网站要做的事把两项检查一起做的原因，也就是致密型乳腺的情况，写进了诊疗项目的第一句话。
必要时，一边看超声一边直接取组织。
网站要做的事先用示意图展示真空辅助乳腺活检的四个步骤，并把「一个小切口 · 当天回家」写在最前面。
组织活检出结果通常需要4~5天，这是感觉最漫长的一段时间。
网站要做的事我们以「等待结果的那几天，也不让您独自面对」这句话做了一个场景，并附上结果一出来就电话通知的说明。
听取结果，再与同一位院长商定下一步。
网站要做的事把「诊疗由同一位医生负责到底」作为承诺文案，同时写明需要上级医院治疗时的转诊衔接。
接下来是治疗、术后护理和定期检查。
网站要做的事展示手术室的安全装置和设备，并以「带着不安而来，愿您安心而归」这句话，把夜晚的画面转为清晨。
「心悬的高度」只是为了说明而画的示意，并非测量值。组织活检出结果所需的时间，引自医院的说明。
带着不安而来，
愿您安心而归
这是A方案「黎明窗帘」场景中的文案。这份记录也从这里转入白天的背景。
听的人越不安，医院说的话就听得越重。「完美地」会抬高期待，「烧死的」会放大恐惧。医疗广告也不应使用保证疗效或与其他治疗相比较的说法。
所以我们把2014年的文案逐句重读：承诺结果的说法，改成说明过程的句子；听起来吓人的说法，改成看得见的事实。
2014年网站首页轮播图
关于乳腺与甲状腺的癌症诊断、治疗以及乳房整形的一切
设计方案的文案
A方案乳腺与甲状腺，从检查到治疗，在一处完成
B方案乳腺与甲状腺，近一点，细一点，直到最后。
2014年网站真空辅助乳腺活检页面
……是一种无需动刀做外科手术、没有疼痛、只需局部麻醉就能完美地取得组织，而且……还能简单彻底地切除的治疗方法。
设计方案的文案
A方案 · B方案以一个小切口完成，当天即可回家
2014年网站射频消融术页面
但用射频热能烧死的甲状腺组织会留在原处，因此……
设计方案的文案
B方案无需切开皮肤，在超声引导下进行治疗
2014年网站射频消融术的优点
不会留下疤痕。 与手术不同，几乎没有副作用。
设计方案的文案
A方案 · B方案治疗后的变化可能因人而异。甲状腺癌原则上以手术治疗。
2014年网站乳房整形介绍
……连您对美的烦恼，我们也会为您解决。
设计方案的文案
B方案以乳房手术的经验，连外形上的顾虑也一并考虑
不写保证结果的说法，而是写明过程和所需时间。
感受因人而异，所以写出实际做的事，例如「局部麻醉后」「无需缝合」。
现网站的就诊评价板块，没有搬到设计方案的首页。
射频消融术后的变化，标注为「治疗后变化示例」，并同时写明可能因人而异。
在射频消融的说明正下方，写上「甲状腺癌原则上以手术治疗」这句话。
不用真实的治疗照片，而是用类似超声画面的示意图和转盘来说明过程。
2014年的文案摘自现网站的首页和诊疗页面（2026年11月2日确认），仅修正了原文的空格。
徽标里的 U 是洋红色 #E8517C，候诊区的丝绒沙发则是珊瑚红。如果原样沿用这种粉色，在白色背景上只能用于大号文字，在深色背景上又显得黯淡无光。
所以A方案配合夜晚，把粉色调亮；B方案配合白天，把粉色压暗。
#E8517C徽标里的 U#F59DAB徽标里的粉红丝带#AD6491U 两侧的标志字样#D94440候诊休息区的丝绒沙发A方案 · 夜晚的背景 #12090F
近一点，细一点，直到最后
组织活检结果通常在4~5天后出来。
#E8517C#FF6F98B方案 · 白天的背景 #F6F2EE
近一点，细一点，直到最后
组织活检结果通常在4~5天后出来。
#E8517C#A8235A两个设计方案中，作为强调色使用的粉色都不到画面的0.5%。大范围由背景与照片、影片承担，粉色只用于按钮和需要强调的文字。
#12090F夜晚场景的背景#2B1322卡片 · 场景的叠层#FF6F98夜晚的强调色 · 按钮#FFA6BF影片中的光 · 辅助强调#F7EEF2夜晚的文字#FBF3F6黎明之后的明亮背景#F6F2EE白天场景的背景#F6E2E8玉兰 · 面板的叠层#1C1530白天的文字#CF3570按钮 · 大号文字强调#A8235A小号文字的强调#8FDED3甲状腺 · 设备段落的超声光| 组合 | 样例 | 对比 | 用途 |
|---|---|---|---|
| A方案Ink / Night | 近一点 4~5天 | 17.23:1 | 小号文字也可用 |
| A方案Rose / Night | 近一点 4~5天 | 7.44:1 | 小号文字也可用 |
| A方案徽标 U / Night | 近一点 4~5天 | 5.50:1 | 可用于正文 |
| B方案Ink / Pearl | 近一点 4~5天 | 15.72:1 | 小号文字也可用 |
| B方案Rose Deep / Pearl | 近一点 4~5天 | 6.17:1 | 可用于正文 |
| B方案Rose / Pearl | 近一点 4~5天 | 4.28:1 | 仅限大号文字 |
| B方案徽标 U / Pearl | 近一点 4~5天 | 3.19:1 | 仅限大号文字 |
| B方案白色文字 / Rose 按钮 | 近一点 4~5天 | 4.77:1 | 可用于正文 |
近一点，细一点，直到最后
两个设计方案的韩文标题与正文
35岁 · 4~5天 · 200m
大号数字与承诺文案
FOCUS ×1.0 · SCAN 100%
B方案的对焦 · 扫描标记
对比度按 WCAG 2.1 标准计算（4.5:1 以上可用于正文，3:1 以上可用于大号文字）。画面中的颜色占比，是在两个设计方案的各场景画面中，统计接近背景、照片、强调色与文字颜色的像素得出的数值。
涉及乳房和颈部的医院，用照片必须格外谨慎。两个设计方案都不展示裸露的身体：A方案用手势说话，B方案用材质说话。
A方案里的人把手放在胸前和颈部，B方案里的物件则是珍珠、缎面和玻璃蝴蝶。同样的三项诊疗，一边用人的手势表达，一边用物件的质感表达，两个设计方案的温度差异就清楚了。
A方案 · 将手放在象牙白衬衫上的人
B方案 · 粉色丝绸上的珍珠
A方案 · 身穿丝绸连衣裙的背影
B方案 · 形成柔和曲线的缎面
A方案 · 指尖轻触颈部的侧影
B方案 · 折射光线的玻璃蝴蝶医院空间与设备使用现网站上的实拍照片；诊疗项目和各场景的照片，则是为设计方案专门摆拍的。没有使用真实患者或医护人员的照片。
现网站分为医院介绍 · 乳腺·检查 · 乳房整形 · 甲状腺·射频消融 · 社区五组，共二十八页。初次来访的人需要知道的，只是其中一部分。
两个设计方案都把首页做成一条长长的滚动页面，详细说明则连到现有的子页面。每个诊疗项目旁的小标签，就是入口。
条形长度与在 1440 × 900 画面中测得的场景高度成正比，已计入画面固定不动、同时翻动影片或展开面板的段落。
这个设计方案在深梅子色背景上，以240帧的丝带影片开场，串起十二个场景。夜晚的场景一路延续，到「黎明窗帘」转为明亮背景；从医疗团队到来院路线，都以白天的画面呈现。
影片播放时，「35岁起需要定期检查」等三句话依次浮现。
「乳腺·检查」「乳房整形」「甲状腺·射频消融」三张卡片在同一位置依次叠起，并附上直达子页面的小标签。
在超声示意图中，针逐渐靠近病灶，左侧的四个步骤也随图切换。
描绘蝴蝶形甲状腺里的结节在射频治疗后逐渐缩小的过程，并标注「治疗后变化示例」。
心电图的线条随滚动逐渐描出，从生命体征监护仪到电外科设备，四种装置依次登场。
伴随「带着不安而来，愿您安心而归」这句话，画面逐渐变亮，转入医疗团队段落。
录屏中的院长照片换成了诊室静物，电话号码、地址和营业信息则替换成其他文字或加以遮盖。
这个设计方案以一段影片开场：在明亮的珍珠色背景上，镜头慢慢靠近窗边的一个人，随后串起十一个场景。只有甲状腺和设备段落转为深色背景，使用超声画面的青绿色。
镜头靠近窗边的人时，三个词依次迎面而来、对上焦，再一路划线到画面尽头。
在「检查当天完成，诊疗由同一位医生负责到底」这句承诺下方，我们用数字写出了 35岁 · 4~5天 · 200m · 2小时。
珍珠、缎面、玻璃蝴蝶三块面板随滚动逐一展开，介绍各个诊疗项目。
把组织活检的四个步骤排在转盘四周，随着滚动一格一格地转动。
一道光扫过颈线，画面随之变成超声影像般的样子，接着是结节缩小的变化示例。
花蕾绽放时，划过「等待结果的那几天，也不让您独自面对」这句话；花朵盛开时，以「为了重新绽放的日常」收尾。
B方案的首屏最初是一组图形：玻璃透镜放大「近一点 · 细一点 · 直到最后」几个字。画面干净，却看不到人，心也就没有跟上。
于是我们改成一段241帧的影片，镜头慢慢靠近窗边的一个人：从宽敞的房间，到侧影，到搭在颈部的指尖，再到窗帘那头的光。
近一点， 细一点， 直到最后。
从宽敞的房间，到侧影，到搭在颈部的指尖，再到窗帘那头的光，镜头一步步靠近。从B方案首屏影片的241帧中选了81帧。
随着滚动，花蕾慢慢张开，直到盛放。写给等待结果那几天的句子，就放在这段影片上。
录屏中的院长照片换成了诊室静物，电话号码、地址和营业信息则替换成其他文字或加以遮盖。
两个设计方案用的是同一份文稿。把同一场景叠在一起，拖动中间的手柄，就能看出夜晚与白天的画面有何不同。
两个设计方案都另外制作了竖屏用的影片。丝带和人物放在画面上方，文字放在下方，在拇指够得着的位置就能读到。
人们在医院网站上最常找的，是门诊时间、位置，以及现在能不能去。设计方案中的三个小装置，可以在这里亲手试试。
选择星期和时间，「来院路线」中的提示文字就会随之变化。
现在是门诊时间 · 下午1点开始午休 现在是午休时间 · 下午2点恢复门诊 现在是门诊时间 · 门诊到下午6点 现在是门诊时间 · 星期六门诊到下午1点 现在不是门诊时间 · 今天上午9点开始门诊 现在不是门诊时间 · 明天上午9点开始门诊 现在不是门诊时间 · 星期一上午9点开始门诊 （节假日休诊）
以工作日 09:00~18:00（午休 13:00~14:00）、星期六 09:00~13:00 为准。星期五晚上，会把星期六的门诊提示为下一次门诊。
请点选符合的项目。文字与两个设计方案中的自查内容相同。
请点选符合的项目进行确认。
有1项与您的情况相符。请不要拖延，尽快找乳腺专科医生检查。
早期乳腺癌大多没有症状。本检查清单不能代替诊断。
我们把B方案的转盘搬到这里，可以用步骤按钮转动查看。
一边实时查看超声影像，一边确认病灶的位置和大小。
对皮肤和乳腺组织充分进行局部麻醉后，通过小切口插入穿刺针。
利用真空将组织吸入针内采集；良性肿块有时也会在此时一并切除。
切口无需缝合，贴上专用敷贴，压迫止血后当天即可回家。
组织活检结果通常在4~5天后出来，一经确认会电话告知。
我们提出了两个方向，最终没有被选用。不过在这次工作中，我们重新解读了系在徽标上的丝带，用蝴蝶填补了甲状腺空着的位置，也把等待结果的那几天做成了画面中的一个场景。
深梅子色背景 · 十二个场景 · 影片 240帧
珍珠色背景 · 十一个场景 · 影片 241 · 241帧
解读徽标 · 等待时间 · 改写文案
名字里有 Thyroid，徽标里却只有丝带。加上蝴蝶，两项诊疗才显得分量相当。
网站不只在就诊前被阅读。我们首先想到的是：在等待结果的那几天里，人们还会再次打开它。
透镜图形很干净，心却没有跟上。我们改成靠近一个人的影片，并仔细打磨，不让默认横向滚动这类未经修饰的画面，在精心设计的场景之间露出来。
BREAST & THYROID CLINIC HOMEPAGE RENEWAL
Dr. Choi’s Breast & Thyroid Clinic · 2个设计方案 · 解读徽标 · 文案准则
| Item | Detail |
|---|---|
| Client | Dr. Choi’s Breast & Thyroid Clinic · 盆唐的乳腺·甲状腺外科诊所 |
| Scope | 网站改版提案 · 解读徽标 · 文案准则 |
| Period | 2026年11月 |
| Round A | Ribbon Motion Film（深梅子色，十二个场景，滚动影片 240帧） |
| Round B | Lens & Bloom（明亮的珍珠色，十一个场景，首屏影片 241 · 玉兰 241帧） |
| Added | 解读徽标 · 三种形状 · 等待时间地图 · 改写文案 |
| Identity | 当前徽标 · Night #12090F · Rose #FF6F98 · Pearl #F6F2EE · Rose Deep #A8235A |
| Tools | GSAP · ScrollTrigger · Lenis · Canvas · Three.js |
| Typeface | Pretendard · JetBrains Mono |
| Studio | BlueCanvas |
Goal让带着不安打开的首屏，最终以安心收尾
从徽标上的一缕丝带和患者等待的那几天出发，
我们将打造一个让人放心拨打电话的医院网站。
医院 · 皮肤增强剂
CellREDM
皮肤增强剂广告落地页的制作过程。我们从厂商广告视频第一个镜头里的锁孔与 IRERAUM 诊所内饰的拱门属于同一结构出发解读造型，以产品之夜与诊所之昼划分梅子色 · 香槟色 · 象牙色的色彩标准，并写下不承诺效果、只讲如何选择的医疗广告文案。内容包括三个首屏方向、三个广告方向和修改到第七版的广告视频，直到完成十五个场景的落地页与咨询管理界面。
生物/眼科
ReGenTreeReGenTree
从两家公司的名称和徽标中相同曲率重叠的两条弧线开始的品牌诠释，从眼科检查的白色、钴蓝色、荧光绿和琥珀色中选择的颜色标准，从眼睛到分子按比例编织的故事序列，直接绘制覆盖伤口原理的实验室，以及包含三项提案的眼科新药，包括1月的8个草图、2月的CLINICAL WHITE和10月的SURFACE OF SIGHT。公司网站改版提案流程
品牌 · 婚纱
Heritique New York
这是一家设计师婚纱旗舰店的网站改版提案过程，收录了：把 Heritage Boutique 中间七个字母折起而成的名字，以及纠正七种零散名称写法的品牌解读；从十四张设计师卡片照片中测得的婚纱白色，以及选出最能衬托白色婚纱的背景的色彩标准；1月的两版初稿，以及用四段面纱飘动的滚动影片串起十一个场景的11月设计方案；还有品牌十一年的历史。
Contact
请告诉我们您的现状与目标。 我们将为您梳理可行范围、推进方式及预估费用。
DIRECT