73 lines
5.5 KiB
HTML
73 lines
5.5 KiB
HTML
<h2>交互设计：从算法效果一路追到验证结果</h2>
|
|
<p class="subtitle">示意的是所有领域共用的操作方式；中央主画面会根据算法自动变成路径、曲线、搜索树、状态机或其他实际效果图。</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header" style="display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap">
|
|
<span>算法诊断报告</span><span>算法：路径规划器 ▾ 问题：最小间距失效 ▾</span>
|
|
</div>
|
|
<div class="mockup-body" style="padding:0">
|
|
<div style="display:grid;grid-template-columns:170px minmax(0,1.5fr) minmax(245px,.8fr);min-height:390px">
|
|
<nav class="mock-sidebar" style="padding:12px">
|
|
<div class="label">查看模式</div>
|
|
<div style="display:grid;gap:8px;margin-top:10px">
|
|
<div style="padding:9px;background:#eef6f8;border-left:4px solid #4b8fa8"><b>① 正常机制</b><br><small>算法原本怎样工作</small></div>
|
|
<div style="padding:9px;background:#fff1ef;border-left:4px solid #c8463a"><b>② 当前问题</b><br><small>异常位置与实际状态</small></div>
|
|
<div style="padding:9px;background:#fff9ed;border-left:4px dashed #d18a26"><b>③ 修正预演</b><br><small>方案尚未验证</small></div>
|
|
<div style="padding:9px;background:#f0faf5;border-left:4px solid #31836b"><b>④ 验证结果</b><br><small>修正后的真实证据</small></div>
|
|
</div>
|
|
<div class="label" style="margin-top:18px">显示层</div>
|
|
<p style="font-size:12px">☑ 输入输出<br>☑ 约束边界<br>☑ 当前异常<br>☑ 影响传播<br>☐ 源码位置</p>
|
|
</nav>
|
|
|
|
<main style="padding:14px;background:#edf1f2">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px">
|
|
<b>领域效果主画面</b><small>播放 暂停 单步 缩放 重置</small>
|
|
</div>
|
|
<div style="height:238px;position:relative;border-radius:8px;background:linear-gradient(135deg,#334047,#222b30);overflow:hidden;color:white">
|
|
<div style="position:absolute;inset:18px;border:1px dashed #718087;border-radius:7px"></div>
|
|
<div style="position:absolute;left:9%;bottom:18%;padding:7px 10px;border-radius:6px;background:#4b97b8">输入/起点</div>
|
|
<div style="position:absolute;right:10%;top:17%;padding:7px 10px;border-radius:6px;background:#328b70">输出/目标</div>
|
|
<svg viewBox="0 0 500 220" style="position:absolute;inset:0;width:100%;height:100%">
|
|
<path d="M80 175 C190 185 245 145 310 105 C350 80 385 63 423 55" fill="none" stroke="#ff7065" stroke-width="6"/>
|
|
<circle cx="308" cy="106" r="19" fill="rgba(255,112,101,.25)" stroke="#ffb0aa" stroke-width="3"/>
|
|
<path d="M308 87V125M289 106H327" stroke="#fff" stroke-width="2"/>
|
|
<path d="M80 175 C170 206 280 188 335 137 C372 103 390 72 423 55" fill="none" stroke="#65d9aa" stroke-width="4" stroke-dasharray="10 7"/>
|
|
</svg>
|
|
<div style="position:absolute;left:44%;top:12%;padding:7px;background:#fff4f2;color:#8f2e28;border-radius:5px"><b>点击异常对象</b><br><small>主画面与右侧诊断联动</small></div>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:9px;font-size:11px;text-align:center">
|
|
<div style="padding:6px;background:white">输入阶段</div><div style="padding:6px;background:white">核心计算</div><div style="padding:6px;background:#fff0ee">异常阶段 ⚠</div><div style="padding:6px;background:white">输出验证</div>
|
|
</div>
|
|
</main>
|
|
|
|
<aside style="padding:14px;background:white;border-left:1px solid #ccd5d8">
|
|
<div class="label">对象诊断卡</div>
|
|
<h3>异常对象 / 阶段名称</h3>
|
|
<div style="font-size:12px;display:grid;gap:8px">
|
|
<div><b style="color:#b83b32">目前状况</b><br>显示当前实际值、位置或状态。</div>
|
|
<div><b>出错原因</b><br>根因或明确标记的待验证假设。</div>
|
|
<div><b style="color:#a36325">导致结果</b><br>在主图中高亮影响传播路径。</div>
|
|
<div><b style="color:#26745f">纠正方案</b><br>点击步骤可在主图预演对应变化。</div>
|
|
<div><b style="color:#26745f">预期结果</b><br>候选预测与真实验证结果分开显示。</div>
|
|
</div>
|
|
<hr>
|
|
<p style="font-size:11px"><b>证据：</b>函数名、源码位置、输入样本、测试命令和证据等级，可继续展开。</p>
|
|
</aside>
|
|
</div>
|
|
|
|
<div style="padding:12px;border-top:1px solid #ccd5d8;background:#fafbfb">
|
|
<div class="label">一次完整点击路径</div>
|
|
<p style="margin:6px 0 0;text-align:center"><b>选择算法</b> → <b>查看正常机制</b> → <b>点击异常对象</b> → <b>播放影响传播</b> → <b>逐步预演纠正方案</b> → <b>切换已验证结果</b></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="approve-interaction" onclick="toggleSelect(this)">
|
|
<div class="letter">✓</div><div class="content"><h3>确认这套交互</h3><p>领域主画面、四种状态、对象诊断卡和证据下钻共同组成报告页面。</p></div>
|
|
</div>
|
|
<div class="option" data-choice="revise-interaction" onclick="toggleSelect(this)">
|
|
<div class="letter">↺</div><div class="content"><h3>需要调整</h3><p>说明希望改变的交互顺序、页面区域或信息层次。</p></div>
|
|
</div>
|
|
</div>
|