微信新版的7个重要细节

微信新版发布已经几天了，不管是设计师还是普通用户，都给予了微信7.0高度一致的好评，用一个词概括就是——

好看。

新版的设计到底好看在哪？我总结了7点，呼应微信的7.0。

呼吸感

无论是桌面图标还是界面，新版设计给予了充足的留白，比方桌面图标中的logo缩小了，不像旧版那么拥挤，那么密不透风，就会看上去有显得精致一些。

同样的，新版界面的全局边距增大、列表高度增大，同时元素缩小，比方好友头像、导航栏标题、图标都比旧版要小。这让新的列表之间的空间增大、干扰减小，画面更加具有呼吸感，更加通透，我们在使用的时候也就更加舒服。

这个道理就像你在排队，人挤人很难受，但是大家保持一定的距离就会很舒服一样，对吧。

轻盈

新版视觉上最大的变化就像电视广告里的卫生巾一样，变轻了、变薄了。

新的导航栏背景色与App的全局背景色一致，都是B95，接近于白色。这让界面看起来更加整体，没有上下割裂感。

但是你别以为只要导航栏换个浅背景色就完了。因为界面变得轻、薄，必须要有较重的元素来保证画面的平衡性，所以你看到了，在新的标签栏上，图标加粗了。

图标加粗了，视觉就变重了，原来的标签栏就臃肿了，所以在新版的设计中，标签栏的高度也适当增大了。如果你仔细还会发现，小红点也与图标之间留出了距离。

这都是细节！

年轻化

升级了主色，让人眼前一亮。原来的绿色饱和度非常高，看久了容易产生疲倦、亮瞎眼的感觉，新的主色较为中性，看上去清新、粉嫩、时尚。

界面里的线性图标更显年轻、精致和时尚，与新版的极简风格很搭，也与新版的产品气质相符。

并且，线性图标的视觉比面性图标更轻，不会干扰用户的注意力，让用户更加聚焦在功能本身。

网格系统

新版设计严格执行了网格系统（不了解网格系统的设计师可以去看《高级UI设计师之路》），从下面的标注中可以看到32、24、20、16、8，因此可以推算它的最小单位是4。

也就是说所有的间距、图标、圆角等都是4的倍数，比方全局边距32px、聊天列表头像96px、朋友圈头像84px、列表高144px、搜索框高72px。

但也还是有一些不严格的地方，比方朋友圈页的点赞评论按钮边距是26px，而不是24px。

卡片

在支付、、订阅号页都采用了卡片设计，卡片可以化繁为简，将不同类型的元素有效地组织在一起，形成一个封闭式的视觉形式。

每一个卡片之间都具有独立性，不会相互干扰，它们保持着一致的外观，让界面看上去干净和简洁。比方支付页的两个核心功能用一个卡片填充主色呈现，腾讯服务又用一个卡片包裹，这样就会主次分明，视觉不再松散。

再比方页，上面的8个分类与下面的内容是两种不同的类型，如果用列表式设计就会看上去混乱，而用卡片就ojbk。

克制

克制是微信产品设计的初衷，希望把最好的体验留给用户，不打扰用户，所以你看不到乱七八糟的功能和花里胡哨的设计，每次增加新功能也是小心翼翼的。

克制表现在视觉上就是减法设计，去除不必要的装饰性元素——比方描边。在新版中，你会发现聊天气泡的描边不见了，朋友圈头像的描边也不见了，目的是为了给用户提供最极致的视觉享受。

在列表设计上，所有的分隔线都不再是从头像或图标对齐，而是从文本开始。这是因为当列表高度增加，列表之间的距离与图标文本之间的距离大得多，分割线的功能性就变弱了，所以分隔线从文本对齐依然能保持清晰的视觉层次。

列表高度增加有什么好处？下面这张图很清晰地告诉你，旧版的阅读顺序是垂直方向，新版调整了列表间距后，阅读顺序变成了水平方向。

并且，列表高度窄的话就会给用户造成心理压力，在点击列表时小心翼翼，生怕误操作。新版列表高度比旧版高出30%，即使是姚明那样的大手指，操作起来也毫无鸭梨，再也不用瞄准了！

手势

7.0发布的时候，有人就说微信不做新手引导是因为会有很多公众号发解说。的确，每次微信上新功能从来不告诉用户怎么使用，自己摸索去，一副老子最拽的姿势。

