Affordance(可供性)和设计

iOS 键盘

为什么 iOS 的键盘如此出色,其他系统的虚拟键盘虽然在尺寸上基本超过 iOS 键盘,而它们的视觉体验还是操作体验相比之下显得像一团渣,为什么?

在比较分析之前,先说明一下,分析虽然是一个逆向过程,但在这里我认为诠释性的分析比揣测设计者的意图更有价值,当问“为什么这样设计”的时候,应该将眼界超越设计者本人的意图,即使有一些给出的理解完全脱离设计者的意图甚至与其相背。

iOS 键盘是(新一代)虚拟屏幕键盘的开山始祖,它有很多创新的设计和技术应用,在第一代 iPhone 上市的时候,Apple 做过详细全面的视频介绍,其中有一段就是 iOS 键盘介绍,土豆视频见这(Youtube 地址见这)。 Steve Jobs 在 WWDC 2007 上介绍 iPhone 是从革命性的用户界面开始的,从列出 Moto Q、BlackBerry、Palm Treo 和 Nokia E62 这四台带全键盘的手机——当时被称为智能手机——开始,它们的按键和操作是不能改变的,无论你是否需要它总是在那里,而不同的应用需要不同的用户界面。 iOS 虚拟键盘只在需要的时候出现,在不同的应用中使用不同的键盘,在输入网址的时候就将空格键替换成了“。”、“.com”和“/”等配合网址输入的按键。同时虚拟键盘需要解决精度以及效率问题,让人轻松快速的输入,使用放大镜进行轻松的光标再定位,比如“臭名昭著”的热词自动修正(英文),除了使用字典以及联系人等词组匹配进行修正外,还可以对输入区域进行匹配比如介绍视频中的将“ouzza”转为“pizza”,还有一项创新的设计是,根据字典来预测下一个字母,以此实时改变键盘的各字母对应的触摸区域的大小,让这些字母更容易被触发,比如输入“tim”,那么接下了“e”就比相邻的“w”和“r”的触摸区域大,因为“time”是一个常用词,而没有“timw”和“timr”这两个英文单词。

在 Apple 的获得专利中,与 iOS 键盘相关的有很多项,重要的就有根据下一个字母来动态改变触摸区域这一项,专利号 7,900,156 名称为“Activating virtual keys of a touch-screen virtual keyboard”,相应在中国的专利申请号为 200680033988 名称为“致动触摸 — 屏幕虚拟键盘的虚拟键”,专利内容就是上述实现的一个一般化,将触摸区域的改变一般化为按键如何根据触摸位置来触发,触摸位置与触发按键通过距离来确定(比如与哪个按键的距离小就触发哪一个按键),同时引入一个权重,那么上述实现中,出现下一个“e”比“w”和“r”有更大的权重,也就是“e”的触摸范围更大,这项专利例举的另一个实现,就是“删除”按键的权重设置成小的,它更不容易被触发。另外在设计专利中,有两项比较显著,一个是 D644,238 整个键盘的设计,另一个 D621,848 是关于按键被按下时挤出的那个放大的键盘指示牌。

