admin
d9445b5888
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
6.5 KiB
产品界面工作区骨架
画廊、商店、信息流、文档站、后台、工具、App 等让人浏览、挑选内容或处理对象的页面，首屏就是第一排内容本身或工作区（整体设计方向流程见 设计方向）。
页头占几行、首屏放什么的底线见 设计方向 的“定首屏与工作区骨架”。这类页面都没有首屏海报，决定结构的是用户每天面对的对象、对它最常做的动作，以及多久用一次。模型的默认是“左侧栏 + 顶部四张指标卡 + 一张图表 + 一张表格”，不管产品是什么，因为这样不需要理解业务。跳出它的办法和落地页一样：画界面之前先定骨架。
先写三行：
- 核心对象：用户每天处理的是什么，例如工单、合同、镜头、病床；一眼认出它靠哪两三个属性，例如缩略图、状态、金额、截止时间。再问一句：用户在这个对象上最怕错过什么？通常是一个会随时间变化的量，例如已经等了多久、离截止还剩多少、欠了多少。把它做成对象上最显眼的属性，而不是藏在详情里。
- 主动词：对它最常做的动作是逐条处理、比较、创作、安排、定位、推进、监控，还是游玩与操控。
- 频率：每天用几小时的专业用户，还是每月来一次的普通人。它决定密度。
再按主动词选工作区骨架：
| 主动词 | 骨架 | 长什么样 |
|---|---|---|
| 逐条处理 | 队列 / 收件箱 | 左边队列，右边当前这一条的全部信息和处理动作；处理完自动跳到下一条，键盘可以一路按到底 |
| 比较与筛选 | 表格 | 行是对象，列是比较依据；筛选、排序和批量操作长在表头与选择状态上，不另开页面 |
| 创作与编辑 | 画布 / 文档 | 内容占满，工具贴着内容出现，面板按需展开 |
| 沿时间安排 | 时间线 / 日历 | 横轴是时间，对象是时间上的块，拖动即改期 |
| 在空间中定位 | 地图 / 平面图 / 座位图 | 对象画在真实位置上，列表只做辅助 |
| 推进流程 | 看板 / 流水线 | 列是阶段，对象在列之间移动 |
| 监控 | 仪表 | 只在真的需要持续盯着时使用；每个数字写出正常范围，以及出问题后该做什么 |
| 对话后产出 | 对话 + 产物 | 对话收窄在一侧，产物占主区域并能直接编辑 |
| 浏览与挑选 | 画廊 / 货架 / 信息流 | 内容铺满首屏，缩略图的比例就是版式；筛选和排序贴着内容顶部，占一行；点开时在原地展开或用浮层，关上回到原来的位置 |
| 游玩与操控 | 场景 / 机台 | 被操控的对象和场景占主区，状态贴边，拇指操作区在下方；做法见 游玩 |
文字索引是画廊的一种变体。 对象靠名字、类型和年份就能区分时，例如作品集、案例、目的地、文章，十到几十项，首屏可以先放一张文字索引：每行是名字加两三个属性，日期和编号用等宽数字。悬停或聚焦某一行时，它的图出现在列表旁的固定位置，不跟着鼠标跑，也不挡住下一行。再给一个“列表 / 图片”切换，切过去仍停在同一个对象上。触屏没有悬停，点一下展开这一行的缩略图。图片本身就是卖点的内容，例如摄影和商品，仍然图片先行。
首页先回答“我现在该处理什么”，而不是“总共有多少”。
对象的样子就是产品界面的主视觉。 先设计一个对象在列表行、卡片或画布上的样子：最重要的属性放在哪，状态怎样一眼看出，长名字怎么收，空值怎么显示，选中和处理中长什么样。一个设计好的列表行，比十张指标卡更能体现方向。
密度按频率定。 每天用几小时的专业工具，行高 32–40px、正文 13–14px、一屏看到 20 行以上都正常，操作以键盘为先；偶尔来一次的消费产品，点击区域 44px 以上，一屏只要求一个决定。不要给专业工具套消费级的大留白，也不要把一次性的流程塞满控件。密度要在截图上数出来：一屏能看到几个对象，主动作离当前对象有多远。高频工具一屏少于 10 个对象时，先查行高、页面头部和说明文字占了多少高度。
产品界面的大胆放在哪。 放在工作区结构、对象的样子和状态的表达上，例如时间在画面里怎样流动、超时怎样一眼跳出来。页面标题和品牌区保持小：一行，和区域标题同级或略大。在高频工具和内容页里放超大页面标题、通栏口号，或者用一整块深色卡片装“下一步”动作，都是把落地页的手法搬错了地方，占掉的是每天要看几百次的工作区。
顶栏放什么。 顶部第一行是每天看得最多的位置。先问用户在这一屏需不需要靠品牌认路，需要才放品牌标识：
- App：用户点图标进来，已经知道在哪个 App。一级页顶部放当前屏名称（可以用大标题）、当前对象，或最常看的状态，例如余额、连胜、剩余次数；二级页放返回和标题。品牌字标通常不出现在顶部。品牌本身就是入口的信息流首页、启动页、登录与引导页可以放。
- 网页：落地页、官网、品牌页、文档站、商店这类访客可能从搜索或分享链接直接落地的页面，左上角放标识，告诉他在哪个站、点它回首页，尺寸和导航同级，不放大成第二个主视觉。登录后的产品工作区和工具，标识收成侧栏或顶栏角上的小图标或工作区切换器。
- 品牌行和页面标题不在同一处上下叠成两层头部；两样都需要时，合进同一行，或分到侧栏和主区。
画面里的实物铭牌、包装和招牌属于内容，不算顶栏的品牌行。品牌方有明确要求，或方向本身需要字标出现在每一屏时可以放，在方向卡里写出理由。
多个方向时，工作区骨架、对象的样子、导航方式（侧栏、顶栏、命令面板、在空间里跳转）、密度四项，任意两个方向至多一项相同。这四项是在通用差异检验之外再比，不是替代：产品界面同样需要各自的色彩身份和字体性格，不能三个方向都是系统黑体加一种强调色，只换了布局。基于选定方向派生版式时，字体、配色和密度都照选定的方向，只比工作区骨架、对象的样子和导航方式。方向卡里的“首屏骨架”一栏，产品界面填工作区骨架和对象的样子。