「实战」交互设计分析案例·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 浏览器类似。
