界面交互之支付宝生活圈pk微信朋友圈

作为一个优秀的设计师,不仅要知道自己的ui设计作品的优势和特色,也必须要看看一些大企业的app交互设计是怎样做的,因为流行的app交互设计很多时候都是反映着时代用户使用app的习惯,他们有大量的客户数据,有一个专业的消费着行为分析团结,因此大企业的APP是很有参照价值的。

下面我就来说一说微信朋友圈和支付宝生活圈的交互设计探讨。

前几天支付宝提示更新9.2版本,点开一看,果然不出所料,增加了朋友圈功能,叫做“生活圈”。

虽然名字不相同,内容却一样。支付宝又向微信再靠近了一步,这对爱恨缠绵的CP终于要喊出那三个字:求合体!

产品的战略我不去揣测,作为一个美工,我来谈谈它的交互和视觉。

打开支付宝进入首页,呃...变化有点大...幸好我有所传闻提前做好了准备才没有摔倒。

顶部账单移至左上,右上新增三个图标,我想打败微信的终极秘密武器生活圈一定就在这里!以我敏锐的直觉判断,应该是第一个图标,点击进入...嗯?是通讯录!返回...嗯?是生活圈!不是返回到首页吗?没有一点点防备,也没有一丝顾虑,你就这样出现。

我实在无法理解首页增加通讯录入口的意义。即使是微信,用户也很少进入通讯录。给好友转账?不,首页有转账的icon入口;找基友聊天?不,Tab bar上的朋友入口才是常用的聊天列表。那么一定是加黑名单,上次借我5毛钱不还,不跟你做朋友了,哼!

所以我认为,首页右上的通讯录不但然并卵,而且增加用户的认知负担,导致对生活圈入口的记忆混乱。

如果将首页右上的通讯录去掉,我会对界面做一点点的减法:

吐槽完首页交互,再来看视觉,这次我加入与微信的对比:

生活圈(朋友圈)入口

抛开头部和底部,左边支付宝是聊天列表,所以列表较高,以满足信息排版的需要;右边微信是普通列表,和设置列表高度相同,目的是在一屏展示更多内容,提高阅读效率。

两者的入口icon都是以相机镜头为元素,生活圈精致华丽像logo,与聊天列表能够协调;朋友圈简洁干净像icon,与其他列表风格保持一致。

Feeds流页面

创新一

现场直播

两者Feeds主页结构一致,都分为三部分:头部、banner(姑且叫做banner)、Feeds流。不同之处是左边支付宝增加现场直播功能,所有用户都能参与和互动。相比较微信朋友圈封闭的熟人社交,这也是支付宝生活圈的创新之一;而右边微信只是一张背景图,占去了非常大区域的黄金位置,略显单调。像是我裤子都脱了,你天天就给我看这个。

创新二

打赏红包

支付宝生活圈将社交元素执行地更加彻底,在现场界面中,在现场的用户可以发送视频或照片,不在场的用户对其打赏和评论,增加的打赏和弹幕功能,虽然都是老生常谈,但对于一成不变的微信朋友圈却给用户眼前一亮的感觉。

顺便提一下,现场的交互逻辑并不是很清晰:

右上的相机只有在现场的用户才能操作,所以不在场的用户界面是否置灰更好?或者以文字方式展示,比方“发直播”。

现场视频之间的切换没有任何信息展示,用户不清楚该段视频多长、也不知道后面是否有其他视频、不知道如何切换。如果在左下的现场直播用户头像加上播放进度,可能会解决这些疑惑。

录制视频

对比两者的录制视频界面,都是采用长按的方式录制画面,支付宝在长按过程中因为手指遮挡了录制进度,使得用户无法感知是否成功录制和录制时长。抛开录制画面尺寸不谈,用户体验上微信做的更好。

Feeds流

