前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >超大触摸屏设计的7大注意事项

超大触摸屏设计的7大注意事项

作者头像
奔跑的小鹿
发布于 2018-02-11 05:29:27
发布于 2018-02-11 05:29:27
1.5K0
举报
文章被收录于专栏:无原型不设计无原型不设计

以下内容由Mockplus团队翻译整理,仅供学习交流Mockplus是更快更简单的原型设计工具

随着科技的快速发展,触摸屏设计的应用无处不在,它们不仅仅使用于手机和平板,也在台式电脑上使用。由于台式电脑的规模和尺寸更大,此类触摸屏的设计可能会给设计师带来一些独特的挑战。

当你习惯了用拇指大小的区域来做屏幕设计时,你如何去设计超大触摸屏?这里笔者整理了一个关于超大触摸屏的设计指南,为设计师们设计用户交互提供灵感。

1.使用自然的手势交互

为什么“左右滑动”在所有触屏操作中都深受欢迎,因为这是用户最自然的手部动作和手势。

在设计超大触摸屏时,设计师不仅要考虑用户手指的动作,还要考虑到整只手的操作。大多数用户不得不接触到更大的触摸屏,因为相较于手持设备,它们可能会被贴在墙上或放置在桌子上,。

如果你希望用户能够轻松触摸屏幕,那么动作的触发就应该像在移动设备上一样自然,所以多琢磨琢磨触发动作。与小屏幕相比,大屏幕的滑动触发可能需要更夸张一些,因此点击可能会需要更大的手指压力。

在超大屏幕的设备中,过多的滑动设计对用户来说似乎不大友好,因为反复上的下滑动操作可能会导致手臂疲劳。思考一下如何设计能让用户在浏览内容时不需要大量的滑动操作。

另一种自然的“手势”交互是视线扫描。由于一些设备的屏幕尺寸太大,用户的眼睛无法同时抓住所有内容。设计师应该针对眼睛从上到下,从左到右的运动特点进行设计。要确保用户看到最重要的信息,并了解用户如何才能与设计进行交互。

2.增大文本和图形的显示比例

增大文本和图形这种情况在设计中通常不会出现,因为设计师必须大幅放大视觉元素才足以在超大屏幕上显示。然而,更大的屏幕并不意味着可以展示更多的东西(反之亦然),不如试着把它看作是一种特殊的用户体验。触摸屏中的所有内容,包括文字和图形,必须为了适应超大屏幕设计的尺寸而进行放大。这样做原因是:

用户倾向于从更远的距离进行交互,且仍需要查看和区分元素。

用户需要被具体可见的元素吸引到屏幕上。

用户需要看到可视化的提示,帮助他们识别出用于公共场合的屏幕。

在没有指令的情况下,屏幕元素必须具有可导航和清晰的显示功能。

触摸目标需要易于查看,并创建明显的交互效果。

3.确保导航始终可用

大多数用户使用超大触摸屏的心态,与第一次访问网站类似,导航显得尤为重要。模仿这种场景进行设计,很容易就能吸引用户进入你的设计并与之交互。需要注意的是,设计师要确保用户在访问不同的内容时,导航始终可用。

为你的产品设计一个导航模式时,最好采用一般网站普遍使用的导航模式,如将导航栏设置在屏幕上方或侧边栏中。

当用户访问不同的内容或页面时,也要确保导航不会消失。虽然主屏幕的设计可能只包含了几个较大的导航按钮,但其他的屏幕最好使用传统的导航格式,以便用户使用。

另外,在这些屏幕上尽量减少基于键盘的输入。在较大的屏幕上,键盘可能会变得笨拙和缓慢,需要消耗用户额外的体力。但是,如果你确实有基于键盘的输入,请在导航中设置一个键盘切换命令,这样用户就可以在需要的时候轻松地显示和隐藏键盘。

4.不要创建太多的选项

屏幕越大,用户选择的余地就越大,需要耗费的时间就越多。不如将按钮和交互看作是如何让用户快速做决定的游戏。设计的诀窍在于让他们在两个元素之间进行选择,而不是提供太多的选项。

