原创 | IM聊天界面的设计规则

@胡桃子:对于刚刚涉及IM产品的我,一些设计规范、适配原则并不清楚,通过这几天的学习和体验同类竞品,收获颇多,小试牛刀,今天想和大家分享一下我在设计的聊天页面的时候,总结出的设计规则,话不多说,直接看图~

写在前面:

对于刚刚涉及IM产品的我,一些设计规范、适配原则并不清楚,通过这几天的学习和体验同类竞品,收获颇多,小试牛刀,今天想和大家分享一下我在设计的聊天页面的时候,总结出的设计规则,话不多说,直接看图~

几种常见的聊天内容类别

1. 文字气泡框(长文字、短文字) 的展示方式和适应规则

2. 图片(方图、长图片、宽图片) 的展示方式和适应规则

3. 时间显示(年月日>星期>昨天>上午>下午>现在时间) 的展示方式

4. 系统通知(开启置顶、开启消息免打扰、开启截屏) 的展示方式

5. 通话(会话结束、会话取消) 的展示方式

6. 视频(视屏取消、视屏结束) 的展示方式

7. 语音消息(已读、未读) 的展示方式,根据时间长短展示气泡的计算方式

……

(我们公司IM产品目前能用到的只有这几种,欢迎大家补充讨论~)

dmqzkvi2ehr.jpg插图

(点开可查看原图)

颜色、字体、距离、高度等没有标注,上传到某湖上,技术可以自行查看,这里标注的主要是设计规则和需要注意的某些点。

1.文字气泡框

根据类型可分为长文字和短文字。

0tl1qx3fcrj.jpg插图(1)

短文字:根据文字的多少全部显示,左右间距30px(间距可根据页面的设计风格设定)

长文字:因为气泡框的高宽度是随着屏幕的 宽度不断的变化,采用百分比可以很好的解决适配不同屏幕的问题。计算方式:气泡框的最大宽度=屏幕宽度*64%(大家可根据页面的设计风格将数值设置为8的倍数)。

2.图片适配

图片分为方图、长图片、宽图片,

适应规则:设置缩略图最大尺寸,以单边进行缩放是目前体验感最好的方案,可以满足不同比例图片的最大化显示

当图片为方图(1:1)时,图片最短边适配到缩略图中,将图片等比缩放即可。

hbjfgl2hi1d.png插图(2)

这里为了保证图片能在每个机型上完美适配,图片容器=页面尺寸(750px)*48%。(大家可根据页面的设计风格将数值设置为8的倍数)

v0thxq240y0.png插图(3)

当图片缩略图比例小于等于3:1时,(缩略图展示区域超过120*360或360*120),将图片等比缩放,最长边为缩略图的最大尺寸120px,如下图所示。

当图片缩略图比例大于3:1时(缩略图展示区域小于360*120或120*360),仍采用3:1缩略图的展示尺寸。

3. 时间显示

根据产品需要,日期展示方式为:年月日>星期>昨天>上午>下午>现在时间

d5xyqtx5m0o.png插图(4)

这里要注意技术开发的盒子概念,时间盒子宽度=时间字段的最大限度+两边的间距,上面的间距为20px是为了拉开每个时间段的距离,让时间段跟时间段之间有一定的空隙。

4. 系统通知

公司产品需要将“开启会话置顶、开启消息免打扰、开启截屏”展示在聊天窗口中,作提示性语言,没有交互点击等效果。

0mxu3ktmjqj.png插图(5)

在这里设计的空格,和前面不重要的文字拉开距离,可以让用户更加快速的了解到自己所开启的功能。

5. 通话、视频

公司的IM产品,通话和视频在聊天窗口中有3种状态:呼叫、结束、取消。

jqft2pieij3.png插图(6)

要注意的是视频、语音的图标朝向要进行区分,在细节上做的尽善尽美,往往都是这些细节会让自己的作品更加精致。

6. 语音消息

语音消息有已读、未读两种状态。

cjrwkakuzpq.png插图(7)

因为我们公司的产品面向的用户是青少年,不会出现时间过长的语音消息,在这里要根据全局的美观和时间的长短来设计,55秒也是根据全局的美观度和参数的不断调整得来的,不断试验,最后设计的结果是:在2倍图中,语音宽度=150px+秒数*6。

写在最后

对自己严格就是对产品严格,标注规范,才能让技术开发的时候实现高还原度,公司产品主要用户群体是学校的青少年,细节和风格上自己存在着很多没有考虑到的地方,欢迎大家批评指正~

原文地址:胡诌青年(公众号)作者:胡桃子a2e3n40lpiz.jpg插图(8)

人已赞赏
UI设计

Material Design Data Visualization 数据可视化

2020-10-12 0:04:49

UI设计

产品改进没方向?不妨从用户反馈找找灵感(二)

2020-10-9 16:26:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索