微信和钉钉作为最常用的相同东西，有一个成果是绝大大都用户城市遇到的，那就是截图东西。在这个小东西上，一些设计的细节展示出了腾讯和阿里完全差异的对设计气势气魄。本文作者从用户利用的流程出发，对这两个东西的设计展开了比拟阐明，一起来看看~

01 开启截图成果

开启后，在圈定要截图范畴前，无论是腾讯可能阿里，碰着方形对话框，城市自动边缘识别。这个设计很棒，在许多场景能帮得上忙实现快速选取截图范畴。

不外细节上，不同浮现出来。下图左边是钉钉的截图，右边是微信的截图。

fig.1 截图初始归并

先看截图框。假如是用自动定位截图，钉钉是用粗框线条（蓝色线），而微信是用细线（绿色线），并在中点和角有加粗点。

倘若是用户本身要选取圈定截图范畴，钉钉就会酿成和微信一样的细线+中点和角有加粗点（如下图）。细线+粗点的设计很精妙，可以让用户更容易看到本身截取到的边框在那边，且中点和边缘的粗点作为一个意符，也可以用来引导用户可以点这个位置对截屏框巨细举办调理。

fig.2 钉钉的截图框线

截图框设计中，我会更喜欢微信的设计一点。固然钉钉区分出了自动识别框图和手动识别，但这个区别，以我今朝思量不出实际浸染。

钉钉的截图前展示到此就竣事了，可是微信还没有。微信的截图框左上角，多了图片尺寸，且在鼠标指的位置，会出来放大图，下面显示该点在整个屏幕的坐标位置和RGB颜色，这种设计可以让用户实现准确截图，对图画类设计的同学出格有用。并且该设计精妙的是，而对付其他不消的用户，这个成果也不会特别增加用户的承担。

02 确定截图范畴后——东西栏排布

确定了截图范畴后，往下是弹出东西栏，往下可以对截图举办下一步行动。

在此之前，让我们一起研究下钉钉和微信的设计。下图依旧是钉钉左图和微信右图。

fig.3 东西栏排布

沟通点是截图后，东西栏都呈此刻截图框下面。且截图框上依旧有粗点，可以引导用户举办图片的放大和缩小的事情。

差异点主要在于东西栏内部。比拟可以发明，左边钉钉的东西有10个，右边微信东西有11个，多了一个心情东西，这个心情可以挪用微信本身心情包。或者钉钉以为事情截图心情有失严肃，实际利用场景中没太多须要。而微信场景中，更多严肃事情以外的相同，截图可以增加心情包，可以大大富厚截图内容或缓解非凡场景的难过（如一些不太符合呈现的人脸，可以用心情包取代），活跃性大增。

配色上，钉钉回收深色底白符号，两种颜色。微信不像钉钉用深色为主感受那么极重，回收白底黑符号，四种颜色，在图片最终操纵的打消和确定上，用了明明的赤色和绿色，从而让用户越发警醒这个操纵而更洪流平低落了误判。另外，玄色还回收差异深度，来区分成果是否开启，整体设计性更强。

另外，微信在截图框中，依旧还保持着像素值。这对付需要的人十分友好，而对付不需要的，也无感冒雅。

东西栏的排序设计上，我感受微信的设计细节会更好。看上面右图微信东西栏，它分成两块，左边是针对图片内容的处理惩罚，可以增加内容；右边是对截图的处理惩罚，可以转发下载打消确认；中间用浅色的脱离符割开，体现这个脱离符不能被点。另外，在针对图片内容修改的栏中，返回键也是浅色，暗示不能 *** 纵，比及用户开始对图片内容举办加工行动，返回键由浅变深，暗示可以操纵了。

这个细节设计很精妙。看回上面左图钉钉的截图东西栏，脱离符和返回键都是一个色调，这个颜色细节没有微信东西那么细腻，这个脱离符还容易引起用户狐疑——这个是什么成果？另外脱离设计的意义却不太明晰，这个是凭据什么 *** 区分两个区块呢？

另外，假如截图较大的时候，如下图左，钉钉的东西栏会跑到别的一个屏幕（我用的双屏）。而下图右，微信的东西栏会紧跟在截图上面。这个设计上，微信设计会更好，这让用户能顿时找到东西栏，不消去屏幕中寻觅。

fig.4 截图框过大时

从东西栏设计上看，固然有根基成果，但钉钉的设计细节上，能感受出没有微信的设计那么细腻。

03 东西栏的利用——二级窗口细节

点开东西栏，从二级窗口的细节，可以体会到两家基因的差异。下图一样是左边是钉钉，右边是微信。

fig.5 东西栏的二级窗口