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

您所在的位置:网站首页 qq浏览器的主页 「实战」交互设计分析案例·QQ 浏览器

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

2023-05-30 09:31| 来源: 网络整理| 查看: 265

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

笔者站在用户角度,通过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 浏览器类似。

以上。感谢阅读!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3