★ FEATURED ARTICLE 简介这是一款专为 UI/UX 设计师与前端开发者打造的 Sketch 插件可将已有的网站设计稿一键导出为可点击的 HTML 原型用于向客户直观演示页面布局与交互路径。它支持在画板之间创建跳转链接、添加外部网页链接并可通过 JavaScript 对话框实现轻量提示同时只需更改浏览器窗口宽度即可查看响应式布局变化省去手动编写原型代码的繁琐步骤。压缩包共含 19 个文件以 JavaScript 脚本13 个为主体搭配 Sketch 插件定义文件、JSON 配置文件、README 说明文档、开源许可证等整体仅 406KB体积轻巧、便于团队分发安装。目前已有 691 人学习或下载适合需要快速验证交互方案、输出高保真可点击原型的设计师、产品经理及前端入门者。解压后可直接打开演示文件 demo.sketch 体验按照“画板同名”规则如 index命名画板即可自动生成响应式页面有效降低设计评审与沟通成本。1. 什么是 click-thru prototype把设计稿变成「能点得动」的 HTML一个很反直觉的现象现在做高保真原型很多人第一反应是打开设计工具而不是打开编辑器。而真正到了评审会现场静态画板一张张切评审人问「点这个按钮去哪」「这个返回手势怎么处理」你只能现场开录屏或者口述。click-thru prototype 解决的就是这个「能点得动」的问题——用 HTML 做一个点击型原型让每个按钮、每个入口都有真实跳转能在浏览器里像产品一样被操作。它适合三种人要做可用性测试的产品经理、要演示交互逻辑的设计师以及想在设计早期验证流程的开发者。整个方案的核心理念只有一句话交互验证够了就行不需要生产级代码。2. 点击型原型为什么用 HTML 状态切换三种路径与选型判断2.1 点击型原型的本质是「状态切换」不是「动效」click-thru prototype 的英文直译是「点击穿透原型」业内更常见的叫法是 click-through prototype。它描述的不是某个工具而是一种交互验证方式界面上有一批可点击区域点击后触发跳转把你带到另一个界面状态。和花哨的转场动效、弹性动画不同点击型原型的核心诉求是「路径验证」——用户能不能从首页走到下单页能不能从列表走到详情流程是否通畅。这里的关键认知是原型里只有两种东西界面状态和触发跳转的连接。界面状态可以是一张静态截图也可以是一段手写的 HTML 结构跳转连接可以是超链接、绝对定位热区也可以是 JS 监听。把这两件事分开想就不会在实现时被工具绑住。很多人在设计工具里做交互原型最后导出成只能演示不能改的格式本质上是把「状态」和「跳转」耦合得太死改动一个分支要重排全流程。2.2 HTML 方案与设计工具导出的取舍常见做法里做 click-thru 原型有三条路径设计工具自带的交互模式、在线协作设计平台的交互连线、以及用 HTML/CSS/JS 手写。我在真实项目里三条都用过简单做个对比路径上手速度真实感可维护性适合场景设计工具交互模式快拖拽即可中受画板限制差页面多了连线乱3~5 个页面的低保真验证在线协作平台连线快团队可看中依赖平台加载中受平台功能约束远程评审、多方评论手写 HTML 点击型原型需要基础前端能力高贴近真实浏览器好改一个类名就行多分支流程、真实设备演示、可复用组件我一般会建议只要流程超过 8 个页面或者要在手机上真机演示就优先考虑 HTML 方案。设计工具导出的原型在桌面浏览器上看还行到了真机上视口、安全区、滚动行为全都不一样演示现场很容易「翻车」。而 HTML 原型的每个页面就是一个带标记的区块跳转关系写在标签里哪里断了、哪里缺页面打开 DevTools 一眼就能定位。2.3 什么规模的项目不值得用 HTML 点击型原型选型不能只看优点。如果你的目标只是「给客户看个大致感觉」页面不超过 3 个、交互只有点点点那设计工具里拉几条连线就够了没必要引入 HTML 工程。反过来当出现下面这些信号时就要果断转向 HTML流程有分支和条件判断需要支持浏览器前进后退要嵌入真实图表组件要反复修改页面文案和样式要按业务角色区分不同入口。这些需求用设计工具连线会非常痛苦而 HTML 方案只需要改数据属性和类名。还有个观点我想说明点击型原型不等于静态页面拼超链接。很多人把 HTML 原型做成了「多个整页 a 标签跳转」这也能用但页面间闪烁严重、滚动位置无法保留、状态也难共享。真正好用的 click-thru 原型应该基于「单页 状态切换」的思路来做这也是下一章要落地的东西。3. 跑通最小 click-thru 原型页面容器、hash 路由与统一入口3.1 最小文件结构data-page 标记与 class 控制显隐先把骨架搭起来。我习惯用三个文件index.html 放所有页面区块css/style.css 管显隐和视觉js/app.js 管跳转逻辑。这样做的好处是原型阶段的页面切换不用发请求所有界面状态都存在同一个文档里切换只是 class 的增删。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleclick-thru 原型骨架/title link relstylesheet hrefcss/style.css /head body main !-- 首页默认展示 -- section classpage idpage-home>/* css/style.css */ .page { display: none; /* 默认隐藏所有页面 */ min-height: 100vh; /* 保证每个页面撑满视口 */ padding: 24px; } .page.is-active { display: block; /* 选中页才展示 */ }这是整个点击型原型最核心的 CSS 逻辑display 控制显隐is-active 表示当前激活页。为什么不用 vue/react 那套条件渲染因为原型阶段不引框架才是可控的裸 JS 改类名没有依赖、没有构建步骤目标文件夹直接拷给别人也能跑。3.2 统一入口函数showPage 与 hash 路由有了页面容器接下来写统一跳转入口。所有点击最终都收敛到一个动作切换 is-active。这个函数负责把当前激活页的类名摘掉给目标页加上并把滚动位置拉回顶部。// js/app.js function showPage(pageName) { // 通过>div classscreen idpage-dashboard>/* css/style.css 追加 */ .screen { position: relative; max-width: 375px; /* 模拟手机宽桌面演示时居中 */ margin: 0 auto; } .screen-bg { display: block; width: 100%; height: auto; } .hotspot { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(0, 120, 255, .7); background: rgba(0, 120, 255, .08); cursor: pointer; }热区的 left、top、width、height 全部用百分比给定目的是让热区跟随背景图等比缩放。无论看的人是 1920 的显示器还是 375 的手机热区都能准确压在界面图的对应按钮上。这是做图片热区的一条铁律设计稿固定宽度换算的像素值在响应式屏幕上一动就错位百分比才是可缩放的锚点。4.2 hover、焦点与转场参数三档反馈让「可点感」成立click-thru 原型最容易犯的错是只处理了 click没处理 hover 和 focus。真实产品里按钮有悬停态、键盘有焦点态原型可以在视觉上简化但不能完全没有反馈否则用户分不清到底点什么有效。/* hover 反馈轻微变色 微微放大 */ .hotspot:hover { background: rgba(0, 120, 255, .18); transform: scale(1.04); } /* 键盘可达性Tab 聚焦时给明显外环 */ .hotspot:focus-visible { outline: 2px solid #0078ff; outline-offset: 2px; } /* 按下的瞬时反馈 */ .hotspot:active { transform: scale(0.98); } /* 转场参数统一收在 150ms~200ms太快没反馈太慢显拖沓 */ .hotspot { transition: background .15s ease, transform .15s ease; }150ms 到 200ms 是点击反馈的舒适区间小于 100ms 用户感知不到超过 300ms 又显得界面笨重。如果你要模拟更真实的按钮按压可以在里层加 box-shadow 变化我习惯用 inner shadow 模拟按钮按下去的高光变化。这些参数在原型阶段不需要全局统一到设计系统但同一批页面的过渡时长最好一致评审时才不会觉得某些页面「手感和别处不一样」。4.3 移动端视口与安全区真机演示前必调的三个参数如果你已经准备把原型塞到手机里演示以下参数一定提前调否则现场大概率要翻车。viewport 是第一个坑默认的 widthdevice-width 在 UI 原型上往往不够因为很多原型按 375 设计加 maximum-scale 和 viewport-fit 覆盖才是完整配置。meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover/* 适配全面屏底部安全区 */ .page { padding-bottom: env(safe-area-inset-bottom, 20px); }viewport-fitcover 允许页面内容延伸到屏幕圆角和安全区之下env(safe-area-inset-bottom) 则把底部留白补回来。这是 iPhone 全面屏系列的真实血泪经验不配置这两项底部固定的按钮会被 Home 条盖住演示时看着就像「原型的按钮不能点」。还有一个参数容易被忽略就是页面宽度在桌面演示时要用 max-width 收拢否则手机上正常的热区投到宽屏浏览器上会拉得又宽又扁评审投影仪上看就是一翻车现场。给 .screen 设置 max-width桌面演示时居中展示团队内部意见反馈也能稳定在同一个视觉尺度下。5. click-thru 原型避坑笔记5 个最容易翻车的现场5.1 现象file:// 协议下图片能看但脚本报了跨域错双击 index.html 直接打开时如果页面里用了 fetch 加载 JSON 或模板片段浏览器会报 CORS 错误。很多第一次做 HTML 原型开发者在这里卡半天以为代码写错了其实是 file:// 协议的安全限制。原因浏览器把 file:// 页面发起的 fetch 请求视为跨域默认拒绝。静态图片、CSS、同目录下的普通 JS 不受影响所以页面看起来没问题一到数据请求就翻车。解决原型阶段尽量少用 fetch需要动态数据的部分直接写在 HTML 里。如果确实要请求本地 JSON就在项目根目录起一个静态服务一行命令的事python3 -m http.server 8080然后访问http://localhost:8080。这也是我推荐把 HTML 原型做成「双击可用」的原因没必要一开始就上工程化。5.2 现象热区对着静态图定位换设备就错位上一章刚夸过百分比定位但它有一个前提热区的父容器宽度必须等于图片显示宽度。如果把热区直接放在 body 下而图片放在某个带 padding 的容器里百分比计算基准就不一致屏幕一变化热区全飞。原因position absolute 的百分比是相对最近的定位祖先计算的不是相对图片。只要祖先结构和图片之间有间距热区锚点就偏。解决给每个界面区块统一套用 .screen 容器position: relative 加在容器上热区只放在 .screen 内部。排查时打开 DevTools把热区的 left/top 改成 0、0看它是否落在图片左上角就能确认基准对不对。5.3 现象快速点击时页面闪了一下然后滚到半截用 a 标签做跳转时浏览器默认行为是跳到锚点元素位置而这个元素在页面里可能处于中间高度。快速连续点击多个热区滚动位置会停留在前一个页面的中部观感像页面「半切换」。原因hashchange 触发 showPage但滚动归零和 class 切换发生在一个事件里如果页面还没渲染完就滚动浏览器会把滚动位置拉到 hash 元素处覆盖我们的行为瞬间产生跳动。解决把滚动归零放进 requestAnimationFrame确保渲染完成后再滚。或者更简单在 showPage 里显式调用window.scrollTo(0, 0)并把 a 标签的 href 只用作路由记录点击行为统一交给 JS 的 preventDefault 接管浏览器就不会自己找锚点了。5.4 现象表单里点按钮页面突然刷新了原型里如果有搜索框、登录表单很容易顺手写一个button当热区。在 form 标签内部button 的默认 type 是 submit点击会触发表单提交导致整页刷新原型变成一片空白。原因并非 click-thru 方案的问题是 HTML 基础语义的坑。原型阶段大家都在快速写结构默认 type 属性被忽略。解决所有放在 form 里的按钮显式加typebutton不在 form 里的热区尽量用 a 标签而不是 button语义也更接近「跳转」。如果用了上一章的自定义>// js/inspector.js 走查辅助脚本 const pages [...document.querySelectorAll([data-page])]; const tpl pages.map(item { return button typebutton>function getInitialPage() { const params new URLSearchParams(location.search); return params.get(page) || home; } // 初始化入口改成showPage(getInitialPage())这样通知同事评审某个页面时直接发一个带参数的 URL 就能让他落在正确的位置。这也是我对 click-thru 原型最认可的一个习惯所有跳转关系都从数据属性里长出来不走任何依赖具体坐标的硬编码换图片、调布局、加页面都只动内容不动机制。最后分享一个我自己的习惯兜底每次交付原型前一定要自己把主流程从头到尾点一遍然后退后一步什么也不点先确定首页能不能顺利打开——很多次评审尴尬都是因为「默认页参数写错了打开是一片空白」。原型做得再好启动页兜底没做好第一印象就先扣分。这个做法救过我很多次希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
