ALINE OF WIND
最快的线,由风来画
风洞的流线画出自行车轮廓,光再把轮廓换成真实的 DOGMA F。我们把 Pinarello 削减车架的理由——空气动力学——搬到了首屏的呈现里。
- 风洞
- 轮廓
- 影棚光
- Ink
#050809 - Teal
#1FC2B0 - Orange
#FF5A1F - Paper
#F3F1EC
Archivo 125% · 900 · Italic
- 优点
- 产品成为首屏的主角,从只有 Pinarello 才有的故事开始。
- 不足之处
- 因为影片必须亲手渲染,投入的工夫最多。





NEOFLYPINARELLO OFFICIAL IMPORTER · KOREA
我们重画了 Pinarello 官方进口商 NEOFLY 的网站。首屏里,风画出自行车轮廓,光把轮廓换成真实的 DOGMA F。
01 WIND
数百条细流线横穿画面。线弯折的地方,正是自行车所在的位置。
02 FORM
激光经过之处,留下车架与车轮的轮廓。
03 LIGHT
影棚灯光掠过,线描就变成真实的照片。
04 LINE
e 与 o 是一笔
neofly 的 e 和 o 是一笔不抬笔写成的线。连接两个同样大小圆的这条线,与 DOGMA F 的两个车轮重合。
NEOFLY 是意大利自行车品牌 Pinarello(PINARELLO)的韩国官方进口商。我们引进公路、砾石、MTB、计时赛产品阵容与 MOST 零件,也一同供应 PARTINGTON · ONE-K · CRW · V-SPRINT 的车轮与车把组件。以首尔松坡的直营店 Pinarello House 为中心,与全国十二家官方经销店合作,也举办在岭南阿尔卑斯骑行的 Trans Alps 等活动。
进口商的网站必须同时带着两个名字。访客找来是因为 Pinarello,而咨询、维修、一起骑行的是 NEOFLY。所以这次改版从决定用谁的声音说话开始。把两个标志并排读过之后,我们把 Pinarello 的风与 NEOFLY 的线收进了一句话。
2
发送设计方案的次数2026 年 8 月的第一版设计方案与 11 月的主设计方案3
比较过的首屏方向时间之线 · 道路之线 · 风之线240
亲手渲染的风洞影片帧横版 1600 × 900 · 竖版 720 × 1280,两套23
文件名就是涂装名称的资料十二年上传资料中选出的 95 张照片里先读了菜单与产品目录,从能按公路 · 砾石 · MTB · TT 分开查看的结构定起。
我们把深色网格画面上放入产品阵容筛选与售后服务说明的首版主页面,随提案一起发送。
用时间 · 道路 · 风三条线各画一次首屏,比较之后选了风。
风勾勒自行车轮廓的 240 帧影片,我们用 Canvas 亲手渲染。
从以影片开场的首屏,到经销店查找与支持说明,共接成八个场景。
进口商的网站上放着两个标志:品牌 PINARELLO 与公司 neofly。我们没有二选一,而是把两个标志放大叠在同一处,读它们各自画的是什么。
PINARELLO
Pinarello 的 P 是一笔:从上方大幅绕下来,末端细如针。竖干左侧附有三道短纹线。我们把这些纹线读作风。因为那是快速掠过之物留下的痕迹。
NEOFLY
neofly 的 e 和 o 不是分开写的两个字母。从 e 的横画末端起笔的一条线绕过 e 一圈,再以 S 形过渡,绕过 o 收笔。以设计方案所用的标志图(宽 1,101px)测量,这条线长约 1,224px,比整个标志的宽度还长。
ONE SENTENCE
把风与线接起来,就成了主设计方案的第一句。「最快的线,由风来画」。Pinarello 的纹线化作风,NEOFLY 的一笔成了风画出的线。
只有「一笔」还不够。我们在 e 与 o 的圆弧上套圆,量出大小与间距;在主设计方案风洞影片的最后一个场景里,用同样的方法量了 DOGMA F 的两个车轮。
圆心距 2.23× 半径
SAME SIZE
与 e 和 o 的圆弧部分相合的圆,半径分别为 97.2px 和 96.7px,相差 0.5%。一条线连接两个同样大小的圆,形状就像公路自行车的两个车轮。
DISTANCE
标志中两个圆的圆心距是半径的 2.23 倍。设计方案影片里的 DOGMA F 是 2.90 倍。把 o 向右移开这么多,e 就落在后轮上,o 落在前轮上。
THE BIKE
在拉开的笔画下面铺上影棚照片,e 的圆就落在后轮,o 的圆落在前轮,S 形笔画经过两轮之间。首屏的最后一个场景就以这处重叠收尾。
为了找设计方案要用的资料,我们打开了 2014 年到 2026 年网站上上传的文件夹。选出的资料是 95 张照片与 5 段视频,共 100 份,其中 79 份上传于 2025 年和 2026 年。
95 张照片中有 23 张,从文件名就是涂装名称。Luxter Venice、Obsidian Emerald、Jade Spectra——同一个车架每出新色,照片就多一张。