这样设计的好处就是它可以简化你的设计。每个屏幕只提供两个选择,减少设计元素和视觉混乱,创造了一个更实用的界面。

在设计选项时,要确保操作是同样清晰可见的。用户如何选择这些选项?按钮必须是显而易见的,以便用户轻松触摸。使用一个小动画来将用户的注意力吸引到到交互元素上,或者是更受欢迎的用户选项上。

由于屏幕大小的原因,简化选项也非常重要。请记住,整个屏幕可能并不总是在用户的视野中,这在一定程度上限制了选项本身。如果你提前简化选项,则不必担心环境会影响用户的选项了。

5.考虑用户隐私

当涉及到触摸屏访问敏感信息或数据时,用户的隐私是一个值得考虑的问题。用户在公共场所中使用大屏设备,并不意味着他们希望其他人知道自己在做什么,特别是在输入一些重要信息时。而屏幕越大,其他人就越有可能看到用户输入的内容。

为了解决这个问题,设计师通常会使用一个较小的弹窗用于表单或数据输入,这样即使从远处也看不到用户输入的内容了。

6.网络连接问题

当涉及到超大触摸屏设计时,最需要考虑的问题是产品的网络环境。如何才能使产品在有无网络的情况下都能正常工作?

思考一下:在公共场所,许多超大屏或者小屏设备(如可移动的信息亭或大型平板电脑)都是便携式的。这会涉及到设备对互联网的访问,以及网络连接是否能正常工作。即使没有连接网络,这些触屏设备也需要保持正常工作。

提示:请确保所有运行设计的工具相关数据(从JavaScript到字体库到数据收集)都存储在本地。

7.设置明显的交互按钮

此类设计需要向用户展示如何与屏幕交互,并不是每个用户都能马上理解如何在屏幕上进行操作。

建议使用诸如动画和按钮之类的视觉提示来帮助引导用户完成整个过程。

大多数的超大触屏提供用户的是一次性交互或触发点,且每个界面都有所不同。这种提示设置地越明显,用户就越容易理解操作,从而就越有可能与你的产品进行交互。

除此之外,许多触摸屏上涉及激活和开始的屏幕区域也需要设置交互按钮。例如在一个开始屏幕中,设计师就会使用一个按钮来提示交互。这样设置既不会脱离设计,还能告诉用户如何对设备进行操作。

使用描述性的小提示,如“触摸这里开始”,来引导用户完成整个过程。虽然这样思维元素可能看起来过于明显,但是如何使用界面并不是用户应该深入研究的问题,不如让它变得容易点。

结论

你是否有过对超大触摸屏设计的经验?这种触摸屏的设计已经成为一种流行的趋势。就算目前你还没有做过此类的设计,相信不久你也会接触到。

虽然大多数设计原则和其他基于界面的设计是一样的,但是超大触摸屏的尺寸以及尺寸的调整会让很多设计师无所适从。所以,当你在公共场合看到超大触摸屏时,不如停下来在界面上操作一下,感受一下它的交互设计。看看哪些设计元素和交互对你有吸引力,以便在日后的超大触摸屏设计中进行参考。

原文作者:CARRIE COUSINS

原文链接:https://designshack.net/articles/ux-design/tips-for-designing-oversized-touchscreens/

