品玩

科技创新者的每日必读

打开APP
关闭
数码产品

触摸控件设计:44 像素点法则不再适用

在触摸控件的设计中,“最佳区域”和“最佳大小”是最关键的两个问题,人们对不同尺寸设备操控方式的差异导致了控件位置的不同,同时,随着分辨率的提高,苹果提出的控件最小为44 pixels的法则也不再适用。

陈粲然 Ray

发布于 2013年4月4日

移动设备与PC设备很大的个不同是——它让我们抛弃了键盘和鼠标,用触控去进行人与智能终端间的交互。最近,在An Event Apart 上,Josh Clark分享了在设计触控控件时需要考虑的一些因素。

人们通常有三种方式操作电话的方式: 1. 一只手握着,依靠拇指操作;2.一只手拿着,另一只手进行操作 3.两只手握着用两个拇指操作。根据调查数据,有49%的人习惯使用第一种方式操作,而当人们用两只手拿着手机时,更习惯于使用两个拇指进行操作。

所以拇指触摸区是人们操作手机时最舒适区域,这促使了在移动设备与传统PC设计(尤其是Web)上有着截然相反的原则——最重要的功能按键应该从顶部移到底部。同时,将功能案件从顶部移到底部还有另一层意义:我们对手机进行操作时,内容不会被手部遮挡。不过我发现很多网站在做移动端优化时并没有对这点进行设计,淘宝网是难得一见的一个将功能按键移至下端的案例。这点其实也可以从Apps上的设计得到验证——大部分应用都是将功能按钮放到了下方,但也有一些将功能按键放在上方的产品,例如豌豆荚、大众点评、啪啪和豆瓣电影……不知道它们是否有其他方面的考虑。

在平板电脑上,这个设计原则会有些许的不同:首先,单手手持用大拇指操作的方式在平板上是很少见的,根据数据统计,大部分场景下是一手拿着平板用另一只手操作 ,接下来是双手拿着平板用大拇指操作。其次,由于平板要比手机大得多,这使得大拇指的最佳区域从顶部转移到了稍微靠上的区域,同时,更靠近平板的两侧。所以在设计平板的触控按键时,要尽量避开顶部和中心,把按键放在边角处。

除了手机和平板,另一类设备也开始兴起——Windows 8引领的混合型电脑。在这些设备上,既有触控功能也包含传统的鼠标和键盘的交互方式。目前而言,这种混合型电脑上的触控操作并不太理想,尺寸差异也非常大,人们还是更多的使用键盘和鼠标来操作屏幕。

除了按键的位置外,触控操作的另一个核心的设计原则是触控目标的大小。起初苹果把44 X 44pixels定为触控控件的最小尺寸是因为在iPhone 3的分辨率下,44 X 44pixels对应的是人类食指指尖的平均大小—— 7 X7毫米(拇指为9毫米),但实际上,随着分辨率的提高,44 X 44 pixels已经达不到7毫米的大小了,所以现在设计控件时,44 X 44 pixels的原则需要被改变,按照分辨率换算出新的大小。实际上, Google 已经倡导 Android 开发者使用 DIP(Density Independent Pixel)来取代 Px 和 DP 了。这样的好处显而易见,就是在任意尺寸的设备上都能得到相同大小的控件。当设计师按照以上原则设计控件大小时,可能会令手机屏幕空间减少,但Josh Clark认为,控件的操作性比屏幕密度更为重要。

 

注:图片来自网络

下载品玩App,比99.9%的人更先知道关于「数码产品」的新故事

下载品玩App

比99.9%的人更先知道关于「数码产品」的新故事

iOS版本 Android版本
立即下载
陈粲然 Ray

不揣测动机、不质疑资格、不定义身份、不混淆概念、诚恳承认错误,做良性讨论。

取消 发布
AI阅读助手
以下有两点提示,请您注意:
1. 请避免输入违反公序良俗、不安全或敏感的内容,模型可能无法回答不合适的问题。
2. 我们致力于提供高质量的大模型问答服务,但无法保证回答的准确性、时效性、全面性或适用性。在使用本服务时,您需要自行判断并承担风险;
感谢您的理解与配合
该功能目前正处于内测阶段,尚未对所有用户开放。如果您想快人一步体验产品的新功能,欢迎点击下面的按钮申请参与内测 申请内测