双击在移动端触摸屏 双击上是好的交互方式吗

来源：蜘蛛抓取(WebSpider) 时间：2017-07-15 05:31 标签： 移动端禁止双击放大
双击（double tap）在移动端触摸屏上是好的交互方式吗？
在 iOS 上，「单击」、「拖拽」、「长按」、「滑动」都是常见的交互方式，「双击」只出现在「放大缩
双击（double tap）在移动端触摸屏上是好的交互方式吗？
【双击（double tap）在移动端触摸屏上是好的交互方式吗？】
请将本文分享给你的朋友：
双击（double tap）在移动端触摸屏上是好的交互方式吗？ 的相关文章
------分隔线----------------------------
北京联盟郑重声明：本文仅代表作者个人观点，与北京联盟无关。其原创性及文中陈述内容未经本站证实，北京联盟对本文及其中全部或者部分内容的真实性、完整性、及时性不作任何保证和承诺，请网友自行核实相关内容。为移动而设计：交互设计篇
发表于 14:38|
作者翟方庆
摘要：现在的移动设备都采用触摸屏，这不仅带来了许多机遇，也存在诸多制约。我们在通过它们浏览内容的同时，也在与内容进行交互。这迫使设计师开始对人体工程学、手势操作、过渡特效，以及针对移动端的交互模式进行思考。
在“”中，我们看到了设计师在设计移动应用时需要面对的主要挑战。移动端所显示的内容，从观察条件、行为，到情感，这些方面的差异影响着用户。有12年的设计经验，目前在伦敦Flow Interactive任职视觉设计主管，从事视觉设计、界面设计工作。以下为译文：我的手机是一款Nokia年入手的），只具备很少的功能，比如打电话、发短信，或玩一玩贪吃蛇。更重要的是，这些交互方式都由手机制造商掌控。随着智能手机、触摸屏和App Store的出现，它们给设计师们带来了数不胜数的机会。同时，尽快熟悉这个尚且年轻的设计领域，也是我们这些设计师的责任。交互设计现在的移动设备都采用触摸屏，这不仅带来了许多机遇，也存在诸多制约。我们在通过它们浏览内容的同时，也在与内容进行交互。这迫使设计师开始对人体工程学、手势操作、过渡特效，以及针对移动端的交互模式进行思考。人体工程学由于在设计移动应用时涉及人体工程学，这要求我们要关注设备的尺寸以及触摸屏的实际问题。例如，，直接影响到用户能否轻松触摸到屏幕的某一区域。热点区域，或称其为“用户激活某些功能时需要触摸的区域”需要有足够的尺寸，让用户确信自己可以准确地点击到。平均有1至2厘米宽，在标准屏幕上所占空间大致结余44px只57px，在高清屏（如Retina）上大约占88px到114px。诺基亚、苹果、微软，为更好诠释触摸屏的特性，各家公司使用的尺寸都存在细微差别。然而，目前并没有关于以上设计尺寸的硬性规定。与其以各种设计规范为标尺，不如单纯地去考虑用户希望通过触屏操作得到什么，用户的操作目的有多重要，以及他们需要在多短时间内达成，并依此进行设计。手势操作除了显示内容以外，触摸屏的每一部分都能被用于实现任何功能，这让手势操作成为移动交互设计的重要构成元素。所有触屏操作系统都采用了该操作，包括Android、iOS、Windows 8。我们用一张表格简单汇总一下各平台：此外，目前涌现了许多，用于指导开发手势操作。设计师能够并且应该依照自身产品所需，跨越这些“标准和模式”的界限。过渡效果在应用切换于不同显示状态时，可以让这个过程显得更加平滑。更多情况下，过渡效果便于用户撤销操作，并防止用户在切换界面过程中“找不着北”。基本的过渡效果包括：常见模式正如我们在第一篇文章中所讲的，相对于PC来说，移动设备留给设计师更少的用户添加菜单和导航提示的空间。结合环境因素来看，例如复杂的视觉环境和干扰条件，通常情况下，我们很难将最好的内容结构提供给用户。然而，有几种通用的交互模式值得去尝试去挑战，其中一些用于改善导航、选择内容、登录注册和导航的交互设计非常有价值。主导航菜单主导航菜单是展示网页或手机应用信息架构的视觉表现形式。以下是一些值得思考的案例。扩展菜单（Expanding Menu）：许多移动应用和响应式网页都使用扩展菜单来进入主导航。一个被放置在顶部的菜单按钮，在点击之后会显示主菜单列表。星巴克采用了扩展式菜单的网页适合于：响应式网页。注意项：过多的菜单选项和子菜单会让列表过长过于复杂，这将带来操作上的不便。侧滑菜单（Side menu）：一些应用和网页使用的是侧滑菜单，正如我们在Facebook应用中所看到的。与扩展菜单相似，侧滑菜单会在屏幕一侧以垂直表单的形式显示出菜单选项。Facebook客户端适合于：拥有大量菜单选项的应用。为用户导航开辟了一个独立的区域，而不用在显示内容和功能的界面中占用大量空间。注意项：确保不会与其他导航或交互模式冲突。例如，如果扩展菜单或选项卡式菜单和侧滑菜单同时出现在一个应用里，当用户需要找某一特定功能时或选项时，这种设计会导致用户产生困惑，不利于操作。标签菜单（Tabbed Menu）：这种设计我们曾在上一篇文章中提到过。它是一个永久显示在界面顶部或底部的工具栏，便于用户在不同界面之间快速切换。亚马逊客户端底部的标签式菜单适合于：菜单选项更少的应用。这取决于移动设备屏幕在水平方向上可用宽度。通常采用这种菜单的iOS应用都会设置5个选项。注意项：底部标签设计与Android和Windows 8的标准交互不相称。辐射式菜单（Hub and spoke menu）：一个集中化更高的主界面，用户可以直接从中找到所需菜单选项。当用户点击选项，进入另一个界面时，该界面可以采用另一种完全不同的设计模式。用户则可以通过激活返回功能（点击按钮、滑动或其他操作）回到主界面。Linkedin适用于：快速展现一个应用的功能特性。注意项：如果用户需要在不同功能间切换，那么他就不得不先返回主界面。选择内容点击链接显示内容，在设计这一交互过程时，需要让它便于用户快速地单手进行操作。如果设计得当，也可以在一定程度上提升用户体验。点击（Press to move forward）：用户在浏览内容时通常会选择类别、子类，然后点击浏览内容。同时，用户还进行在浏览内容时，通过点击其中的链接跳转到新的界面中。BBC的客户端就是一个很好的例子，递进式的导航，引导用户点击查看不同分类的内容。BBC适用于：以文章为主要内容的应用，并能持续激励用户。注意项：用户很可能无法确定正在浏览的界面是属于哪个子类。滚动效果（Coverflow）：用户可以滚动浏览内容，然后从中选择一个选项。这种水平滚动的设计方式，是Windows 8 Metro风格应用固有的。当然，类似的设计我们在iPhone上也见过，就是比较常用的App Store。App Store适用于：你有许多希望用户自己去发掘的视觉化内容，而用户也可以在选择前进行预览。注意项：如果用户希望浏览他们经常访问的内容，可能需要不停地重复滚动操作。翻页效果（Flip over / Peel back）：如果你想进一步了解你正在浏览的内容，或你正要进行的设置，那么翻页效果是很好的选择。苹果地图适用于：两个相关的内容，比如进行设置或查看信息详情。注意项：会让你的交互方式过于复杂，用户也容易对导航结构感到困惑。登录注册输入姓名、邮箱和密码是一个必不可少的过程，作为设计师，我们应该让这个过程更加轻松。自动登录：用户输入的登录信息全部保存在应用内，在初始化应用时自动登录，并显示新的信息。这是许多社交应用所采用的登录方式，比如Facebook、Instagram、Twitter。Instagram适用于：应用需要登录才能显示个人信息，但是安全要求并不高。注意项：只适合那些对信息安全性要求并不苛刻的应用。保存登录信息：与网站支持保持用户登录信息一样，在移动端也可以采用类似的设计，让其保持用户的邮箱、用户名等，帮助用户快速登录。在网页中登录Google账户适用于：需要登录的移动版网页。注意项：尽量避免不必要的登录操作。PIN码：创建一个用于登录快捷方式，而无需用户输入繁冗的登录信息，是一个非常好的方案。以PayPal为例，它支持用户创建一个PIN码，让登录操作变得简便快捷。PayPal适用于：对用户信息安全性有要求的应用，同时这些应用也支持与用户的设备进行绑定。注意项：仍然需要注意应用的安全级别。关于表单曾有，应用被下载后，26%的应用只被打开过一次！辛辛苦苦做了一款App，好不容易有人下载安装了，首屏注册表单却吓跑了一众用户。在移动设备上填写表单是一件让人头疼的工作，尤其是在那些未针对移动端进行优化的网页中。保存用户信息保存用户的的登录信息可以节省时间、减少成本，让你的应用和网站更易于使用。交互设计师Luke Wroblewski曾对于注册表单给出过三点建议：一、最好不要在App首屏出现注册界面；二、先体验，后注册；三、因为注册界面繁琐，所以更要优化。适用于：需要用户添加个人信息的网站或应用，比如在购物过程中填写个人资料。注意项：给予适当的安全性。显示对应键盘确保在适当的时候显示对应的键盘，这是一个让填表工作变得更加流畅的方法，比如在是输入电话号码时调用数字键盘，而在设置或输入密码时显示全键盘。适用于：所有形式的表格。注意项：无。进度条在Web网页中显示进度条是一种非常明智的方法，它可以提示用户所处的输入阶段，还有几项表格需要填写。不过由于屏幕的局限性，如果需要在移动设备上添加这种进度条，需要考虑设置在界面的什么位置，以何种方式显示。适用于：购物清单或长表单。注意项：由于它可能成为快速访问内容的一个障碍，在设计时需要考虑其所占空间。下一步：过去的标准和设计指南为创新培植了根基。当我还在使用诺基亚5110的时候，从未想象过将有机会为移动互联网设计塑造工具。而今天设计解决方案将成为未来的标准和设计指南。交互是移动设备必不可少的重要组成部分。但是想要创造一个真正深入人心的交互体验，网站和移动应用的视觉设计需要更加生动、吸引人。文章来源：Go Mobile沙龙第3期：交互设计最近在移动互联网业界，出现了一些有趣的现象。在一个应用开发团队中，项目设计、视觉设计、UE用户体验的角色被重视起来。那些扁平化设计、交互式设 计、响应式设计，也一度成为我们谈论最多的关键词。交互设计师不仅仅是画图的，更要关注信息架构、界面交互等方面。如何做好交互设计呢？本期Go Mobile将在6月22日于杭州举行，届时将邀请中央美术学院交互设计工作室负责人&彦风&、创新工场用户体验总监&吴卓浩&、前三星研究院用户体验部负责人&林敏&、Ark Design创新顾问/联合创始人&张文新&、欧朋浏览器产品总监&冯嘉彬&、DailyCost设计师/开发者&梁国鹏&，与各位开发者、设计师聊聊移动交互设计那些事。【】（编译/翟方庆 责编/张宁）本文为CSDN编译整理文章，未经允许不得转载，如需转载请联系market#csdn.net
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章

我要回帖

更多关于 移动端禁止双击放大 的文章

 

随机推荐