网页设计实训报告心得

网页设计实训报告心得

第一次用Figma画完首页原型图，网页我盯着屏幕上那个歪了3像素的设计实训按钮，愣是报告调了二十分钟。旁边同学凑过来看了一眼说：“这不挺正的网页吗？”我没理他，继续拖拽。设计实训后来交作业时老师点评：“导航栏间距不统一，报告整体视觉重心偏左。网页”我才意识到，设计实训那二十分钟花在了错误的报告地方——我一直在用肉眼判断像素，而不是网页用工具的对齐功能。

这次实训之前，设计实训我以为网页设计就是报告“把东西摆好看”。真正上手才发现，网页好看只是设计实训结果，背后的报告栅格系统、间距规范、色彩对比度才是决定成败的东西。我们组做的是一个校园二手交易平台，首页需要展示商品卡片。第一版我用了四种不同的圆角半径——有的8px，有的12px，还有一个随手拉的15px。导出预览时，整个页面看起来像拼凑的。后来统一成12px，瞬间规整了。这种细节，不亲手做一遍根本不会在意。

代码部分更让我头疼。HTML和CSS我自认为学得还行，但真要把设计稿还原出来，问题一个接一个。比如我想让导航栏固定在顶部，写了position: fixed;，结果下面的内容全被盖住了。查了半天才知道要加padding-top给主体内容让位。还有一次，图片在本地显示正常，传到服务器就裂了——路径用了绝对地址，忘了改成相对路径。这些坑踩过之后，印象比看十遍教程都深。

团队协作是另一个没想到的难点。我们三个人分工：一人设计、一人切图、一人写交互。结果设计稿改了三次，切图的那位还在用第一版。沟通成本比技术成本高多了。后来我们约定每天下午四点同步一次，用腾讯会议共享屏幕，直接指着页面说“这里要改”。效率一下子提上来了。我负责写JavaScript，给商品列表加筛选功能。本来想用Vue，但时间不够，最后用原生JS写了事件委托。代码不长，但调试时发现点击事件在动态生成的元素上失效——又是事件委托没绑对。改完那一刻，比打游戏通关还爽。

说到具体收获，有三点特别实在。一是学会了用Chrome DevTools调样式，比在编辑器里盲改快十倍。二是理解了“移动优先”不是口号，而是工作流——先写手机端样式，再用媒体查询扩展到大屏，比反过来简单得多。三是明白了设计规范文档的重要性。我们组中途换过一次主色调，因为没有文档，每个人改的地方不一样，最后页面出现了三种蓝色。从那以后，我养成了随手记变量名的习惯。

当然也有遗憾。交互效果做得太保守，只做了hover变色和点击弹窗。看到隔壁组用CSS动画做了个卡片翻转效果，挺羡慕的。下次实训，我想试试用Grid布局替代Flex，再学点SVG动画。另外，响应式断点设得太少，只在768px和1200px做了适配，中间尺寸的平板显示效果很尴尬。

最后一周答辩，老师问：“你们觉得网页设计最难的是什么？”我脱口而出：“克制。”不是技术，不是工具，是知道什么时候不加东西。少一个阴影、少一种字体、少一个动画，页面反而更清楚。这个道理，做之前我不懂，做完之后也不敢说全懂。但至少下次再调那3像素的时候，我会先打开对齐面板。