產(chǎn)品需求，需要一個(gè)私信發(fā)圖功能，快速實(shí)現(xiàn)，簡(jiǎn)單高效，起初經(jīng)驗(yàn)匱乏，簡(jiǎn)單的以為只要將整個(gè)發(fā)圖流程控制周密便不會(huì)有什么問(wèn)題。產(chǎn)品出來(lái)之后卻發(fā)現(xiàn)，并沒(méi)有那么簡(jiǎn)單。往往使用高效簡(jiǎn)單的東西，對(duì)于設(shè)計(jì)和開(kāi)發(fā)可能確相當(dāng)復(fù)雜，這或許就是精簡(jiǎn)設(shè)計(jì)和簡(jiǎn)單設(shè)計(jì)的區(qū)別所在，簡(jiǎn)單的是用戶(hù)實(shí)用體驗(yàn)而不是設(shè)計(jì)者的設(shè)計(jì)過(guò)程。
設(shè)計(jì)初期，只考慮到設(shè)計(jì)交互流程，沒(méi)有想到各類(lèi)邊界問(wèn)題所產(chǎn)生的異常效果或是不好的體驗(yàn)是經(jīng)常出現(xiàn)的問(wèn)題。簡(jiǎn)單的私信發(fā)圖功能，從使用體驗(yàn)上沒(méi)能夠想到圖片過(guò)大，圖片過(guò)小，長(zhǎng)寬比例過(guò)于大（細(xì)長(zhǎng)圖）等情況，從視覺(jué)效果上，又可能會(huì)出現(xiàn)各個(gè)圖片大小不一而造成頁(yè)面混亂的情況。種種流程之外的邊界情況都可能是造成用戶(hù)體驗(yàn)下降的罪魁禍?zhǔn)住?/p>
意識(shí)到問(wèn)題之后，便開(kāi)始深挖發(fā)圖中所要考慮的流程外可能遇到的邊界性設(shè)計(jì)問(wèn)題，首先對(duì)微信發(fā)圖進(jìn)行了研究：
微信首先對(duì)聊天區(qū)域圖片聊天框設(shè)置了兩個(gè)尺寸閾，分別是寬度為x和y的兩個(gè)正方形基準(zhǔn)。
圖片發(fā)出后假設(shè)該圖片尺寸為a*b 的矩形，有以下幾種情況：
1.a>b并且a:b<3:1，則發(fā)出的圖片按照長(zhǎng)邊平鋪（縮放或拉伸），顯示尺寸為：Y*b的矩形
2.a>b并且a:b>3:1，則發(fā)出的圖片按照短邊拉伸（短邊長(zhǎng)度小與x）或縮放（短邊長(zhǎng)度大于x），顯示尺寸為：Y*X的矩形；長(zhǎng)邊居中截取部分顯示
3.b>a并且b:a<3:1，則發(fā)出的圖片按照長(zhǎng)邊平鋪（縮放或拉伸），顯示尺寸為：a*Y的矩形
4.b>a并且b:a>3:1，則發(fā)出的圖片按照短邊拉伸（短邊長(zhǎng)度小與x或縮放（短邊長(zhǎng)度大于x），顯示尺寸為：X*Y的矩形；長(zhǎng)邊居中截取部分顯示
（約3:1的比例，仔細(xì)測(cè)量后大概是2.6:1的尺寸，并且圖片尺寸不同比例細(xì)微不同，不太了解后臺(tái)算法的邏輯）
不僅如此，當(dāng)圖片長(zhǎng)度和寬度超出一定的長(zhǎng)度之后，便不采取平鋪的預(yù)覽方式，而是截取圖片中間的部分供預(yù)覽顯示
以上對(duì)于圖片尺寸的邊界及尺寸比例調(diào)整可以保證小圖通過(guò)拉伸大圖通過(guò)縮放不讓界面顯得亂而無(wú)章以及避免圖片過(guò)小不易點(diǎn)擊，圖片過(guò)大容易誤觸的問(wèn)題。通過(guò)對(duì)顯示圖片尺寸的統(tǒng)一，保證了使用的視覺(jué)及交互體驗(yàn)。
