微信大改版,像素级设计分析来了!!

原标题:微信大改版,像素级设计分析来了!!

来源:MICU设计(ID:micudesign)

微信在App Store发布了7.0版本

无论是品牌LOGO还是UI整体界面

都发生了重大的改变。

下面我们进入正题,

一起来看看微信做了哪些调整。

当晚,张小龙也在朋友圈

发布了一段王阳明的话:

你未看此花时,此花与汝心同归于寂;你来看此花时,则此花颜色一时明白起来。

关于这句话其实有有很多种解读,

米醋对于这句话的理解:

关于7.0版本的改版,

其实更多的希望用户

能够融入到微信的关系链中

从而加强朋友的关系,

这与本身的功能也是一致的。

01 LOGO做了升级

通过微信的LOGO历史

我们可以看到

新LOGO的图形其实也做了些微调

图形整体缩小了并且居中

使四周增加了更多的留白

从最新7.0版本我们能看出

整体都经过了细致的调整

在颜色的对比上能够看出很明显的差别

调整后的新logo整体颜色

更为清淡了许多,

除此之外符号感也加强了不少。

据了解,全新LOGO已经

开始在微信的各个子品牌中进行使用。

我们在使用微信界面时都能够看到。

除了LOGO的变化外,

米醋再来说说整体界面的变化。

02 开机画面

进入画面之后,你会看见开屏动画是

蓝天背景下的一枝格桑花,

文案的内容也进行了改变:

因你看见,所以存在,

同时也凸显了升级与视觉的关联。

不过米醋在这里想说

新画面中的格桑花就像中老年的应用一样

散发出了写意和对时尚的追求

再来说说整体的内部变化

给米醋第一感觉就是更加扁平化

其次导航上的深黑色变成了白灰色,

让整体的界面显得更加的整体,层次感更加扁平

视觉集中在内容块上。

03 首页

列表间距对比

我们能够看到

内容的间距从10dp

调整到了更宽的16dp

界面框框的设计

其实很早之前写过一篇相关的设计分析

其中也讲到了

对于左右距离越大,内容信息越聚焦

层次感也越突出

这次微信的改版左右间距宽度的调整

让内容的层次变得更高

有兴趣的同学可以看一下这篇文章

【解构界面】对齐!框框!(MICU出品)

我们对细节进行了像素化的对比

发现整体的图标内容更为清晰

列表高度变得更高了

微信图标的颜色统一为LOGO色,

其次“发现”图标也进行了加粗。

底部栏高度对比

从原来的的147px增加到168px

底部栏图标描边对比

从原来的的1dp加粗到1.5dp

列表高度对比

从原来的的67dp增加到72dp

04 下滑小程序背景对比

深黑色的下拉背景改为了灰白色背景之后

让上面不再显得头重脚轻

05 添加好友页

添加朋友变化不大

下方的菜单栏没有变化

顶部“添加朋友”的底色改为了灰色

添加好友的图标

于底部标签栏图标统一为24dp

06 个人主页

对比一下效果

你就能发现很明显的变化吧!

新版的设计,列表高度进行了加高

让用户的点击感变得更强

让页面的留白也增多了

让视觉效果更加舒适轻松

其次图标进行了更新

这样的调整也能够减少用户的错误率

单行列表高度对比

07 发现页

同样发现页也进行了细致的调整

除了更新了之前的图标

同时也增加了列表的高度,

使整个界面舒适了不少。

08 通讯录

通讯录的变化改了图标的颜色

同时去掉了深色的底色。

09 聊天页

聊天页面的上方的

功能图标颜色进行了加深

去掉了icon背景的描边

让多图标的页面更加轻松

另外输入框的高度也进行了增高

更易于用户的点击

10 朋友圈

朋友圈页面除了个人头像边框更加圆滑

其次右上角的相机图标也做了相应调整

删除了左上角的“发现”字标

11 钱包

再来说说微信的“钱包”,

更新后改为了“支付”。

零钱余额不会像从前那样

直接在“零钱”下方显示出来

页面的设计也比之前变得更为好看了!

12 “好看”功能

去中心化,通过关系链,

提高内容分发效率和质量,

把朋友看的内容推送给你。

但是像菊花一样的图标

没有体现出好看的识别度

新功能上线不太好建立

功能识别和印象。

会发现原来

点赞的位置变成了“好看”!

可以将你认为好看的文章

进行分析推荐,

当然你也可以在看一看

里浏览朋友认为好看的文章。

13 跟拍前置功能

跟拍功能前置到输入框的表情选择

可以添加自拍表情包

自拍表情包

聊天界面发表情时,

可以直接制作「拍自己的表情」!

还可以根据自己的需求添加文字

颜色可以随意更换!

14 即刻视频

点击“我”之后,进入个人页面,

你会发现右上角多了一个照相机符号。

点击它,可以立即录制或者上传一段小视频。

你想要查看自己的即刻视频,

可以点击“我”,

在个人页面的最上方,

就是你的即刻视频,

下拉可以进行录制拍摄播放。

录制完成之后,

还可以配乐、加表情符。

这应该是本次微信7.0版本

更新最大的变化,发布之后,

在24小时之内朋友能够看到,

并且可以进行互动哦~~

发布后被点赞会显示气泡

15 即刻视频可见

如果你的朋友发布了即刻视频,

无论是在朋友圈还是群聊天,

点击朋友头像,也能看到他的即刻视频。

当头像上有个圈

双击后就可以看到视频了!

16 朋友圈相册

打开朋友圈相册

你也能看到“时刻视频”的图标

点击后之前录制的视频在那里都能看到~~

17 自己可以给自己发消息

居然自己能给自己发消息,

说好的2分钟内可以撤回,

但撤回不了……

这简直就是个bug!

总体来说,此次的微信的升级进行了很多地方的改变,其实核心最关键的是“好看”的功能,利用了关系链打通了朋友之间的互动,让“看一看”里面的内容更有互动感,而增加的“时刻视频”,恐怕是堪称史上最巨大的变化,也许这也意味着微信将全面进军短视频领域 。

本文由MICU设计(ID:micudesign)发布,授权互联网早读课转载。内容仅代表作者独立观点,不代表早读课立场。如需转载,请联系原作者。返回搜狐,查看更多

责任编辑:

您可能还会对下面的文章感兴趣: