编者按:本篇投稿选自腾讯大讲堂(更多腾讯产品技术文章,可以关注“腾讯大讲堂”微信公众账号),由腾讯研发管理部高级设计师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. vue 实战报错解决方案

    最近做项目,遇到一个问题 列表滚动,上拉加载功能 采用了better-scroll 插件,将better-scroll 封装成组件,采用父组件传递值给子组件的方式,子组件 采用$emit 方式 通知父 ...

  2. Python入门:逻辑判断与运算符

    这是关于Python的第6篇文章,主要介绍下逻辑判断与运算符. (一) 逻辑判断: 如果要实现一个复杂的功能程序,逻辑判断必不可少.逻辑判断的最基本标准:布尔类型. 布尔类型只有两个值:True和Fa ...

  3. 2018最新Web前端经典面试试题及答案

    javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...

  4. SOAP 缓存问题

    今天在进行soap调用老是出错,去其他人的机器上试下,就好了,下面是从网上找到的原因 一开始不知道还有SOAP缓存.因为类文件改变了,重新生成了WSDL文件,测试运行,竟然不能通过.给我的第一感觉是W ...

  5. 解决方案~Microsoft Security Client OOBE 程序错误

    Microsoft Security Client OOBE 程序错误 适用于: Windows Windows 7 系统错误日志如下:会话"Microsoft Security Clien ...

  6. 设置session的过期时间

    1)修改php.ini文件中的gc_maxlifetime变量就可以延长session的过期时间了 session.gc_maxlifetime = 86400 然后,重启你的web服务(一般是apa ...

  7. Java 使用 DBCP mysql 连接池 做数据库操作

    需要的jar包有 commons-dbutils , commons-dbcp , commons-pool , mysql-connector-java 本地database.propertties ...

  8. JAVA里的布尔运算符-甲骨文面试题

    重要一点: (& ,|) ==>二进制布尔运算符,(&&,||)==>条件布尔运算符 二进制布尔运算符,两边都会执行,不管左边是否为真或假==>对于运算符两边 ...

  9. jquery 半透明遮罩效果 小结

    最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...

  10. linq 左连接实现两个集合的合并

    //第一个集合为所有的数据 var specilist = new List<Me.SpecificationsInfo>(); var resultall = (from a in db ...