企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

分析腾讯ISUX丨QQ MAC版TOUCH BAR功能设计实战经验来了!

发布时间:2016-12-16 10:29:08

TAGS:网站设计

设计实战经验.jpgMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

苹果在近期推出了新款Macbook Pro,以Touch Bar取代了原有的功能键。相信每个Mac产品团队都在思考,该如何利用它给用户带来更好的使用体验。在此分享一下QQ Mac版团队的一点思考。
MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Touch Bar是什么MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

想利用好Touch Bar,先要明白它是什么。通过苹果官方的介绍,可以了解到,苹果对Touch Bar的定义是“用来与主屏幕内容交互的具有动态界面的输入设备”。所以我们要明白它的两个主要特性:MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1、是键盘的延伸:Touch Bar虽然是一块屏幕,但是他并不作为显示设备,而是输入设备。它的设计初衷是希望用户能快速定位功能、调整参数,用户使用时的注意力应尽量在屏幕上,低头看Touchbar反而会降低使用效率。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2、随焦点而变:Touch Bar上显示的功能会随着屏幕焦点的变化而变化,使得拓展性大大加强。因为与屏幕焦点直接关联,Touch Bar不光能随着应用的改变而变化功能,在同一个应用的不同页面,也可以有不同的功能,其状态、反馈均与屏幕保持一致。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计原则MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

苹果对Touch Bar的设计给出了完整的设计规范,这里不再赘述。(已有翻译:《苹果TOUCH BAR 官方人机交互指南(附设计模板)》)MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

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


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1、固定键位:在一个应用中,有些功能可能在多个页面出现,这些功能的按键应尽量处于同样的位置,并与屏幕中的位置和顺序保持一致,大程度上降低学习成本,培养手感。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2、屏幕反馈:通过Touch Bar操作功能时,屏幕应实时给出明确的状态变化和提示,使得用户无需低头看Touch Bar,直接抬头完成操作。由于Touch Bar只能横向滑动,屏幕状态或提示尽量也采用横向布局,保持操作与反馈的认知一致性。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3、保证点击:对于键盘来说,基础的交互方式就是点击,因此Touch Bar上的功能都应该支持基本的点击相应事件。对于有些复杂的编辑或选取功能,可以考虑在按钮支持点击的基础上,支持长按、滑动等手势进行快速操作,这样既能与用户已有的使用习惯保持一致,同时兼顾操作的快捷性。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

4、流程完整:Touch Bar上发起的功能,好能在Touch Bar上结束。因为如果后续操作需要通过键盘、触控板或鼠标完成,会带来手的频繁位移,效率并没有提升。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

功能选取MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Touch Bar虽然可以变化,但是毕竟空间有限,不可能将所有功能都放上去。而且它虽然扩展性很强,但是不能后台响应,使用场景比快捷键要受到限制。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

对于QQ Mac版,哪些功能适合放到Touch Bar上呢?经过几轮脑暴,结合实际使用场景和Touch Bar规范,我们认为有3个方向:MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1、特色的高频功能调起:比如QQ用户常用的提取消息、搜索,是在任何界面都会使用的功能,非常适合固定在Touch Bar上,方便使用。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2、触控板、快捷键支持的不够好的功能:从使用场景来看,Touch Bar在鼠标效率低或没有鼠标的场景下更能发挥价值。快捷键键位有限,Touchpad手势有限,自定义的话容易与系统或其他应用冲突,因此往往只能用于常用的功能。对于其他的次高频功能,可以考虑通过Touch Bar来承载,提升使用效率。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3、通过独有交互简化操作步骤:Touch Bar不光使得屏幕上的功能有了一个对应的按键,还赋予了这个按键长按、滑动等手势。这就好比在触屏上增加了3D Touch的功能,交互的维度得到提升,这就使得原本需要多步操作的功能有了一步完成的可能。比如QQ发送语音消息。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

方案设计MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们选取了几个典型场景来进行Touch Bar的功能设计。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1. 通用场景MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

通用场景是指主面板无焦点的场景,比如刚登陆时。在该场景下,Touch Bar上承载提取消息按钮、搜索按钮、模式切换按钮。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

提取消息按钮MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

提取消息是QQ用户在任何界面都会使用的全局功能。以往快捷键(cmd+control+Z)只能支持用户按照时间顺序查看未读消息。加入Touch Bar后,用户可以通过长按快速定位至想要的未读消息,效率更高。该功能键会常驻在Touch Bar的第一个键位,出现在任何界面,便于用户养成习惯。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

搜索按钮MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

用户使用QQ时,经常会有通过搜索找到某个人,并发起会话的场景,因此搜索功能也是常用的全局功能之一。该功能的快捷键(cmd+F)刚支持不久,用户熟悉度较低。将其固定至Touch Bar后,点击搜索按钮可将光标直接定位至搜索框。该功能也会常驻在Touch Bar的第二个键位,出现在任何界面。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

模式切换按钮MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

极简模式是5.0新加入的特色功能,现有快捷键(cmd+E)用户熟悉度较低。有了Touch Bar后,会使功能曝光增强,无鼠标场景下的切换效率提升。该功能与会话并不是强相关,因此该按钮将只出现在通用场景下。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2.AIO输入MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

用户聊天时,焦点处于输入区,Touch Bar出现辅助输入工具。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

表情按钮MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

聊天时,表情是常用的功能之一。因此在聊天场景下,我们选取了表情功能放在Touch Bar上。点击按钮可调出表情分组和常用表情,与提取消息类似,长按可调出常用表情列表,滑动松手即可发送。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

语音消息按钮MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在发送语音消息时,需要先进入语音模式,然后按住空格开始收音。加入Touch Bar后,点击仍然相应原有的进入语音模式操作,但是长按可以直接开始收音,松手即发送,横划可撤销,简化了操作步骤,也还原了移动端发送语音消息的体验。MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

3.图片查看器MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联


MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

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

blob.pngMVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Touch Bar是苹果对键盘交互的一次克制的尝试,它终于让触摸交互出现在了Mac OS上,带来了更多交互的想象空间。相信Touch Bar仍有潜力等待人们挖掘,带来更好的使用体验。
MVH北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,6996,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号