2025.06
2025.06
2025.06
2025.06
2025.06
2025.06
2026.01
2026.01
2026.06
2026.06
2026.06
2026.06
2026.07
2026.07
2026.07
2026.07
2026.07
2026.07
2026.07
2026.10
2026.10
2026.11
2026.11所以主设计方案里放了两个为颜色而设的场景。一个在首屏末尾,翻看同一台 DOGMA F 的四种涂装;另一个像翻海报一样,翻过四款艺术涂装。
2026 年 8 月,我们把首版主页面随提案一起发送。深色背景上以网格排布产品照片,产品阵容筛选、售后服务说明、经销店与支持都收在同一页里。
三个月后重新摊开,拿起红笔。要保留的与要修改的分得很清楚。
1
2
3
4
5
修改的部分
「PINARELLO OFFICIAL KOREA.」虽是事实,但其他进口商也能用这句话。在主设计方案中,我们改以 Pinarello 制造车架的理由作为第一句。
修改的部分
DOGMA X · F · 砾石的照片以同样大小并排摆放,没有确定先看哪一台。主设计方案从一台 DOGMA F 开始。
留下了什么
把进口商做的事压成三行的卡片很好。在主设计方案的概览场景里,保留为进口 · 供应、官方经销店、骑行活动。
留下了什么
按 ALL · ROAD · GRAVEL · MTB · TT 划分的筛选,是现有网站上没有的。在主设计方案里,它成了横向滚动产品阵容上方的标签页。
修改的部分
一张地图只显示一处总部。主设计方案把十二处按地区标签分开,能立刻找到最近的一家。
第一版设计方案画面上的联系方式、地址、代表人、营业执照号,已换成其他字符或做了遮挡。
在画第二版设计方案之前,我们以「线」为题目画了三次首屏。从 1952 年起始的时间之线,从首尔延伸到岭南阿尔卑斯的道路之线,以及勾勒自行车轮廓的风之线。三个画面讲的是同一家公司,但第一句的主语不同。
ALINE OF WIND
风洞的流线画出自行车轮廓,光再把轮廓换成真实的 DOGMA F。我们把 Pinarello 削减车架的理由——空气动力学——搬到了首屏的呈现里。
#050809#1FC2B0#FF5A1F#F3F1ECArchivo 125% · 900 · Italic





BLINE OF TIME
我们用一条时间尺,画出 Pinarello 自 1952 年在特雷维索起步至今的时间。奶油色纸张上的长体数字与一条红线,像翻开一本意大利自行车杂志的封面。
#F2ECE0#15130F#C42B1C#B9AE9CArchivo 62% · 900





CLINE OF ROAD
在等高线地图上画一条从首尔直营店延伸到岭南阿尔卑斯山脊的线。十二家经销店成为线路图上的站点。
#101418#26313A#EEF0EA#FFB21AArchivo 125% · 800 · Italic





