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

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

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

聚焦式网站 VS 响应式网站

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

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

设计上的本质不同

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

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

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

屏幕的定位功能与宽高比

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

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

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

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

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

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

放射式菜单

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

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

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

拟真

拟真设计临摹物体的外观和功能来创造出一种直觉性的交互界面，最近它已经不再流行，尤其是自从Scott Forstall从Apple辞职，做扁平化设计的Jony Ive的接管了iOS，还很有可能接管以及未来的OS X。拟真把Apple推向了直觉式操作设计上前所未有的高度，比如Mac上的Contacts看上去像地址簿，或者iOS上的Newsstand和 iBooks看起来像书架。这种设计对于采用触摸式交互的用户来说更容易理解.

通过熟悉感带来一种感官上的直觉，这是拟真的关键所在，用户把这种相似感和真实的物体结合起来，立即就能知道怎样去交互。一个好的拟真设计能做到用户瞅那么一眼就能了解主题，知道页面是用来干什么的，而不用什么信息提示框的高亮提醒。

拨号式交互界面

这是结合了上面很多元素的界面，整个用户界面就是简单的拨号，和放射式菜单看起来很相似，但是它有一个中心，以此展开了选项，拨号式的转动来进行单 选。在音乐类型的网站/App中这非常有作用，通过拨号选歌、挑歌、调节音量都很方便。在SHSK’H(http://www.shskh.com /www/)这个列子中就采用了拨号式UI，方便用户选择想听的音轨。

极简主义运动

极简主义就是界面尽可能的进行删减，直至剩下一些必要元素。对于移动用户来说非常非常的方便，因为它减少了载入时间和流量，在清爽的界面下可以快速的找到所需信息。现今的极简主义不仅仅是对网站进行“减法”，还形成了一种新的形式叫“扁平化设计”

扁平化的关键在于不再以“注重用户的直觉”为核心理念，因为人们已经熟知了交互界面，养成了使用的习惯，他们已经熟悉了操作，所以现阶段的设计要超 越那种“引导用户如何去做”的概念。交互界面最终变成了一种工具，而不再是用户的导师了。扁平化设计的特质是使用明亮的色块，在iOS7中，“斜角”让位 于多彩的扁平化设计。

最后，我要用一个有些与众不同的网站结束这篇文章。Thibaud（http://www.thibaud.be/）是一个富有创造力的开发者，他 曾经设计过像Pikibox这样的网站。这里提到的这个网站Thibadu非常的“触摸友好”，而且也没有限制桌面用户的适用性。