编者按:本篇投稿选自腾讯大讲堂(更多腾讯产品技术文章,可以关注“腾讯大讲堂”微信公众账号),由腾讯研发管理部高级设计师Vertu撰写,他以产品设计师的视角,对比解读了微信的旧容与新妆,也讲了Android版微信5.2放弃iOS UI设计背后的故事。

1 月 21 日,新的 Android 版微信在应用宝上线内测,很多用户第一时间更新了。在这个微信5.2内测版中,我们可以看到界面的功能架构、视觉风格及交互逻辑都有了较大的改动——微信开始遵循 Android 的设计规范了。

本人非常喜欢微信本次的改动,相比之前移植 iOS 的 UI,Android 微信 5.2 的功能架构变得更加清晰,交互逻辑也更为简洁,几乎所有的核心功能都可以通过一次点击快速找到并调用。无论对微信本身的产品体验,还是对 Android Design 设计规范在国内移动应用设计中的推崇,这都是一个好的迹象。

早期 Android 系统的 UI 一直广遭诟病,除了 Android 设备碎片化,Android 移动应用设计也缺乏统一规范,界面控件看起来都非常业余。直到 2011 年 Android 4.0 发布,Android Design 才应运而生,其中包括一般风格指南、设计样式,以及 Android 的部分默认 UI 构件等。

尽管如此,很长一段时间内,国内绝大部分开发者丝毫不遵循 Android Design 设计规范,原因有多个:设计规范未足够优秀成熟;用户习惯未形成,带来学习成本;Android 第三方 ROM 盛行,导致与 Holo theme(最为基础的 Android Design 呈现形式)混搭得不伦不类;多套平台规范的 UI 维护及更新需要投入成本,等等。

随着 Android 设备的不断进化——屏幕尺寸的增大、实体键向屏幕内虚拟键转移,Android Design 在移动应用设计中的优势也逐渐显现。从 2013 年下半年开始,国内的移动应用开发商(如豌豆荚、知乎等)在 Android 平台上也开始遵循 Android 的设计规范。这一次,微信的设计团队也在 5.2 版本中向着 Android Design 迈进了一大步。可见,越来越多移动应用厂商也都逐渐认同了平台规范与一致性的重要性。

我们来看一下 Android 版微信 5.2。主界面去除了昔日底部的 Tab Bar,在顶部则使用了 Action Bar,并用 Tab Host 来组织内部界面。用户通过手势滑动可以轻松来回切换“聊天”、“发现”、“通讯录”这几个高频功能界面。

虽然对于喜欢单手操作大屏手机的用户来说,手势的引入带来了极大的便利,但是,左右滑动的手势被用来切换 Tab 之后,有用户开始有这样的疑问:原来单条会话的左滑操作(置顶、删除)哪里去了?

其实,这一交互功能是早期从 iOS 移植过来的;新版微信摒除了对单条会话的滑动操作,保留长按操作,更加符合 Android 平台的交互规范。当然,如果能使用 Contextual Action Bar 对多个会话进行批量选中操作就更好了,毕竟对于有清理癖的用户来说,一条一条长按删除还是蛮辛苦的。

我们还可以看到,在这次更新中,“搜索”功能被提高到 Action Bar 常驻按钮的位置,支持全局搜索。相比旧版在“会话列表”和“通讯录”两个界面分别置顶的搜索框,节省了屏幕空间,统一了搜索入口,省去了辨识记忆的麻烦。

在顶部的 Action Bar,除了“搜索”之外另外两个常驻按钮为 add(+ 号)、overflow(三个小圆点):add 的下级均为与外界有交互的操作,如“发起群聊”、“添加朋友”、“分享照片”等;overflow 罗列的均为与个人相关的操作入口,包括“个人信息”、“我的相册”、“我的收藏”、“设置”等。层级清晰易记。

在视觉风格上,微信在本次更新中做了一个大手术,界面空间去除以往厚重的渐变、高光、阴影的样式,向更为扁平的 Holo UI 靠拢,品牌色黑、白、绿搭配清新简约。有用户反映,与诸如 Line、Kakao Talk 等同类应用相比,新版微信依旧没有俏皮生动的情感化形象。

