中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

微信和釘釘作為最常用的溝通工具，有一個(gè)功能是絕大多數(shù)用戶都會(huì)碰到的，那就是截圖工具。在這個(gè)小工具上，一些設(shè)計(jì)的細(xì)節(jié)展示出了騰訊和阿里完全不同的對(duì)設(shè)計(jì)風(fēng)格。本文作者從用戶使用的流程出發(fā)，對(duì)這兩個(gè)工具的設(shè)計(jì)展開了對(duì)比分析，一起來看看~

01 開啟截圖功能

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

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

fig.1 截圖初始合并

先看截圖框。如果是用自動(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é)。

fig.2 釘釘?shù)慕貓D框線

截圖框設(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)。

02 確定截圖范圍后——工具欄排布

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

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

fig.3 工具欄排布

相同點(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)用微信自己表情包?；蛟S釘釘覺得工作截圖表情有失嚴(yán)肅，實(shí)際使用場(chǎng)景中沒太多必要。而微信場(chǎng)景中，更多嚴(yán)肅工作以外的溝通，截圖可以增加表情包，可以大大豐富截圖內(nèi)容或緩解特殊場(chǎng)景的尷尬（如一些不太合適出現(xiàn)的人臉，可以用表情包代替），生動(dòng)性大增。

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

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

工具欄的排序設(shè)計(jì)上，我感覺微信的設(shè)計(jì)細(xì)節(jié)會(huì)更好?？瓷厦嬗覉D微信工具欄，它分成兩塊，左邊是針對(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ì)很精妙?？椿厣厦孀髨D釘釘?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ì)更好，這讓用戶能馬上找到工具欄，不用去屏幕中尋覓。

fig.4 截圖框過大時(shí)

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

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

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

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

對(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è)場(chǎng)景，真的會(huì)有很多用到的么？

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

在這里，其實(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ì)引起用戶的混亂。

04 截圖內(nèi)容修改

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

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

同樣的，微信在開啟內(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)意符去掉，直接以平滑直線代替。

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

在內(nèi)容修改的設(shè)計(jì)中，釘釘有一個(gè)點(diǎn)在我使用過程中感覺比微信好，就是二級(jí)選項(xiàng)的跟隨。

如下圖，當(dāng)我在截圖的方框選了一個(gè)顏色選項(xiàng)，往下要用箭頭或者文字時(shí)，會(huì)自動(dòng)選擇我前一步選擇的選項(xiàng)。因?yàn)橛脩粜袨橹?，一般?huì)用同樣色系來表示一件事，比如用同樣顏色的框+箭頭+文字說明。因此若能自動(dòng)跟隨上一個(gè)步驟的色系，就不用每次換內(nèi)容修改工具都重新去選擇了?；蛟S微信不這么做，會(huì)出于一些其他考量，但是這點(diǎn)在實(shí)際使用上，釘釘?shù)捏w驗(yàn)感是明顯好于微信。

fig.9 釘釘設(shè)計(jì)優(yōu)點(diǎn)-選項(xiàng)自動(dòng)跟隨

小結(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)該更能錦上添花。但我不知道為何微信不這么做，如果有知道的朋友，也希望你能賜教予我，謝謝。

本文由 @慕思錄 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。