SuperAPI AI 工具集

paper-ds-options-page

设计与创作

查看项目

更新于 10-16 10:25

技能介绍

用途

paper-ds-options-page 是一个用于产品页面设计探索的技能。它规范了一整页方向方案表的格式,适用于账单页、控制台、设置页、引导步骤等整页界面的方案对比。使用者借此把同一页面的多个整体方向并排呈现,供利益相关者评估。

主要能力

  • 从模板克隆 Sheet Page,生成横向排列的三个方案。
  • 每个主题一个整页舞台,默认 480px 宽、600px 高起步,高度由内容决定。
  • 宽产品界面可用 1120px 宽舞台,并将浅色和深色分置不同行,需在上下文行中说明。
  • 要求区域标题的上下文行写成场景而非描述,说明使用者身份与所处状态。
  • 从清单克隆外壳组件(侧边栏、页头),只画一次并复用到每个方案,保证外壳一致。
  • 每个方案绘制页面内容,使用产品真实数据而非占位内容。
  • 保持固定宽度,高度随内容增长并设为 fit-content。

页面方案决定的内容

对于开放的页面探索,每个方案是一种方向,回答关于页面的不同问题:页面以什么开头(用量、套餐、欠款、下一步操作)、页面如何分区(单栏、双栏、分节、标签页)、首先要求用户做什么、隐藏了什么。

当前/建议(Current/Proposed)、状态和响应式检查则保持页面方向固定。对于结构方向,不能有两个方案以同一内容开头,应按主导内容命名(如「用量优先」「项目优先」)。修订使用 Current 和 Proposed 代替。

场景

固定一个场景并在其中绘制所有方案。场景决定出现哪些状态:免费套餐、超出限制、新用户、空状态。如果页面因状态差异很大,则为第二个场景再画一张方案表。绝不在一张表里混合场景。

检查

  • 以缩略图尺寸比较方案;若无法区分,说明方向差异不够。
  • 每个方案在页面上三分之一内回答场景的首要问题。
  • 检查每个方案中真实内容的最短和最长情况。
  • 圆角页面不等于精致页面,需查找不在间距尺度上的步进值。

反馈之后

制作第二轮方案表,将选定方向放入上下文中:真实外壳、真实相邻页面、真实数据。然后归档其余方案。

限制

资料未提供该技能的具体安装命令、代码实现、收费或价格信息、支持的平台、以及可量化的效果说明。