我的个人网站完成了第三次视觉升级，已经正式上线。这一轮，我把注意力放在作品如何被呈现上：案例页的信息层级、段落和组件之间的留白、链接的交互，以及中英文页面是否保持一致。
这次最大的体会是：视觉呈现本身，也是介绍工作的一部分。 作品集里即使有值得看的内容，如果读者需要费力寻找重点，这些内容也很难发挥作用。我希望让读者更顺畅地看到、理解我的工作，但不会把一次改版直接当成业务效果提升的证明。
为什么还要继续调整视觉
做营销时，我经常会想：受众需要先理解什么，又可能在哪一步停下来？回到自己的个人网站，这些问题同样值得认真回答。
我不可能站在每个案例旁边，告诉每位访客应该看哪里。页面需要承担一部分解释工作。短标题提示这一段要讲什么，间距说明哪些内容属于一组，清晰的链接则给读者一个继续了解的入口。
这一轮审阅中，反复出现的恰恰是一些细节。有的链接悬停后出现了下划线，文字却没有按预期变色；另一个页面的文字甚至在悬停时消失了。有的部分离上文太近，离下文又太远。中文版的交互组件展开后，显示的仍然是英文内容。
这些问题让我重新注意到标题之外的部分。文案写对了，并不代表它的呈现已经完成。
从设计参考到正式上线，我是怎样推进的
这次我把流程分成了几个阶段，没有把第一次能运行的实现直接当成最终版本。
- 先确定设计参考。 用冻结的 demo 作为视觉对照；我明确决定调整的地方，则单独列出例外。这样复验时有具体依据，不必不断更换判断标准。
- 同时实现中英文版本。 两种语言需要使用一致的视觉系统。检查范围也不能只包括刚打开页面时看到的文字，还要覆盖展开内容和不同交互状态。
- 在 Preview 中逐页审阅。 我一边看页面，一边用截图和具体描述记录问题。“这里离上面的内容太近”，比一句“间距不舒服”更容易落实成修改。
- 把同类问题合并修复。 当不止一个链接的悬停效果不对时，就不能只修截图中的那一处，而应该把同类行为纳入全站检查。
- 把代码检查和视觉审阅分开。 构建和代码检查能为发布提供支持，但它们无法替我判断信息层级是否清楚，也不能仅凭通过结果就认定动效的顺序正确。
- 将审阅后的版本正式发布。 视觉升级从 Preview 进入线上。这是一个发布节点，并不意味着所有性能、交互和无障碍问题都已经得到完整验证。
对我来说，截图最有价值的用法，是配上“这里原本应该怎么表现”。截图可以标出问题的位置，却未必能表达问题的全过程。
三个改变了我审阅方式的细节
链接需要完整的交互反馈
这次检查的一些文字链接，预期效果是悬停后同时出现下划线和文字变色。只有下划线，仍然是不完整的实现。如果文字因此变得看不清，问题就更明显了，不能因为下划线动起来了，就认为交互已经做完。
于是，我在审阅时不再只问“有没有这个效果”，而是看读者实际会经历什么：文字是否一直清楚？能否看出这里可以交互？移开后是否正常恢复？
键盘操作也要单独考虑。去掉鼠标点击后不该出现的外框，不等于把所有键盘焦点提示一起删除。这是两种不同情境，不能用一个粗略的处理覆盖过去。
双语检查要跟着交互继续往下走
Tools & Workflows 页面里有一个星系组件，卫星可以展开显示详情。当时，中文版的一部分展开内容仍然是英文。
如果只看页面初始状态，这个问题很容易漏掉。它也给了我一个很具体的双语检查习惯：能展开的内容，都要展开看。标签、说明文字，以及交互之后出现的信息，都属于这个语言版本。
中英文一致，也不是让中文套进英文句式里。重要的是，两种语言的读者能获得相同的信息，并且各自读起来都自然。
动效要检查过程，不能只看某一帧
Career 页面的竖向光效，原本应该沿着编号阶段依次向下移动。案例页的步骤组件，也有自己的顺序强调。星系组件中的卫星，则应该相对各自行星保持固定位置，只做自转，在交互时展开，结束后回到原位。
一张静态截图可能看起来没有问题，却完全没有展示这些行为。我需要把“先发生什么、接下来是什么、最后怎样恢复”说明白。
间距同样会影响阅读顺序。例如，一组编号内容如果贴着前面的段落，就容易让人误以为它属于上一部分。把所有空白统一放大，并不能解决这个问题；需要调整的是这几个具体元素之间的关系。
个人网站的视觉，究竟在帮我做什么
对我来说，它有一个很实际的任务：帮助读者理解我做过什么、怎样思考，以及可以去哪里进一步了解。
因此，信息层级和一致性不只是设计问题，也涉及内容如何被组织。一个章节标题能让读者进入较长的案例；适度的底色能把编号和对应说明联系起来；一致的链接样式，则让人不用反复猜测哪些文字可以点开。
但这次上线能支持的结论也有边界。我还没有证明改版提高了转化、搜索排名或求职效果。网站已经上线，并不能回答这些问题，它们需要另外观察和衡量。
目前可以如实记录的是这次工作的过程：明确设计参考，完成双语实现，在 Preview 中收集具体反馈，进行针对性修复，再将视觉版本发布。这些已经足够说明这一阶段的工作，不需要额外加上还没有证据的成绩。
下一次更新，我会保留哪些做法
我会更早写清楚交互应该怎样发生，检查两种语言在展开之后的内容，也会继续把视觉审阅和工程检查分开。审阅的重点仍然是读者怎样理解我的工作，而不是把每个组件单独当作装饰来评价。
第三次视觉升级已经上线。接下来，是继续使用和观察这个网站，也继续积累值得放上去的工作。
欢迎到 huiyangxie.ca 看看现在的版本。
问题
常见问题
这次是重新做了一个网站吗？
不是，这是现有个人网站的第三次视觉升级。本文主要记录视觉呈现、双语一致性和交互审阅，并不表示网站的每个部分都重新构建了一遍。
上线前是怎样检查修改的？
我以冻结的设计参考为依据，在 Preview 中审阅页面，用截图记录具体问题，再把重复出现的问题合并修复。代码检查和视觉审阅在这个过程中承担不同的作用。
作品集变好看，就一定会带来更好的结果吗？
不一定。这次的目标是让作品更容易理解和浏览。我还没有证据证明，这轮改版带来了转化、搜索表现或求职结果的提升。