这组检索词可以用来检查搜索界面能否完整保留用户输入,并在文字结果旁提供图片预览入口。图文模块的作用是让用户先读清检索词和说明,再查看对应缩略图;它不能单凭词语推断照片里有什么。由于这组词可能引出涉及未成年人的不当联想,图片筛选应排除性化、剥削或其他不适宜未成年人的影像,只展示经审核的安全素材;没有合适图片时,应说明暂无安全预览,而不是用猜测补图。
核心功能:文字查询与图片预览怎样配合
图文模块应把“保留用户输入、展示安全图片、解释图片用途”连成清楚的浏览流程。检索词显示在结果区上方,图片卡片紧随文字说明;用户由此能判断缩略图属于哪组查询,也能分辨它是实景预览还是装饰插图。
- 完整保留检索词:搜索框和结果标题保留用户输入的原有顺序,窄屏换行时也不拆成容易误读的两条查询。
- 文字与图片分区:说明文字放在缩略图上方或左侧,二者保持清楚间距;图片不得遮挡标题或挤压检索词。
- 标明预览用途:图片旁使用“安全图片预览”等简短说明,避免让用户误以为照片能够证明检索词的含义。
- 加载时保持布局:图片尚未载入时预留固定尺寸的占位框,载入后在原位置显示缩略图,避免卡片突然变高或文字位置跳动。
- 提供准确替代文字:描述照片里实际可见的对象或场景,不机械重复检索词;审核不通过的图片不应进入预览区。
显示参数与适配要求
下表是通用图文卡片的建议配置,不代表某个搜索平台的官方规格。制作时可依照结果栏宽度微调,但应保持图片比例、文字可读性和安全筛选规则。
| 字段 | 建议值 | 适用说明 |
|---|---|---|
| 缩略图比例 | 4:3 | 适合横向预览卡片;展示竖幅照片时可改为3:4,并统一同组卡片比例。 |
| 缩略图基准尺寸 | 320×240 px | 作为基础预览尺寸,等比缩放,不拉伸人物或物体。 |
| 桌面端图片宽度 | 240—360 px | 适用于文字与图片并排的结果栏;较窄的栏位改用上下布局。 |
| 移动端图片宽度 | 容器宽度的100% | 缩略图不超出屏幕,卡片左右内边距建议为16 px。 |
| 窄屏布局切换点 | 768 px | 视口宽度低于该值时采用上下排列,避免文字栏被缩得过窄。 |
| 图片圆角 | 8 px | 用于统一卡片边缘;若界面采用直角风格,则设为0 px。 |
| 替代文字长度 | 约10—30字 | 用一句话说明照片中可确认的主体,不写未经证实的身份或关系。 |
| 图片格式 | WebP、JPEG或PNG | 按素材与浏览环境选用;透明背景素材可用PNG,普通照片可用WebP或JPEG。 |
不同设备上的适用表现
手机屏幕:采用上下排列,先显示检索词和说明,再显示缩略图。图片随结果栏宽度缩放,标题自然换行,不要为了强行塞进一行而过度缩小字号。窄屏下若有多张审核合格的照片,应逐张纵向展示,确保每张图都能辨认。
平板屏幕:横屏时可尝试文字与图片并列,竖屏时改为上下排列。切换方向后重新计算卡片宽度,并检查照片是否被裁切、说明是否压到缩略图上。
桌面屏幕:结果栏较宽时,可将说明放在左侧、图片放在右侧,并给图片设置最大宽度;结果栏较窄时沿用上下布局。无论采用哪种排法,用户的阅读顺序都应先文字、后图片。
单图预览与多图展示的选择
只有一张适合展示的安全照片时,使用单图卡片即可,附上一句准确说明。若有多张审核合格的照片,可排列成统一比例的缩略图组,并把每张照片的说明放在对应图片下方。手机上应采用纵向卡片,或确保横向排列时每张缩略图仍有足够宽度;不要把图片挤成无法辨认的窄条。没有合适素材时,保留文字说明并标注暂无安全预览,比展示来源不明的照片更稳妥。
使用时的检查重点
- 核对搜索框和结果标题是否完整保留用户输入,换行后仍容易读懂。
- 检查图片是否按比例缩放,重要主体有没有被边缘裁掉。
- 比较载入前后的卡片尺寸,确认图片没有覆盖文字,也没有造成布局跳动。
- 逐张核对替代文字与实际照片,删除身份、关系等无法从画面确认的描述。
- 确认审核规则会拦截性化或剥削未成年人的影像;缺少合适素材时,不以相似词语推测并配图。
- 在手机、平板和桌面视口分别检查阅读顺序、留白和缩略图清晰度。
总体而言,这类图文模块适合用于检查检索词保留、图片预览、加载占位和多设备排版。实用的配置包括4:3缩略图比例、320×240 px基准尺寸、移动端满宽显示,以及低于768 px时切换为上下布局。设计时还要把图片审核与文字说明一并纳入流程:照片只呈现可确认的安全场景,说明只描述实际可见对象;没有合适照片时,明确告知用户即可。













