钉钉电脑截图键
发布网友
发布时间：2022-03-24 19:44
共1个回答
热心网友
时间：2022-03-24 21:13
微信和钉钉作为最常用的沟通工具，有一个功能是绝大多数用户都会碰到的，那就是截图工具。在这个小工具上，一些设计的细节展示出了腾讯和阿里完全不同的对设计风格。本文作者从用户使用的流程出发，对这两个工具的设计展开了对比分析，一起来看看~
01 开启截图功能
开启后，在圈定要截图范围前，无论是腾讯或者阿里，遇到方形对话框，都会自动边沿识别。这个设计很棒，在很多场景能帮得上忙实现快速选取截图范围。
不过细节上，差别体现出来。下图左边是钉钉的截图，右边是微信的截图。
fig.1 截图初始合并
先看截图框。如果是用自动定位截图，钉钉是用粗框线条（蓝色线），而微信是用细线（绿色线），并在中点和角有加粗点。
倘若是用户自己要选取圈定截图范围，钉钉就会变成和微信一样的细线+中点和角有加粗点（如下图）。细线+粗点的设计很精妙，可以让用户更容易看到自己截取到的边框在哪里，且中点和边沿的粗点作为一个意符，也可以用来引导用户可以点这个位置对截屏框大小进行调节。
fig.2 钉钉的截图框线
截图框设计中，我会更喜欢微信的设计一点。虽然钉钉区分出了自动识别框图和手动识别，但这个区别，以我目前考虑不出实际作用。
钉钉的截图前展示到此就结束了，但是微信还没有。微信的截图框左上角，多了图片尺寸，且在鼠标指的位置，会出来放大图，下面显示该点在整个屏幕的坐标位置和RGB颜色，这种设计可以让用户实现精确截图，对图画类设计的同学特别有用。而且该设计精妙的是，而对于其他不用的用户，这个功能也不会额外增加用户的负担。
02 确定截图范围后——工具栏排布
确定了截图范围后，往下是弹出工具栏，往下可以对截图进行下一步动作。
在此之前，让我们一起研究下钉钉和微信的设计。下图依旧是钉钉左图和微信右图。
fig.3 工具栏排布
相同点是截图后，工具栏都出现在截图框下面。且截图框上依旧有粗点，可以引导用户进行图片的放大和缩小的工作。
不同点主要在于工具栏内部。对比可以发现，左边钉钉的工具有10个，右边微信工具有11个，多了一个表情工具，这个表情可以调用微信自己表情包。或许钉钉觉得工作截图表情有失严肃，实际使用场景中没太多必要。而微信场景中，更多严肃工作以外的沟通，截图可以增加表情包，可以大大丰富截图内容或缓解特殊场景的尴尬（如一些不太合适出现的人脸，可以用表情包代替），生动性大增。
配色上，钉钉采用深色底白标志，两种颜色。微信不像钉钉用深色为主感觉那么沉重，采用白底黑标志，四种颜色，在图片最终操作的取消和确定上，用了明显的红色和绿色，从而让用户更加警觉这个操作而更大程度降低了误判。此外，黑色还采用不同深度，来区分功能是否开启，整体设计性更强。
此外，微信在截图框中，依旧还保持着像素值。这对于需要的人十分友好，而对于不需要的，也无伤大雅。
工具栏的排序设计上，我感觉微信的设计细节会更好。看上面右图微信工具栏，它分成两块，左边是针对图片内容的处理，可以增加内容；右边是对截图的处理，可以转发下载取消确认；中间用浅色的分隔符割开，暗示这个分隔符不能被点。此外，在针对图片内容修改的栏中，返回键也是浅色，表示不能被操作，等到用户开始对图片内容进行加工动作，返回键由浅变深，表示可以操作了。
这个细节设计很精妙。看回上面左图钉钉的截图工具栏，分隔符和返回键都是一个色调，这个颜色细节没有微信工具那么细腻，这个分隔符还容易引起用户困惑——这个是什么功能？此外分隔设计的意义却不太明确，这个是按照什么方式区分两个区块呢？
此外，如果截图较大的时候，如下图左，钉钉的工具栏会跑到另外一个屏幕（我用的双屏）。而下图右，微信的工具栏会紧跟在截图上面。这个设计上，微信设计会更好，这让用户能马上找到工具栏，不用去屏幕中寻觅。
fig.4 截图框过大时
从工具栏设计上看，虽然有基本功能，但钉钉的设计细节上，能感觉出没有微信的设计那么细腻。
03 工具栏的使用——二级窗口细节
点开工具栏，从二级窗口的细节，可以体会到两家基因的不同。下图一样是左边是钉钉，右边是微信。
fig.5 工具栏的二级窗口
对比两个二级窗口可以直观感觉到，钉钉是和原来工具栏形成一体化，然后把白色标志变蓝来表示二级窗口是归属于这个功能。对比右边的微信，采用类似对话框的形式来表示二级窗口的归属，设计感更强一些，且二级窗口并不会和原来工具栏一样，让人有更明显区分。要说钉钉在这里比微信好的地方，应该就是钉钉的图标大一些，点错的概率更加低一点，特别是用小屏幕电脑的时候。
内容选择上，主要就分为*尺寸和颜色两个维度。钉钉会在两个维度之间加一个分割线，而微信则没有，因为圆和方两种不一样的意符已经可以区分两种不一样的功能。在颜色的选择上，钉钉是三原色+橙灰黑，同时最后加了调色板；而微信是用了上面几个颜色，但是微信使用的颜色并不会那么纯，从而不会让用户感觉比较柔。最大的区别，就是微信后面，并没有增加那块调色板。
工具栏中，其他几个内容操作选项都和第一个差不多，不过值得一提的是文字选项。如下图，左边钉钉的，文字不仅有字体，还有大小，加粗，倾斜和下划线，颜色上直接让你随便选，而右边的微信，依旧和其他的工具保持一样的功能。但我在实际使用过程中，钉钉这个文字体验感很不爽，最主要是这个自体大小，对于用户很多没概念究竟是多大，只能一个个去试，往往浪费比较多时间。而其他那些加粗，斜体等等，现实中在截图这个场景，真的会有很多用到的么？
