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

以下内容由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,免费体验畅快的原型设计之旅。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,107评论 4 62
  • 编者按:iOS 10人机界面设计指南中文版也来了!今天第二部分是交互部分,包括16个小节,从最新的3D Touch...
    sky_kYU阅读 1,020评论 0 5
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,178评论 25 707
  • 今天上了开学以来正式的第一节课,感觉两个班上下来完全不一样,一个安安静静,非常的配合我,而另一个班实在是吵得我难以...
    星空下的自己阅读 188评论 0 1
  • 周五还是会想起给你打电话,只是不能再拨号,老周说其他时间会忘记带手机(还是我用过的虐基丫),只有周五揣上小虐基丫等...
    沙源阅读 107评论 0 1