行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

新

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

新

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业指南
•

4

阅读时间

以你前所未有的方式进行触摸屏原型设计

了解触摸屏特性,释放你的交互创意。

托尼·金, 首席执行官兼联合创始人

自首次出现以来,触摸屏彻底改变了科技行业,直到今天仍被广泛应用于不同领域。触摸屏有很多类型,并且都使用不同的技术。

在过去,电阻式触摸屏因其低成本和耐用性而占主导地位,被用于 GPS 导航设备和任天堂 DS 系列设备。其缺点是必须施加足够压力,使用任何硬物来替代手指才能感应到触摸,另外屏幕对比度也较差。

“表面声波(SAW)技术使用在触摸屏面板上方传播的超声波。当面板被触摸时,部分波会被吸收。”它通常可见于大尺寸应用中,例如信息亭、街机游戏、自动取款机等。

现在我们来谈谈本文的主角——电容式触摸屏。这种触摸屏面板涂覆有可储存电荷的材料,通常用于大多数消费类产品,如平板电脑、笔记本电脑和智能手机。

但是电容式触摸屏是如何工作的呢?“由于人体也是电导体,触摸屏幕表面会导致屏幕静电场发生畸变,这种变化可通过电容变化进行测量。”

不过,人体并不是唯一的电导体。令人惊讶的是,橙子、苹果,甚至香肠等各种水果和食物也都是电导体。在下面的演示中,你可以看到一个原型如何对直接放在智能手机触摸屏上的不同水果触摸作出反应。

在做完 Scale 应用之后,我开始思考:“我们还能利用电容式触摸屏的特性做点别的吗?”于是我想到了制作一个数字放大镜。

首先,我想以某种方式调整放大倍率。最后,我想到了用两根手指旋转。但随后我又开始思考,怎样做一个用两个触点来替代手指的放大镜。


Using touch pen for iphone


一支普通触控笔

我在 12 英寸 iPad Pro 上进行了尝试,效果很好,所以我决定继续推进。起初我探索了不同的方式,使用两支触控笔来制作放大镜装置。


Using two touch pens for iphone


两支触控笔

下一次尝试是做一个环并用铝箔把它包起来。


Handrawn blueprint of a loupe


放大镜的手绘蓝图


styrofoam wrapped loupe on touchscreen


包裹铝箔的泡沫塑料

最后,我做了一个用于测试的铝箔包裹装置,因为它便宜,而且只要包裹起来就能让任何材料变成导体。(友情提示:铝箔可能会划伤你的触摸屏,所以我建议在测试前先贴上屏幕保护膜。)


two silver touchpoints and two red dot supports on loupe


两个银色触点和两个红点是支撑点


evolution of loupe


放大镜的演变 

仅用于原型验证的话,你可以使用铝箔包裹装置。不过,我想做一个更加精致的方案。于是,我使用CNC 机床将铝制放大镜加工成形。为了确保触点更稳定,我在两个尖端涂上了黑色导电漆。装置上下的两个白点是支撑点,可防止它在触摸屏上移动时晃动。

你可以通过这个链接亲自试试这个原型。

还有一件事,

借助上述装置,你还可以用更简单、更便宜的方式尝试制作更复杂、更昂贵的设备。

像这样,我做了一个屏上旋钮(Knob on Display):通过让一个环形部件(黑色部分)作为轴并贴附在触摸屏上,从而实现一个附着在触摸屏上的实体旋钮(例如路虎 Range Rover 中控显示屏上的旋钮控制)。

你也可以通过这个链接亲自试试这个原型。