赞助商
立即赞助

微信发布新版,有3个设计细节值得关注!

交互设计3年前 (2021)发布 流光
2.1K 0 0

前些天微信更新 iOS 的新版,有几项比明显的设计细节了修改。今天就家一起聊聊具体修改的功能我对这些修改的思考。

表情选择栏

微信发布新版,有3个设计细节值得关注!

在新版本中,表情包选择栏占据的空间更大了,本隐藏在左侧的最近使用表情被突出显示,放了表情选择顶部。本左右滑动切换表情的方式被改成了上下滑动,左右滑动变成了切换表情包标签的操作。表情包标签则被放了最上方。选择表情后用户可以直使用右下方的悬浮按钮,进行发送表情或删除表情个操作。按钮位置和大相对之前的版本,体验都变好了多,想删除表情也不再需要返回文字输入界面才能删除了。

那么出这些修改的原因什么呢?我的猜测如下。

1. 什么表选择栏占据的空间变了?

首先全面屏手机的占率过去一段时间内幅提升,用户的手机屏幕度增加了不少。不影响聊天信息占据空间小的提下,输入区域能够使用的空间增加了,加之微信内部绝多数的切换信息操作都下滑动的方式,例如查看聊天信息刷朋友圈这两使用次数多的操作。了保证操作的一致性,于表选择区也变了下切换的方式。

2. 什么修改了切换表的手势操作方向?

第二点还与硬件关,手机触屏灵敏度越越高用户对手势操作的接受程度提升之后,原本点击的方式就了被替换手势操作的基础。朋友会:手势操作还需滑动,哪原本的一次点击方便呢?其实这里手势操作的优势「不必寻找区」,即用户并不需先去看一下我点击切换的按钮哪,然后再去点击,只需手指当所的置直接滑动就可以了,所以实际使用加便捷的。

3. 表包选择标签什么到了顶部?

人们的阅读习惯从到下、从左到右。先选择的分类(用哪表包),再选择具体的对象(发哪表)人类自然的视线顺序。并且设置表包顺序的按钮也这版本中得到了非常的突出显示,直接被显示到了表标签栏的第一。

4. 其他

至于近使用的表被突出显示这一点,应该微信内部根据用户使用数据出的修改。例如产品方之的版本中发隐藏左侧的近使用表这一功能的使用率达到了某一标准线,就会决本次新中出这样的修改。

增加直接删除表情的按钮则是一个比简单的场化设计方法。

选择图片页面和编辑图片页面

微信发布新版,有3个设计细节值得关注!

选择图片的页面增加了一些动画效果,一从到下依次加载的样式,形式加自然流畅,也符合人的感官习惯。但微信这里并出多的优化,我们之曾分享过两比较好的传图片的设案例,分别 ZAO 绿洲中的设,这里再简单家分享一下。

1. ZAO

微信发布新版,有3个设计细节值得关注!

可以,在 ZAO 中,当选择从相册上传素材进行替换,系统已经动对相册内的图片进行了判断,在用户上传照片之前就对照片清晰度是否适进行了提示,而不是上传后再给一个弹框。

这细节的优势:

  • 提高操作效率;
  • 避免传后的提示,打断用户自然的操作流程;
  • 避免因操与预期不符产生的转化率降低;
  • 加快内容生速度,时也加快了品传播速度;
  • 避免因上传素材质量差而导致平台容平均质量降。

大家可以看到上图张共享单照片晰度是满足要求,是很明显我不能用它替换色 。如加上脸检测话效率会高,然成本也会更高。

2. 绿洲

我们在上传图片时,页上部为图片放大展示图,页下部分为缩略图,用户可以在选择图片时实时看到自己选择图片细节。举个例子,如漂亮妹子想发张自,是相里保存是几十张连照片,此时她可以在选择图片时,接看到自己前选择图片是否是自己最满意张。而不需要上传后才能看到,或是切换到系统相册去查看。

我们见的产中上传照片时,一般都是直接显示缩略图,好处是页面效率,一屏可展示更多图片,坏处是直接看到照片的细节。那么绿洲的设计就较好的平衡了这个问题。如图:

微信发布新版,有3个设计细节值得关注!

那么,微信的编辑图片页面,做的修改是很大,仅仅是把编辑后的成按钮放到了更顺手的功按钮右侧。同时调换了马赛克和截取按钮的位置。如图:

微信发布新版,有3个设计细节值得关注!

小程序的「更多」页面改版

微信发布新版,有3个设计细节值得关注!

次更新中小程序最重要的部分就是个「更页面」的修改,当严谨地来说能并不能称之为页面,或许叫弹或浮窗更一。

前小程序击更多按钮后页样是独立设计,本改后与微信公众号设计保持了较为致样,并把原来层级较深功能提高显示了。例如反馈与投诉功能。并把返回首页按钮变成了个常驻按钮,前在首页页才有,使它更像是个 APP,而不是加强版 H5。于这个改变理解有另两个佐证,是权限管理功能层级也比前更浅了,即右图设计功能。是某些小程序增加了成长守护功能,家长可以设孩子使用时、消费等等。

对于小程序的这处修改,我的解是这是对微信操作系统的又一次迭代,在之前我们已经说过了微信小程序可替代大分 APP,但在产却还够善,本次更则在一定程上使小程序更像是一个整的 APP 了。

本次更新还有不少的修改,例如订阅号中的「未完成的功能」这一彩蛋下线了,用户可以停用支付的消息服等,由于这些产品计关系不是大所以就不一一细说。以上是对本次更新的一点思考,欢迎大家补充指正。

欢迎关注作者的微信公众:「设计的威严

微信发布新版,有3个设计细节值得关注!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

什么是用户体验设计?有人说是可用性、易用性,有人说用户体验本质是实现商业价值,有人说是以用户为中心,解决用户需求问题...
Facebook 设计
「设计」区别于「艺术」,在于艺术的主题是「我」,而设计的主题是「我们」。因为艺术多关乎于艺术家本身,而设计更多的是与...
交互细节
一款好的产品,往往除了完善功能与体验满足主要目标用户的需求,还会在其能力范围内关照更多其他群体的潜在用户。而一个有情...
产品细节
风头被小程序盖过的服务号,其实内藏很大的能量。此篇文章着重梳理服务号产品化运营思路,提供一些可实操的方法。微信生态的...
微信
对于 QQ 和微信进行分析以及学习已经是不少产品经理的必经过程了,就和 hellow world 一样拥有一定的仪式感。此外,面试中这...
App分析
我们在分析产品设计的时候,会去思考这些产品为什么这么设计?微信作为国内头号产品,经常会被当作分析的对象。那微信为什么...
产品设计
本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设...
一致性原则
让设计细节更高级的9个实用小技巧。 一、大小区分 通过调整文字和数字的大小关系,可以改变用户接收的信息,使得重点信息更加...
可读性