基础列表行

List Item

最万能的内容行:左边头像或图标,中间标题与副文案,右边箭头或数值。

全平台通用内容组织内容区组件

大白话说明

列表行是界面的基本粒子:左侧配件(头像、图标)、主副两行文字、右侧配件(箭头、数值、开关)三段式组合,换配件就能表达导航、信息、设置、联系人等几十种语义。整行可点,热区就是整行。

什么时候用

内容是同质条目、需要快速扫读和逐条进入时——联系人、文件、订单、文章都从它开始。

什么时候不用

条目之间差异大、图是主角时用卡片;需要横向比较字段时用表格,别用列表硬撑。

细节与变体

  • 行高至少 48px,副文案比主文案小一号、弱一档颜色
  • 右侧配件只放一个,两个配件并排用户会犹豫点哪个
  • 可滑动出操作(删除/置顶)时要给点击替代,老用户找不到滑动

配套提示词(点开填空、复制)

参考实现(开源)

  • Ant Design(蚂蚁) ↗ MIT · 免费(MIT)

    国内中后台的事实标准:表格、表单、列表都是行业参照物。

  • MUI(Material UI) ↗ MIT · 免费(MIT,核心)

    React 生态最老牌的 Material 组件库:组件全、文档厚、AI 生成命中率最高之一。

  • TDesign(腾讯) ↗ MIT · 免费(MIT)

    腾讯出品的全栈设计系统:Web、移动、小程序、桌面都有,国内生态最完整的一套。

  • GetWidget(Flutter) ↗ MIT · 免费(官网标注 MIT,未复核)

    Flutter 老牌组件库,组件数量多、文档全,列表与卡片是强项。

相关条目