为了带给用户极致的视觉体验，微信把很多功能隐藏在手势操作中，比方在聊天列表页下拉可以滑出小程序，比方编辑朋友圈时长按图片可以拖动移动位置或删除。

但是很明显，微信高估了用户，只有天天跟App打交道的那帮人才熟知长按、下拉、上滑、右滑等各种手势操作。比方7.0的时刻视频，很多人不知道怎么看、怎么玩，进去之后面对空无一物的全屏视频，卧槽我的返回按钮呢？又不知道怎么退出、怎么删除，这TM就很尴尬了，只好关闭微信重新打开。（在时刻视频下拉或下滑都可以退出，回到个人主页；长按视频可以删除）

这也造成7.0发布后，一些网友表示，又要教爸妈使用微信了——儿啊，这蓝色的小圈圈是个啥？

总的来说

微信保持了一个较高水准的版本升级，不管是从视觉感官还是用户体验较之前都有非常大的提升，虽然有一些页面还没有完美统一视觉风格，比方新的朋友列表、公众号列表、订阅号列表分割线还是之前的样式，比方出现了带外圆的加号和不带外圆的加号。

还有就是，从这几天时刻视频的使用情况来看，好像不是很理想，没多少人玩，或许是很多人没发现这个功能或安卓用户还未更新的缘故吧。

希望微信越来越好！

BAT（公众号）

作者：B哥

赞 (0)

相关推荐

  • 微信新版新功能——小视频

    现在已经到了移动网络的时代,微信.微商.微钱包,有些不是咱穷忙之人能做的,但是微信确实成了我们生活中不可缺少的一部分.新版的微信出了一个很有意思的功能--小视频,也就是在微信聊天时可以拍摄一小段视频, ...

  • 微信新版公众平台进入测试账号

    打开微信公众平台并登录 进入后找到“开发者中心” 点击“开发者中心” 在开发者中心找到“开发工具”==》“接口测试系统”==》“点击进入” 现在就可以直接登录你的测试账号了 如果没有测试账号的话!直接 ...

  • 英雄联盟LOL微信账号和QQ账号登录细节与区别

    英雄联盟LOL在S8赛季更新中新增了微信登录,但是微信登录和QQ登录还是有区别的,下面我们来看看两种方式登录的区别 操作方法 01 英雄联盟LOL添加微信登录是为了迎合微信登录用户,进一步吸引用户哈~ ...

  • 微信新版的10大技巧 ，特色功能。

    你以为每天跟微信形影不离,就真的玩转微信了吗? 你用微信扫过港澳通行证吗?直接扫通行证封面就可以续签注,不用去现场排队,甚至不用关注公众号. 这都不知道,还是乖乖地看小派给你梳理微信十大冷知识,教你一 ...

  • 微信5.2.1内测资格申请地址是多少 新版微信新增四项功能图文介绍

    微信5.2.1内测资格申请地址是多少?微信官方已经发布微信5.2.1内测资格测试，微信5.2.1新增加了一些功能。目前官方暂未公布微信5.2.1内测资格申请地址，到时小编也会第一时间为大家更新，敬请期 ...

  • 微信5.0最新版本怎么样?好用吗?微信5.0最新版使用评测详细介绍

    大家期待已久的微信5.0今天一发布是不是有很多同学就立马更新了呢?当然肯定还有部分同学因为将qq更新到2013后发现没有之前老版本好用再降回去而处于更新与不更新徘徊中，接下来小编带大家解析一下微信5. ...

  • QQ和微信的输入栏为什么不一样?

    QQ和微信的输入栏为什么不一样?

    很多问题,并没有绝对的标准,重要的是,我们是否有主动去思考其背后的逻辑.问题一iOS 13.3 版本的 iMessage 功能原版与新版对比,好在哪里?为什么这么改?这次 iOS 13.3 的更新点, ...

  • 如何直接在通讯录中发送微信给好友并查看朋友圈

    你有没有想过可以在通讯录里直接发微信？面对列表中诸多昵称的朋友，你有没有想过可以轻松的查找微信里的真实姓名联系人？你有没有想过可以在联系人的详细信息页面查看到对方的朋友圈？我想对于微信这个拥有庞大用户 ...

  • 16个Office for Mac新功能细节

    接着 Outlook for Mac 16的截图泄漏，CnBeta还带来了Office for Mac 16整个产品的路线图和详细更新内容。这次泄漏的资料显示下一代Office for Mac 16今 ...