次元壁垒撕裂!迭代重塑视觉体系,自研数字站点引爆全新纪元
次元壁垒撕裂迭代重塑视觉体系自研数字站点引爆全新纪元今天几乎一整天都在折腾个人网站。最早的想法其实很简单做一个能放项目经历的页面需要的时候可以给别人看。真正开始整理后我发现“给别人看”只占很小一部分。项目会结束比赛会过去开发工具和关注方向也一直在变。如果不留下点东西过几年再回头大概只记得自己当时很忙却说不清究竟做过什么。所以我想做的不是一张临时电子简历而是一个可以长期维护的个人网站。项目、竞赛、开发过程、照片、奖状甚至某个阶段常用的工具都可以慢慢放进来。现在内容不算多也没关系网站本来就应该跟着人一起变而不是第一天便装得满满当当。设计推翻了很多次视觉部分花的时间比预想中多得多。中间试过几种很常见的科技网站做法例如深蓝背景、大片发光区域、终端扫描线。做出来不能说有问题但看着太像随处可见的模板。紫色不喜欢粉色显得太软绿色也不对。换了几轮之后我甚至很难准确描述哪里不好只能确定一件事这不是我想长期放在网上的东西。现在保留下来的是暖白、黑色和少量琥珀色。黑白负责主体琥珀色只在日期、按钮状态和少数细节里出现。它没有传统“科技蓝”那么直接但更耐看也比较适合以后混合放项目截图、竞赛照片和生活记录。首页保留了一些明显的动态效果。背景有缓慢变化的点阵左侧标题会像输入文字一样出现、停留、删除再重新开始右侧的 NineSense 做了轻微的故障字效果。动效集中在首屏往下便收住了。项目、能力和时间线各自有一点背景纹理但不会每一块都闪、都动。页面如果到处抢注意力看几分钟就会累个人网站也很容易变成组件演示合集。页面到底放什么目前的主体分成项目、工作方式、能力、About 和时间线。项目区展示我真正参与过的内容不过只讲做了什么、解决了什么问题不公开客户名称、内部编号和业务细节。工作方式这一页则记录我现在怎样和 Agent 一起做开发包括需求梳理、实现、测试、修改和验收。能力页没有硬凑一大排标签只保留我确实做过、也愿意继续做的方向。About 放了一些个人介绍、常用头像和外部平台入口。时间线从开始接触算法竞赛写起记录第一块奖牌、独立完成项目、进入国产化环境、Agent 逐渐成为主力工具以及这次开始做个人网站。日期统一写到年月不假装自己能准确记住每一天。我刻意没有在首页摆很多成绩数字。一方面有些数字放在更大的范围里并不算突出另一方面我更希望别人看到过程和作品而不是开屏先看一串自我评价。真实素材比效果图麻烦网站里有一部分内容使用了真实项目截图和操作界面。真实截图当然比随便生成一张概念图可信但处理起来也更麻烦。截图里可能出现账号、历史任务、内部名称或者无关窗口。直接放上去省事却很容易把不该公开的信息一起带出去。因此每张图都要重新检查裁掉无关区域确认没有敏感内容再压缩到适合网页加载的尺寸。奖状和照片也是同样的处理方式只保留看得清的主体不上传没有必要的原始大图。这件事挺琐碎但不能偷懒。公开网站会被搜索引擎收录发出去以后再想彻底收回来并不现实。不能只在电脑上看着正常桌面版完成后我又分别检查了平板和手机。不是把电脑页面等比例缩小而是重新处理导航、卡片排列、文字大小和触控区域。桌面导航尽量缩成页面顶部的一小段避免挡住内容手机上则换成更适合单手操作的展开菜单。时间线在电脑上支持鼠标靠近左右边缘时缓慢自动滚动移开便停止。到了手机上这种交互会很别扭所以改回手指横向拖动。这一轮还检查了页面有没有横向溢出截图在窄屏下会不会被切得莫名其妙以及动效是否影响正常阅读。适配做得好时几乎感觉不到它存在做不好时打开网站的几秒钟就能发现问题。上线前把边角补齐主页的大框架稳定后我开始处理那些平时不太显眼、上线时又不能缺的东西。页面标题和 SEO 描述要改成正式内容分享链接时需要有预览图浏览器标签要有 favicon。robots.txt、站点清单、Web App Manifest 和 404 页面也要准备好。图片补上明确的尺寸非首屏素材使用懒加载避免页面刚打开便一次性请求所有内容。动效也不能一直在后台空转。离开当前区域后暂停用户开启“减少动态效果”时尽量保持安静。这些调整不会让截图突然变漂亮却会直接影响实际访问体验。Agent 参与了整段开发这次网站从分析到页面修改Agent 一直在参与。它负责了大量代码实现、素材处理、适配检查和重复修改确实节省了很多机械工作。不过方向不是 Agent 决定的。哪些方案太普通哪些颜色看着不舒服什么文案不像人话哪里留白过多最终留哪一版仍然需要我一页一页地看。改完之后也不是看到“执行成功”就结束而是重新打开页面把完整流程走一遍再决定要不要继续改。我越来越习惯把开发任务交给 Agent但这不等于把判断也一并交出去。它可以把想法做得很快取舍、测试和验收还是我的事。接下来现在的主页已经到了可以准备上线的程度。继续反复改首页收益不会太高反而可能把已经稳定的结构弄乱。接下来要处理域名、备案和服务器部署。网站真正跑起来以后再慢慢补项目内容并增加可视化后台、评论审核和私人留言。公开评论可以先进入审核区确认后再显示私人留言只在管理端查看不必要求每个访客先注册账号。今天先做到这里。首页有了后面的内容才有地方慢慢长出来。