| 标准 | A 风 | B 时间 | C 道路 |
|---|---|---|---|
| 是否从只有 Pinarello 才有的故事开始 | 很合适 | 一般 | 较弱 |
| 首屏里看得见产品吗 | 很合适 | 很合适 | 较弱 |
| 看得见 NEOFLY 在做的事吗 | 一般 | 一般 | 很合适 |
| 新涂装推出时是否容易更换 | 很合适 | 一般 | 一般 |
| 移动端首屏能否独立成立 | 很合适 | 一般 | 一般 |
很合适一般较弱
首屏交给了风。因为从只有 Pinarello 才有的故事开始,又能把产品放到最大。舍不得丢掉的道路之线,移到了主设计方案的骑行场景里。Trans Alps 的海拔线与按地区划分的经销店标签,就是它的痕迹。
主设计方案的底色是接近黑色的三级 Ink 与 Paper 色。画面的大部分用这四种颜色涂成,再在上面极少地使用两种强调色。
橙色 #FF5A1F 是首屏末尾第四个颜色按钮,与 INEOS Replica 同色。青绿色 #1FC2B0 是风洞影片流线的颜色,接近 Aqua Alloy 涂装的亮面(#20BBC2)。量过主设计方案的 15 张 PC 画面截图,两种强调色加起来也不到画面的 1%。
Ink
#050809RGB 5 8 9
这是首屏与暗场景的底色。
Ink 2
#0B1214RGB 11 18 20
用于暗场景里的卡片与菜单板。
Ink 3
#131C1FRGB 19 28 31
卡片的边框与亮一阶的面。
Paper
#F3F1ECRGB 243 241 236
这是概览、零件、经销店这类阅读场景的底色。
White
#FFFFFFRGB 255 255 255
深色底上的文字,影棚照片的白色背景。
Teal
#1FC2B0RGB 31 194 176
只用于风洞影片的流线、进度条与当前位置标记。
Teal Deep
#0C7F75RGB 12 127 117
在明亮底色上,需要把青绿色用作文字时使用。
Orange
#FF5A1FRGB 255 90 31
只在像假冒产品提示这样必须看到的地方,一点一点地用。
JADE SPECTRA
设计方案的颜色按钮 #0F8F84
#19423B46.2%#226B6329.5%#9B462E12.7%#5FB5B211.6%AQUA ALLOY
设计方案的颜色按钮 #18A9C9
#158C9C52.6%#20BBC228.4%#39454610.7%#B2806F8.3%TEAM PQ3
设计方案的颜色按钮 #1C2550
#2A314B37.5%#C8B07628.5%#907D4F21.7%#483F3212.3%INEOS REPLICA
设计方案的颜色按钮 #FF5A1F
#FB370255.6%#EE701E18.9%#53403816.5%#ECB3909.0%这是去掉白色背景与轮胎、零件的无彩色之后,把剩下的涂装像素分成四组的比例。

OBSIDIAN EMERALDObsidian Emerald
#054248#449484#1F2223

MOLTEN SANDMolten Sand
#F0D9BC#A38866#C9B08F

COBALT PHANTOMCobalt Phantom
#6A5E90#9EC32D#262627

