Wireframes Magazine 是一个围绕线框图、界面设计与交互设计建立的内容型网站,由来自多伦多的交互设计师 Jakub Linowski 运营。网站通过文章、案例、工具介绍、模板推荐和设计灵感,记录网页与应用界面设计相关的实践内容。与单一的线框图制作工具不同,它同时覆盖 Samples、UI Tools、Templates、Inspirations、Experimental 等栏目,也提供 Share Your Stuff 入口,内容形态包括设计资源介绍、产品体验说明、转化优化思路、手绘草图和个人设计方法。
核心功能
线框图与原型设计内容
网站持续收录与 wireframe、prototype、user flow 和 prototyping 相关的文章。关于 pentotype 的内容介绍了在 iPad 或配合图形数位板的桌面环境中绘制可点击线框图的方法,支持手机、平板和网站类型的界面,并能通过屏幕之间的连线建立页面流程。关于 Pidoco 的文章则介绍了在浏览器中创建线框图,并通过触发器与反应动作模拟点击、悬停、滑动、缩放和设备翻转等交互。
UI 工具与设计资源介绍
UI Tools 栏目包含对原型工具、图标资源和界面组件的介绍。例如,Pidoco 文章提到模板、全局图层、自动规格文档生成、版本管理、问题追踪和导出选项;Kameleon Flat Icons 文章介绍了包含 1,500 个矢量图标的图标集,并提到 AI、SKETCH、SVG 等格式。另有 Icons Mind 的图标资源介绍,涉及 Android、iOS、AI、Sketch、SVG、EPS、PNG 和 PSD 等内容。
转化优化与 GoodUI 内容
网站发布了 BetterUI 视频系列,内容是从提升转化的角度审视热门网站,并参考 goodui.org 的相关思路。示例内容围绕 Uber.com 的司机注册页面提出 10 个想法,同时尝试表达不同想法的确定程度。相关课程还展示了使用 Adobe Illustrator 对识别出的问题进行后续构思和设计的过程。
模板与可编辑页面资源
GoodUI Fastforward 被介绍为一组关注转化表现的 UI 页面模板,页面会随着持续进行的 A/B 测试不断调整,PDF 第二页包含变更历史。资源还提供 Balsamiq、Illustrator 和 Axure 格式的可编辑页面类型,并覆盖能够帮助提升 sales、trials、quotes 等指标的页面。网站也介绍了 Axure Flat UI Kit,其中包含 310 多个可交互的页面元素、模块和完整模板,并使用 Axure 的 widget library。
手绘草图与设计方法
网站记录了 GoodUI 在 Instagram 上发布的手绘草图,这些草图虽然具有实验性质,但仍然以转化为关注重点。另有 My Sketchbook Color Coding 文章,介绍使用不同颜色整理笔记本内容的方法:浅灰用于想法与灵感,中灰用于项目想法,黑色用于商业策略,红色用于联系人,蓝色用于 UI patterns,黄色用于内容。站点标签还覆盖 sketch、sketching、colour、annotation、persona、forms 等设计主题。
使用方式
官网正文呈现为博客式网站,用户可以通过 Samples、UI Tools、Templates、Inspirations 和 Experimental 等栏目浏览内容,也可以按 wireframe、sketch、prototype、user flow 等标签查看主题文章,并通过分页继续访问历史内容。站点提供 Share Your Stuff 入口。正文没有说明 Wireframes Magazine 需要注册、提供客户端、浏览器插件、API 或命令行工具。
适用人群与场景
网页和应用设计师可以从线框图、页面流程、交互模拟与 UI 模板文章中了解设计资源和原型方法。关注转化优化的产品团队可以阅读 BetterUI 与 GoodUI 相关内容,参考页面改进和 A/B 测试思路。需要图标或界面素材的设计人员可以查看 Kameleon、Icons Mind 和 Axure UI Kit 等资源介绍。正在整理设计思路的个人设计师,则可以参考手绘草图、UI patterns 以及笔记本颜色分类方法。
注意事项
官网正文主要由历史文章组成,页面中展示的文章日期集中在 2014 年至 2016 年。部分内容是对 Pidoco、pentotype、GoodUI、Kameleon 和 Icons Mind 等外部产品或项目的介绍,相关产品的试用、折扣和购买信息不等同于 Wireframes Magazine 自身服务的定价。正文未提供 Wireframes Magazine 自身的价格、免费额度或订阅方案。