学习工具,但不受限于某种工具。Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
谷歌用AI训练“耳机线”,实现了触摸屏大多数功能
谷歌在开发可穿戴设备上从未停歇,比如和李维斯合作推出的智能夹克衫Commuter Trucker。
量子位
2020/05/26
5680
谷歌用AI训练“耳机线”,实现了触摸屏大多数功能
十大令人振奋的移动端APP设计趋势
原文出处: Medium 译文出处:优设网 - @陈子木 从 移动端兴起,主流设计风格定型,再到Uber、Vine等现象级APP的崛起,移动端的APP设计直到现在才渐入佳境。促成这一切的影响因素很多,比如社 会发展趋势的变化、共享经济的大热、新技术的积累,等等等等。这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来。 同样的,今年我们要关注的是定型了的巨屏手机和逐渐沉淀下来的可穿戴设备。 随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多。查看邮件、
wangxl
2018/03/07
9760
【最新】iPhone X 交互设计官方指南
昨天凌晨,苹果公司发布了带刘海的 iPhone X,这需要 iOS 开发者针对其屏幕做新的适配,会后苹果公司发布了 iPhone X 的适配指南,下面是翻译稿,供大家参考。
疯狂的技术宅
2019/03/27
1.9K0
【最新】iPhone X 交互设计官方指南
在折叠屏手机上如何做交互设计?
最近三星、华为和柔宇各发布了一款折叠屏手机,它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种,也是我目前最看好的手机形态之一(未来手机的形态应该是柔性手机,现在已知有柔性电路板的存在了)。通过几天的观察和思考,我认为折叠屏手机有以下好处:
mixlab
2019/05/05
1.4K0
在折叠屏手机上如何做交互设计?
华人一作登顶刊封面!神奇触摸屏为元宇宙而生:透过屏幕能摸到真实物体
现在,网购这种形式占购物方式的比重已经越来越大了,可是总有些东西是在网上直接买的时候感觉半信半疑的。
新智元
2021/11/26
2980
轮播图也就是看看而已,确实越来越少的网站,采用轮播图了
轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: 但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进
前朝楚水
2018/04/03
4.9K0
轮播图也就是看看而已,确实越来越少的网站,采用轮播图了
iPhone X的UI设计技巧
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 果粉们翘首以待的iPhone X终于开始预售了!同样满怀期待的还有设计师和开发人员,他们将在iPhone X上看到他们的App了。苹果官方表示:iPhone X是智能手机的未来,而这个未来的风向标可能将会给UI设计师和开发人员带来一些小麻烦。 作为一名UI设计师,我总结了一些在设计iPhone X App时有效的技巧供大家参考: 1.    使用正确的iPhone X画板尺寸 与之前的iPhone不
奔跑的小鹿
2018/03/16
1.2K0
iPhone X的UI设计技巧
WPF 触摸屏应用需要了解的知识
我从 2017 进入大屏触摸这个行业,主要是做桌面软件这一块。在大屏交互平板这个行业里面的还能看的上去的应用,都是使用 WPF 做的。本文就来和大家聊聊在触摸屏应用开发的时候需要了解的软硬件知识。阅读本文你将能大概了解这个行业的一点知识
林德熙
2021/02/04
1.6K1
App设计的基本原则和规范
为了能在交互设计和用户体验上做出比竞品更优秀的移动APP产品,我们必须知道移动设计的基本原则。
奔跑的小鹿
2018/08/14
1.5K0
App设计的基本原则和规范
如何规范移动应用交互设计?UI/UX设计师须知的11个小技巧
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。
奔跑的小鹿
2018/03/02
1.3K0
如何规范移动应用交互设计?UI/UX设计师须知的11个小技巧
《深度剖析:鸿蒙系统不同终端设备的UI自适应布局策略》
在万物互联的时代,鸿蒙系统以其独特的分布式理念和强大的技术架构,迅速在智能终端领域崭露头角。随着鸿蒙生态的不断壮大,越来越多的开发者投身其中,致力于为用户打造丰富多样的应用体验。然而,如何让应用在不同终端设备上都能呈现出完美的UI布局,成为了开发者们亟待解决的关键问题。
程序员阿伟
2025/03/22
1160
《深度剖析:鸿蒙系统不同终端设备的UI自适应布局策略》
再见Metro,Windows 10通用应用设计趋势分析 - 腾讯ISUX
众所周知,当初微软在Windows 8上做了非常大胆的变革,除了开创性的Metro设计语言,传统桌面和平板两种模式的融合也是一大特色,可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一,但微软自始至终都朝着平台大融合的目标坚定前行着。 经过一路探索,微软终于通过在Windows 10系统的公布,展示了一个更加清晰明了的战略方向:构建一个面向全部Windows设备的核心操作系统。下面,本文就通过系统新特性和已公布的通用应用,来简单分析一下Windows 10通用应用的设计趋势。
腾讯ISUX
2018/06/29
1.2K0
Android 十年之路: 主屏与导航
今年是 Android 诞生 10 周年,我们认为是时候回顾一下过去,看看它的演变历程了。很显然,自 2008 年以来这个操作系统发生了巨大的变化,那一年,《暮光之城》才刚上映,碧昂丝的《Single Ladies》还占据着排行榜前列。
Android 开发者
2018/12/26
7290
Unity 移动端触摸屏操作
当将Unity游戏运行到IOS或Android设备上时,桌面系统的鼠标左键可以自动变为手机屏幕上的触屏操作,但如多点触屏等操作却是无法利用鼠标操作进行的。Unity的Input类中不仅包含桌面系统的各种输入功能,也包含了针对移动设备触屏操作的各种功能,下面介绍一下Input类在触碰操作上的使用。
Tencent JCoder
2022/05/06
3.1K0
Human Interface Guidelines —— 概览
自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚 今天本来惯例打开Material Design,结果发现网站改版了上不去了???那我就乖乖开始翻译iOS的组件好了... iOS设计主题 作为一名app设计师,您有机会呈现出一款非凡的产品,并将其推向App Store推荐的顶端。为此,您需要满足对质量和功能的高度期望。 三大主题将iOS与其他平台区分开来:
霖酱
2018/05/17
7700
超越按钮,拥抱触摸界面
苹果iPhone手机的发布,可以说带来了一个全新的“触摸”时代。现如今,就连小孩子都能够非常自然的使用一些触摸设备,手机、iPad等等。父母们一定很惊奇孩子们能够如此快的学会这些设备的使用方式,从这一点来看触屏设备的界面和交互设计中隐藏着很多种可以让使用体验更加简单和有趣的要点。
大江小浪
2018/07/24
6170
超越按钮,拥抱触摸界面
体感交互的设计原则
手势识别指的是计算机设备侦测并识别人类手势。近几年来,随着手势识别技术的高速发展,以及3D传感器的广泛采用,手势交互已经得到广泛的普及。 在越来越多的设备中,我们看到了手势主导的界面,改变了我们和计算机交互习惯。通过结合3D传感器和精美的界面,用来分析数据,计算机变得更智能,能更好的理解人类操作。不可不说是沟通的一大进步。 那么对于用户体验设计来说,手势交互又意味着什么呢? 改变使用习惯:手势交互和手势识别 用户通常都会有惯性思考,我们设计师也同样如此。 在进行手势交互设计时,经常会落入一下误区: 表面上实
前朝楚水
2018/04/03
1.8K0
体感交互的设计原则
iPhone X 适配指南 (官方翻译版)
iPhone X iPhone X包括一个大型,高分辨率,圆形的边缘到边缘的显示器,提供了一个沉浸式,内容丰富的体验,从未像以前那样。 屏幕尺寸 在纵向方向上,iPhone X上的显示屏的宽度与iPh
GuangdongQi
2018/05/24
2.5K0
你无法检测到触摸屏
无论你可能会怎么想,目前,在浏览器里可靠地检测当前的设备是否有一个触摸屏是不可能的。
疯狂的技术宅
2019/03/27
2K0
触摸屏的发展预判
一、触摸屏的性能比较 工业触摸屏工作在与外界完全隔离的环境中,它不怕灰尘、水气和油污,可以用任何物体来触摸,比较适合工业控制领域使用。缺点是由于复合薄膜的外层采用塑料,太用力或使用锐器触摸可能划伤触摸屏。 电容式触摸屏的分辨率很高,透光率也不错,可以很好地满足各方面的要求,在公共场所常见的就是这种触摸屏。不过,电容式触摸屏把人体当作电容器的一个电极使用,当有导体靠近并与夹层ITO工作面之间耦合出足够大的电容时,流走的电流就会引起电容式触摸屏的误动作;另外,戴着手套或手持绝缘物体触摸时会没有反应,这是因为增加
机器人网
2018/04/19
7730
相关推荐
谷歌用AI训练“耳机线”,实现了触摸屏大多数功能
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文