触摸屏与用户体验:对设计本质的冲击

  次阅读 作者:智能小宝 来源:互联网 2015-09-29 10:37 我要评论(0)

为了Windows Phone的用户靠直觉便能使用触摸屏操作系统,Win8在用户界面上做出了大量的彻底的调整。Apple隐隐约约的也放出了要改变OSX的风声,流线化 设计也越来越多的应用于他们的移动和桌面操作系统上,但是依然看不到带触摸屏的MAC。现在的用户花费越来越多的时间使用手机而不是电脑,这说明触摸屏革 命正在向我们袭来。

越来越多的人用手机或者平板浏览网页。网站需要作出调整,来让人们不用鼠标和键盘也能阅读他们的内容。一般对此的反应通常是 不就是再做一个独立的 手机用户界面么! ,这种解决方案在过去手机还比较小的时候还挺奏效,但是对于大屏手机和平板电脑来说,这种方案是非常短视的。

本文将通过几个常规或非常规的网站来展示怎样去设计网站,以达到用户体验更 触摸友好 型。

聚焦式网站 VS 响应式网站

很多网站建立的附属的站点或者APP,专门针对触摸屏用户。以便让他们把精力放在该类用户上。但有一个问题就是,既然网站是分开的,那么所依赖的 URL指向会造成用户打开错误的链接,或者手机用户打开链接发现无法找到页面。

最大的问题在于移动版经常缺少普通版的特质和信息,有点缩减版的味道。网站的特点和交互界面被简化,按钮做大,减少选项。这可以通过响应式设计解 决。响应式站点从设计上就考虑到不同平台的显示问题,做到了不损失质量的显示。而且好处在于只需要设计一个站点就够了,而不是再设计一个移动版。

设计上的本质不同

当在设计网页之前,要考虑到触摸屏和台式之间有本质的不同。在触摸屏上敲击页面是为了滚动,然而在桌面上你需要下滑你的滚轮。Trackpad是采 用Apple交互触摸技术的触控板,Apple试图通过它改变传统的操作方式。然而无论PC用户还是MAC用户更常规使用的还是滚轮或者滑块,Apple 的产品处于不利的地位。

在移动设备上的按钮必须更大,为了敲击的精准性。再也没有比 想要打开一个链接,却突然点错了,需要退回去 这种状况更令人厌烦的场景了。而且因为 没有光标,所以也不需要给链接注释,总而言之要的就是 可点性 。

还有一点就是关于移动设备输入的精准性,因为触摸屏要么是电阻式的要么是电容式的,有着不同的敏感度。电阻式的灵敏性要差一些。所以,设计上必须要 结合两种不同的屏幕来考虑不同移动设备的不同设计定位。

屏幕的定位功能与宽高比

屏幕的分辨率多种多样,科技市场的快速发展,导致了屏幕尺寸的多样化、特殊化,制造商不同,屏幕尺寸也不同。看看智能手表的屏幕吧,已经不再是四边 形的屏幕了。通过转动,移动屏幕不但可以显示肖像画(垂直),还能显示风景画(水平),这使其更加复杂。

问题的答案便是液体布局,可面对不同场景进行自调整,能为水平和垂直显示做出改变。有些网站采用这种适应性布局大大的改变了网站外观,优化了控制 性。而且利用了屏幕方向定位的这种潜力。

鼠标的滚轮就是为了便于垂直移动而设计的,自从Apple支持更具有创新形式的触摸滑动来下拉页面,而不是采用转轴滚动后。很多用户都改用触控板或 者触控屏。至于有更多创新想法的水平滑动更不在话下。大部分App都采用了水平滑动,目前为止最成功的的水平滑动案例便是Kindle。所以为什么不在你 的网页UI界面里实现呢?很多单页网站仅有一个水平轴,但是通常也都会有按钮来引导用户滑动,因为很多用户可能不理解操作方式。

在设计形式上,水平滑动和垂直滑动可能很相似,然而合理的运用它们可以实现多轴滚动,这可能不会再浏览器中实现。很多用户更喜欢单轴,因为多轴容易 找不到方向,而单轴只需要划回来,就能回到主导航条了。对于双轴网站来说这可能不是那么容易,因为导航条需要静止,所以使用HUD风格的导航条吧。

那么你的页面该采用什么样的交互界面?

显而易见的是不是每个用户界面都适用于于各种类型的网站,所以问你自己一个最基本的问题:谁是你的目标用户?你想要 推销 的是什么?你想营造怎样 的印象?年轻的人更喜欢使用触摸屏,而岁数大点的可能更喜欢使用台式,但大龄用户可能也需要更大的按钮和清晰的用户界面。再有革新性的用户界面,如果没人 能够理解使用方法,那么也是毫无意义的,所以要牢记,创造用户界面的目的是用户一看便知如何使用。

放射式菜单

放射式菜单,或者叫馅饼菜单,是一种环形上下文菜单,采用了多种方向的上下文拓展,而不是那种通过拉长拉宽来提供更深一步选项的菜单。

这是一种优秀的直觉式设计,防止用户在种类繁多的子菜单中 迷路 。另外的一个好处是相比操作常规的下拉式菜单,触摸屏用户可以更好的控制,因为方 向性的操作比敲击操作更加精确。若采用放射式菜单,网站会极大地提高触屏用户的用户体验,而延伸出来的按钮开关让人联想到游戏中的控制台。放射式菜单能够 简化冗长的菜单,变为简单的形式,增加了网站的效率和易用性。

放射式菜单是一种优秀的上下文信息展示体验,举个例子来讲,在采用这种菜单的网站上你看到了一幅美食图片,你轻点一下这幅图片,然后就出现了转发、 食谱链接、食材清单、保存图片的选项。然而采用这种菜单一定要谨慎,保持菜单的适用性和简洁,否则用户会感到他被泛滥的 标志和词语结合的菜单 淹没了。 静止式的放射式菜单比动态的好,因为静止的更好方便进行选择,至于动态的反面教材就是Phong(http://phong.com/),非常混乱的操作 体验。

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...