我们先从尺寸来看 iOS 键盘的设计,上图是 iPhone 4 之后的视网膜屏幕的界面,所标注数字的单位为 px,其实就是 320*480 屏幕的两倍,前后键盘设计并没有变化,如果换算成 mm 为单位的实际尺寸,那么就类似 32 px/326*25.4=2.49 mm。这些尺寸是如何决定的,如果从设计者的角度来看,这个决定的过程既有逻辑的部分也有感性的成分,所以我们分析不能像数学一样去反推。iOS 的键盘高度为 430 px(320*480 的分辨率时为 215 px,其实 430 px 上方还有 2 px 的黑线),正好位于屏幕正中间向下偏 50 px,或许可以提出一个问题就是键盘为什么不是屏幕的一半呢?这个尺寸由其内部支撑起的,但是如果把它设成刚好一半,那么在比例上很容易体会到压抑(均分是较容易被识别)。76 px 的按键高度是 5.92 mm,52 px 按键宽度是 4.05 mm,12 px 按键间距是 0.93 mm,32 px 的按键间距以及字高是 2.49 mm,iOS 的 HIG 建议的最小可触摸操作元素是 44*44 point,转换到 mm 单位为 6.90,Windows Phone 7 的 HIG 中也说到最小触摸目标的高度是 7 mm(紧接着也说到键盘和链接可以例外,因为有额外的动态补偿)。肯定有很多人机尺寸可供参考,比如横向的尺寸,而从设计的角度除了依赖这些统计学上的数据,更重要的是结合经验和体验,毕竟在这么一个小范围内,依赖后者更迅速。我们从 iOS 键盘的尺寸上可以看出它们都是经过细致安排的,就是“尺度”。

将 Android 的键盘和 iOS 键盘以实体的尺寸为准进行比较,为什么不选用其他中文输入法的键盘,因为这些键盘多数是模仿 iOS 键盘的,而且有几个在尺寸上没有考究,比如上下两排按键或间隙都不是统一的,有 1 px 的差距,这样它们就没有什么参考价值。 Android 键盘也有尺寸诡异的地方,比如按键的圆角是 2px,2 px 的圆角在通常情况下是没有表现力的(只有3个像素参与),尤其像键盘这种密集排布的,反而让人感觉难受。

时间: 2024-10-21 21:21:06

Affordance(可供性)和设计的相关文章

link环境下制作一款《订餐软件》,请问会员特供菜怎么设计?

问题描述 link环境下制作一款<订餐软件>,请问会员特供菜怎么设计? link环境下制作一款<订餐软件>,请问会员特供菜怎么设计,要让非会员也能看到,但是只有会员才能点? 解决方案 显示的时候,不用判断,但是点餐的按钮做成灰色的.后端在点餐的逻辑中判断下. 解决方案二: 需要把菜谱保存到数据库中,然后设置菜谱里面是否是会员特供菜,然后在订餐软件里判断如果是会员,特供菜可以点,如果是非会员,只可以看不能点

架构,改善程序复用性的设计~第三讲 实现一种功能的代码只能出现在一处(续)

原文:架构,改善程序复用性的设计~第三讲 实现一种功能的代码只能出现在一处(续) 在写完架构,改善程序复用性的设计~第三讲 实现一种功能的代码只能出现在一处 ,这篇文章后,得到了园友的反馈,说这种简单的业务逻辑还可以,但业务比较复杂时,根据就没法用这种方法. 针对这个问题,我觉得有必要再写一个续集了,呵呵! 上回说的主要核心内容是将公用的部分从一个方法中提取出来,生成一个新的方法,这个重构中叫做"提取到方法",另外一个核心内容就是方法的"单一职责",即一个方法干一件

架构,改善程序复用性的设计~第四讲 方法的重载真的用不到吗?