PHANTOM ICEPhantom Ice
#D6D7D6#9D8D9C#222222
| 文字 / 背景 | 看 | 对比 | 结果 | 用途 |
|---|---|---|---|---|
| White / Ink | 20.09:1 | 小字也可 | 暗场景的标题与正文 | |
| Teal / Ink | 8.99:1 | 小字也可 | 进度条、当前位置、短标签 | |
| Orange / Ink | 6.44:1 | 可用于正文 | 像假冒产品提示那样的一点警示 | |
| Ink / Paper | 17.80:1 | 小字也可 | 明亮的场景文字 | |
| Teal / Paper | 1.97:1 | 不可用于文字 | 明亮背景上不用于文字 | |
| Teal Deep / Paper | 4.31:1 | 仅限大字 | 亮场景中的小号强调文字 | |
| Orange / Paper | 2.76:1 | 不可用于文字 | 只用于大号数字或圆点 | |
| Ink / Teal | 8.99:1 | 小字也可 | 青绿色按钮上的文字 |
对比度按 WCAG 2.1 计算。4.5:1 以上用于正文,3:1 以上用于大字。
英文标题用 Archivo,这是一款可在同一字体里改变字宽、字重和倾斜的可变字体。把字宽放到最宽(125%)、字重加到最重(900)、再设为斜体,字母就像 Pinarello 标志那样向前倾。
韩文用 Pretendard 立着写。因为把韩文倾斜或拉开字距,反而更难读。只有英文标签才放宽字距。
RIDE WITH NEOFLY
DISPLAY · LATIN
DOGMA F
RIDE THE SENSES
Archivo · 125% · 900 · Italic
只用在车型名称、场景编号、大号收尾句这类简短的英文上。
HEADLINE · KOREAN
Pretendard · 800 · 字距 −3.5%
韩文标题加粗立正,只把字距略微收紧,不做倾斜。
LABEL
PINARELLO OFFICIAL IMPORTER · KOREA
Archivo · 112% · 600 · tracking 16%
场景名称、菜单这类英文标签,字宽稍放宽,字距加 16%。
首屏影片没有购买视频素材,而是用浏览器的 Canvas 亲手绘制。把画面分成 4px 网格,逐一计算每个网格点到自行车轮廓的距离,让 210 条流线顺着这段距离绕开自行车。因为用同一个随机种子绘制,重画多少次都是同一场景。
WINDFORMLIGHT风形态光
FRAME 061 / 240
001 – 060 · WIND
近处的流线 210 条、背景中的远线 170 条、从画面前方虚化掠过的线 9 条,层叠在一起。流线中约 12% 是橙色,其余是青绿色与浅薄荷色。
061 – 150 · FORM
线同时遵循两种半径:紧贴轮廓缠绕的小半径,与从远处大幅弯来的大半径。激光膜从上面经过,留下车架与车轮的线。
151 – 240 · LIGHT
影棚灯光斜掠而过,流线慢慢消失,最后一个场景只剩白底上的 DOGMA F 照片。竖屏用的 720 × 1280 版本另行渲染。
来进口商网站的人大致有三类:正在挑买哪款车的人、想把已经买下的车骑得久的人、在找一起骑的场合的人。五个菜单和一个购物按钮,就按这三类人的路来安排。
BUY
在挑买哪款车的人
OWN
想把已经买下的车骑得久的人
RIDE
在找一起骑的场合的人
从风画出自行车的影片开始,依次往下是四款涂装、七个分支的产品阵容、艺术涂装、零件与车轮、骑行活动、经销店、支持。
影片结束后,滚动翻过同一台 DOGMA F 的四款涂装。底色也跟着涂装变化。
把纵向滚动换成横向移动,七个分支的车型排成一行经过。上方的标签页显示当前所在的分支。
RIDE THE SENSES 的四种涂装,像海报一样一张张抹开翻过。
MOST · PARTINGTON · ONE-K · CRW 的卡片一张张向上叠起。
用一条线画出岭南阿尔卑斯山脊的起伏,用数字计出三条路线的距离。
用全部 · 首尔 · 京畿仁川 · 岭南标签,把十二家收窄看看。








录制画面中的骑行视频,只保留不出现人脸的镜头,替换为等长的影像;NEOFLY 的地址、电话,以及经销店的地址、电话与邮箱,都换成了其他字符或做了模糊处理。
主设计方案里,访客能亲手操作的地方有三处:把产品阵容按分支分开的标签页、把经销店按地区收窄的标签页,以及辨别假冒产品的说明。可以在下面直接点开看看。
01 · LINEUP

ROAD · RACE
DOGMA F承载 Grand Tour 速度的竞赛自行车

ROAD · ENDURANCE
DOGMA X更远,更舒适。为漫长的一天而生的 DOGMA

ROAD · RACE
F SERIES把竞赛几何做成整车

GRAVEL · RACE
DOGMA GR为砾石赛而生的 DOGMA

GRAVEL · ADVENTURE
GREVIL MX从柏油路尽头开始的砾石自行车

MTB · CROSS COUNTRY
DOGMA XC为越野赛打造的全避震

TIME TRIAL · TRIATHLON
BOLIDE F为与时间赛跑的骑手打造的气动战车
在主设计方案里,这份列表随纵向滚动横向经过,上方的标签页显示当前所在的分支。
02 · OFFICIAL SHOPS
12处
主设计方案里有店名、地址和电话。这里只保留了地区名。
03 · NOTICE
市面上有非正规进口的假冒产品流通,所以在支持场景的第一张卡片上放一个橙色圆点和提示。点开「查看辨别正品的方法」,会展开一份把正品与假冒产品的头管、标志、收尾并排比较的说明。

