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

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

2019/09/19 18234评论 16

前些天微信更新了 iOS 的新版本,有几项比较明显的设计细节做了修改。今天就和大家一起聊聊具体修改的功能和我对这些修改的思考。

表情选择栏

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

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

1. 为什么表情选择栏占据的空间变大了?

首先是全面屏手机的占有率在过去一段时间内大幅提升,用户的手机屏幕长度增加了不少。在不影响聊天信息占据空间大小的前提下,输入区域能够使用的空间增加了,加之微信内部绝大多数的切换信息操作都是上下滑动的方式,例如查看聊天信息和刷朋友圈这两个使用次数最多的操作。为了保证操作的一致性,于是表情选择区也变成了上下切换的方式。

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

第二点还是与硬件有关,在手机触屏灵敏度越来越高和用户对手势操作的接受程度大大提升之后,原本点击的方式就有了被替换成手势操作的基础。有朋友会说:手势操作还需要滑动,哪有原本的一次点击更方便呢?其实这里手势操作的优势是「不必寻找热区」,即用户并不需要先去看一下我要点击切换的按钮在哪,然后再去点击,只需要在手指当前所在的位置直接滑动就可以了,所以实际使用上是更加便捷的。

3. 表情包选择标签为什么放到了顶部?

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

4. 其他

至于最近使用的表情被突出显示这一点,应该是微信内部根据用户使用数据做出的修改。例如产品方在之前的版本中发现隐藏在左侧的最近使用表情这一功能的使用率达到了某一标准线,就会决定在本次更新中做出这样的修改。

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

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

选择图片的页面增加了一些动画效果,有一个从上到下依次加载的样式,形式上更加自然流畅,也符合人的感官习惯。但是微信在这里并没有做出更多的优化,我们之前曾经分享过两个比较好的上传图片的设计案例,分别是 ZAO 和绿洲中的设计,这里再简单和大家分享一下。

1. ZAO

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

这个细节的优势:

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

大家可以看到上图中一张共享单车的照片的清晰度是满足要求的,但是很明显我不能用它替换角色 。如果加上人脸检测的话效率会高,当然成本也会更高。

2. 绿洲

当我们在上传图片时,页面上部为图片的放大展示图,页面下部分为缩略图,用户可以在选择图片时实时看到自己选择的图片的细节。举个例子,如果漂亮妹子想发张自拍,但是相机里保存的是几十张连拍照片,此时她就可以在选择图片时,直接看到自己当前选择的图片是否是自己最满意的一张。而不需要上传后才能看到,或是切换到系统相册中去查看。

我们常见的产品中上传照片时,一般都是直接显示缩略图,好处是页面效率高,一屏可以展示更多图片,坏处是不能直接看到照片的细节。那么绿洲的设计就比较好的平衡了这个问题。如下图:

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

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

本次更新中小程序最重要的部分就是这个「更多页面」的修改,当然严谨地来说这可能并不能称之为页面,或许叫弹层或浮窗更好一些。

之前的小程序点击更多按钮后的页面样式是独立设计的,本次修改后与微信公众号的设计保持了较为一致的样式,并且把原来层级较深的功能提高显示了。例如反馈与投诉功能。并且把返回首页按钮变成了一个常驻的按钮,之前只在非首页的页面才有,使它更像是一个 APP,而不是加强版的 H5。对于这个改变的理解还有另外两个佐证,一是权限管理功能的层级也比之前更浅了,即右图中的设计功能。二是某些小程序中增加了成长守护功能,家长可以设置孩子的使用时间、消费等等。

对于小程序的这处修改,我的理解是这是对微信操作系统的又一次迭代,在之前我们已经说过了微信小程序可以替代大部分 APP,但在产品却还不够完善,本次更新则在一定程度上使小程序更加像是一个完整的 APP 了。

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

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/wechat-new-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 职场 版式设计 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里