Feeds流设计,两者几乎一样,支付宝接着农夫山泉微信。作为创新功能的打赏也出现在这里,目测以后就常常会出现这样的情况:

值得一提的是,每次打赏不超过1块钱,如果你非要任性也不拦,但最多也只有200。这样的人性化设计,已经在微信上得到认证,道理大家都懂。

体验发一篇生活圈(朋友圈)

支付宝生活圈把大象装冰箱拢共分几步,三步。第一步,拍照上传;第二步,选择朋友可见;第三步,发送。

而微信朋友圈只需拍照上传和发送两步,将不必须操作的功能放在下方。

我不知道生活圈的交互设计师为何这样设计,没理由搞的复杂啊,是否有其他原因,我不得而知。

开心的是生活圈没有像朋友圈那样对图片进行压缩,显示了原始图片,赞一个。微信之所以没有这样做,目的是减少流量,因为在三四线城市2G网络较为普遍。

看到这里,可能大家都会觉得支付宝还不是全都农夫山泉微信。互联网时代,衍生了一个新词叫“微创新”。不得不说,支付宝9.2版本做到了微创新,虽然界面上还是很像。

作为一名站着隔岸观火说话不腰疼的美工找到一张支付宝8.1版本的首页,表示微信也曾农夫山泉过。

最后的话

搞笑一点的形容:

支付宝就像一个顽皮的男孩,一直大胆地尝试各种变化去讨好喜欢的女孩;而微信则像一个成熟的男人,沉着且冷静,小心翼翼地增加着功能,以不变应万变(一张闪屏用了好几年)。

没有谁好谁坏,不管怎么样,支付宝和微信都给我们的生活带来了巨大的变化和便利,我们为此感谢。

如果有一天,我们能相见,支付宝会说:爱过!

更多的ui设计培训文章--app界面的图文组合设计与优化

每天都一点点ui培训,每天多一点点经验。

找在线ui设计培训机构,就找趣达ui培训学院。

原文来自:中国ui

UI设计

时间: 2024-10-17 21:40:44

界面交互之支付宝生活圈pk微信朋友圈的相关文章

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧!

微信朋友圈的图片上传,多图上传怎么去撸才合适?我们一起来实现吧! 图片上传是非常常见的功能,而多图上传在大多数应用中也是非常常见的,比如微信的朋友圈,微博的动态,都是有九宫格图片的,那这里肯定涉及了多图上传,所以今天我们来一起撸一下,怎么去思考这个实现逻辑! 这里我想到的思路是比较简单的,首先,我们有一个按钮,按钮是上传图片,点击之后弹出某个界面进行图片的选择,一般是九张图片或者十二张,选完之后就直接上传了,大致的流程应该是这个样子,那我们首先来写个按钮 activity_main.xml <?

微信朋友圈位置怎么自己设定

微信朋友圈位置怎么自己设定, ,需改的- 添加微信: pution , -- 添加微信: pution -- 修改城市基本可以改,就是看你要不要设置,稍微花点时间而已! 苹果手机越狱或是不越狱都可以改地理位置 ,亦或是安卓手机都是可以 iPhone6 iPhone6plus iPhone7 iPhone4s iPhone5 苹果手机或是安卓手机都行.... 微信聊天发送的位置设定后也可以改 方法是利用手机自带的"模拟位置"功能实现运行时修改LocationManager结果,  原理:

微信朋友圈投票活动的刷票案例分析

现阶段,在微信朋友圈举办的投票活动层出不穷,相信已经有不少同学对此不胜其烦,因为总会时不时地冒出个人(亲戚.朋友.or whatever)来请你帮TA投票. 本文倒没有打算从道德或者情感层面来探讨这个问题,我所感兴趣的是,当前大多数投票活动其实都是存在明显漏洞的,通过简单的技术手段就可以实现“刷票”. 案例描述 这里就有一个案例. 某美发网上商城(以下简称S商城)在微信平台上举办了一场在线投票活动,微信用户可通过活动链接访问到投票页面,对喜欢的发型师作品进行投票:每个微信帐号每天只能给单个作品投

