在博客(ke)写作过(guo)程中经常(chang)被问(wen)到文章(zhang)中软(ruan)件截图和图示的(de)问(wen)题，很多人关(guan)心(xin)使用了(le)那些软(ruan)件，怎么才能制(zhi)作出类似(si)效(xiao)果(guo)的(de)。要(yao)回答(da)这个(ge)问(wen)题，需要(yao)一些对软(ruan)件工(gong)具的(de)了(le)解，还有可以(yi)参照的(de)范例，最后(hou)就是在效(xiao)果(guo)和效(xiao)率(lv)之(zhi)间(jian)做出的(de)平衡。
对于(yu)设(she)计师(shi)而言(yan)，用 Photoshop、Sketch 这样的(de)专业软件，没有什么效果是做不(bu)出(chu)来的(de)，但是在商务(wu)应用环(huan)境中，很多时候我们缺(que)乏设(she)计方面的(de)专业知识，另外也只是希望能更(geng)(geng)快更(geng)(geng)好(hao)的(de)完成文档，所(suo)以(yi)既要(yao)简单好(hao)用还(hai)要(yao)追求效率。
除了(le)适当的(de)(de)(de)图(tu)片(pian)编辑工具(ju)以外，好(hao)的(de)(de)(de)图(tu)示还和(he)基本构图(tu)、主(zhu)题表现这些要素密切相关，有点像(xiang)我(wo)们拿手机(ji)拍照(zhao)，拍的(de)(de)(de)好(hao)看主(zhu)要来(lai)自于人的(de)(de)(de)判(pan)断(duan)力而(er)其次才是硬件(jian)配置上的(de)(de)(de)物(wu)理条件(jian)。应用软(ruan)件(jian)截图(tu)往(wang)往(wang)因(yin)为直接的(de)(de)(de)目的(de)(de)(de)性导致(zhi)很多时候我(wo)们忽略了(le)它也是图(tu)片(pian)，同样需要考(kao)虑构图(tu)和(he)主(zhu)题的(de)(de)(de)突出(chu)，如果(guo)(guo)只是简单的(de)(de)(de)放在那(nei)里可(ke)能效(xiao)果(guo)(guo)并不好(hao)。
图(tu)示是由图(tu)片(pian)和(he)(he)标注共同组(zu)成(cheng)的(de)，简单的(de)图(tu)示只要(yao)(yao)(yao)做到清晰和(he)(he)明确就(jiu)可以，主题就(jiu)是你想展(zhan)现(xian)的(de)内容(rong)，稍(shao)微复杂一些的(de)图(tu)示需要(yao)(yao)(yao)一些布局和(he)(he)排版的(de)知识，如(ru)果要(yao)(yao)(yao)达到更好的(de)视觉效(xiao)果，还要(yao)(yao)(yao)考(kao)虑图(tu)片(pian)和(he)(he)标注的(de)景深和(he)(he)层次、色彩的(de)搭配、图(tu)片(pian)的(de)大小(xiao)、内容(rong)的(de)拼合等(deng)问(wen)题。
从简单到复杂(za)有(you)(you)时候是思(si)考深度的(de)问(wen)(wen)题(ti)，有(you)(you)时候是使用工具数(shu)量(liang)的(de)问(wen)(wen)题(ti)，但是最重要的(de)是认(ren)识的(de)问(wen)(wen)题(ti)，只有(you)(you)你想让它变(bian)的(de)更好(hao)才能在琢磨(mo)中(zhong)把看到的(de)变(bian)成自(zi)己的(de)。
软件环境
在图(tu)(tu)示创作(zuo)的场(chang)景中主要用到的软件有：Snagit(截图(tu)(tu))、OmniGraffle(标(biao)注)、Curio(组(zu)织)、Icons8(图(tu)(tu)标(biao)元素)，系统自(zi)带(dai)的「预览」、Keynote 在很多场(chang)景中使用起来(lai)也很方便(bian)，例如(ru)，在处理(li)部(bu)分放大(da)镜(jing)效果时「预览」自(zi)带(dai)的工具就很方便(bian)，Keynote 用来(lai)组(zu)织多张图(tu)(tu)片并进(jin)行(xing)简单(dan)标(biao)注时也能发挥其作(zuo)用。
选择 Snagit 作为主要的(de)(de)截图(tu)软件，主要的(de)(de)原因有(you)两(liang)个，一(yi)个是 Snagit 自带的(de)(de)标(biao)注图(tu)示丰(feng)富，能在截图(tu)后完(wan)(wan)成很多标(biao)注行为，像数字编号、箭头、高亮(liang)等等;另一(yi)个原因是 Snagit 支持图(tu)层(ceng)模式(shi)的(de)(de)编辑(ji)(ji)，自有(you)的(de)(de)存储(chu)格式(shi)能完(wan)(wan)整的(de)(de)保留元(yuan)素的(de)(de)图(tu)层(ceng)信息，如果不满(man)意导(dao)出的(de)(de)图(tu)示的(de)(de)效果可以随时回到软件中编辑(ji)(ji)。
OmniGraffle 在绘(hui)(hui)图(tu)(tu)上的(de)(de)强大就不用赘述了，对(dui)于(yu)图(tu)(tu)示创作的(de)(de)需求而言，便捷的(de)(de)地(di)方有(you)几点：支持图(tu)(tu)片(pian)(pian)的(de)(de)直接(jie)拖拽、可以自由(you)伸展的(de)(de)画(hua)布(bu)、能(neng)仅导出选中对(dui)象为图(tu)(tu)片(pian)(pian)、模具、线(xian)型(xing)丰富、有(you)灵(ling)活的(de)(de)图(tu)(tu)片(pian)(pian)蒙版等(deng)等(deng)。图(tu)(tu)示的(de)(de)主体是图(tu)(tu)片(pian)(pian)和标注(zhu)，不过有(you)时候还是会用到一(yi)些绘(hui)(hui)图(tu)(tu)的(de)(de)元素需要在 OmniGraffle 中绘(hui)(hui)制(zhi)。
Curio 在图(tu)片标(biao)注和整理上有(you)它独到(dao)的(de)地(di)方，支持图(tu)片的(de)拖(tuo)拽，自带截图(tu)、自由伸展的(de)画布，包含线条、箭头、形状等基本的(de)绘图(tu)工具(ju)，支持单页(ye)的(de)导(dao)出(chu)。与 OmniGraffle 相比虽(sui)然绘图(tu)上没有(you)OmniGraffle 专(zhuan)业，但在组(zu)织(zhi)内容和想法的(de)整理上 Curio 更灵活。
标注的几种类型(xing)
从范例中学(xue)习借鉴图示标(biao)注是一(yi)个比(bi)较有效的(de)方式(shi)，结合不同(tong)的(de)场(chang)景和需求，这里将标(biao)注分为五种基(ji)本模式(shi)来介(jie)绍：指向线条(tiao)、编号、便签、突出(chu)和放大、场(chang)景。
指向型线条
图示标注中指(zhi)向型线条(tiao)的(de)标注形式是使用(yong)最(zui)普遍(bian)的(de)，通(tong)常使用(yong)带端(duan)点(dian)的(de)线条(tiao)来连接说(shuo)明点(dian)和(he)注释(shi)文字。
箭(jian)头一般(ban)用在流程图(tu)这种(zhong)顺序(xu)流的(de)图(tu)示(shi)中(zhong)，说明性质(zhi)的(de)图(tu)示(shi)指(zhi)向(xiang)(xiang)选(xuan)(xuan)择用圆点更(geng)合适。线(xian)型(直(zhi)线(xian)、折(zhe)线(xian)、曲线(xian))的(de)选(xuan)(xuan)择上有(you)具体对象点的(de)一般(ban)选(xuan)(xuan)择直(zhi)线(xian)或曲线(xian)来连接，没有(you)具体指(zhi)向(xiang)(xiang)点的(de)选(xuan)(xuan)用折(zhe)线(xian)(图(tu)例2)。
OmniGraffle 中绘制(zhi)连接(jie)线(xian)的(de)优势在(zai)于各种线(xian)型的(de)线(xian)条(tiao)会随对象(xiang)的(de)移动自动延展(zhan)，这一点上截图软件里是做不到(dao)的(de)。OmniGraffle 中和线(xian)条(tiao)绘制(zhi)有关的(de)几个关键(jian)点有：线(xian)条(tiao)的(de)端点形状(zhuang)(Object-Line)、对象(xiang)的(de)磁极点(Properties-Connections-Other objects)。
更适用指向(xiang)性线条模(mo)式的(de)图示环(huan)境：
图片本(ben)身比较(jiao)小，需要(yao)说明的元素较(jiao)多
注(zhu)释和内容的(de)联系(xi)比较(jiao)紧密(mi)，要兼顾就近参考
不想破环(huan)图片本身的完整性
编号
软件界面布局(ju)、网页整(zheng)体(ti)这种(zhong)图(tu)(tu)片本身比较大的图(tu)(tu)示说明(ming)中，采用(yong)编(bian)号模(mo)式会更清(qing)晰合(he)理。在(zai)说明(ming)点添加编(bian)号数(shu)字，在(zai)其他更「宽敞」的地方罗列说明(ming)文字。另外，编(bian)号模(mo)式还(hai)适(shi)用(yong)于包含步骤逻辑的图(tu)(tu)示说明(ming)。
编(bian)号的(de)方式(shi)在(zai)内容引用和补充(chong)说明(ming)时很方便(bian)，但是(shi)也容易形成说明(ming)点和内容的(de)割裂，实际运用中(zhong)更(geng)多采用的(de)形式(shi)是(shi)编(bian)号+简短文字来标(biao)注(zhu)，然后(hou)和文章(zhang)的(de)展开(kai)说明(ming)相组合。
Snagit 中(zhong)提供了(le)多种配色的编(bian)号图标可(ke)以直接拖(tuo)拽到截图中(zhong)，而且数(shu)(shu)字编(bian)号可(ke)以自(zi)动累加(jia)计数(shu)(shu)，这个小的特性在连续添(tian)加(jia)多个编(bian)号的标注(zhu)中(zhong)很方便。OmniGraffle 中(zhong)要添(tian)加(jia)编(bian)号麻烦(fan)一(yi)点，需要绘制圆圈(quan)形状(按住⇧键(jian)绘制正圆)然后双击添(tian)加(jia)数(shu)(shu)字文本。
更适用编号模(mo)式的(de)图示(shi)环(huan)境：
图片本身较大，需要说明的(de)元素较多
说明点之间存在先后顺序关系
需要(yao)和展开的内容(rong)介绍形(xing)成对应关系(xi)
要说(shuo)明的内容比较多，需(xu)要独立(li)展开
突出和放(fang)大
为了更清楚的说明图示(shi)中的某个(ge)点通(tong)常采用的方式有(you)两种，突出显示(shi)或者放大(da)。
突出显示适(shi)合于展现(xian)某个弹出菜(cai)单项(xiang)、具体的(de)(de)设(she)置窗(chuang)口(图例中(zhong)的(de)(de)3、5、6)，突出显示的(de)(de)另一种表(biao)现(xian)手(shou)法(fa)就是圈选(xuan)标注(zhu)，例如(ru)图例7中(zhong)希(xi)望用(yong)户(hu)的(de)(de)关注(zhu)的(de)(de)某个点。细节和(he)比(bi)较具体的(de)(de)点需(xu)要(yao)(yao)说明时采用(yong)放大镜方式比(bi)较合适(shi)，通常的(de)(de)表(biao)现(xian)形式中(zhong)既有(you)基于图片的(de)(de)局部(bu)放大，也可以不需(xu)要(yao)(yao)背景只放大的(de)(de)某个部(bu)分。
Snagit 中(zhong)(zhong)要(yao)表(biao)现放(fang)大(da)(da)(da)(da)效(xiao)果只需要(yao)用圆圈(quan)套索(suo)选中(zhong)(zhong)后复制粘(zhan)贴并调整粘(zhan)贴图片(pian)的大(da)(da)(da)(da)小即(ji)可，不过这种(zhong)方式没办法(fa)设置放(fang)大(da)(da)(da)(da)部分的边框和(he)阴影(ying)，比(bi)较简陋。「预览(lan)」程序中(zhong)(zhong)有专门的放(fang)大(da)(da)(da)(da)效(xiao)果设置，由(you)工具栏选择放(fang)大(da)(da)(da)(da)镜，绿点(dian)调节放(fang)大(da)(da)(da)(da)倍率，蓝点(dian)调节放(fang)大(da)(da)(da)(da)区域。
OmniGraffle 中(zhong)设置(zhi)放大效果最灵活(huo)，有更(geng)多可供调节的(de)(de)参数。具体(ti)步(bu)骤(zhou)：首先绘制(zhi)一个圆(yuan)形(xing)，然后(hou)设置(zhi)圆(yuan)形(xing)的(de)(de)图层叠加特性(Object-Fill-Multiply)为(wei)透明，选择填(tian)充的(de)(de)效果(Object-Fill-Magnify)为(wei)放大，最后(hou)设置(zhi)放大倍率即可。圆(yuan)形(xing)形(xing)状可以随意的(de)(de)移动(dong)位置(zhi)、设置(zhi)外框线条的(de)(de)大小、颜色甚至阴(yin)影(Object-Shadow)。
便签型
便签块(kuai)形态的标注主要(yao)适用于说(shuo)明(ming)文(wen)(wen)字较多，需要(yao)重点表达(da)说(shuo)明(ming)文(wen)(wen)字本身的情况。另外在比较大的截图内(nei)部写说(shuo)明(ming)文(wen)(wen)字的时候也可(ke)以采用这种形式来区别说(shuo)明(ming)文(wen)(wen)字和截图上自带的文(wen)(wen)字内(nei)容(rong)。
给说(shuo)明(ming)设置和图片(pian)本(ben)身差别比较(jiao)明(ming)显(xian)的(de)(de)颜色填充是(shi)便(bian)签型标注的(de)(de)一个特(te)点，便(bian)签型的(de)(de)说(shuo)明(ming)文(wen)(wen)本(ben)块既可以通过连(lian)线(xian)指向到图片(pian)中的(de)(de)说(shuo)明(ming)点，也可以独立的(de)(de)存在，例(li)如软件截图中可以用便(bian)签文(wen)(wen)本(ben)块来注明(ming)截图是(shi)偏(pian)好设置的(de)(de)界面还(hai)是(shi)某个菜单等等。
简单的(de)文本框(kuang)形态(tai)的(de)说(shuo)明在Snagit、OmniGraffle 中(zhong)操作都能(neng)方便(bian)，Curio 中(zhong)甚至可以(yi)插入能(neng)折叠的(de)便(bian)签型笔(bi)记文本(带标题的(de)文本块)。
实物和(he)场景型(xing)
图示中使用实景(jing)、产品会(hui)获得(de)更(geng)生动(dong)的图示效果(guo)，给单(dan)纯的软件截图加上设备外壳也能获得(de)更(geng)好的场景(jing)感。
实(shi)物或(huo)场(chang)景(jing)的(de)图(tu)片素材，如图(tu)例中(zhong)的(de)1、4一(yi)类的(de)图(tu)片需要(yao)借(jie)助图(tu)像编辑软件(Pixelmator)来去除背景(jing)，最(zui)后(hou)保(bao)存成支持(chi)透明的(de) PNG 格式导(dao)入到 OmniGraffle 或(huo)者(zhe) Snagit 中(zhong)进一(yi)步加工。
给软(ruan)(ruan)件(jian)截图添加设(she)备外壳(qiao)就(jiu)要简单的(de)(de)(de)(de)(de)(de)(de)多，可以(yi)借(jie)助(zhu)专(zhuan)门的(de)(de)(de)(de)(de)(de)(de)软(ruan)(ruan)件(jian)或者网(wang)站来快速实现，例如(ru) iPhone 里的(de)(de)(de)(de)(de)(de)(de)软(ruan)(ruan)件(jian) Screenshot Maker Pro，Mac 环境下的(de)(de)(de)(de)(de)(de)(de)收(shou)费(fei)软(ruan)(ruan)件(jian) Promotee，还有免费(fei)的(de)(de)(de)(de)(de)(de)(de)基于(yu) Web 页面的(de)(de)(de)(de)(de)(de)(de)加壳(qiao)服务：iphone-screenshot、mockuphone.com，以(yi)及收(shou)费(fei)的(de)(de)(de)(de)(de)(de)(de) PlaceIt 网(wang)站，PlaceIt 的(de)(de)(de)(de)(de)(de)(de)独特之(zhi)处(chu)在于(yu)并不仅限于(yu)把图片放入设(she)备中，它还提供了(le)在不同(tong)的(de)(de)(de)(de)(de)(de)(de)情景中展示设(she)备的(de)(de)(de)(de)(de)(de)(de)选择，比如(ru)某个(ge)人的(de)(de)(de)(de)(de)(de)(de)工作台(tai)或者一个(ge)拿着手(shou)机(ji)的(de)(de)(de)(de)(de)(de)(de)手(shou)。
因(yin)为加壳后(hou)获(huo)得的(de)(de) PNG 图片背景是(shi)透(tou)明(ming)的(de)(de)，所(suo)以(yi)(yi)借助(zhu) Snagit、OmniGraffle 自己也(ye)可以(yi)(yi)拼合出一些更符合自己要求(qiu)的(de)(de)场景图示结果。例如(ru)下面的(de)(de)这张 Ulysses 和(he) Daedalus 同步(bu)的(de)(de)截(jie)(jie)图，首先是(shi)在手(shou)机里截(jie)(jie)取的(de)(de) Daedalus 软件界(jie)面，然(ran)后(hou)传到 Mac 上用(yong) Promotee 导(dao)出成(cheng)有 iPhone 6外壳的(de)(de)图片，最后(hou)在 Snagit 中插入到另(ling)一张桌面软件截(jie)(jie)图中，调整了一下输出的(de)(de)图片高度，导(dao)出成(cheng)最终的(de)(de)样子。
扫一扫打开网站
扫一扫访问手机站
扫一扫打开网站
