从网页布局到图标与交互
仅仅收集参考网站，并不能让下一步工作变得清晰。先确定用户要完成的操作，再画出结构，逐一选择需要的图标和动效。这些工具按照制作小型服务首个页面的顺序组合。
适合人群
适合独立制作网页服务，或需要与设计师讨论页面结构的开发者和策划者。重点是在完成设计稿之前，先理清页面中的操作和流程。
资源筛选标准
我们分别选择了一款表达页面结构的工具、一套风格统一的图标，以及一个展示前端实现过程的教程来源，帮助你专注当前阶段的决策，而不是反复比较同类工具。
建议阅读顺序
先确定页面的主要操作和辅助操作，绘制线框图；再统一图标样式和尺寸；最后只加入有助于理解操作结果的动效。也请在较小的手机屏幕上检查同一流程。
-
balsamiq.com
Balsamiq：页面结构与原型
通过线框图和原型表达页面结构与流程的工具。可在编写代码前，用草稿说明按钮的作用和页面间的跳转。
动手试试
画出首个页面，标记用户需要完成的一项操作。试着移除无关元素，看看页面是否仍然清晰。
使用前请阅读产品介绍和条款。提供试用并不等于永久免费。
-
heroicons.com
Heroicons：网页界面SVG图标
提供可搜索的SVG图标及React、Vue使用指南。在混用不同来源前，可先用一套图标表达发现、保存、设置等操作。
动手试试
为三项操作选择图标，并统一尺寸和表现形式。对于仅靠图标难以理解的按钮，请同时添加文字。
请区分网站提供的SVG资源和项目中已安装的软件包版本，并确认图标的许可条件。
-
tympanus.net
Codrops：交互与前端教程
可查找页面过渡与交互实现的教程、案例和演示。页面结构确定后，用它们比较哪些动效有助于用户理解界面。
动手试试
从一个演示中选择一种效果，写下它的用途，并检查去掉该效果后主要功能是否仍可使用。
这些示例使用的框架并不相同。请先查看各示例的发布时间、安装依赖和使用条件。
开始练习前请确认
工具价格、功能和示例依赖可能变化。使用前请查看Balsamiq的条款、Heroicons的用法，以及各Codrops示例的库版本和许可证。视觉效果也应在键盘操作和减少动态效果设置下测试。
推荐理由和练习由 Pastelinkers 编写，可通过各资源的“查看原文”阅读原始内容。