实习第三周|从一个 Copy 按钮问下去

约 6 分钟另有英文版

从邮箱旁边的 Copy 到首页切换、短片用途和内容更新,这一周,我反复把“做出来了”追问成“别人看得懂、接得住吗”。

目录
  1. 文件在那里,不等于这次要动
  2. 联系方式:先嫌它不够沉稳
  3. 首页:我自己都没看出能切换
  4. 内容从管理工具进来以后
  5. 短片:当背景和点开看是两件事
  6. 以后换内容的人怎么改

第三周记录范围:2026 年 10 月 19–25 日;整理于 10 月 27 日。本文保留记录时的工作过程与判断。

邮箱旁边写着一个 Copy,我看过以后,又问了一句:别人知道它能点吗?地址就在眼前,复制的功能也做了,入口是不是清楚,仍然得看实际画面。

这一周,很多修改都从这样的疑问开始。我继续把网页方案往前推,也不断追问:这次到底动哪里,看的人能不能自己看懂,以后换内容时又该怎样改。

文件在那里,不等于这次要动

一开始,我把线上网页和拿到的代码放在一起对着看。代码里的东西比网页上多出不少,有些文件没有对应到这次实际查看的页面。我先停下来问:这些都要改吗?我的意思是,这次只把现在真正在用的页面处理好。等范围说清楚、我点头以后,再开始动手。

接着要把方案拆成能分出去做的任务。在这之前,我想先把结构弄清楚:修复、重整和新增涉及的工作不同,有些还互相依赖,不应该只列一串功能名字就开工。我要求先把类别、优先顺序、前面需要满足什么条件,以及怎样才算做完写出来,整理成推荐清单,再决定怎么推进。参与的人各自确认接什么,也比让助手直接排满所有工作更合适。

这一周的实现和技术检查有 AI 协助,也包含其他人的协作。我负责说清要求、看预览、指出哪里不对,并在几个方案之间作取舍。

联系方式:先嫌它不够沉稳

联系方式那块,第一版的配色让我觉得有点轻飘,撑不起一个正经的联系入口,所以先把颜色往稳一点的方向收。

然后是邮箱。有人习惯复制地址自己去写,也有人想点一下直接打开邮件。我希望两条路都在。按钮做出来以后,我还是不太满意:旁边只写着一个 Copy,看的人知道它能点吗?我提出把这两个选择改成小图标,鼠标移到邮箱上时出现,让人在邮箱旁边就能选。

改完这一处,我想到别的地方也放着邮箱。与其每处各做一遍,不如把这个用法抽出来,哪里需要就直接拿来用。后来它成了可以复用的一块,先用在现有的联系入口上。

联系页的两个联系入口,各写着一个邮箱地址。鼠标停在第一个地址旁的复制图标上,上方显示“Copy address”提示,旁边是写邮件图标。
联系页现在的邮箱写法,按当前代码在本地重新截图:鼠标移到地址上,旁边才出现复制和写邮件两个图标,指到哪个就提示它的用途。两个联系入口用的是同一个邮箱组件。标题、地址和配色已替换为通用示例,灰色配色不代表文中说的配色调整。

联系页现在的邮箱写法,按当前代码在本地重新截图:鼠标移到地址上,旁边才出现复制和写邮件两个图标,指到哪个就提示它的用途。两个联系入口用的是同一个邮箱组件。标题、地址和配色已替换为通用示例,灰色配色不代表文中说的配色调整。

首页:我自己都没看出能切换

审首页时,我说了句实话:这里能切换,我一开始根本没看出来。页面是我一直跟着改的,入口就在眼前,我还是漏了,这让我担心,第一次来的人能不能发现。我请大家重新讨论入口该怎么摆。

另一次看新版,我发现删错了地方。我之前嫌的是字多,改出来的版本却把展示内容也砍掉一截,原本想要的“点开后放大、看清细节”的效果也没了。我回头讲清楚:要减的是说明文字,展示的部分要保持完整。还有一块区域尺寸定死以后,内容撑不满,留下几片空白。尺寸固定下来还不算改完,空出来的地方要和上下内容接得顺。

首页之外,我还试着做了一个能让人自己转着看、拉近看的产品说明。几段内容合进同一个画面以后,我自己反而跟不上了,于是先把原版存好,另做一版试观看节奏。经过写在《把 How It Works 做成一座工地》里。

内容从管理工具进来以后

