为响应式网站设计体验：将内容从4英寸手机适配到40英寸电视
4.78/5 (4投票s)
为响应式网站设计体验：将内容从4英寸手机适配到40英寸电视
开始之前
响应式网页设计旨在确保网站的布局和内容能够流畅地适应可用的屏幕空间。这是一种很好的方法，可以让你专注于投资改进网站内容和用户功能，同时确保用户无论使用何种设备和屏幕尺寸访问你的网站都能获得良好的体验。如果你还没有阅读本系列的第一篇文章《为什么Web已为响应式网页设计做好准备》，请务必先阅读。
然而，值得退一步思考你的网站体验，并了解用户访问你网站的设备**是否改变了用户对网站功能的期望**。用户是否在使用手机在旅途中快速查看你的网站更新？他是否坐在离大电视屏幕10英尺远的地方，希望沉浸在相对被动地消费丰富内容、视频和游戏的体验中？其他用户是否坐在PC前，希望充分利用你的网站内容？最重要的是，这些期望如何影响你在相应屏幕尺寸下提供的网站布局和功能？
这是什么类型的网站？
为你的网站规划不同设备形态下的内容层次结构，无疑是获得出色响应式网站体验的第一步。考虑以下示例，它们评估并比较了客户在以下情况下希望获得的最佳体验：当他们在步行或乘坐公共交通工具时使用4英寸手机访问你的网站；当他们坐在电脑桌前时；以及当他们躺在客厅沙发上时。
新闻网站（内容消费）
人们访问*ContosoNews.com*主要目的是为了做一件事——了解当天时事。当你在PC屏幕上看到这个网站时，它的布局就像一份报纸。更重要的是，这个单一主页旨在吸引并留住对时事、商业、体育、娱乐等不同主题感兴趣的读者，并向他们展示ContosoNews拥有他们会感兴趣的内容。主页布局丰富，包含幻灯片、推荐文章轮播、如果向下滚动则显示更多新闻类别、推荐社论甚至天气。**图1**示意性地展示了该网站在不同分辨率下的布局。
如果您通过手机浏览器访问此网站，您会看到内容的子集，并通过菜单和链接导航到其余内容。PC上可用的内容已经过优先级排序，头条新闻在首屏获得了焦点。推荐文章的幻灯片被一系列带有链接的摘要取代。其他类别部分中的热门文章消失了，取而代之的是一个单一的类别选择器，该选择器会导航离开主页。
通过这种方式，使用手机访问该网站的用户可以粗略浏览，了解可供消费的内容，并方便时深入挖掘。
本地景点（超本地网站）
Contoso Station是西雅图一家时尚的新餐厅。当人们通过他们的PC或电视屏幕访问该餐厅的网站时，餐厅会自豪地展示其最新的Yelp评论、新闻文章以及添加了#i<3contoso标签的用户发布的推文。
然而，当您通过智能手机访问该网站时，公司会做出一个合理的假设：您正在旅途中访问其网站，希望找到其位置、营业时间和电话号码。手机甚至可能会请求您的位置，并显示一张地图，其中包含前往餐厅的最快路线。一些剩余的内容可以以更少的细节呈现——例如，Yelp评论被浓缩成一行摘要——而其余内容（例如Twitter动态）对于通过手机访问该网站的用户则可以完全隐藏。**图2**展示了此场景的一个示例。
如**图2**所示，本地商家应优先向手机用户展示一套完全不同的内容，并使他们的移动体验对位置更加敏感。
媒体网站（丰富的视听内容）
ContosoTube是一个流行的互联网服务，人们可以在上面分享各种视频。用户可以看到最新的高评分和最常观看的内容。当他们登录并浏览网站时，他们可以创建和编辑视频播放列表，获得个性化推荐，订阅其他用户的播放列表，甚至互相发送消息。
ContosoTube在手机上的体验旨在显示用户从其他应用程序（即时消息、电子邮件、Twitter等）打开的视频，搜索并查看视频，并允许登录用户访问他们现有的订阅和播放列表。他们在内容策划方面的体验非常有限。
ContosoTube有趣之处在于，Xbox网站的用户功能体验与手机体验相似，尽管Xbox网站的布局基于屏幕空间有所不同，因为即使ContosoTube用户在大屏幕上访问该网站，他们也可能是在客厅里访问，并且使用的控制器精度不如鼠标。虽然电视的屏幕尺寸可能会诱使开发者提供功能更像PC的体验，但通过电视访问ContosoTube的用户极有可能主要专注于观看内容，而不是创建内容、管理内容和与他人交流。**图3**比较了ContosoTube的网站布局。
HTML5游戏
在Build New Games这个探索HTML技术以在浏览器上创建沉浸式游戏体验的网站上，Jack Lawson就响应式设计的网站的游戏体验提供了精彩的讨论。
游戏是网站设计的一个绝佳范例，用户会根据访问网站的上下文期待完全不同的体验。例如，如果用户通过PC访问*WorldOfContosoCraft.com*，他可能期待一个功能完善的游戏体验——他可以自己玩游戏，通过游戏内聊天功能与其他玩家互动和交流，对他的头像进行自定义和设置，甚至参与游戏内市场购买升级、护甲和其他好东西。
在游戏机上，该用户可能期望类似的丰富功能体验，但他也期望能够使用控制器来驱动体验，而不是鼠标和键盘。（目前Chrome和Firefox都有相关的库——尽管跨浏览器支持有限，正如Nikhil Suresh在他关于JavaScript库中的控制器支持的讨论中指出的那样。）
在手机本身上，用户可能只想执行一些简单的操作，例如查看库存和玩家统计数据，对头像进行一些自定义，以及可能从游戏内市场购买一些附加组件。游戏开发者可以为那些通过手机访问其网站几分钟的用户提供这种情境相关的体验，即使他们无法玩游戏，也能让用户沉浸在整体体验中。
UI设计考量（又称胖手指）
除了信息设计，你还需要考虑用户输入模式。如今，最重要的是，这意味着你的网站UI要对触摸友好。访问者不仅在手机和平板电脑上使用触摸来访问你的网站；他们也使用基于触摸屏的PC。此外，当你考虑到Xbox用户时，他们是通过操纵杆与网页的UI元素进行交互的，这不如鼠标精确。
理想情况下，你**不应该**为触摸设备（平板电脑和手机）和带有传统鼠标键盘的PC设计和编写不同的用户界面元素（按钮、链接、表单控件等）。事实上，Windows 8消除了这种区别，用户可以使用USB鼠标操作Microsoft Surface，也可以使用触摸屏操作台式机。展望未来，可以合理地假设更多传统PC将配备触摸屏功能。
这就是为什么最好的方法是为用户输入设计一个“一尺寸适合所有”的界面，让触摸用户访问起来感到舒适。鼠标和键盘用户仍然可以很好地与这些页面进行交互。
为了突出这种方法的一些范式转变，让我们以我最喜欢的本地电台 Contoso Music 上最常见的导航形式之一，下拉菜单为例。（参见**图4**。）这只是触摸屏链接和导航菜单解决方案的一个例子，但它说明了我们需要考虑的最重要事项。
这个导航菜单有一些问题超出了响应式布局的范畴，但它们仍然是构建跨多个设备的可扩展统一网站体验的不可或缺的一部分。
- 首先，许多网站的导航菜单在用户鼠标悬停在菜单标题上时才会显示链接。这绝对是不可接受的，因为鼠标悬停在触摸浏览器上无法很好地转换。事实上，撇开触摸输入不谈，你根本不应该依赖鼠标悬停来显示任何有用的信息，因为它无法通过键盘访问，并且违反了W3C无障碍指南。
- 其次，看看“播放列表”和“DJ”这两个链接的相对大小。这两部分信息在层级结构中应该处于同一级别。然而，链接的大小是由文本大小决定的。这使得“DJ”链接不那么显眼，也更难在触摸屏上精确点击。“DJ”链接可能小到20像素乘40像素，这是不方便访问的。
- 另一个细微的问题，你可以通过快速浏览菜单列表项发现，就是只有文本项本身是超链接。在这里，如果链接“Foo”的目标是弹出菜单的整个宽度，而不仅仅是文本宽度，那么触摸用户会获得更好的体验。
此外，一体机用户可能会在不同的设备配置下使用同一台机器，在这种情况下，他们可能会在某个时间点使用鼠标访问您的网站，然后稍后通过触摸重新访问。为用户提供触摸友好、间距适中的超链接和导航是有益的。
许多网站用于其菜单的触摸友好导航的常见示例，尤其是在移动应用程序或平板电脑的侧边栏中，如**图5**所示。
导航菜单利用触摸、鼠标或键盘来展开和折叠手风琴式的子菜单。所有链接的宽度都相同（甚至子菜单项），并且对于每个链接，整个矩形都是可点击的，而不仅仅是文本。
MSN.com是一个很好地实现这一转变的网站。旧版MSN.com（如**图6**所示）内容密度明显更高，包含大量文本链接（可点击区域较小），且排列紧密（使用触摸和游戏摇杆时容易出错），并且鼠标悬停会显示新闻子类别（请参阅“娱乐”菜单下的内容）。
一站式解决方案
响应式网页设计不应仅仅是根据用户屏幕尺寸优雅地调整相同内容的大小。为了在多个屏幕上最好地与用户建立联系，您的网站不仅应该了解设备的物理特性（例如屏幕尺寸），还应该推断用户的物理环境、输入模式以及她正在寻找的信息类型。
本文是Internet Explorer团队HTML5技术系列的一部分。通过http://modern.IE提供的三个月免费BrowserStack跨浏览器测试，尝试本文中的概念。
本文由Rahul Lalmalani撰写。Rahul曾是微软工程师，目前从事应用程序和Web开发的自由职业。您可以通过RahulJL.com在线关注他，并通过@quasirahul联系他。