交互密度与最小交互区域

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

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

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

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

645816

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

645817

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

645818

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的栏高是44pt,OS X上则是22pt。iOS上Tweetbot的分享icon是27pt高,OS X上只有13pt高。你能发现的每一处这样有意思的比较,iOS都有着大约两倍的高度和宽度。

645819

显示密度

你可能注意到我上面的比较例子一直使用的都是iOS 点(points)和 OS X 点(points)单位,并没有提及显示像素密度的不同。这是故意的,因为显示密度在iOS设备之间都会有些区别,以及大多数Mac设备之间,但是UI本身使用的pt点的尺寸是不变的。1pt大小在显示密度低(分辨率低)的设备上显示会比较大,显示密度高的设备上则看起来很小。

堆栈

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

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

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

设备的交互区数

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

645820

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

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

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

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15747/

(0)
交互精选交互精选
上一篇 2016-06-08
下一篇 2016-06-09

相关推荐

  • 交互设计新人在阿里的走心实习总结 ▏新手设计成长指南

    互联网行业的设计师,工作中是埋头苦干?还是想要寻找一些能真正提升自己的“诀窍”?其实很多时候,所谓“诀窍”,就是厘清自己的思路,让成长有正确的方向。本文的作者走心地梳理了他在阿里几个月的实习期里为他留下…

    2017-08-04
  • 初步谈谈iOS11的交互设计

    这是一篇很赶的文章。源于我看到iOS11的介绍后的一些想法,希望能在此跟大家聊聊。从iOS11的更新中我们可以看到苹果的两个方向:1、提升iOS的生产力;2、应用之间更加的无缝衔接和单应用的无声扩张。我们来看第一个…

    2017-08-01
  • 准备入行交互设计之前,先来搞清楚这些基本概念

    一直以来,经常有学生来问我,“是该选产品设计好还是交互设计好?”或者“过去是做产品设计的可不可以转交互设计?”“是不是视觉设计转交互或者界面设计方便点?”等等诸如此类的问题。笔者注:“产品”既可以是物质化的…

    2017-08-03
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 异步交互设计漫谈:单机在这里“抄袭”了网游

      “玩家交互”作为游戏中“网络元素”的核心体现已经获得了游戏制作者与游戏玩家的普遍重视。在网络游戏中,如何让玩家获得更加自由、更加全面的交互体验成为了一款网络游戏的重要课题;而在传统意义上的单机游戏里…

    2017-08-02
  • 互联网理财平台交互设计再设计

    一、项目背景互联网理财平台,支付渠道升级,由原来的新浪托管换成富友、宝付支付。这就意味着平台需要对账户资产页面及交易流程进行重新设计。用户在购买理财产品时,只能通过平台的账户余额进行购买。如果账户余…

    2017-08-01
  • 交互设计的未来

    数十万互联网从业者的共同关注!译者:小媛作者:Terry Cao ,发表于DESIGN & DEV译文地址:http://www.jianshu.com/p/daaa353e6d95译者授权早读课发表,转载请联系译者。欢迎投稿到早读课,投稿邮箱:mm@zaodu…

    2017-08-04
  • 交互设计的五要素

    在公众号里经常收到朋友的留言,到底什么是交互设计师?交互设计师具体是干什么的?为什么很多互联网公司都没有交互设计师这个岗位?希望通过这篇文章把交互的本质说清道明。互联网产品与需求早晨迎着第一缕阳光醒…

    2017-08-04
  • 交互设计工作记录(二)

    作者:飞阿婷的交互设计生活 系列:交互设计工作记录 互联网热点引发的思考 对百度用户体验总监刘超事件,怎么看? 首先,他此次的表现的确挺让人失望的,主要是态度问题,不够尊重台下好学且交了学费的设计师们,…

    2016-07-06
  • 交互设计中的心理学

    整理认知心理学中对交互设计(用户研究)有所启发的一些知识点(参考《认知与设计——理解UI设计准则》)包括:中央凹与边界视野——如何呈现信息以获取注意力格式塔原理——如何处理不同界面元素的关系时间感知——如何让…