链接 Link
在课程目录、帮助中心或文章列表中,用户点击带有明确去向的文字入口。
前端与交互约 10 分钟 · 从真实需求理解
1点击链接以后,用户要去哪里?
课程目录 · 学习资料课前资料入口
等待激活课程目录课程目录 · 第 2 节
链接文字先告诉用户下一步会到哪里。
章节入口查看课前资料
href="#course-materials"Tab 可聚焦,目标由链接文字和 href 共同说明。
Link 是带着明确目的地的导航入口:用户点击或按 Enter 后,会前往另一个页面、页内位置或可获取的资源。
可理解的链接文字和 href 要共同回答“下一步会到哪里”,而不是只提供一个看起来可以点击的装饰。
2Link 和 Button,什么时候不能互换?
Link 和 Button 都可能表现为可点击文字,但判断边界要看动作结果,而不是看颜色、圆角或箭头。
- 要进入页面、跳到页内位置、打开文档或资源时,用 Link,并让文字与 href 说明目的地。
- 要保存、提交、删除或改变当前页状态时,用 Button,让当前页承接处理中、成功或失败反馈。
验收时应同时核对可访问名称、键盘焦点、目标地址和真实到达结果,不能只确认它“看起来像链接”。
3一个 Link 由哪些真实部分组成?
课程目录课程目录 · 第 2 节
链接文字先告诉用户下一步会到哪里。
章节入口查看课前资料
href="#course-materials"Tab 可聚焦,目标由链接文字和 href 共同说明。
课前资料已打开
一个可靠的 Link 至少需要真实的 anchor 元素、能说清目的地的链接文字,以及浏览器可以解析和验证的 href。
- 真实 a 和 href 让浏览器、键盘和辅助技术知道这是导航入口,而不是伪装成文字的点击事件。
- 链接文字应该具体到“查看课程资料”或“打开退货规则”,避免只写“点击这里”。
- 焦点轮廓、访问过状态和当前页标识要辅助用户确认位置,不能替代目标本身。
4从帮助列表进入目标页面
在真实导航中,用户需要看到入口写的目标和到达位置保持一致;这个场景只演示导航因果,不把 Link 改造成保存动作。
5什么时候用 Link,什么时候改用 Button?
用户要离开当前列表去阅读另一页,入口应直接表达文章目标。
阅读全文 点击后进入对应的页面或资源
用户要提交当前页输入并看到写入结果,应改用 Button。
先问用户是要离开当前内容去另一个目标,还是要在当前页完成一件事:前者用 Link,后者通常改用 Button。
6怎样把 Link 需求告诉 Agent?
请在课程目录中使用真实 <a> 链接实现“查看课前资料”:链接文字要明确写出目标,href 指向课前资料位置;支持 Tab 聚焦和 Enter 激活,窄屏下文字可以自然换行。不要用 Button 冒充导航,也不要用颜色代替目的地说明;验收时检查入口文本、目标地址、焦点轮廓和实际到达结果一致。
7不用背,看看你能不能判断
1 / 3
Link 最主要应该表达什么?
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。