微信和釘釘作為幾乎是最常用的溝通工具灰署，有一個(gè)功能是絕大多數(shù)用戶都會(huì)碰到的腺怯，那就是截圖工具泳赋。

在這個(gè)小工具上屿愚，一些設(shè)計(jì)的細(xì)節(jié)展示出了騰訊和阿里完全不同的對(duì)設(shè)計(jì)風(fēng)格汇跨。

我們按照用戶正常使用的流程開始一步步品這兩個(gè)工具的設(shè)計(jì)。

【1】開啟截圖功能

開啟后妆距，在圈定要截圖范圍前扰法，無論是騰訊或者阿里，遇到方形對(duì)話框毅厚，都會(huì)自動(dòng)邊沿識(shí)別塞颁。這個(gè)設(shè)計(jì)很棒，在很多場景能幫得上忙實(shí)現(xiàn)快速選取截圖范圍。

不過細(xì)節(jié)上祠锣，差別體現(xiàn)出來酷窥。下圖左邊是釘釘?shù)慕貓D，右邊是微信的截圖伴网。

截圖初始合并.jpg

先看截圖框蓬推。如果是用自動(dòng)定位截圖，釘釘是用粗框線條（藍(lán)色線）澡腾，而微信是用細(xì)線（綠色線）沸伏，并在中點(diǎn)和角有加粗點(diǎn)。倘若是用戶自己要選取圈定截圖范圍动分，釘釘就會(huì)變成和微信一樣的細(xì)線+中點(diǎn)和角有加粗點(diǎn)（如下圖）毅糟。細(xì)線+粗點(diǎn)的設(shè)計(jì)很精妙，可以讓用戶更容易看到自己截取到的邊框在哪里澜公，且中點(diǎn)和邊沿的粗點(diǎn)作為一個(gè)意符姆另，也可以用來引導(dǎo)用戶可以點(diǎn)這個(gè)位置對(duì)截屏框大小進(jìn)行調(diào)節(jié)。

釘釘?shù)慕貓D框線.jpg

截圖框設(shè)計(jì)中坟乾，我會(huì)更喜歡微信的設(shè)計(jì)一點(diǎn)迹辐。雖然釘釘區(qū)分出了自動(dòng)識(shí)別框圖和手動(dòng)識(shí)別，但這個(gè)區(qū)別甚侣，以我目前考慮不出實(shí)際作用明吩。

釘釘?shù)慕貓D前展示到此就結(jié)束了，但是微信還沒有殷费。微信的截圖框左上角贺喝，多了圖片尺寸，且在鼠標(biāo)指的位置宗兼，會(huì)出來放大圖躏鱼，下面顯示該點(diǎn)在整個(gè)屏幕的坐標(biāo)位置和RGB顏色，這種設(shè)計(jì)可以讓用戶實(shí)現(xiàn)精確截圖殷绍，對(duì)圖畫類設(shè)計(jì)的同學(xué)特別有用染苛。而且該設(shè)計(jì)精妙的是，而對(duì)于其他不用的用戶主到，這個(gè)功能也不會(huì)額外增加用戶的負(fù)擔(dān)茶行。

【2】確定截圖范圍后——工具欄排布

確定了截圖范圍后，往下是彈出工具欄登钥，往下可以對(duì)截圖進(jìn)行下一步動(dòng)作畔师。

在此之前，讓我們一起研究下釘釘和微信的設(shè)計(jì)牧牢。下圖依舊是釘釘左圖和微信右圖看锉。

工具欄排布.png

相同點(diǎn)是截圖后姿锭，工具欄都出現(xiàn)在截圖框下面。且截圖框上依舊有粗點(diǎn)伯铣，可以引導(dǎo)用戶進(jìn)行圖片的放大和縮小的工作呻此。

