QQ Mac版 Touch Bar功能设计

苹果在近期推出了新款Macbook Pro,以Touch Bar取代了原有的功能键。相信每个Mac产品团队都在思考,该如何利用它给用户带来更好的使用体验。在此分享一下QQ Mac版团队的一点思考。

Touch Bar是什么

想利用好Touch Bar,先要明白它是什么。通过苹果官方的介绍,可以了解到,苹果对Touch Bar的定义是“用来与主屏幕内容交互的具有动态界面的输入设备”。所以我们要明白它的两个主要特性:

1、是键盘的延伸:Touch Bar虽然是一块屏幕,但是他并不作为显示设备,而是输入设备。它的设计初衷是希望用户能快速定位功能、调整参数,用户使用时的注意力应尽量在屏幕上,低头看Touchbar反而会降低使用效率。

2、随焦点而变:Touch Bar上显示的功能会随着屏幕焦点的变化而变化,使得拓展性大大加强。因为与屏幕焦点直接关联,Touch Bar不光能随着应用的改变而变化功能,在同一个应用的不同页面,也可以有不同的功能,其状态、反馈均与屏幕保持一致。

设计原则

苹果对Touch Bar的设计给出了完整的设计规范,这里不再赘述。

在初步体验过后,我们发现Touch Bar使一些使用场景变得更有效率也更有趣,但是功能项随着应用和页面频繁变动,也导致学习成本非常高,不熟练的时候经常需要低头看。因此我们认为想要提升使用效率,降低学习和记忆成本,达到“抬头操作”的目的的话,还需注意以下几点:

1、固定键位:在一个应用中,有些功能可能在多个页面出现,这些功能的按键应尽量处于同样的位置,并与屏幕中的位置和顺序保持一致,最大程度上降低学习成本,培养手感。

2、屏幕反馈:通过Touch Bar操作功能时,屏幕应实时给出明确的状态变化和提示,使得用户无需低头看Touch Bar,直接抬头完成操作。由于Touch Bar只能横向滑动,屏幕状态或提示尽量也采用横向布局,保持操作与反馈的认知一致性。

3、保证点击:对于键盘来说,最基础的交互方式就是点击,因此Touch Bar上的功能都应该支持最基本的点击相应事件。对于有些复杂的编辑或选取功能,可以考虑在按钮支持点击的基础上,支持长按、滑动等手势进行快速操作,这样既能与用户已有的使用习惯保持一致,同时兼顾操作的快捷性。

4、流程完整:Touch Bar上发起的功能,最好能在Touch Bar上结束。因为如果后续操作需要通过键盘、触控板或鼠标完成,会带来手的频繁位移,效率并没有提升。

功能选取

Touch Bar虽然可以变化,但是毕竟空间有限,不可能将所有功能都放上去。而且它虽然扩展性很强,但是不能后台响应,使用场景比快捷键要受到限制。

对于QQ Mac版,哪些功能适合放到Touch Bar上呢?经过几轮脑暴,结合实际使用场景和Touch Bar规范,我们认为有3个方向:

1、特色的高频功能调起:比如QQ用户最常用的提取消息、搜索,是在任何界面都会使用的功能,非常适合固定在Touch Bar上,方便使用。

2、触控板、快捷键支持的不够好的功能:从使用场景来看,Touch Bar在鼠标效率低或没有鼠标的场景下更能发挥价值。快捷键键位有限,Touchpad手势有限,自定义的话容易与系统或其他应用冲突,因此往往只能用于最常用的功能。对于其他的次高频功能,可以考虑通过Touch Bar来承载,提升使用效率。

3、通过独有交互简化操作步骤:Touch Bar不光使得屏幕上的功能有了一个对应的按键,还赋予了这个按键长按、滑动等手势。这就好比在触屏上增加了3D Touch的功能,交互的维度得到提升,这就使得原本需要多步操作的功能有了一步完成的可能。比如QQ发送语音消息。

方案设计 

我们选取了几个典型场景来进行Touch Bar的功能设计。 

1.通用场景

通用场景是指主面板无焦点的场景,比如刚登陆时。在该场景下,Touch Bar上承载提取消息按钮、搜索按钮、模式切换按钮。

提取消息按钮

提取消息是QQ用户在任何界面都会使用的全局功能。以往快捷键(cmd+control+Z)只能支持用户按照时间顺序查看未读消息。加入Touch Bar后,用户可以通过长按快速定位至想要的未读消息,效率更高。该功能键会常驻在Touch Bar的第一个键位,出现在任何界面,便于用户养成习惯。

搜索按钮

用户使用QQ时,经常会有通过搜索找到某个人,并发起会话的场景,因此搜索功能也是最常用的全局功能之一。该功能的快捷键(cmd+F)刚支持不久,用户熟悉度较低。将其固定至Touch Bar后,点击搜索按钮可将光标直接定位至搜索框。该功能也会常驻在Touch Bar的第二个键位,出现在任何界面。

模式切换按钮

极简模式是5.0新加入的特色功能,现有快捷键(cmd+E)用户熟悉度较低。有了Touch Bar后,会使功能曝光增强,无鼠标场景下的切换效率提升。该功能与会话并不是强相关,因此该按钮将只出现在通用场景下。

2.AIO输入

用户聊天时,焦点处于输入区,Touch Bar出现辅助输入工具。

表情按钮

聊天时,表情是最常用的功能之一。因此在聊天场景下,我们选取了表情功能放在Touch Bar上。点击按钮可调出表情分组和常用表情,与提取消息类似,长按可调出常用表情列表,滑动松手即可发送。

语音消息按钮

现在发送语音消息时,需要先进入语音模式,然后按住空格开始收音。加入Touch Bar后,点击仍然相应原有的进入语音模式操作,但是长按可以直接开始收音,松手即发送,横划可撤销,简化了操作步骤,也还原了移动端发送语音消息的体验。

3.图片查看器

图片查看器是个典型的二级页面。在查看器中,由于触控板主要用于双指缩放,旋转图片只能通过鼠标;自适应和1:1显示的快捷键(Touchpad双击或cmd+0)用户使用度较低。这两个次高频功能加入Touch Bar后,使用户更容易快捷操作。另外用户无需进入相册即可快速切换图片。

写在最后

Touch Bar是苹果对键盘交互的一次克制的尝试,它终于让触摸交互出现在了Mac OS上,带来了更多交互的想象空间。相信Touch Bar仍有潜力等待人们挖掘,带来更好的使用体验。

感谢你的阅读,本文由腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2017-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯云技术沙龙

刘敏洁:API网关和SCF深度结合应用

这次我们主要介绍面向于API网关和SCF深度结合应用,API网关与SCF结合可以形成比较完整的Serverless方案。

4303
来自专栏即时通讯技术

IM开发基础知识补课(二):如何设计大量图片文件的服务端存储架构?

一个完善的IM系统中通常充斥着大量的图片内容,包括:用户头像、图片消息、相册、图片表情等等,那么在做服务端架构设计时该如何存储这些图片呢?

2954
来自专栏IT米粉

打造属于自己的博客app——基于react native和博客园接口

关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完...

2955
来自专栏ytkah

wamp支持win10吗?怎么设置?

  上周ytkah总算把系统升级到win10了,可怎么设置wamp支持win10呢?启动wampwerver是处于黄色状态,打开本地页面是空白,应该是端口问题。...

3659
来自专栏我和我大前端的故事

入门微信小程序 (一)

小程序已经快两岁的,我才入坑,刚刚入坑那会我使劲和我朋友抱怨,太难了,学不动,不想学,不学了。硬着头皮死磕一遍文档,然后觉得也没有我想象中那么难。或许是因为语言...

2702
来自专栏IT大咖说

通过QQ浏览器内核看browser性能优化

摘要 QQ浏览器内核架构组负责人,通过QQ浏览器X5内核在加载速度、流畅度方面所做的优化工作,带你了解浏览器内核的工作原理、展示前端优化的指导性原则、以及更佳的...

5045
来自专栏非著名程序员

强烈推荐:绝对是最好的一个小程序开源框架

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程...

2104
来自专栏沈唁志

在ThinkPHP5框架中使用QueryList4做采集

2183
来自专栏企鹅号快讯

小程序也有“home”键盘了!

微信小程序最近仿佛是消停了一会儿儿,没有深夜袭击,不过还是有不断地小更新,今天就来给大家唠叨两个新变化。 --小程序安卓用户更新 12月22日,微信更新了安卓版...

2435
来自专栏用户2442861的专栏

数据库Sharding的基本思想和切分策略

http://blog.csdn.net/bluishglc/article/details/6161475

1042

扫码关注云+社区

领取腾讯云代金券