微信朋友圈怎么转发?

使用微信的朋友们最喜欢干的一件事就是刷朋友圈,朋友圈上有各种晒美食,美景,心灵鸡汤,搞笑娱乐类型的段子,有时候看到喜欢的内容,难免会想转发到自己的朋友圈,让自己的朋友也看看,可是找了半天,也没看到微信朋友圈的转发在哪里,只有评论和点赞功能,如果你想知道微信朋友圈怎么转发,就跟着系统圣地小编一起来看看本文微信如何转发别人的朋友圈教程. 微信朋友圈怎么转发 首先大家要知道的一件事:微信朋友圈并不能像qq那样直接转发走,只能先把好友的图片保存到手机,然后把内容复制下来,再到自己的朋友圈点相机发表,其实

高仿微信朋友圈

简单介绍 写这个微信朋友圈的目的是今年公司开展了一个趣味运动会,有一个比赛项目是微信点赞.对于我们程序猿来说,这不是送分嘛.于是我们团队光荣的把这个写一个朋友的任务交给了我,要求是类似度百分之99以上,能上传自己定义照片,能更改点赞数与评论数.包含姓名.日期等都能改,于是花费了3天时间写了这个高仿的微信,因为时间关系,代码写的不是非常好.多多谅解.须要的朋友也能够继续完好.因为功能也不少.就不贴代码,直接上图,后面会给下载Demo链接. 主界面 我的相冊 这里提示一下.长按点击我的相冊右上角的相

微信朋友圈:应对春节千亿访问量背后的故事

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯技术工程官方号 微信朋友圈包括图片和视频两套业务架构组成,朋友圈图片的特点是请求量大.消耗计算资源较多,视频则主要消耗带宽.朋友圈的数据是永远存储的,而且随着业务的快速发展,存储容量.带宽和设备的消耗大量增加,而重大节日带来的使用量增长,更加剧了消耗,也给运维人员的保障带来了巨大压力. 节日保障主要由三方面组成:软件保障指通过程序.业务逻辑层面的优化和评估,减轻负载:硬件保障主要指带宽.机器负载的评估和扩容:柔性措施指的是通过业

在微信朋友圈冲浪必备的心灵免疫力

南怀瑾老师在<文化泛言>中曾经一针见血地指出了科技的弊端: 今日的世界,由于西方文化的贡献,促进了物质文明的发达,如交通的便利,建筑的富丽,生活的舒适,这在表面上来看,可以说是历史上最幸福的时代.但是人们为了生存的竞争而忙碌,为了战争的毁灭而惶恐,为了欲海的难填而烦恼,这在精神上来看,也可说是历史上最痛苦的时代.在这物质文明发达和精神生活贫乏的尖锐对比下,人类正面临着一个新的危机. 这种危机正同患了癌一样,外部显得很健康,而内部却溃烂不堪.今天我们过分迷信科学的万能,以为自己可以超迈古人,而任

android 滚动栏下拉反弹的效果(相似微信朋友圈)

微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源代码下载:点击 1.效果图 这部手机显示的分辨率有限,非常老的手机调试. 2.具有反弹效果BounceScrollView package com.org.scroll; import android.content.Context; import android.graphics.Rect; im

iOS版微信朋友圈数据库的简要分析

本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/4550523.html 之前写了一些关于微信聊天记录的博文之后,不少同仁向我提出有关导出缓存在手机的微信朋友圈数据的疑问,于是本人做了一些简单的分析,总结了一下微信在iOS存储朋友圈数据的数据格式,但仅仅是猜想而已,希望这篇博文对一些想动手做这方面开发的朋友们有所帮助. 首先,要感谢Wu,MH的指导,Wu提出iOS中微信朋友圈缓存的数据库存放在“//User/App