不同點(diǎn)主要在于工具欄內(nèi)部。對(duì)比可以發(fā)現(xiàn)腔寡，左邊釘釘?shù)墓ぞ哂?0個(gè)焚鲜，右邊微信工具有11個(gè)，多了一個(gè)表情工具放前，這個(gè)表情可以調(diào)用微信自己表情包忿磅。或許釘釘覺得工作截圖表情有失嚴(yán)肅凭语，實(shí)際使用場景中沒太多必要葱她。而微信場景中，更多嚴(yán)肅工作以外的溝通叽粹，截圖可以增加表情包，可以大大豐富截圖內(nèi)容或緩解特殊場景的尷尬（如一些不太合適出現(xiàn)的人臉却舀，可以用表情包代替）虫几，生動(dòng)性大增。

配色上挽拔，釘釘采用深色底白標(biāo)志辆脸，兩種顏色。微信不像釘釘用深色為主感覺那么沉重螃诅，采用白底黑標(biāo)志啡氢，四種顏色，在圖片最終操作的取消和確定上术裸，用了明顯的紅色和綠色倘是，從而讓用戶更加警覺這個(gè)操作而更大程度降低了誤判。此外袭艺，黑色還采用不同深度搀崭，來區(qū)分功能是否開啟，整體設(shè)計(jì)性更強(qiáng)猾编。

此外瘤睹，微信在截圖框中，依舊還保持著像素值答倡。這對(duì)于需要的人十分友好轰传，而對(duì)于不需要的，也無傷大雅瘪撇。

工具欄的排序設(shè)計(jì)上获茬，我感覺微信的設(shè)計(jì)細(xì)節(jié)會(huì)更好港庄。看上面右圖微信工具欄锦茁，它分成兩塊攘轩，左邊是針對(duì)圖片內(nèi)容的處理，可以增加內(nèi)容码俩；右邊是對(duì)截圖的處理度帮，可以轉(zhuǎn)發(fā)下載取消確認(rèn)；中間用淺色的分隔符割開稿存，暗示這個(gè)分隔符不能被點(diǎn)笨篷。此外，在針對(duì)圖片內(nèi)容修改的欄中瓣履，返回鍵也是淺色率翅，表示不能被操作，等到用戶開始對(duì)圖片內(nèi)容進(jìn)行加工動(dòng)作袖迎，返回鍵由淺變深冕臭，表示可以操作了。這個(gè)細(xì)節(jié)設(shè)計(jì)很精妙燕锥」脊螅看回上面左圖釘釘?shù)慕貓D工具欄，分隔符和返回鍵都是一個(gè)色調(diào)归形，這個(gè)顏色細(xì)節(jié)沒有微信工具那么細(xì)膩托慨，這個(gè)分隔符還容易引起用戶困惑——這個(gè)是什么功能？此外分隔設(shè)計(jì)的意義卻不太明確暇榴，這個(gè)是按照什么方式區(qū)分兩個(gè)區(qū)塊呢厚棵？

此外，如果截圖較大的時(shí)候蔼紧，如下圖左婆硬，釘釘?shù)墓ぞ邫跁?huì)跑到另外一個(gè)屏幕（我用的雙屏）。而下圖右奸例，微信的工具欄會(huì)緊跟在截圖上面柿祈。這個(gè)設(shè)計(jì)上，微信設(shè)計(jì)會(huì)更好哩至，這讓用戶能馬上找到工具欄躏嚎，不用去屏幕中尋覓。

截圖框過大時(shí).png

從工具欄設(shè)計(jì)上看菩貌，雖然有基本功能卢佣，但釘釘?shù)脑O(shè)計(jì)細(xì)節(jié)上，能感覺出沒有微信的設(shè)計(jì)那么細(xì)膩箭阶。

【3】工具欄的使用——二級(jí)窗口細(xì)節(jié)

點(diǎn)開工具欄虚茶，從二級(jí)窗口的細(xì)節(jié)戈鲁，可以體會(huì)到兩家基因的不同。下圖一樣是左邊是釘釘嘹叫，右邊是微信婆殿。