8 月的第一版设计方案、11 月的主设计方案,加上其间试画的三条线,我们提出了多个方向,但都没有走向最终选择。
但我们把首屏交给风的这个判断,现在再做一次也仍会相同。因为 Pinarello 那样削减车架的理由,与 NEOFLY 把这辆车带到韩国的理由,就在同一个画面里。
深色网格画面上放入产品阵容筛选与售后服务说明的首版主页面
以时间 · 道路 · 风画出的三个首屏与评估表
用 Canvas 直接渲染的 240 帧,横版与竖版各一套
影片 · 四种颜色 · 产品阵容 · 艺术涂装 · 零件 · 骑行 · 经销店 · 支持的八个场景
第一版设计方案的标题用大写 PINARELLO,主设计方案的初版页头标志也是 PINARELLO。最后的修改版把页头标志换成 neofly,PINARELLO 标志则一起放在页脚。故事由 Pinarello 来讲,引导由 NEOFLY 来做。
新涂装每季都会推出。事先留好只换一张照片就够的位置,出了新色也不必改动整个网站。
进口商直营的店只有一处,而咨询与维修由十二处承担。用地区标签收窄列表,能立刻找到最近的一家。
NEOFLY · WEBSITE RENEWAL
Pinarello 官方进口商 NEOFLY 网站改版提案
| Client | NEOFLY · Pinarello 官方进口商 |
|---|---|
| Scope | 网站改版提案 · 读标志 · 主设计方案 |
| Period | 2026 年 8 月至 11 月 |
| Rounds | 8 月的第一版设计方案 · 三条线 · 11 月的主设计方案 |
| Film | 风洞影片 240 帧(Canvas 2D 渲染,横版 · 竖版各一套) |
| Identity | 现在的标志 · Ink #050809 · Teal #1FC2B0 · Orange #FF5A1F · Paper #F3F1EC |
| Tools | GSAP · ScrollTrigger · Lenis · Canvas |
| Typeface | Archivo · Pretendard |
| Studio | BlueCanvas |
从标志中的一小笔与十二年的资料出发,做一个骑得久的人会再回来的网站。
医院 · 不孕不育
Yonsei Fertility Clinic
把标志上那颗顶端开口、开口处长出叶子的嫩绿果实,读成第六天的胚胎打开透明带走出的瞬间;医院名字正中的「孩子的希望」,以及一个周期大半是等待的患者的时刻表;不以成功率而以标准写下的数字;显微镜下找到的第六天的颜色,与只占画面 1.3% 的嫩绿;还有第六天的影片、早上八点、一粒种子三个方向,以及亲手渲染的 240 帧胚胎影片开启的主设计方案——一家不孕不育专科医院网站改版的提案过程。
医院 · 乳腺甲状腺
Dr. Choi’s Breast & Thyroid Clinic
从系在标志字母 U 上的粉红丝带,到超声的扇形与蝴蝶形甲状腺,用三种形状解释医院的品牌解读;从检查到结果电话,对准患者等待的七个瞬间所做的页面设计;改写 2014 年那句承诺疗效的话之后定下的医疗广告文案标准;以及夜晚的 Ribbon Motion Film 与白天的 Lens & Bloom 两个方向的方案——一家乳腺·甲状腺外科诊所的主页改版提案过程
品牌 · 婚纱
Heritique New York
这是一家设计师婚纱旗舰店的网站改版提案过程,收录了:把 Heritage Boutique 中间七个字母折起而成的名字,以及纠正七种零散名称写法的品牌解读;从十四张设计师卡片照片中测得的婚纱白色,以及选出最能衬托白色婚纱的背景的色彩标准;1月的两版初稿,以及用四段面纱飘动的滚动影片串起十一个场景的11月设计方案;还有品牌十一年的历史。
Contact
请告诉我们您的现状与目标。 我们将为您梳理可行范围、推进方式及预估费用。
DIRECT