「实战」交互设计分析案例·QQ 浏览器

本文为笔者学习网易云课堂《交互设计师·微专业》课程期间的实践作业,仅供学习交流,严禁盗用。

笔者站在用户角度,通过5大使用场景,研究了QQ浏览器,并针对交互设计方面的优缺点进行了整理与分析,欢迎留言交流。


产品:QQ 浏览器 APP
版本:IOS版 [7.4.0.3046]

一、如何让目标明确型用户快速查找信息

1、通过文字输入方式

在移动环境下,用户遇到问题时会想要上网查找资料,他的目标很明确,就是要快速输入并得到答案。

QQ 浏览器将主功能放置在首页最明显的位置,并把搜索引擎与网址输入框合并,让用户不用思考就能知道从这里输入文字可以找到信息。

QQ 浏览器-首页-文字输入
  • 用户点击输入框后,随着键盘出现,输入框同时向上移动,页面进入简洁模式,去除了其他多余元素,以帮助用户更加专注于当前任务。
  • 当用户输入关键词时,借助搜索引擎,系统自动进行联想,帮助用户更快的输入, 并找到相关信息。

缺点:
QQ 浏览器更多的关注了搜索,而没有为用户提供网址前缀与后缀的快捷输入,当用户想要直接输入一个网址时,还需要切换输入法,并自己拼写网址全称。

UC浏览器-搜索输入

对于这方面,竞品 UC 浏览器做了优化,在保持同样功能的前提下,不仅在用户输入网址前提供常用前缀,还在用户输入域名后提供常用后缀选择,并且 UC 浏览器还提供光标跟随滑块移动的功能,解决了用户无法将光标定位在指定位置的难题,大大提升了用户体验。

2、通过二维码扫描方式

在中国,随着移动互联网的发展,二维码已经随处可见。而用户想要知道二维码里的内容,只需要随手打开浏览器,通过扫码或导入二维码照片就能获得相关信息。

QQ 浏览器-首页-二维码扫描
  • 扫码入口放在输入框右侧,同样可以让用户快速发现并使用。
  • 用户点击二维码图标,打开扫码页面,通过相机功能对二维码进行扫描,得到结果后自动打开对应网页,方便快捷。

缺点:
二维码图标不够突出,且与语音输入按钮靠的太近,会让用户误操作。

UC浏览器-首页-二维码扫描

由于二维码相对语音功能更为常用,竞品 UC 浏览器只是将语音与二维码的位置调换一下, 将二维码的 icon 放在最右边,扩大了点击区域的同时,也降低了常用功能的误操作频率, 很好的提升了用户体验。

3、通过语音输入方式

当用户不方便文字输入时,还可以开启语音输入来查找想要的信息,让搜索更加便捷。

与扫码类似,语音入口放在输入框右侧,同样可以让用户快速发现并使用。

QQ 浏览器-首页-语音输入
  • 用户点击语音输入按钮后,界面进入说话提示页,系统用动效及文案提示用户可以
    说话。
  • 当用户说出某个词后,系统自动识别用户语言,并采用对话框的形式表现出来,增强互动性。若系统搜索到相关内容,实时展现搜索结果,可以让用户在几秒内就找到信息。

缺点:
语音识别的功能仍不完善,无法精确识别用户所说的话,有可能导致识别错误。

对于语音输入的功能,竞品 UC 浏览器只是做了语音识别后自动搜索的功能,没有对搜索结果做对话式的场景化处理,相对于 QQ 浏览器显得比较普通。

二、用户如何高效管理已打开的网页

不同于 PC 环境下的大屏幕,对自己打开的网页,用户只能专注浏览当前一个页面, 无法快速切换浏览之前打开的页面,也无法在一个屏幕下查看与管理所有网页。

QQ 浏览器将网页的管理作为独立模块重点设计,并在底部菜单栏给予独立的功能入口。根据移动端的特性,利用卡片式设计,将网页与卡片进行类比并叠加显示, 有效解决了小屏幕多网页同时展示的需求。

QQ 浏览器-标签管理
  • 用户点击底部菜单页面管理入口,显示 N 张卡式网页,当用户点击任意一张卡片, 卡片放大并显示对应网页详情。
  • 用户点击卡片上的关闭按钮,或者手势左滑、右滑,即可快速关闭该网页。

缺点:
关闭的左右滑动手势会使用户产生误操作,且没有撤销功能,用户若误关闭,只能重新搜索。