工具欄的二級(jí)窗口.png

對(duì)比兩個(gè)二級(jí)窗口可以直觀感覺到，釘釘是和原來工具欄形成一體化罩扇，然后把白色標(biāo)志變藍(lán)來表示二級(jí)窗口是歸屬于這個(gè)功能婆芦。對(duì)比右邊的微信，采用類似對(duì)話框的形式來表示二級(jí)窗口的歸屬喂饥，設(shè)計(jì)感更強(qiáng)一些消约，且二級(jí)窗口并不會(huì)和原來工具欄一樣，讓人有更明顯區(qū)分员帮。要說釘釘在這里比微信好的地方或粮，應(yīng)該就是釘釘?shù)膱D標(biāo)大一些，點(diǎn)錯(cuò)的概率更加低一點(diǎn)捞高，特別是用小屏幕電腦的時(shí)候氯材。

內(nèi)容選擇上，主要就分為三級(jí)尺寸和顏色兩個(gè)維度硝岗。釘釘會(huì)在兩個(gè)維度之間加一個(gè)分割線氢哮，而微信則沒有，因?yàn)閳A和方兩種不一樣的意符已經(jīng)可以區(qū)分兩種不一樣的功能辈讶。在顏色的選擇上命浴，釘釘是三原色+橙灰黑娄猫，同時(shí)最后加了調(diào)色板贱除；而微信是用了上面幾個(gè)顏色，但是微信使用的顏色并不會(huì)那么純媳溺，從而不會(huì)讓用戶感覺比較柔月幌。最大的區(qū)別，就是微信后面悬蔽，并沒有增加那塊調(diào)色板扯躺。

工具欄中，其他幾個(gè)內(nèi)容操作選項(xiàng)都和第一個(gè)差不多蝎困，不過值得一提的是文字選項(xiàng)录语。如下圖，左邊釘釘?shù)暮坛耍淖植粌H有字體澎埠，還有大小，加粗始藕，傾斜和下劃線蒲稳，顏色上直接讓你隨便選氮趋，而右邊的微信，依舊和其他的工具保持一樣的功能江耀。但我在實(shí)際使用過程中剩胁，釘釘這個(gè)文字體驗(yàn)感很不爽，最主要是這個(gè)自體大小祥国，對(duì)于用戶很多沒概念究竟是多大昵观，只能一個(gè)個(gè)去試，往往浪費(fèi)比較多時(shí)間系宫。而其他那些加粗索昂，斜體等等，現(xiàn)實(shí)中在截圖這個(gè)場景扩借，真的會(huì)有很多用到的么椒惨？

工具欄文字選項(xiàng)二級(jí)窗口.png

在這里，其實(shí)能比較深刻感受到釘釘和微信基因上的不同潮罪。釘釘?shù)脑O(shè)計(jì)風(fēng)格上康谆，是提供一個(gè)工具，這個(gè)工具什么功能都有嫉到，用戶你隨便選沃暗，隨便用。而微信作為騰訊系何恶，還是維持著一貫的用戶體驗(yàn)風(fēng)格孽锥，讓人視覺上感覺設(shè)計(jì)很舒適，同時(shí)也遵循著的less is more的設(shè)計(jì)原則细层，我只給你這么多選項(xiàng)惜辑，而我覺得，這些選項(xiàng)對(duì)你已經(jīng)足夠了疫赎。從用戶體驗(yàn)的角度講盛撑，直接給用戶提供少量選擇，甚至不選擇捧搞，直接告訴他用這個(gè)就行抵卫，對(duì)于用戶體驗(yàn)來講會(huì)更好。因?yàn)檫^多的選擇胎撇，反而會(huì)引起用戶的混亂介粘。

【4】截圖內(nèi)容修改

