江苏龙网

  1. 首页 > 资讯 > 科技 > >

|微信和钉钉截图工具比较分析


微信和钉钉作为最常用的沟通工具 ， 有一个功能是绝大多数用户都会碰到的 ， 那就是截图工具 。 在这个小工具上 ， 一些设计的细节展示出了腾讯和阿里完全不同的对设计风格 。 本文作者从用户使用的流程出发 ， 对这两个工具的设计展开了对比分析 ， 一起来看看~
|微信和钉钉截图工具比较分析
本文插图

01 开启截图功能
开启后 ， 在圈定要截图范围前 ， 无论是腾讯或者阿里 ， 遇到方形对话框 ， 都会自动边沿识别 。 这个设计很棒 ， 在很多场景能帮得上忙实现快速选取截图范围 。
不过细节上 ， 差别体现出来 。 下图左边是钉钉的截图 ， 右边是微信的截图 。
|微信和钉钉截图工具比较分析
本文插图

fig.1 截图初始合并
先看截图框 。 如果是用自动定位截图 ， 钉钉是用粗框线条（蓝色线） ， 而微信是用细线（绿色线） ， 并在中点和角有加粗点 。
【|微信和钉钉截图工具比较分析】倘若是用户自己要选取圈定截图范围 ， 钉钉就会变成和微信一样的细线+中点和角有加粗点（如下图） 。 细线+粗点的设计很精妙 ， 可以让用户更容易看到自己截取到的边框在哪里 ， 且中点和边沿的粗点作为一个意符 ， 也可以用来引导用户可以点这个位置对截屏框大小进行调节 。
|微信和钉钉截图工具比较分析
本文插图

fig.2 钉钉的截图框线
截图框设计中 ， 我会更喜欢微信的设计一点 。 虽然钉钉区分出了自动识别框图和手动识别 ， 但这个区别 ， 以我目前考虑不出实际作用 。
钉钉的截图前展示到此就结束了 ， 但是微信还没有 。 微信的截图框左上角 ， 多了图片尺寸 ， 且在鼠标指的位置 ， 会出来放大图 ， 下面显示该点在整个屏幕的坐标位置和RGB颜色 ， 这种设计可以让用户实现精确截图 ， 对图画类设计的同学特别有用 。 而且该设计精妙的是 ， 而对于其他不用的用户 ， 这个功能也不会额外增加用户的负担 。
02 确定截图范围后——工具栏排布
确定了截图范围后 ， 往下是弹出工具栏 ， 往下可以对截图进行下一步动作 。
在此之前 ， 让我们一起研究下钉钉和微信的设计 。 下图依旧是钉钉左图和微信右图 。
|微信和钉钉截图工具比较分析
本文插图

fig.3 工具栏排布
相同点是截图后 ， 工具栏都出现在截图框下面 。 且截图框上依旧有粗点 ， 可以引导用户进行图片的放大和缩小的工作 。
不同点主要在于工具栏内部 。 对比可以发现 ， 左边钉钉的工具有10个 ， 右边微信工具有11个 ， 多了一个表情工具 ， 这个表情可以调用微信自己表情包 。 或许钉钉觉得工作截图表情有失严肃 ， 实际使用场景中没太多必要 。 而微信场景中 ， 更多严肃工作以外的沟通 ， 截图可以增加表情包 ， 可以大大丰富截图内容或缓解特殊场景的尴尬（如一些不太合适出现的人脸 ， 可以用表情包代替） ， 生动性大增 。
配色上 ， 钉钉采用深色底白标志 ， 两种颜色 。 微信不像钉钉用深色为主感觉那么沉重 ， 采用白底黑标志 ， 四种颜色 ， 在图片最终操作的取消和确定上 ， 用了明显的红色和绿色 ， 从而让用户更加警觉这个操作而更大程度降低了误判 。 此外 ， 黑色还采用不同深度 ， 来区分功能是否开启 ， 整体设计性更强 。
此外 ， 微信在截图框中 ， 依旧还保持着像素值 。 这对于需要的人十分友好 ， 而对于不需要的 ， 也无伤大雅 。
工具栏的排序设计上 ， 我感觉微信的设计细节会更好 。 看上面右图微信工具栏 ， 它分成两块 ， 左边是针对图片内容的处理 ， 可以增加内容；右边是对截图的处理 ， 可以转发下载取消确认；中间用浅色的分隔符割开 ， 暗示这个分隔符不能被点 。 此外 ， 在针对图片内容修改的栏中 ， 返回键也是浅色 ， 表示不能被操作 ， 等到用户开始对图片内容进行加工动作 ， 返回键由浅变深 ， 表示可以操作了 。


推荐阅读


上一篇：|华硕上架 Redolbook 14 锐龙版笔记本：R5 4500U，3299 元

下一篇：互联网乱侃秀|换上高通基带，还降价，4G版iPhone12应该比5G版更抢手