腾讯高级设计师谈微信的旧容与新妆,Android Design是大势所趋
编者按:本篇投稿选自腾讯大讲堂(更多腾讯产品技术文章,可以关注“腾讯大讲堂”微信公众账号),由腾讯研发管理部高级设计师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是大势所趋的更多相关文章
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- tomcat、腾讯云主机和微信
腾讯云主机和微信 申请一个腾讯云上的服务器(在这里我是申请的Linux系统,里面自己事先装好了tomcat.jdk等所需要用到的工具,注意做好必要的配置工作) 连接服务器和部署项目时必要的步骤:1.将 ...
- Photoshop Cc高级设计师培训视频教程(共109节课程)
Photoshop Cc高级设计师培训视频教程(共109节课程) 专业培训Photoshop技能,其他网站收费内容,这里收集了,免费分享给你们哦~ 以下为部分截图: 下载地址: http://fu83 ...
- 浅谈微信小程序对于房地产行业的影响
前几日,我们曾经整理过一篇文章是关于微信小程序对于在线旅游业的影响的一些反思(浅谈微信小程序对OTA在线旅游市场的影响),近日由于生活工作的需要走访了一些房地产的住宅商品房,突然想到微信小程序对于房地 ...
- 人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经
转自:http://www.itmian4.com/forum.php?mod=viewthread&tid=3985 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Of ...
- 从前端界面开发谈微信小程序体验
本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...
- 浅谈微信小程序对于创业者,意味着什么?
尽管这个话题,有点儿烂大街,然而作为开发者兼创业人,兹以为很有必要为自己梳理一番. 多年前,当萌生创业的念头时,我是这样在脑海里绘制这幅蓝图的: 我需要一个域名,一个服务器,并且备了案. 我需要至少一 ...
- WhatsApp值160亿美元,腾讯推大众点评微信支付!
腾讯前脚刚入股大众点评,FB后脚就将斥资160亿美元收购WhatsApp(40亿美元现金和120亿美元股票). 为什么WhatsApp值160亿美元?这是什么东东呢?WhatsApp这款服务可以帮助用 ...
随机推荐
- grunt入门讲解6:grunt使用步骤和总结
Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...
- LeetCode题解:(139) Word Break
题目说明 Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, dete ...
- 性能分析_linux服务器CPU_中断
中断 1. 指标范围 1.1 Interrupt rate 应该与cpu利用率结合分析,如果cpu利用率在合理范围内,大量的中断也是可以接受的.一个巨大的中断值,同时伴随着缓慢的系统性能表现,指示 ...
- NULL,"",String.Empty三者在C#中的区别
(1)NULLnull 关键字是表示不引用任何对象的空引用的文字值.null 是引用类型变量的默认值.那么也只有引用型的变量可以为NULL,如果int i=null,的话,是不可以的,因为Int是值类 ...
- Python Web开发之Flask
PythonWEB框架之Flask 前言: Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenT ...
- Python动态规划求解最长递增子序列(LIS)
原始代码错误,移步博客查看O(N^2)及优化的O(N*logN)的实现:每天一道编程题--最长递增子序列
- CodeForces - 988C(STL大法好)
请你找出两个编号不同的数列,并从这两个数列中各恰好删除一个数,使得这两个数列的和相等. 用vector存每一个数 用map标记 即可 #include <bits/stdc++.h> us ...
- Day24-Ajax文件上传
一. <input type="file" id="fafafa" name="afafaf"/> <input type ...
- Java EE之JSTL(下)
3.使用国际化和格式化标签库(FMT命名空间) 如果你希望创建部署在Web上,并面向庞大的国际化用户的企业级Java应用程序,那么你最终需要为世界的特定区域进行应用程序本地化.这将通过国际化实现(通常 ...
- Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法
ref from: Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法http://blog ...