竞品 UC 浏览器也采用卡片式管理,但左右滑动卡片关闭网页的交互方式显得比较生硬,没有 QQ 浏览器生动形象。误关闭的缺点也同样存在。

不过 UC 考虑到用户想要一次性关闭所有网页这个需求,在原有的基础上增加了批量关闭的功能。用户长按卡片,所有卡片自动收缩在一起形成整体,用户左右滑动或点击关闭,即可一次性关闭所有网站,提升网站管理效率。

三、用户如何管理自己的常用网站

1、多平台书签云管理

习惯用电脑浏览器的用户会收藏很多重要网址,但在没有电脑的情况下,用户用手机浏览网页时需要快速找到以前收藏的网站。

QQ 浏览器通过账户体系,同步电脑书签与手机书签,让用户不管在哪种环境下,都能快速找到自己收藏的网站。

QQ 浏览器-书签管理
  • 用户点击主页的菜单栏,弹出层中直接显示添加书签及书签/历史功能,入口清晰易 找。
  • 用户点击“书签/历史” ,进入书签管理页,若是已登录用户,可直接查看电脑同步 过来的书签,也可以查看和管理手机浏览时添加的书签。

缺点:
手机书签与电脑书签没有合并,会导致用户重复添加书签,增加管理难度。

竞品 UC 浏览器不仅具有以上书签云管理功能,还增加了头条收藏功能,使传统的书签概念扩大为收藏功能,挑战用户认知,有创新也存在风险。

2、首页导航设置

对于浏览器重度用户来说,能够快速找到自己的常用网址是一件很爽的事。

QQ 浏览器不仅在首页提供了大众常用网站的快捷入口,还提供快捷入口的编辑管理,让用户自己设置,形成个性化主页。

QQ 浏览器-首页导航
  • 用户点击主页里的添加 icon,即打开常用网址的推荐页面,用户可以直接选择添加,也可以通过书签、历史或输入网址等方式来添加,添加后直接在主页排列显示。
  • 用户长按主页面里的任意一个快捷 icon,页面变成 icon 管理状态,用户可以点击删除或移动 icon 位置,操作与 IOS 系统的 app 管理一致。

缺点:
删除 icon 时没有确认框,用户很容易误删。

竞品 UC 浏览器的导航标签管理的功能隐藏较深,用户需要在主页向左滑动才能显示标签管理页。当用户删除了标签管理页中的标签后,主页中的导航标签仍然存在,会造成用户疑惑: 为什么我删除的东西还存在?此功能非常不友好。

四、如何帮助用户节省流量

当用户在没有无线网络的环境下,会使用流量查找资料,但用户无法预知查找网页中显示内容的多少,一次查找后,可能会浪费很多流量。

QQ 浏览器提供无图模式功能,在打开一个网页时,自动为用户屏蔽了所有图片缓存,节约了大部分流量。

QQ 浏览器-流量提示
  • 用户点击底部主菜单栏中的图片 icon,弹出选择框让用户选择采用哪种模式,用户选择后,即时生效,所有未加载完的图片均不显示。
  • 当用户再次点击主菜单栏中的图片 icon 时,即关闭无图模式,回到正常浏览模式。

缺点:
当用户查找的信息中有重要的图片需要显示时,还需要切换回正常模式才能看到图片,将主要任务的流程拉长了。

竞品 UC 浏览器也有无图模式,但他只提供移动流量下的无图模式,用户无法自主选择其他环境下的无图模式。

五、如何快捷分享当前网页中的信息

当用户浏览网页看到一个重要的信息时,想要分享给朋友,但直接分享页面或者截屏会让对方不知道重点在哪里。

QQ 浏览器为用户提供了网页截图功能,并可以对截图进行编辑与标注,使分享信息更加便捷、明确。

QQ 浏览器-分享
  • 用户浏览某个网页时,点击底部主菜单栏中的工具箱,弹出层显示各种工具,选择 “网页截图”,系统即将当前屏幕显示的页面自动截屏,同时进入图片编辑页。
  • 用户对图片进行线条或文字标注后,点击分享,即可选择各种方式分享给朋友。

缺点:
只能对当前屏幕显示的页面进行截图,无法对整个网页截图,可能会造成信息不全面。

竞品 UC 浏览器的截图分享功能与 QQ 浏览器类似。

以上。感谢阅读!

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

推荐阅读更多精彩内容