打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
微信新版的 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 哥

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
新年新版经典微信头像,等你来拿!
微信十周年头像怎么领取
谷歌的MATERIAL DESIGN 设计指南精华版
设计中的渐变色你真的了解吗?
UI设计 | 原来设计师是这么设计图标的
个人总结:icon网格使用规范 | 人人都是产品经理
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服