这是「自学笔记」这个分类的第一篇，记录我学网页设计过程中踩的坑、临摹的练习，还有那些”当下不懂、后来才想通”的瞬间。第一篇要讲的，是我上的网页设计课第一个作业。
老师给了一个自己做的 Example，要求”自己选主题，照着这个排版做一遍”。
我选了 PS5 Pro Enhanced 这个品牌来练习——纯粹因为我喜欢玩游戏，但没有 PS5，得不到的永远在骚动，加上官网素材多、画质又高清。
作业的核心：复制，和细节
临摹听起来很简单，做起来也没有很难，但细节会卡你。每个 Section 的间距、图片比例、字体大小的层次，在老师的例子里看起来”就是对”，但自己做的时候会一直觉得哪里怪怪的，又说不清楚哪里怪。这个”说不清楚”，大概就是临摹这件事最有价值的部分。
页面最顶部，我没有放静态图，而是去 YouTube 找了 PlayStation 官方发布的 FF7 Rebirth 宣传影片嵌进去。说是”设计决定”，其实也有一部分原因是省事——官方影片的画质和剪辑都是专业团队做的，效果比我自己拼图好太多。
配色：直接去 PlayStation 官网”抄”
https://www.playstation.com/en-my/ps5
没有坐在那里研究色轮，打开 PlayStation 官网，看他们用什么颜色，记下来，照着用。深蓝底色、白色文字、PS 品牌蓝做点缀。
背景颜色选得很克制，是因为游戏截图本身已经够花了——再把背景弄得五颜六色，整个页面就会变成视觉车祸现场。克制，是一种更高级的力量。这是临摹教会我的第一件事：大公司官网的配色就是现成的参考答案，照着用比自己乱调有意义得多。
图片：还是从 PlayStation 那里拿的
PS5 Pro 产品图、DualSense 形象照、FF7 游戏截图，全部官方渠道下载，打光专业、构图已经想好了。我的工作只剩一件：放对地方。哪张放 Hero 有气势，哪张适合放功能说明旁边，哪张截图能让没打过 FF7 的人也觉得”这游戏好像很厉害”——用别人的素材，还是需要逻辑上的思考，只是门槛低了很多。
抄完之后，才看懂这个排版为什么是这样排
做完整个页面，我把 Section 顺序看了一遍：
情感钩子 → 产品体验 → 功能规格 → 文化分量 → 数据收尾。
第一屏不是”PS5 Pro 售价”，是 FF7 Rebirth 的宣传影片。
我当时觉得这个顺序”感觉对”，照着老师的结构放了。抄完之后才意识到：这不是感觉对，这是经过验证的说服逻辑。
因为人不是先看规格再产生欲望，是先有欲望，才会开始看规格。
这个结构有个名字叫 AIDA
- Attention（抓住注意力）
- Interest（建立兴趣）
- Desire（激发欲望）
- Action（引导行动）
是营销教科书里的东西，PlayStation 的设计师已经把它藏进排版顺序里了。
我临摹的时候不知道这些，只是照着走。做完之后才发现自己无意间做了一遍”如何用排版说服人”的练习。这大概就是临摹最值钱的地方——
你在学一个已经被验证过的逻辑，不是自己摸索一个不知道对不对的方向。
如果你也是刚开始学网页设计的新手，与其从空白页面开始，不如先找一个你喜欢的品牌官网，逐个 Section 拆开临摹一遍——细节会告诉你很多”感觉对”背后的原因。这次练习的成品可以在这里看到，想看我更多项目和学习记录，欢迎逛逛我的 Portfolio。