在第三讲中我们主要关注了代码重构的思想,从方法重构到类重构再到项目重构,这是一个过程,一种思想上的升华,今天将继续我们"程序复用性设计"的旅程,说一下方法重载的重要性. 细心的朋友一定会非常关注net frameworks的源代码,即使只能看到它内部方法的定义,也足够了,在System.Web.Mvc这个命名空间下定义了很多关于MVC架构的东西,我们就以它为例来说一下方法重载吧! 重载的好处: 1 对方法调用的程序员来说,它是友好的(程序员只关心自己调用的方法签名即可,不用管参数为NU

UX设计和可用性设计:认知流畅性和设计策略

文章描述:认知流畅性是怎样影响决策的. 为什么那些高级餐馆要用一种优雅漂亮却很难读的字体来打印菜单? 为什么主题公园的那些恐怖之旅的名称发音很困难? 人们怎样看待每天买的东西中的食物添加剂的风险? 这些跟UX设计和可用性有什么关系 每一天你的用户都在对你提供的产品和服务做出决策,而决策取决于你提供产品和服务的方式.本文中,我将谈及为什么看起来无足轻重的信息展示却对人们的认知和行为有着惊人的影响. 认知流畅性 在之前的文章里,我曾谈过人们对决策这件事有多敏感.虽然是在潜意识层面,但人们还是被对事情

演化架构与紧急设计: 语言、表达性与设计

简介:发现和积累惯用模式的能力对于紧急设计至关重要.对于设计而言同样十分重要的是代码的表 达性.在本系列文章的第 2 部分中,Neal Ford 将继续讨论表达性和模式的交集,通过惯用模式和正式 设计模式阐释这些概念.他用动态语言为 JVM 重构了一些经典的四人组(Gang of Four)模式,以说明 表达性更好的语言如何使您看到被透明度不佳的语言遮挡的设计元素. 本文是本系列文章的第 2 部分,旨在演示计算机语言的表达性(允许您专注于本质,而不是形式)对 于紧急设计的重要作用.意图(inte

防护性WEB设计入门指南

摧毁一个好网站的最好手段是什么?访问它.起码给人的感觉常常是这样的.你夜以继日千辛万苦搭建好的界面,到头来却壮志未酬身先死,绝大多数的访客,在这些界面所支撑的过程进行到一半的时候就放弃了.大多数情况下,访问者离开是因为碰到了障碍:遇到了让他们无法继续下去的问题.比如说敲错了信用卡号或点击错了链接,又或者是敲错了网址.这不是他们的错. 防护性设计的确切含义是什么?Richard Winchell供图 好设计假设人会犯错.糟糕设计则让敲错一个字母的访客困进死胡同.最好的职业人士靠聪明的防护性设计策略

颠覆性工业设计:新Mac Pro构造图赏

当今年6月份的WWDC全球开发者大会上,苹果第一次拿出新一代Mac Pro的时候,没有人不为其出色的颠覆性的工业设计所震撼.而在今天凌晨的秋季新品发布会上,苹果正式宣布,新款Mac Pro将会在今年12月份正式发售,售价为2999美元起(约合人民币18270元).如果不是Mac Pro的名字,当库克第一次介绍它的时候,很难有人将其和PC联系起来,可能以为这是个音箱.外置硬盘扩展坞之类的.相比以往Mac Pro比较正统的设计,新款Mac Pro的圆筒造型显得过于激进,但这也使它的体积只有老款的1/

有哪些提升单页滚动体验的高级技巧?

  扁平化已成主流,简约风随处可见,全景大图+单页设计也已经成为了高大上的代名词.随便结合几种大势所趋的设计手法似乎就能成就一个逼格爆棚的好网站,打磨细节似乎已不必要,真的是这样么?细节里面蹲满了魔鬼.今天,来自 VTEX Lab 的UI/UX设计师Rodrigo Muniz 撰文反思了单页滚动设计中的用户体验问题,如果你也是细节打磨强迫症患者,这篇文章就是你的药-- 我们已经看过太多这样的网站了,高清细腻的大图背景横跨屏幕,填满你的视野.是的,大家都喜欢这样的范儿,这也是时下流行的设计趋势.可

你所没有意识的你自己:谈一谈下意识设计

假设这样一个场景:你走在路上,一辆卡车朝你飞驰而来,你将会做什么? 回答傻站着不动的请允许我致以无上的同情.普通青年的答案应该是马上躲开,对吧?好,请先停一下,仔细想想,完整的动作流程是怎么样的? ok,重新整理一下:你看到了这辆车→做出它即将撞到你的判断→你感到了危险→你马上躲开了. 觉得这个是标准答案请伸出右手放在自己的心口上,扪心自问一下真的是这样么?你真的是这样做的么? 真实的情况应该是这样的:你看到了车→你感到了危险→你躲开了. 所以究竟是什么救了你? A. 看到车的眼睛 B. 躲开车