为什么大家都爱看图文并茂的教程
你有没有过这种经历？打开一篇教程，密密麻麻全是字，看得头大，看到一半就不想看了。但要是配上图，步骤一清二楚，一眼就知道下一步该点哪里。比如教人怎么用PPT做翻页动画，光写‘点击动画选项卡，选择切换效果’，不如直接上截图，标出按钮位置来得痛快。
选对工具，事半功倍
做图文教程不用非得会PS。手机截图+微信自带的画笔功能就能搞定基础标注。Windows用户按PrtSc键截屏，Mac用户用Command+Shift+4框选区域，保存后直接拖进文档就行。如果想更专业一点，Snipaste、PicPick这些小工具支持自动编号、加箭头、高亮区域，特别适合做步骤分解。
排版讲究：图和文怎么搭
别把图堆在最后，读者不想来回翻。正确的做法是：写一步，配一图。文字说明控制在两三行，紧接着下方放对应图片。图片不要太大，宽度控制在600px左右，防止撑破页面布局。可以在HTML里这样写：
<p>进入“设计”菜单，选择主题样式。</p>
<p><img src="design-tab.png" alt="设计菜单位置" width="600" /></p>给关键操作加点提示
有些地方容易点错，比如弹窗里的“取消”和“确认”挨得太近。这时候可以用红色方框圈出来，或者在图上加个黄色便签：“这里千万别手滑！”。如果用代码生成网页教程，还可以加入hover提示：
<div class="step-img" title="点击确认才会保存设置">
<img src="dialog-box.png" alt="确认对话框" />
</div>真实案例：做个Excel数据筛选教程
假设你要教同事怎么筛出销售额大于5000的数据。第一步，先截下数据表格；第二步，在“数据”选项卡里找到“筛选”按钮，截图并用绿色箭头指向它；第三步，点击表头下拉箭头，输入条件，再截一张结果图。三张图配上三段短文，谁都能跟着做出来。
发布前自己从头看一遍，假装是个完全不懂的新手。如果某个步骤卡住了，说明图没到位，补一张局部放大图就清楚了。