20171219

再不看微信的情况下,绘制微信的功能、交互界面(尽可能的体现其核心功能、交互、内容);提升对微信整体和细节上的把握;希望能够提升本篇文章的质量和自己的思维。

希望通过对微信细节上的把握,能够细致的思考何谓优秀的体验,也相信能够给大家带来新的启发。

先梳理一下微信的发展历程:

11年1月,微信1.0版,QQ号导入、即时通讯功能(文字)、分享照片、更换头像;

1.1、1.2、1.3版本,支持了手机通讯录的读取、多人会话的功能(群)、支持发送表情;

11年5月,2.0版,增加了语音对话功能,用户量明显增加;

2.1、 2.2、 2.5版本,支持视频、查看附件的人,用户量明显增长;

11年10月,3.0版,摇一摇、漂流瓶、支持繁体中文、港澳台美日用户可绑定手机号;

3.1-3.5版,文字语音切换、听筒模式、二维码、英文界面,支持100多个国家;

12年3月,用户破亿;

4月,4.0版,相册、朋友圈,增强用户粘性;

7月,4.2版,视频聊天、网页版、朋友圈回复;

9月,4.3版,摇一摇传图、解绑手机号QQ号、语音搜索功能、动态表情下载、扫一扫;

13年8月,5.0版,新版扫一扫、支付、游戏中心、表情商店。

14年9月,6.0版,增加微信小视屏(进入视频时代)、微信卡包功能、游戏中心改版,如图2(借图)。

写作角度:结合手稿,思考微信在什么地方的什么功能实现了怎么样的交互,它为什么这么设计(功能&交互),并运用KANO模型对功能进行简单分类。

正文

图标、欢迎界面:

微信的图标是以连两个“信息”图片依靠在一起所组成的,且两个“信息”图片上都有两个点,如同营造出两个小人相互依靠的感觉。但是,当点击进入微信之后,其欢迎界面是一个人孤独的站在星球上的场景,显得非常渺小和孤独。

分析:为什么这两个图标有这么大的差异呢?试想一下用户的使用场景,当他无聊时,希望找一个人聊天,首先看到的是一个能够给以依靠感觉的图标,再当其点击进入之后发现自己那种孤独感被再次激发和放大,那么当其最终进入聊天界面时,就已经达到了聊天的最大渴望值。点击进入之后,其显示的主要为底部的四个标签式TAB,分别诶:微信、通讯录、发现、我。

微信:

当微信重新开启之后,显示的第一页是微信记录页。分析:因为人经常聊的人不多,所以进入的是记录页而不是进入通讯录页面。如同《人类简史》所说的人类的内心本质并不是趋向于大范围的合作,而是社会营造的很多虚拟的东西所促成人类的集体活动,如图5。

进入之后,中心内容刚好为9个list(记录列表),且不显示搜索栏(而通讯录是显示搜索栏的),因为最为核心的内容是聊天的内容和主要聊天的人。

向下查看多个List之后,只需要点击顶部“微信”标题的上部(显示信号、运营商、时间、电量),就可以直接到最顶端,且会显示搜索栏,连最顶部也设计了相应的触发,提高用户的体验,如图6。

想要删除某条记录时,当用户向左滑动时,右边的红色删除按钮会部分显示出来,进行删除的提醒。当左移记录时,如果移动的距离没有超过“删除”红色框的范围,将重新缩回,目的是为了防止用户的误操作以及提示。

然后是对其内容的设计,在微信的列表记录里所显示的内容有:头像名称最新的内容时间、免打扰设置,群里会显示未读取的信息条数,为什么个人、群和公众号的显示列表的信息都是这样的呢?头像和名称是个人基本信息的显示,然后需要有最后的聊天内容和最后的时间,都是非常必要的,所以除了显示免打扰信息之外,其他都是必要的核心信息,所以微信显得即干净又实用。

当点击进入聊天时,其输入框默认为文字输入,而语音输入需要点击后切换。语音输入时,只需要将原本按住的手指上滑之后,就能够取消发送,这个交互非常适用。语音按钮能够有1s的误差判断,只有输入超过1s后才会发送,且能够读取到1s前所说的语音,防止误操作。一条语音的最长时间为60s,在其临近于1分钟时,会进行倒计时10s的提示。在2分钟内,可对发出去的信息撤回。语音按钮的文字“按住 说话”、“松开 结束”,中间有空格,对文案的编排,在每个细节上都进行精心设计,如图8。

播放语音时,会有两种模式,听筒模式和扬声器模式,通过软硬件识别相应的场景,使语音播放更加适宜,为用户在不同的使用场景中提供最佳体验。接着是对内容的设计,在人的生活习惯中,常会涉及到回忆、查询自己在什么时候说了什么话,所以在聊天的过程中需要显示相应的时间。但是如果每条信息之后都有时间就会把界面变得繁杂,且不利于聚焦聊天的核心内容。微信设定在相隔5分钟之内的消息不会再次显示时间,且显示时间的格式为小时+分钟、昨天+小时+分钟、星期几+小时+分钟、XX年X月X日+小时+分钟,如图9。

点击“微信”的添加项(“+”),有发起群聊、添加朋友、扫一扫、收付款功能项。发起群聊可以选择以前已经建立的群,也可以新建群聊天。添加朋友,具有各种方式的添加方式,其中还设置了“我的微信号、二维码“,设想一下应用场景,当你添加完别人之后,可能存在着别人来加你的情况,更加方便的提供一个入口,如图10。

扫一扫中,有扫码、封面、街景和翻译。扫码,可直接将二维码放置到扫描区识别,这是一个实体的扫描,同时在右上角有一个相册,点击进入相册之后,能选择一张二维码图片,自动扫描,这是数字化的扫描。封面扫描,是对书、CD、电影海报的信息显示,是对物联网的体现,如图11。

收付款功能中,分为向商家付款、二维码收款、赞赏码、群收款、面对面红包、转账到银行卡6项。向商家付款,既有付款码数字(点击可以查看,而且贴心的显示为横屏),下方为金额的来源,如零钱等。

搜索框,当移动微信的记录内容时,当移动搜索框超过其底部线的时候会自动适配上,显示6个list。其中,分为文字搜索和语音搜索,文字搜索可以搜联系人、群、记录、朋友圈、公众号、小说、音乐、表情。而语音搜索,只搜索联系人、公众号(已订阅),如图12。下方会显示你最近使用过的小程序。为小程序的另一个入口

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,923评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,154评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,775评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,960评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,976评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,972评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,893评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,709评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,159评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,400评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,552评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,265评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,876评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,528评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,701评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,552评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,451评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,050评论 25 707
  • 上个月休年假,我去了上海一趟看望我的闺蜜W姑娘,我在虹桥火车站地铁口等着她来接我,我心里算了一下,我们大概有一年多...
    达达令阅读 807评论 3 8
  • 很累 不知道为什么,为自己设定了很多改变的场景。但是都没有出现。我怎么了?不能这样了知道吗? 苦难,不是人生的必需...
    Dorias一只流浪的猫阅读 230评论 4 4
  • 《等》 小时候,院子里 樱桃树长的好看,五月初 挂果摇曳,露出成熟之美 我红着脸问娘,可以先给我吃几颗吗? 她说,...
    刘亚宁阅读 217评论 0 3
  • 这是一封写给爸妈的信……心里有太多的话想对他们说,却不知道怎么开口。思来想去,还是写信比较合适。 你们总说我是个不...
    LJYYY怡阅读 271评论 0 3