这周接入内容管理工具时,我关心的是内容更新这条路能不能走通:谁来修改文章,保存和发布分别会改变什么,网站什么时候能看到更新,原有页面会不会受到影响。这几件事需要分别看,不能用“接上了”三个字全部带过。对新的内容来源,我提的要求只有一条:原有页面和展示部分要保住,接完要核对它们还能正常显示。具体的配置和核对是在协作中完成的。

当时我主要在做页面,后台已有其他人推进。但对选什么样的后台,我自己有顾虑。自建更自由,也更贴合需求;我更担心的是工期,出了问题从哪里查,以后换了人还接不接得住。回顾时我把这层想法理清楚了,写在《自建后台更自由,这次我还是更想用WordPress》里。

短片:当背景和点开看是两件事

首屏我先定了一条:背景必须是动的,不拿截图凑。

另外还要一支能单独点开的短片,起初按很短的时长做。做出来以后,我觉得这个入口没必要,因为什么都讲不完整。回头想,我原来设想的短片更接近背景;现在要人专门点开看,长度却还卡在原来那里,用途和时长就对不上了。我的意见是:时长不设限,但内容要讲清楚。

时长放开以后,两种用途才分得开,最后也做成了两支。放在首屏的那支,访客很可能从中途看到,所以它不靠从头看完才成立。点开看的那支,给愿意花时间的人:动作要留够时间看清,画面里的字也要留够时间读。原始画面偏糊,后来做过一次温和的增强,但能改善的有限,算不上原生高清。

网站首屏:左侧是示例标题、说明文字、联系按钮和“Watch the film”播放入口;背景是标着 SAMPLE MEDIA 的灰色渐变示例视频,右下角是背景视频的暂停按钮和“Background film”字样。
首屏的两支片各有入口,按当前代码在本地重新截图:背景片在文字后面静音循环,只留一个暂停按钮;另一支片要访客点“Watch the film”才会打开(播放窗口不在图中)。视频是本地生成的示例素材,不是文中说的原始画面;标题、文案和配色已替换为通用示例。

首屏的两支片各有入口,按当前代码在本地重新截图:背景片在文字后面静音循环,只留一个暂停按钮;另一支片要访客点“Watch the film”才会打开(播放窗口不在图中)。视频是本地生成的示例素材,不是文中说的原始画面;标题、文案和配色已替换为通用示例。

以后换内容的人怎么改

到了后面,我又问短片应该怎样存放和修改。以后要换一支片,我希望能在管理界面上传、预览、保存,不必每次去找源码里的文件。于是我提出把这个用法也考虑进去,先弄清现有工具能做什么,需要补什么,再修改。

后台的首页视频设置页。顶部有重新加载、查看网站和保存首页配置三个按钮,下面一行写着有尚未保存的修改。背景视频和宣传片分成两个区块,各有桌面版和手机版两栏,每栏有预览画面,以及视频、封面两行和“选择或上传”按钮。底部说明上传只会加入媒体库,保存后才会更换首页。
后台的“首页视频”页面,按当前代码在本地重新截图,只截页面主体:背景视频和宣传片分开设置,选好的素材先在预览里看,再统一保存。图中的宣传片刚换成示例素材 C,还没有保存;截图时没有保存、上传或发布任何内容,也不代表这个页面已经部署到实际运行环境。素材、版本号和配色均为示例。

后台的“首页视频”页面,按当前代码在本地重新截图,只截页面主体:背景视频和宣传片分开设置,选好的素材先在预览里看,再统一保存。图中的宣传片刚换成示例素材 C,还没有保存;截图时没有保存、上传或发布任何内容,也不代表这个页面已经部署到实际运行环境。素材、版本号和配色均为示例。

我还追问过:在这个项目里,代码提交以后,网站会自动更新吗?这需要分清,眼前看到的本地变化怎样才能到实际运行的环境里;这一次增加管理功能,和以后通过这个功能换内容,又分别需要哪些操作。我希望先把这条路问清楚,再决定怎么继续。

所以我要求改动先经过审查,另外留下更新说明,让接手的人有东西可查。说明也不应该只写一句“启动成功”:需要准备什么,从哪里开始,看到怎样的结果,出了问题先看哪里,都应该能顺着找到。

同样是改页面,前面我关心那个 Copy 看起来能不能点,后面又关心换内容的人会不会卡在下一步。这些问题没有因为功能做出来就自动消失。继续看实际效果、把问题说具体,再决定哪里要改,是这一周我反复在做的事。