在修改內(nèi)容過程中，微信截圖有個(gè)最大的亮點(diǎn)晚树，就是如下圖姻采，每個(gè)添加的內(nèi)容的圖層是不一樣的，因此每個(gè)圖層都可以重復(fù)修改尺寸或者位置题涨。但是釘釘截圖是不可以的偎谁，和win的畫圖軟件一樣总滩，一旦畫完就定死了，萬一畫錯(cuò)巡雨，只能整個(gè)截圖重新來闰渔。

微信最大亮點(diǎn)，重復(fù)修改.jpg

同樣的铐望，微信在開啟內(nèi)容修改后冈涧，截圖的大小還能按住如下圖圈出來的粗點(diǎn)隨便修改，但是釘釘并不可以正蛙，萬一發(fā)現(xiàn)截圖位置不理想督弓，只能全部推翻重新來。此外還有個(gè)不好的設(shè)計(jì)點(diǎn)乒验，釘釘不可以就算了愚隧，還留下如右圖的粗點(diǎn)，這會(huì)誤導(dǎo)用戶以為內(nèi)容開始修改后還能修改截圖尺寸锻全。一旦發(fā)現(xiàn)其實(shí)是不可以狂塘，用戶會(huì)更加沮喪。這個(gè)我會(huì)建議鳄厌，如果釘釘實(shí)在做不到開啟內(nèi)容修改后還能改截圖尺寸荞胡，那倒不如直接把粗點(diǎn)意符去掉，直接以平滑直線代替了嚎。

修改內(nèi)容后的截圖尺寸修改.png

不過在內(nèi)容修改的設(shè)計(jì)中泪漂，釘釘有一個(gè)點(diǎn)在我使用過程中感覺比微信好，就是二級(jí)選項(xiàng)的跟隨歪泳。如下圖萝勤，當(dāng)我在截圖的方框選了一個(gè)顏色選項(xiàng)，等我要用箭頭或者文字時(shí)夹囚，會(huì)自動(dòng)選擇我剛選擇的選項(xiàng)纵刘。因?yàn)橛脩粜袨橹醒裕话銜?huì)用同樣色系來表示一件事情荸哟，那一個(gè)框，一個(gè)箭頭加一個(gè)文字說明瞬捕，如果能自動(dòng)同一個(gè)色系鞍历，就不用每次換內(nèi)容修改工具都重新去選擇了》净ⅲ或許微信不這么做劣砍，會(huì)出于一些其他考量，但是這點(diǎn)我在實(shí)際使用上扇救，釘釘?shù)捏w驗(yàn)感是明顯好于微信刑枝。

釘釘設(shè)計(jì)好處-選項(xiàng)自動(dòng)跟隨.png

小結(jié)

其他的功能香嗓，基本類同，也就不展開說了装畅。

從整體對(duì)比看靠娱，微信是圍繞戶體驗(yàn)為中心，而釘釘是為用戶提供工具為原則掠兄。但設(shè)計(jì)細(xì)節(jié)上像云，微信截圖的小工具遵循著的less is more的設(shè)計(jì)原則，整體風(fēng)格上也會(huì)比釘釘?shù)氖娣煜ΑＬ貏e是釘釘開啟修改后不能改截圖大小和完成的內(nèi)容修改不可以重新更改迅诬，這兩個(gè)痛點(diǎn)讓我摒棄了釘釘截圖，也是促使我這篇文章的原因婿牍。截圖工具本身是為了方便用戶使用的工具侈贷，但是如果是因?yàn)楸旧淼脑O(shè)計(jì)局限，造成用戶需要多次重新截圖和編輯等脂，那反而得不償失了铐维。

當(dāng)然在使用過程中，釘釘給我最大的亮點(diǎn)慎菲，就是選項(xiàng)跟隨嫁蛇。如果微信能做到這個(gè)，在使用體驗(yàn)上應(yīng)該更能錦上添花露该。但我不知道為何微信不這么做睬棚。如果有知道的朋友，也希望你能賜教予我解幼，謝謝抑党。