在我们浏览访问很多响应式Web设计(RWD)的网站后,发现了以下一些最普遍的可用性问题:
1. 很多观点表示响应式设计应该从移动体验开始,但这往往使得桌面端的体验不那么尽人意。
为了尽可能地增加页面的灵活适应性,RWD往往会采用精简的设计风格。由移动端优先开始考虑的桌面端用户体验似乎没有用户期望的那么强健。
虽然很多设计师不想在更小的屏幕上“隐藏”内容,但有些时候这种方法是最有效的,例如,它可以让桌面端的体验变得完整专业。
Boston Globe这个网站就把这个问题处理得很好,在桌面版本上,该网站提供了额外的菜单和图片,但在移动版本上则将它们隐藏。这样,无论用户通过什么设备访问都能获得最佳体验。
2. 某些设备上的特殊使用习惯,在其它设备上不一定通用。
设置菜单就是一个典型的例子,在移动设备上用齿轮来表示设置很常见也很容易理解,但在桌面端的体验中就没有这种惯例。即使是一些熟练的移动端用户也很难找到并理解使用齿轮图标的菜单。不同于桌面端,用户可以很容易地在移动端找到这个图标。再比如,三条横线的图标代表的是菜单,这个在移动设备上很好理解,但在桌面版本上这样做就不是那么好理解。
Starbucks的导航就做得不错。在桌面版本上,是一个传统的水平菜单并可以下拉显示更多子菜单,这个下拉菜单可以让用户快速导航到更深层的页面。而在移动版本上,菜单则变成一个可轻松辨识的图标且只展示主要的导航。
下图中Sony网站设计也是个不错的例子。在移动版本上,他们使用了文字“Menu”来表示菜单,让用户更容易找到。
3. 不管用户如何访问网站,都要保证可用性。
之前我们在博客上发过一些可用性原则,它们对新的设计来说也十分重要。实际上这些可用性原则也可以让用户与新版本无缝对接。下面我们来看看一些没有在响应式设计中应用可用性原则的例子:
Disney的网站就是一个例子。不管你通过什么访问他们的网站,打开菜单之后都会感觉迷失。在桌面端版本,菜单会从页面顶部下拉并覆盖整个页面,但在移动端版本上则从左侧拉出菜单。这种菜单并不能很好地指示当前的位置,并且它遮挡了网站的Logo和品牌。
再来看Grey Goose这个网站,它在移动端就没有做很好的适应。在桌面端看来这是个优美的网站,但在移动端版本上却少了Banner之间的导航,而是把各种Banner平铺下来。这样导致的一个结果就是很多用户会错过下面的内容。
Crayola也设计了一个非常好的响应式网站,但他们忘记了使用用户的语言。例如,他们的“Main Navigation”这个文案就不是那么容易让人理解:
许多RWD网站在更小的分辨率中往往会把他们的“行动召唤”按钮放错位置。例如Burst Creative的网站在桌面端的布局中把“Get Started”按钮放在了中间很醒目的位置,然而在移动端却把这个按钮放在了页面的底部。
对比一下Lanyrd.com,它的“行动召唤”按钮则总是出现在很显著的位置。World Wildlife Federation(WWF)网站对“行动召唤”按钮的处理也是一个很好的例子。“Donate”和“Adopt”这两个按钮会在页面当中一直存在。这两个按钮在两种设计中都被突显了,没有被压缩。
正如上面列举的这些RWD网站,如果你在设计网站过程中,时时刻刻都把可用性原则放在脑海里,那么你的网站就会带给用户卓越且一致的用户体验。
注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。