首页
开发服务
APP开发
微信开发
网站开发
小程序开发
3D开发
蛋壳观点
解决方案
剧本杀门店系统
蛋壳案例
关于我们
关于产品设计中的字数限制--思考篇
2021/08/23

一、为什么要做字数限制?

其实我之前并不注重说,字数限制、或者图片视频这类型的大小限制。在做项目的时候,进度都是很赶的,会觉得忽略了这些细节。很多时候都是靠开发或者测试同事随意发挥,然后往往自己会在后面验收项目的时候,触目惊心……

是什么让我觉得字数限制如此重要呢,今年在做土地工重构的时候,其实有比较充分的时间去思考输入框的意义。密码输入框的限制是什么、金额输入框的限制是什么、商品标题的输入框限制是什么、太长太短又会有什么影响、是否允许输入特殊字符、特殊字符有哪些……简直就可以写一本十万个为什么来解答了。

所以我想通过这个机会,总结一下我们为什么要做字数限制。

1. 用户体验

1. 前后端交互:每个输入框,都有他的意义,而字数限制是体现他意义的其中一点。合理的限制,可以提升整个产品的体验,让产品看起来舒服易读;

2. 提交内容:在提交内容的时候,对于填写的内容有一个提前预判,从而再进行填写;

3. 业务需求:同样的一个内容发布,微博是2000个字、小红薯是1000个字、微信是2000个字符,为什么要有差异呢?比如微博重媒体属性、微信重好友社交属性、小红薯重分享属性。字数限制也是平台定位的体现。

2. 项目管理

清晰的字数限制说明,可以减少团队的沟通成本:

1. 在数据库设计的时候,后端技术同事会根据限制去设计字段;

2. 在页面搭建的时候,前端技术同事会根据限制去编写输入框;

3. 在接口编写的时候,后端技术同事会根据特殊的字数限制,在接口提交进行判断,防止一些攻击性操作;

4. 在测试的时候,测试同事会根据限制进行提测,确保输入框稳定可用。

二、限制的交互类型

常规的,有俩种字数限制,需要根据不同的业务需求进行取舍。

1. 输入框内容不可超过限制

美团外卖-个人中心-个人介绍的输入框限制,直接展示了限制字数,无法多输。如果是复制粘贴的,可能只能粘贴上半段、下半段无法正常显示。

 

图示一 美团外卖-个人介绍-字数限制

这是一种输入框形式,还有一种是在输入的过程中,同步统计当前已经输入的内容文案数量。如下图所示,这种可以在输入的过程中,用户预期知道剩余可输入字数。如下图淘宝后台-发布宝贝。

图示二 淘宝-发布宝贝-宝贝标题字数限制

图示三 淘宝-发布宝贝-宝贝标题字数限制提示

图示四 淘宝-发布宝贝-宝贝标题字数超出回显

在超出输入的时候,予以红色提示超出数量,并在鼠标定位离开输入框的时候,将超出内容删除不做显示。个人觉得,这种会更适合用于后台管理,有明确的限制超过不予输入。比较好去规范管理员们的工作,也在准备素材或者文案的时候,提前做好准备。

2. 输入框内容可超过限制,再提交进行限制

类似于小红书这种分享类型的社交平台,是针对超出部分通过标红数字进行交互提醒,并且在点击发布/提交的时候,对应弹出提示字数限制。用户进行删减时可实时感知到还需要删多少字能满足要求。

图示五 小红书-发布笔记-字数限制

3. 对比总结

我觉得两种形式都是可以的,但是在不同的场景还是会有更适用的交互。

· 如果是后台管理系统,或者是用户昵称/简介这一类型偏资料的内容、较为简短,建议是使用第一种。产品本身是不建议、不希望用户输入过多内容的。

· 如果是用户发布帖子、文章等,这一类型偏想法的内容、较为丰富有层次的内容,建议是使用第二种。合理引导用户进行删减冗余内容,或者发布多篇内容。

三、常规字数限制

收货人:不能超过25个汉字,不能包含特殊字符。来源淘宝-添加收货地址。

详细地址:长度需在2-120个字符之间,不能包含特殊字符。来源淘宝-添加收货地址。

四、番外-图片限制

针对于图片限制,有以下几个纬度:

1. 图片限制张数,是否必填;

2. 图片格式限制,常规允许上传png、jpg。特殊可以允许上传gif、jpeg。

a. png:可以支持透明底图片,是无损压缩格式;

b. jpg:不支持透明底图片,是有损压缩格式(失真压缩);

c. jpeg:不支持透明底图片,是有损压缩格式(破坏性资料压缩)。

d. gif:可以支持上传动图、透明底。

3. 图片文件大小限制:

a. 一般会有区分像素限制、文件大小限制;

b. 上传图片限制一般为3-5M,超过予以压缩后存储。

4. 图片尺寸限制:

a. 参照前端展示比例,可以说明建议尺寸,或者是建议比例;

b. 这里需要考虑的是图片的使用场景,如图片在不同的使用页面、尺寸比例不同,则需要对应提示,建议运营在上传图片的时候,四周留有一定的安全空间;

5. 图片裁剪:

a. 等压缩占满高度/宽度,水平居中显示。

6. 图片懒加载:

a. 默认是加载两张图片,一张缩略图,一张原图(前提是在上传图片的时候,前端要进行压缩后上传);

b. 优先展示缩略图,前端通过JS去监听原图的加载。当原图加载成功后,将缩略图隐藏起来;

c. 这种可以优化用户体验,减少由于图片过大的等待时长。

 

五、番外-视频限制

针对视频的限制,有以下的几个纬度:

1. 视频的数量限制,是否必填;

2. 视频的格式限制,常规的允许上传:

a. 微软视频:WMV、AVI、ASF;

b. Real Player:RM、RMVB;

c. MPEG视频:MPEG;

d. 手机视频: 3GP;

e. Apple视频:MOV;

f. Sony视频:MP4;

g. 其他常见视频:FLV。

3. 视频大小限制:

a. 限制视频一般为30-50M。

4. 视频展示:

a. 封面图,前端获取视频第一帧作为封面。

六、番外-文件限制

针对附件的限制,有以下的几个纬度:

1. 附件的数量限制,是否必填;

2. 附件格式的限制,除非特殊场景限制,都是没有格式限制;

3. 附件大小限制,除非特殊场景限制,都是没有大小限制。

 

 

END