这次网站排版调整,我先让 Astra 整体评价项目页面,并要求考虑不同宽度设备的阅读体验。它检查完页面、提出建议后,我让它直接修改,再按同样的流程检查其它页面。
具体检查什么、怎样定位问题、如何调整样式,以及修改后怎样验证,主要由 Astra 自主完成。我在过程中提出了两个具体问题:文章的返回链接应该显示目的地,栏目页的最大宽度也应该与项目页、文章页统一。把这两处纠正单独写出来,是为了准确记录这次工作的分工。
从项目页开始,先检查实际页面
网站已经有了米白底色、衬线主标题、低饱和色块、细分隔线和折页插图。这轮调整沿用这些视觉元素,重点检查内容在不同屏幕上如何排列,以及读者从目录进入项目、再进入文章时是否顺畅。
Astra 先阅读 Django 模板和 CSS,再在本地浏览器中打开“个人展示网站”和“TikTok Shop 美区项目”。检查既包括 320px、390px、768px、1024px、1440px 等宽度,也包括响应式断点前后只相差一个像素的情况。
其中一个问题就出现在 700px 和 701px 之间。原来的样式在窄屏使用较小的左右边距,跨过断点后直接改成 40px。结果是窗口从 700px 增大到 701px,内容区却从约 660px 缩到 621px,文字随之重新换行。
这类问题只看一张桌面截图和一张手机截图很容易漏掉。Astra 据此把外侧边距改成随宽度连续变化,并在后续检查中继续调整项目页的标题、段落间距,减少断点两侧不必要的跳变。
手机页面需要重新分配空间
项目页最初没有明显的横向溢出,但首屏留给正文的空间仍然偏少。在 390px 的预览中,第一段项目正文大约从页面纵向 470px 处开始。品牌、导航、返回入口、项目状态和摘要依次排下来,已经占用了相当一部分屏幕。
Astra 将手机导航从约 106px 收到 77px,同时把导航链接的可点击高度扩大到 44px。这里减少的是导航周围的空白,链接文字也从原来的 12px 增至 13px。收紧布局和改善点击体验可以同时进行。
项目页的返回入口、状态行、标题与摘要之间也重新分配了间距。调整后,同一个页面在 390px 下的第一段正文提前到约 413px。文章卡片的日期等辅助文字从 11px 增至 12px,标签区留白则有所减少,让列表更容易连续浏览。
“项目信息”原先放在状态行右侧,点击后却在摘要下方展开。Astra 把入口移到了摘要下方,使操作位置与展开内容相邻,并增加“展开/收起”的文字提示。最窄的手机布局中,信息标签与内容改为上下排列,长字段不再被挤进很窄的右栏。
这些数值都是本次具体页面、具体浏览器条件下的测量结果。它们说明了修改前后的变化,并不意味着所有手机、字体或项目内容都会得到完全相同的高度。
扩展到首页后,发现了另一类拥挤
项目页改完后,我要求 Astra 继续检查其它页面。它沿用同样的流程,检查首页、三个栏目目录和五篇现有文章。
首页的问题与项目页不同。在 1024px 宽度下,首页仍然使用两列卡片,每张卡片内部又并排放着文字和插图。插图占据固定宽度,留给文字的区域只有约 121px。说明文字被切成很多短行,栏目名称和辅助信息也显得拥挤。
Astra 把首页卡片切换为单列的时机提前到 1200px 以下。这个宽度范围内,卡片可以利用整行空间放置文字和插图;更窄时,卡片内部再改为上下排列。宽桌面仍保留两列四栏目结构。
小手机上的首页主标题也作了调整。原来的字号和换行组合会把“从现实问题出发”拆开,甚至让单个字掉到下一行。Astra 调整了字号范围和标题的分行方式,保留原有文案,也保留“探索。”的强调色。
栏目目录则主要收紧页头与列表之间的留白,调整卡片密度,并把排序按钮的点击高度统一到 44px。检查首页创作信息时,它还发现“50 余万字”等统计值被拆行,随后调整了统计区的排列,让完整数值能够一起显示。
阅读页中,表格和长标题需要单独处理
项目文章与栏目文章共用一套阅读模板,因此阅读页的修改可以同时覆盖不同入口的文章。
原来的中文正文采用两端对齐。在窄屏和中英文混排的段落里,部分行的字间距会被拉开。Astra 将小屏正文改为左对齐,保留中文段落的首行缩进,并调整正文的字号、行高和段间距。文章的返回入口、标题、正文与底部导航也对齐到同一条阅读列。
技术文章中的表格暴露了更明显的问题。《Django 后端重构》有一张三列表格,在 320px 的预览中,第二列宽度只有约 55px,扣除内边距后只能放下很少几个汉字。内容虽然没有撑出屏幕,整张表却被拉到约 1440px 高,读起来接近一条狭长的文字带。
Astra 给表格设置了最低列宽,并允许它在正文区域内独立横向滚动。调整后,这张表的高度降到约 650px,读者可以横向查看其它列。只有表格确实超出可用宽度时,页面才显示“左右滑动查看完整表格”的提示;宽屏能够完整显示时,提示会隐藏。滚动区域也支持键盘聚焦和方向键操作。
文章底部原来把“返回”和“下一篇”并排放置,长标题会被省略号截断。Astra 将小屏导航改为上下排列,并允许标题自然换行。图文文章则另外检查了图片的懒加载、缩放和图注,确认插图能够在正文宽度内正常显示。
我提出的两处纠正
第一处是返回链接的名称。
我问 Astra,项目中的文章阅读页是否已经使用统一模板,并指出底部“返回”下面不应该写“上一页”,而应该写具体目的地。此前链接本身已经带有返回地址,但顶部和底部的文字仍然固定写着“上一页”。
Astra 随后修改了共用模板和返回名称的生成逻辑。从项目进入时显示项目名称,从栏目进入时显示栏目名称,从首页进入时显示“首页”。继续阅读下一篇时,原来的返回目的地和排序状态仍然保留。对于无法识别的返回地址,则使用能够明确命名的回退入口。
这项修正来自我对页面含义的要求。返回按钮应该让读者知道点击后会到哪里,尤其是在已经连续读过几篇文章之后,“上一页”很容易被理解成上一篇文章。
第二处是栏目页的最大宽度。
Astra 在调整其它页面时,先把栏目页设为最大 960px,而项目页和文章页使用 760px。随后我提出,这三类页面的最大宽度是否应该统一。它把栏目页也改成 760px,并让三类页面共用同一个宽度设置。
这并不是 Astra 在最初检查中就独立作出的决定。前一版保留了较宽的栏目页,统一宽度是在我指出之后完成的。调整后,读者从栏目进入项目、再进入文章时,内容区的宽度和左边界更加稳定。
首页仍然保留较宽的展示空间,用来容纳折页构图与四栏目卡片。760px 是这次为内容页面选择的阅读宽度,并不需要成为所有页面的统一尺寸。
这次自主完成到了哪一步
这一轮里,Astra 自主完成了页面与代码检查、问题定位、方案建议、CSS 和模板修改,以及浏览器中的回归验证。过程中也有需要继续修正的细节,例如桌面悬挂章节编号时数字一度被拆成两行,以及调整间距后仍然存在的断点跳变;它在后续检查中发现并处理了这些问题。
我的参与主要是提出跨设备阅读体验的目标,要求按建议修改、继续检查其它页面,以及明确返回名称和统一宽度这两处要求。具体的代码和逐项验证没有由我手工完成。
验证包括多档浏览器视口、断点附近的宽度变化、排序切换、信息折叠、首页锚点、图片加载和表格键盘滚动。现有 Django 测试共 37 项通过。不过,自动化测试通过不能代替视觉检查,本地浏览器改变视口宽度,也不能等同于已经覆盖所有真实手机和平板。
截至本次记录,修改已在本地预览中完成,尚未部署到正式网站。这次工作能够交给 Astra 自主推进的范围,已经包括从发现排版问题到实现和验证的一整段过程;同时,返回入口应该如何表达、不同页面之间应该保持怎样的一致性,仍然包含我在查看结果时提出的判断。