前段時(shí)間我一直在做寶貝賬本袁滥，這是隨手記應(yīng)用內(nèi)部一個(gè)專門針對(duì)寶媽記錄寶寶日巢蘧牛活動(dòng)和開支的一個(gè)定制化的賬本颈娜。
這段時(shí)間應(yīng)用內(nèi)部陸續(xù)拓展了不少賬本類型和社區(qū)自晰，也是希望從場(chǎng)景打入用戶市場(chǎng)凝化。
寶貝賬本相對(duì)于其他賬本來(lái)說(shuō)，主打的功能有兩個(gè)酬荞，一是文字+多圖（基本上可以看成是朋友圈缘圈，之前應(yīng)用只支持在記賬的同時(shí)增加一張圖片）劣光，二是多人記賬（這個(gè)之前已有）
對(duì)外主推的也是寶媽可以通過(guò)多圖的方式記錄寶寶成長(zhǎng)，而家人也可以通過(guò)加入賬本的方式關(guān)注寶寶成長(zhǎng)
這次設(shè)計(jì)的重點(diǎn)在多圖展示上了
先上原型稿
在賬本首頁(yè)增加朋友圈的展示糟把，和大部分有社交屬性的社區(qū)形式是一致的绢涡，所以我就去研究了一下朋友圈的圖片展示形式，后續(xù)在對(duì)接開發(fā)的時(shí)候也需要說(shuō)明清楚這部分遣疯。下面分幾部分來(lái)講
1.單圖雄可、多圖的展現(xiàn)形式的區(qū)別
2.圖片的展示比例及如何截取
2.1單圖下如何展示及截取，長(zhǎng)圖缠犀、全景圖處理
2.2多圖下如何展示及截取数苫，4張圖片如何處理
3.圖片+文字的展示方式
1.單圖、多圖的展現(xiàn)形式的區(qū)別
研究之后發(fā)現(xiàn)辨液，在圖片展示上虐急，其實(shí)最大的區(qū)別來(lái)自單圖、多圖
先說(shuō)說(shuō)單圖的情況滔迈，因?yàn)橹挥袉螐垐D片止吁，考慮到整體頁(yè)面的布局及比重后，單圖的展示比例其實(shí)是要比多圖展示下單個(gè)圖片的展示比例要大的
那用戶上傳的圖片比例各式各樣燎悍，怎么樣進(jìn)行統(tǒng)一呢敬惦？總結(jié)來(lái)說(shuō)
單圖，可分為3種
①正常比例圖片（除下面這兩種情況谈山，剩下的都?xì)w到這里）
②長(zhǎng)圖（長(zhǎng)寬比超過(guò)3:1）
③全景圖（長(zhǎng)寬比超過(guò)1:3）
多圖俄删，都以方形作為展示方式，可分成2種情況
①除了4張圖（最多9張圖）
②只有4張圖
因?yàn)?張圖片按默認(rèn)的從左到右奏路，從上到下的邏輯來(lái)排版頁(yè)面比重畴椰，和視覺(jué)上會(huì)存在一些失衡問(wèn)題，所以需要單獨(dú)做處理
1.圖片的展示比例及如何截取
首先先不急著考慮圖片的問(wèn)題鸽粉，在設(shè)定圖片展示區(qū)域之前還有更重要的信息需要處理斜脂，即一個(gè)社區(qū)頁(yè)面通常會(huì)有的基礎(chǔ)信息：
①頭像
②文字部分
②個(gè)人昵稱（有些還有勛章獎(jiǎng)勵(lì)等）
③發(fā)布的時(shí)間
④點(diǎn)贊、評(píng)論潜叛、轉(zhuǎn)發(fā)、分享
⑤其他壶硅，比如話題威兜、位置等
看了幾個(gè)社區(qū)，大體結(jié)構(gòu)差不多庐椒，但還是有些小差異的
在考慮完頁(yè)面的左右邊距椒舵，頭像時(shí)間是否要擺放一起，用戶頭像展示大小约谈，點(diǎn)贊評(píng)論轉(zhuǎn)發(fā)是要均分還是左右對(duì)齊等問(wèn)題后笔宿，我們進(jìn)入正題犁钟。
我們以單圖和多圖的各個(gè)情況，來(lái)說(shuō)明一下圖片是如何展示以及如何做截取的
朋友圈的圖片展示區(qū)域是以個(gè)人昵稱為準(zhǔn)泼橘，減除去左右邊距（紅色部分）涝动，留出間隔后（藍(lán)色部分），將剩余寬度進(jìn)行均分成3份炬灭，因?yàn)樽疃嘈枰胖?張圖片
在隨手記原有首頁(yè)設(shè)計(jì)上醋粟，是通過(guò)各種卡片組裝而成，這次的多圖也是和原有的記一筆功能融到一塊重归，所以我打算在原有流水列表上新增多圖和說(shuō)說(shuō)的樣式米愿，相對(duì)于對(duì)原有的流水卡片做補(bǔ)充。我以分類為準(zhǔn)鼻吮，在減除去左右邊距育苟，留出間隔后，將剩余寬度進(jìn)行均分成3份
為了方便說(shuō)明椎木，我先設(shè)定每個(gè)方形為寬高單位均為a违柏，間距為b
2.1單圖下如何展示及截取，長(zhǎng)圖拓哺、全景圖處理
①正常比例圖片（即除去長(zhǎng)圖和全景圖）
無(wú)需考慮圖片截圖情況勇垛，所有的圖片都會(huì)被等比放置到容器中，整個(gè)容器所占的面積為（2a+b)2士鸥，當(dāng)發(fā)布的圖片為正方形時(shí)闲孤，就剛好填充滿整個(gè)容器，當(dāng)長(zhǎng)>寬烤礁，或?qū)?gt;長(zhǎng)時(shí)就會(huì)被縮放到容器內(nèi)（灰色部分為容器）讼积，取長(zhǎng)邊貼邊展示。
如果圖片本身寬高<設(shè)置容器的大小脚仔，采用的是放大的方式勤众，拿的是圖片長(zhǎng)的一邊，在容器內(nèi)做貼邊展示
②長(zhǎng)圖（長(zhǎng)寬比超過(guò)3:1）
容器所占的面積為0.75a * (2a+b), 同時(shí)要考慮圖片截取的情況鲤脏，這時(shí)圖片取短邊貼邊展示们颜，超過(guò)的部分做截取，點(diǎn)擊大圖時(shí)才展示完整的
③全景圖（長(zhǎng)寬比超過(guò)1:3）
容器所占的面積為(3a+2b)* a猎醇，同樣要考慮圖片截取的情況窥突，取短邊貼邊展示，超過(guò)的部分做截取硫嘶，點(diǎn)擊大圖時(shí)才展示完整的
2.2多圖下如何展示及截取阻问，4張圖片如何處理
①除了4張圖（最多9張圖）
上傳的每一張圖片都會(huì)被填充到單個(gè) a2的小容器里，做圖片截取時(shí)沦疾，同樣取短邊貼邊展示称近，超過(guò)的部分做截取第队。排列時(shí)就按從左到右耳舅，從上到下的邏輯來(lái)排版
①4張圖
4張圖時(shí)抢韭，按原有邏輯進(jìn)行排布，會(huì)出現(xiàn)畫面失衡的情況犁功，會(huì)看到頁(yè)面中間空置了一塊坛善，這時(shí)需要做的是將最后一張圖移至下一行晾蜘，形成(2a+b)2的容器樣式
多圖情況下，無(wú)需考慮長(zhǎng)圖和全景圖情況
以上為純圖片下眠屎，各種情況下圖片的展示規(guī)則剔交。
下面我們來(lái)說(shuō)說(shuō)
3.圖片+文字的展示方式
在社區(qū)，我們除了發(fā)布圖片以外改衩，通常還會(huì)附帶上一些文字岖常。
加上文字后，圖片的展示規(guī)則并沒(méi)有什么變化葫督，除了考慮間距竭鞍，頁(yè)面布局以外，而為了控制每個(gè)狀態(tài)的長(zhǎng)度橄镜，避免刷屏情況偎快，需要考慮文字展示的行數(shù)，字?jǐn)?shù)洽胶。
下面我說(shuō)說(shuō)自己踩到的坑
問(wèn)題1：文字左右邊距怎么設(shè)置晒夹？
在文字排版過(guò)程中，我嘗試了2種方式
方案1：對(duì)齊圖片容器
方案2：取圖標(biāo)左邊寬度姊氓，作為文字右邊距
第1種方式在嘗試后丐怯，會(huì)存在有一個(gè)問(wèn)題，就是寬度太窄翔横，如果加上標(biāo)點(diǎn)等读跷，一行展示不了多少內(nèi)容，再加上行數(shù)顯示禾唁，內(nèi)容就更少了效览，最后就砍了。選了第2種方式
問(wèn)題2：要展示多少行荡短？尾部怎么做處理丐枉？
這里可以分為兩種
①設(shè)定容器寬高，文字在容器內(nèi)展示
②設(shè)定字?jǐn)?shù)
超過(guò)的部分都是通過(guò)更多或全文按鈕點(diǎn)開后再展示
目前大部分的應(yīng)用都采用第1種方式肢预，主要是考慮到內(nèi)容的呈現(xiàn)上會(huì)更統(tǒng)一矛洞，而第2種會(huì)出現(xiàn)長(zhǎng)度不一的情況洼哎，但好像第2種對(duì)于研發(fā)的處理來(lái)說(shuō)會(huì)更簡(jiǎn)單烫映，這個(gè)就需要和產(chǎn)品綜合考慮沼本，當(dāng)時(shí)我們開發(fā)時(shí)間比較短，先采用了第2種方式锭沟，然后在下一版本做了優(yōu)化處理抽兆。
其他設(shè)計(jì)細(xì)節(jié)，比如涉及分享族淮、轉(zhuǎn)發(fā)辫红、評(píng)論、話題等祝辣，在符合設(shè)計(jì)規(guī)范的情況下贴妻，大家就整體畫面調(diào)整吧，每個(gè)應(yīng)用都可以有自己的亮點(diǎn)蝙斜。
這篇主要是針對(duì)圖片展示的名惩，現(xiàn)在很多社交平臺(tái)也支持視頻展示了，這部分下次再聊孕荠。
