界面组件›列表

列表List

列表第一个位置换了,原来的收藏会跟着换人吗?

专业定义

列表把同类条目组织成可逐项阅读的集合。顺序有业务含义时可采用有序列表;普通集合可用无序列表。它可以呈现摘要、操作和状态,但每一项仍应指向明确对象。

大白话

一项一项看资料时,位置可以变,资料是谁不能跟着变。选择和操作应认对象,不应认第几行。

生活类比

购物清单重新按店铺分组,牛奶仍然是牛奶,不能因为排到第一行就被当成原来的面包。

类比到这里为止:清单常全部在手里,网页列表却可能只加载了一页。当前看见多少项,不一定就是全部总数。

外贸出海场景

销售查看待跟进询盘,按时间排序或按国家筛选;打开某条记录时,带的是询盘 ID,不是当前行号。

给一项足够的识别信息

标题
让人知道对象是什么,而不是每行都写“查看详情”。
摘要
只放对本次决定有用的字段,细节可进入下一页。
操作
说明作用于哪条记录,收藏或编辑跟随稳定身份。

顺序和完成状态别混在一起

步骤列表的先后关系可能不可交换,普通名单则可以按不同条件排序。编号只是表达顺序的方式,不自动等于记录 ID。

切换筛选后看不见的项仍可能保留选中状态。是否只处理当前页、当前筛选或全部选中项,需要另行说明。

动手看一遍 · 本地教学演示

列表第一个位置换了,原来的收藏会跟着换人吗?

可以操作,也可以重试。数据为虚构示例,不连接真实业务系统。

正在准备当前演示,正文可以继续阅读。

继续看项目应用与交付检查
先建立专业坐标

列表 在项目中负责什么

什么时候用
用户主要逐项扫描、打开或处理记录,不需要大量跨列比较时。
它解决什么
以重复且清楚的结构呈现一组内容,并保留继续查看的入口。
它不负责什么
加载中、真正没有内容和读取失败不能都显示空白。分页或加载更多要说明已看范围。
放进真实项目
显示最近询盘,每条都带公司、产品、来源和跟进状态。
专业拆解 · 业务场景

列表把同类记录排成可连续扫描、比较和操作的队列

销售查看待跟进询盘时,要快速比较公司、国家、产品、更新时间和负责人;每一行结构一致,异常状态又要能被立即看见。

  1. 01

    先确定用户比较记录时最常看的字段。

  2. 02

    把整行点击与行内动作的责任分开。

  3. 03

    补齐加载、空列表、错误和分页状态。

一句话记住

列表管浏览顺序,ID 管对象身份。

容易混淆的地方

列表是集合呈现,排序改变次序,筛选改变可见范围;这三件事可以同时存在但不是同一操作。

随堂一练 用一个判断把概念记住

询盘列表按国家筛选后,原第 3 行变成第 1 行。编辑这一行时应怎样找到对应记录?

你可以这样告诉 AI Agent

“

我在处理这件事:显示最近询盘,每条都带公司、产品、来源和跟进状态。请以“列表”为主线,先说明它在这里负责什么、不负责什么;再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答,不确定的信息标为待确认。

内容依据与延伸

本站用原创中文解释把专业概念映射到外贸独立站;定义和机制继续以官方资料为准,业务例子再回到 外贸独立站询盘优化实战 验证。

本站整理说明:原创整理:Web 开发、产品设计、AI 协作与外贸独立站实践
就地查词 · 关闭后继续阅读