不过,因为每个产品都有自己的定位,微信作为一个大众产品,覆盖不同年龄、不同文化程度的人群,在视觉体验这种主观感受的设计上保持中立简单也是合情合理的。而功能本身的出彩,让用户不时感受到意外的惊喜,才是产品创新的价值所在。

腾讯高级设计师谈微信的旧容与新妆,Android Design是大势所趋的更多相关文章

  1. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  2. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  3. tomcat、腾讯云主机和微信

    腾讯云主机和微信 申请一个腾讯云上的服务器(在这里我是申请的Linux系统,里面自己事先装好了tomcat.jdk等所需要用到的工具,注意做好必要的配置工作) 连接服务器和部署项目时必要的步骤:1.将 ...

  4. Photoshop Cc高级设计师培训视频教程(共109节课程)

    Photoshop Cc高级设计师培训视频教程(共109节课程) 专业培训Photoshop技能,其他网站收费内容,这里收集了,免费分享给你们哦~ 以下为部分截图: 下载地址: http://fu83 ...

  5. 浅谈微信小程序对于房地产行业的影响

    前几日,我们曾经整理过一篇文章是关于微信小程序对于在线旅游业的影响的一些反思(浅谈微信小程序对OTA在线旅游市场的影响),近日由于生活工作的需要走访了一些房地产的住宅商品房,突然想到微信小程序对于房地 ...

  6. 人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经

    转自:http://www.itmian4.com/forum.php?mod=viewthread&tid=3985 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Of ...

  7. 从前端界面开发谈微信小程序体验

    本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...

  8. 浅谈微信小程序对于创业者,意味着什么?

    尽管这个话题,有点儿烂大街,然而作为开发者兼创业人,兹以为很有必要为自己梳理一番. 多年前,当萌生创业的念头时,我是这样在脑海里绘制这幅蓝图的: 我需要一个域名,一个服务器,并且备了案. 我需要至少一 ...

  9. WhatsApp值160亿美元,腾讯推大众点评微信支付!

    腾讯前脚刚入股大众点评,FB后脚就将斥资160亿美元收购WhatsApp(40亿美元现金和120亿美元股票). 为什么WhatsApp值160亿美元?这是什么东东呢?WhatsApp这款服务可以帮助用 ...

随机推荐

  1. angularJS1笔记-(2)-$watch方法监听变量的变化

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Littleproxy的使用

    介绍 LittleProxy是一个用Java编写的高性能HTTP代理,它基于Netty事件的网络库之上.它非常稳定,性能良好,并且易于集成到的项目中. 项目页面:https://github.com/ ...

  3. <script>document.write(location.href)</script>

    <script>document.write(location.href)</script> 什么意思?

  4. 洛谷 P4128 [SHOI2006]有色图 解题报告

    P4128 [SHOI2006]有色图 题目描述 如果一张无向完全图(完全图就是任意两个不同的顶点之间有且仅有一条边相连)的每条边都被染成了一种颜色,我们就称这种图为有色图.如果两张有色图有相同数量的 ...

  5. 在OpenShift上托管web.py应用

    一.背景 最近在学习web.py,跟随官网的cookbook和code examples一路敲敲打打,在本地访问了无数遍http://0.0.0.0:8080/,也算是对web.py有了基本的认识.为 ...

  6. docker attach 和 docker exec

    docker attach docker attach -- Attach to a running container. 常用选项: --sig-proxy=true:Proxy all recei ...

  7. 解题:CF570D Tree Requests

    题面 DSU on tree确实很厉害,然后这变成了一道裸题(逃 还是稍微说一下流程吧,虽然我那个模板汇总里写过 DSU on tree可以以$O(n\log n)$的复杂度解决树上子树统计问题,它这 ...

  8. bzoj2758【scoi2012】Blinker的的噩梦

    题目描述 一天Blinker醒来,发现自己成为了一个二维世界的点,而且被标记上了一个奇怪的值. 这个世界是由N个边界互不相交(且不相切)的图形组成,这里图形仅包括圆和凸多边形.每个图形还有一个权值.每 ...

  9. shell 变量匹配

    ${var%pattern} ${var%%pattern} ${var#pattern} ${var##pattern} ${var%pattern},${var%%pattern} 从右边开始匹配 ...

  10. go递归打印指定目录下的所有文件及文件夹

    func treedir(fpath string){ // 获取fileinfo if finfo,err := os.Stat(fpath); err == nil { // 判断是不是目录 如果 ...