恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
方寸之间,看见未来
0.0°
2016-11-17 原创文章 经验/观点 举报 1088 2 2 0


-


随着新一代MacBook Pro的发布,除了更轻更薄更贵的同时,也在键盘最上方首次加入了一条2170×60px(除Touch ID传感器部分)的Touch Bar,终于苹果还是给Mac带来了多点触控,想以此让作为生产力工具的MacBook Pro进一步提高生产力。


由于尚未体验到真机,是否真的可以提高生产力,就不妄下定论了。但今天我们还是可以先通过最新版的macOS人机交互指南,来了解领会下其中的设计交互规范与这一新产品特性背后的思考。


Image title



关于Touch Bar

-

Touch Bar实质上是由T1处理器承载的介于iOS和watchOS之外的一个简化变种的OS,在系统层面上包括了系统按钮,应用程序区,控制条和Touch ID这四个主要部分组成。


Image title


这里的系统按钮与控制条就是之前键盘上的实体功能键,Touch ID的功能和iOS上功能一致。最为重要的就是应用程序区了,可以说是整个Touch Bar的核心。


Image title

Image title


首要的一点就是要根据主屏幕上的内容提供相应的功能控件与之进行动态的交互,要让用户体验有着立竿见影的提升。对于功能控件UI样式最好与真实的物理键盘外观匹配,也需要避免与比较常用的键盘快捷键重复。



交互

-

对于交互手势上最常用的如手机屏幕一样点击和滑动(横向平移),对于Touch Bar点击和滑动是再合适不过的交互手势了。当然也有长按和多点触控了,但很显然在这里的体验是不好的,所以也是不推荐使用的。


Image title


全屏状态下,在这种状态下应用软件区的好处和便利性不言而喻了,比如你看电影时,用Keynote做报告演讲时,本来隐藏掉的相关功能键只要你需要都会在出现在触摸栏。


Image title


允许自定义,谁都无法预测和满足各种用户的个性化需求,所以在这里自定义是十分有必要的。也需要考虑视力,听力有问题等其他特殊用户群体的使用无障碍,这一点很重要。


Image title


视觉设计

-

禁止使用动画,不要把Touch Bar当成了主屏的小分屏,它严格意义上只是可扩展的键盘区,担任的角色是主要是输入而不是显示。而且动画会使注意力在主屏上的人分心,降低工作效率。


尽量使用macOS中相匹配的色彩规范,外观上与物理按键相似且单色为佳。当然了运用自己程序的主色调按钮来与整体界面上下呼应也很重要。


Image title


在按钮的排版布局上,以下这四种布局基本是可以满足需求。

Image title

Image title

Image title

Image title


字体就不用说了San Francisco。



icon

-

在可以使用系统图标的情况下,尽量使用系统提供的图标。图标的大小为36×36px,后缀为@2x。当需要自定义图标,参考系统图标规范来设计,比如颜色,倒角等。在原先的macOS的规范里已经为我们提供了基本够用的图标了。

Image title



下一代生产力工具

-

在当前多点触控屏还未成为主力生产力工具的时候,在键盘上方添加一个可触控的区域,与其说是为了提高系统的用户体验和增加交互上新方式,倒不如说让我们对下一代生产力工具有了些许的期待和想象的空间。


当我们习惯适应了的操作区是全触控屏,主屏用AR设备代替,这或许是在现有技术上可实现的最佳的下一代桌面生产工具了。相信用不了多久科幻电影中常用的画面就会出现在你我身边,因为实际上这类产品已经有很多公司在不断的取得不俗的成果,且有较成熟的产品产出。


Image title


除了大名鼎鼎的「Magic Leap」和「HoloLens」,这里不得不提是「Meta」这家公司,在前不久发布的Meta 2中,我们似乎已经触手可及到下一代的生产力工具了。显然目前的产品在头显上,系统生态,交互视觉上都有需要提升的地方,但起点已经足够的高了,想想第一代MacBook与现在MacBook的变化。


Image title

Image title


让我们期待下一代生产力的到来吧。




- END -


Image title



更新:2016-11-17

收藏

2人已收藏

alai

设计太有趣了

  • 7

    作品

  • 5

    粉丝

  • 0

    关注

  • 心向往之
  • 《黑镜-急转直下》抛却讽刺,先看设计与科技
  • Path,好久不见
  • 刷完Dribbble, 来刷刷这几位的Instagram吧
相关标签

    猜你喜欢

      2016-11-17 原创文章 经验/观点 举报 1088 2 2 0

      方寸之间,看见未来

      0.0°

      你确定要举报方寸之间,看见未来

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年11月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录