触摸屏与键盘和鼠标的工作方式不同
在为移动设备设计网站的早期阶段,大多数开发商将产品分类分叉。 他们发布了功能齐全的桌面版本,然后推出了“移动优化”版本,剥离了许多品牌和图像,以适应糖果电话和3G无线网络的有限功能和网络速度。
然而,当代智能手机可以使网页的效率与台式电脑一样高效,通过网络与昨天的DSL线路一样好或更好。
然后,设计重新回到单用户界面。 但设计师面临的风险并不是智能手机或平板电脑无法呈现现代敏感网站。 相反,触摸屏设备上用户输入的方法需要对底层网站设计进行有意义的更改。 假设游客拥有键盘和鼠标的网站建设日期已经结束。
触摸屏基本设计规则
设计一个支持触摸屏的Web界面需要过去传统的显示器 - 鼠标键盘方法的发展。 特别是,您必须适应手势,水龙头和多点触控输入等互动。
- 攻丝不准确。 除非客户拥有幼儿的手指,即使使用非常准确的软件控制,也很难挖掘并且精确。
- 手势不同于水龙头。 为了在触摸屏上滚动长页面,用户在浏览器窗口上向上滑动一个手指。 在您意识到使用鼠标进行浏览之后,您将鼠标向下移动,这可能看起来并不重要。
- 两个(和更多)手指轻敲。 用户可以同时在设备上使用多个手指点击来控制它。 这些额外的水龙头可能意味着具体取决于用户设备的操作系统。
- 高强光设备。 大多数触摸屏平板电脑的屏幕都由坚固的玻璃制成。 在明亮的光照条件下,这种材料可能非常难以阅读,并且有很多眩光。 此外,所有触摸,他们会在屏幕上得到指纹和污迹,可能会影响您的网页的外观。
- 屏幕上的键盘。 虽然有些用户使用无线键盘连接到平板电脑,但大多数平板电脑用户都使用屏幕键盘输入数据。 OSK的输入可能会导致一些搞笑的输入错误以及长时间使用不舒服。
由于设备的这些功能,Web设计者应该强调触摸屏用户的几个基本设计规则:
- 不要将可点击的项目放在一起太近。 没有硬性和快速的规则来定义距离太近,但通过用胖手指点击(敲击)可能难以导航链接列表,特别是以小字体大小。 可能很烦,必须放大才能尝试点击链接。 这个原则对于按钮和链接都是正确的。
- 层次结构很难保持开放。 一种流行的动态菜单形式使用JavaScript打开子菜单,当用户单击并将鼠标悬停在子菜单上时。 这些状态可能非常困难或不可能在触摸屏上使用,因为它们不会保持打开状态或不会关闭。
- 将链接和可点击区域从窗口的右侧移开。 大多数人都是右撇子,并倾向于在屏幕的那一侧滚动。 由于滚动是通过手势完成的,因此有时可能会错误地在链接上开始滑动。 如果用户想在页面上滚动,而用户意外地点击链接,则用户可能会感到恼火。 通过将您的链接从右侧移开,可以帮助他们避免这种不便。
- 没有老鼠。 这意味着没有鼠标指针 。 您不应该依赖鼠标指针更改来帮助指示某些内容可点击。
- 悬停状态不存在。 作为上述的必然结果,由于没有鼠标,所以没有任何东西可以悬停。 在触摸屏设备上点击(点击)或不点击链接,用户无法从颜色变化,工具提示或状态栏更改等悬停状态中推断出任何有用的信息。
- 黑色背景增强了眩光。 由于眩光,具有黑色背景的网站在触摸屏设备上可能非常难以阅读。 黑色使设备上的指纹更清晰,模糊屏幕。 而黑色可以将屏幕变成反射用户脸部的镜子,而不仅仅是屏幕上的文字。
- 表单中的长块文本很难写。 虽然可以在iPad或Android或Windows平板电脑上编写完整的小说,但大多数人不喜欢使用屏幕键盘进行长时间的文本操作。 您的设计越能让数据输入越简单越好。
考虑触摸屏设计的最重要的方面是在触摸屏设备上测试您的页面 。 虽然有很多iPad和Android模拟器可用,并且有很多Windows平板电脑,但它们仍然不能提供触摸屏的感觉。 你不能说出链接太近或者按钮太小,或者眩光使得页面太难阅读,除非你在平板电脑上试用它们, 然后再发布你的新网站设计。