前段时间我一直在做宝贝账本，这是随手记应用内部一个专门针对宝妈记录宝宝日常活动和开支的一个定制化的账本。
这段时间应用内部陆续拓展了不少账本类型和社区，也是希望从场景打入用户市场。
宝贝账本相对于其他账本来说，主打的功能有两个，一是文字+多图（基本上可以看成是朋友圈，之前应用只支持在记账的同时增加一张图片），二是多人记账（这个之前已有）
对外主推的也是宝妈可以通过多图的方式记录宝宝成长，而家人也可以通过加入账本的方式关注宝宝成长
这次设计的重点在多图展示上了
先上原型稿
宝贝账本首页原型图
在账本首页增加朋友圈的展示，和大部分有社交属性的社区形式是一致的，所以我就去研究了一下朋友圈的图片展示形式，后续在对接开发的时候也需要说明清楚这部分。下面分几部分来讲
1.单图、多图的展现形式的区别
2.图片的展示比例及如何截取
2.1单图下如何展示及截取，长图、全景图处理
2.2多图下如何展示及截取，4张图片如何处理
3.图片+文字的展示方式
1.单图、多图的展现形式的区别
研究之后发现，在图片展示上，其实最大的区别来自单图、多图
先说说单图的情况，因为只有单张图片，考虑到整体页面的布局及比重后，单图的展示比例其实是要比多图展示下单个图片的展示比例要大的
朋友圈中多图与单图情况
那用户上传的图片比例各式各样，怎么样进行统一呢？总结来说
单图，可分为3种
①正常比例图片（除下面这两种情况，剩下的都归到这里）
②长图（长宽比超过3:1）
③全景图（长宽比超过1:3）
多图，都以方形作为展示方式，可分成2种情况
①除了4张图（最多9张图）
②只有4张图
因为4张图片按默认的从左到右，从上到下的逻辑来排版页面比重，和视觉上会存在一些失衡问题，所以需要单独做处理
1.图片的展示比例及如何截取
首先先不急着考虑图片的问题，在设定图片展示区域之前还有更重要的信息需要处理，即一个社区页面通常会有的基础信息：
①头像
②文字部分
②个人昵称（有些还有勋章奖励等）
③发布的时间
④点赞、评论、转发、分享
⑤其他，比如话题、位置等
看了几个社区，大体结构差不多，但还是有些小差异的
不同平台对比
在考虑完页面的左右边距，头像时间是否要摆放一起，用户头像展示大小，点赞评论转发是要均分还是左右对齐等问题后，我们进入正题。
我们以单图和多图的各个情况，来说明一下图片是如何展示以及如何做截取的
朋友圈的图片展示区域是以个人昵称为准，减除去左右边距（红色部分），留出间隔后（蓝色部分），将剩余宽度进行均分成3份，因为最多需要放置9张图片
在随手记原有首页设计上，是通过各种卡片组装而成，这次的多图也是和原有的记一笔功能融到一块，所以我打算在原有流水列表上新增多图和说说的样式，相对于对原有的流水卡片做补充。我以分类为准，在减除去左右边距，留出间隔后，将剩余宽度进行均分成3份
从朋友圈——随手记首页卡片
为了方便说明，我先设定每个方形为宽高单位均为a，间距为b
设定单位
2.1单图下如何展示及截取，长图、全景图处理
①正常比例图片（即除去长图和全景图）
无需考虑图片截图情况，所有的图片都会被等比放置到容器中，整个容器所占的面积为（2a+b)²，当发布的图片为正方形时，就刚好填充满整个容器，当长>宽，或宽>长时就会被缩放到容器内（灰色部分为容器），取长边贴边展示。
正常比例图片展示效果
如果图片本身宽高<设置容器的大小，采用的是放大的方式，拿的是图片长的一边，在容器内做贴边展示
②长图（长宽比超过3:1）
容器所占的面积为0.75a * (2a+b), 同时要考虑图片截取的情况，这时图片取短边贴边展示，超过的部分做截取，点击大图时才展示完整的
长图展示效果
③全景图（长宽比超过1:3）
容器所占的面积为(3a+2b)* a，同样要考虑图片截取的情况，取短边贴边展示，超过的部分做截取，点击大图时才展示完整的
全景图展示效果
2.2多图下如何展示及截取，4张图片如何处理
①除了4张图（最多9张图）
上传的每一张图片都会被填充到单个 a²的小容器里，做图片截取时，同样取短边贴边展示，超过的部分做截取。排列时就按从左到右，从上到下的逻辑来排版
①4张图
4张图时，按原有逻辑进行排布，会出现画面失衡的情况，会看到页面中间空置了一块，这时需要做的是将最后一张图移至下一行，形成(2a+b)²的容器样式
4张图片展示效果
多图情况下，无需考虑长图和全景图情况
以上为纯图片下，各种情况下图片的展示规则。
下面我们来说说
3.图片+文字的展示方式
在社区，我们除了发布图片以外，通常还会附带上一些文字。
加上文字后，图片的展示规则并没有什么变化，除了考虑间距，页面布局以外，而为了控制每个状态的长度，避免刷屏情况，需要考虑文字展示的行数，字数。
下面我说说自己踩到的坑
问题1：文字左右边距怎么设置？
在文字排版过程中，我尝试了2种方式
方案1：对齐图片容器
方案2：取图标左边宽度，作为文字右边距
2种方案对比
第1种方式在尝试后，会存在有一个问题，就是宽度太窄，如果加上标点等，一行展示不了多少内容，再加上行数显示，内容就更少了，最后就砍了。选了第2种方式
问题2：要展示多少行？尾部怎么做处理？
这里可以分为两种
①设定容器宽高，文字在容器内展示
②设定字数
超过的部分都是通过更多或全文按钮点开后再展示
目前大部分的应用都采用第1种方式，主要是考虑到内容的呈现上会更统一，而第2种会出现长度不一的情况，但好像第2种对于研发的处理来说会更简单，这个就需要和产品综合考虑，当时我们开发时间比较短，先采用了第2种方式，然后在下一版本做了优化处理。
其他设计细节，比如涉及分享、转发、评论、话题等，在符合设计规范的情况下，大家就整体画面调整吧，每个应用都可以有自己的亮点。
这篇主要是针对图片展示的，现在很多社交平台也支持视频展示了，这部分下次再聊。
网友评论