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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
交互密度与最小交互区域
0.0°
2016-06-08 自译外文 经验/观点 原作者: Bjango 举报 9129 138 110 10

体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。


或许对于一些用户来说,触控区域的大区块,视觉上可能有点难看,但一旦你习惯了这种操作,就会发现他们的体验真的非常棒。


对于要求精确度的任务,比起键盘和鼠标,多点触控方式其实并不适合。因为多点触控很容易受到交互密度的影响。


什么是交互密度?想像一下一台设备的显示,分割成一个个的小方块。每个方块代表的是理想的最小交互区域。简单点说,就是相当于你将很多个按钮两两贴在一起,每个按钮就是你能点击到的最小交互区域。同样的大小里最小交互区域越多,交互密度就越高。

Image title


当然,一台设备上不可能显示的全是按钮,但最小交互区域仍然是存在的。例如在矢量绘图App里,这决定了你是要放大到多大,才能选择出两个单独的点来。

Image title


同一个矢量绘图App里,在较低的交互密度下,你便需要放大到更大的大小才能轻松选取出两个点。

Image title


44pt vs 20pt

iOS上,苹果建议44x44pt作为最小的点击目标区域。这适用于整个系统,苹果的app和第三方app都一样。导航栏高度是44pt,列表行高是44pt,以及许多按钮都是44pt高。虽然也有一些小于这尺寸的例子,但不多见。


对于OS X 系统,没有直接的苹果视觉指导,但有大量可使用的示例资源——如每个OS X窗口左上角的“交通灯”按钮是12x12pt,文件窗口上的标准打开和保存按钮是20pt高,OS X 菜单栏高为22pt,下拉菜单项的高度为19pt。从这看来,使用20x20pt作为OS X上舒适的最小交互区域似乎是明智的,也是合理的。


上面的对比意味着OS X有两倍于iOS的交互密度,加之在X轴和Y轴上,导致了显示同样的内容,iOS上需要4倍的区域大小。这很值得注意。


这尺寸的区别可以在很多地方看到。iOS Mail App的栏高是44pt,其在OS X上则是22pt。iOS上Tweetbot(一个twitter客户端)的分享icon是27pt高,同样其在OS X上只有13pt高。你能发现的每一处这样有意思的比较,iOS都有着大约两倍的高度和宽度。

Image title


显示密度

你可能注意到我上面的比较例子一直使用的都是iOS 点(points)和 OS X 点(points)单位,并没有提及屏幕显示像素密度(Display Pixel Densities)的不同。这是故意而为的,因为像素密度在iOS设备之间,以及Mac设备之间都会有些区别,但是UI本身使用的单位pt在屏幕上显示的尺寸是不变的。


堆栈

不同的输入方法带来不同的交互方式,在同一个的交互区域上,可以堆栈许多交互功能。例如iOS上的一个区域的操作可以是点击,连续点击,长按甚至是3D Touch。


这还不够复杂,在OS X上也有相同的情况,单击、双击、长按、右击鼠标。实际上,鼠标输入也会经常配合键盘的修饰符(⇧, ⌥, ⌃, 和 ⌘)使用。许多设计软件可以通过⌥(Windows里的alt)+拖动来复制。这不是什么稀奇的功能,设计人员每天几乎使用上百次,极大地提高了工作效率。这些快捷操作也可以是另外的方式,但相同点是都不会占用额外的屏幕空间来使用。


在交互栈中,多点触控比不上鼠标和键盘。我有想过键盘可以配合多点触控设备使用,但这种对比与成熟、普及的iOS和OS X操作方式,并不成熟。说实话,这种配合方法是一种不入流的输入方式。


设备的交互区数

忽略堆栈,一台iPad Pro可以容纳大约723个独立的最小交互区域。一台12寸的Macbook呢?2074。最小的Mac设备则拥有比最大的iOS设备多两倍以上的UI显示量。

Image title


这些数据有用吗?对于大部分工作和App来说,并没有多大用处。但对于专业的视频、音乐和设计工作呢?是的,或许其产生的效益比我预想的会更多。


这之中应该存在一个理想的交互密度方案,但显然我还没有研究出来 :) 。多点触控总是受到很多方面影响,包括人类手指的尺寸。


如果多点触控是未来的的话,或许,我们会需要一个更大的屏幕吧。



_______

原文发表于 3月12日

《Interaction density》by Bjango

https://bjango.com/articles/interactiondensity/


更新:2016-06-08

收藏

138人已收藏

shengbanx

希望设计能带给大家好心情

  • 13

    作品

  • 650

    粉丝

  • 18

    关注

  • Facebook.design,以设计回馈社区
  • iOS 10 锁定屏幕将成为新的主屏——分析Redesign
  • 虚拟现实:通往未知的第一步
  • Facebook通话: “评级反馈”的设计思考

    猜你喜欢

      2016-06-08 自译外文 经验/观点 原作者: Bjango 举报 9129 138 110 10

      交互密度与最小交互区域

      0.0°

      你确定要举报交互密度与最小交互区域

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年06月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      110
      138
      10

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

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

      登录

      手机号

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

      登录
      第三方账号登录