为响应性网站设计经验: 调整你的内容从 4英寸到 40英寸电视机

分享于 

11分钟阅读

Web开发

  繁體

开始之前

响应性的Web设计是为了确保网站和内容规模的布局随着可以用的屏幕实现而流动。 这是一种重要的方法,用于聚焦网站内容和用户功能,同时确保用户有良好的经验。 如果你没有阅读本系列的第一篇文章,"为什么网络已经为回应网页设计而准备了"一定要先阅读它。

不过,如果你想了解站点的经验,了解用户访问站点的设备是否改变了网站用户的预期功能,则值得采取一步。 是用户查看你的网站,以便快速更新她的手机,而她外出? 他坐下来,10英尺远离一个大型电视屏幕,想要沉浸在一个相对被动的消耗体验。 其他用户坐在电脑上,想从你的网站内容中获得最大收益? 大多数情况下,这些期望如何影响你在相应的屏幕大小上提供的站点布局和功能。

这是什么类型的网站?

在不同形式因素的情况下,规划站点的内容层次结构绝对是第一步。 consider在 walk computer或者客厅 4-inch 手机时,用户通过电话访问网站时,评估并比较它的最佳体验。

新闻站点( 内容消耗)

人们访问 ContosoNews.com 主要是为了在当日事务中做一件事情。 当你看到这个网站是如何在电脑屏幕上展示的时候,它被设计成一个像报纸一样的布局。 更重要的是,在当前的事务。商业。体育。娱乐和其他主题中,单一主页期望吸引和保留不同种类的读者,并向他们展示了ContosoNews有兴趣将它们吸引到的内容。 主页具有丰富的幻灯片布局,推荐文章的循环,各类新闻可以用 below 折叠,建议论坛甚至天气。 图 1 展示了不同分辨率下的站点示意图。

图 1.比较 ContosoNews.com的布局

如果你在移动电话浏览器上访问该网站,可以看到内容的子集,菜单和链接导航。 在电脑上可以使用的内容已经被排序了,最后的标题已经给出了重点 上面。 推荐文章的幻灯片放映被一系列带有链接的评论代替。 来自另一个类别节的顶部文章,替换为一个单独的类别选取器,从主页导航出来。

这样,在一个手机上访问网站的用户可以轻松地注意到可以用的内容,并深入了解。

局部吸引力( 超级本地站点)

Contoso站是西雅图的一个新餐厅。 people people visit visit visit visit #i。

然而,当你在智能手机上访问这个网站时,公司会想到你访问它的位置。 电话甚至可以能要求你的位置,并向你展示一个地图,最快路由到餐馆。 有些内容可以用更少的细节显示例如点评评论被归结为一个行 Fragment,而内容( Twitter 提要,例如) 则可以完全隐藏到用户的手机上。 图 2 显示了这个场景的示例。

图 2.比较Contoso站点的布局

如图1 所示,本地企业应该对手机用户进行排序并显示完全不同的内容集,让他们的移动体验更加敏感。

媒体站点( 丰富的视听内容)

ContosoTube是一个受欢迎的互联网服务,人们分享各种视频。 用户可以看到最新的最高收视率和最频繁观看的内容。 他们在登录和浏览网站时,可以创建和编辑视频播放列表,获得个性化建议。

ContosoTube在手机上的体验是为了展示用户从其他应用中打开的视频,搜索视频,并允许用户访问他们现有的订阅和播放列表。 他们的经验对于内容选择非常有限。

ContosoTube是一个非常有趣的问题,因为在大型屏幕上使用的Xbox站点与鼠标在屏幕上的体验不同,因为ContosoTube用户在屏幕上访问的方式不一样,而不是鼠标。 在这种情况下,电视屏幕可能会诱使开发者提供更多的电脑,但在电视上访问ContosoTube的用户很可能会主要关注观看内容,而不是去创建它,或者让他们与其他人通信。 图 3 比较ContosoTube站点布局。

图 3。PC,电视和智能手机上的ContosoTube。

HTML5游戏

On Build Build Build new在浏览器上探索HTML技术创造身临其境的游戏体验,杰克 Lawson provides在设计的网站上discussion游戏体验。

游戏是网站设计的一个很好的例子,用户可以根据访问站点的上下文来完全不同的体验。 ,user,customizations,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar,avatar。

在控制台上,这个用户可以能期望有一个类似的特性,但是他也希望能够使用控制器来驱动体验。 ( Nikhil指出( 目前有 Chrome 和firefox的库,尽管 跨浏览器 支持有限,就像Nikhil在JavaScript库的控制器支持中指出的。 )

从手机本身来看,用户可能寻找更简单的动作,比如检查他的库存和玩家的统计数据,在头像上执行一些定制,或许从游戏市场购买一些 add-ons。 游戏开发人员,可以为访问他们的网站的用户提供这样一个环境相关的体验。

用户界面设计的注意事项( 即 Fat )

除了信息设计之外,你还需要考虑用户输入的模式。 今天,首先也是最重要的是,这意味着你的站点。 访客在手机和平板电脑上并不使用触摸屏,他们也使用touch-screen-based电脑。 这里外,当你想到用户上的用户时,他们与你的网页的UI元素交互,并不像鼠标那样精确。

对于使用传统鼠标键盘元素的pc,理想情况下,你不需要像使用传统鼠标键盘元素那样设计和编写你的用户界面元素。 实际上,Windows 不存在这种区别,用户可以使用USB鼠标运行微软,也可以使用带有触摸屏的桌面。 未来,合理地假设更传统的电脑将配备触摸屏功能是合理的。

这就是为什么最好的方法是为用户输入设计一个one-size-fits-all接口,让用户可以轻松访问。 鼠标和键盘用户仍然可以与这些页面交互。

在这个方法中,我们将采用最常见的导航方式,比如在我最喜欢的本地电台 Contoso Contoso音乐,下拉菜单中。 这只是一个解决方案的例子,它仅仅说明了链接和导航菜单的一个解决方案,但它说明了我们需要采取的最重要的考虑因素。

图 4.Contoso音乐的下拉导航菜单

这个导航菜单有几个超出响应性的问题,但是它们仍是构建统一站点体验的一部分。

  • 首先,很多网站使用导航菜单,当用户鼠标在菜单标题上显示链接时显示链接。 这是绝对不可接受的,因为鼠标不能很好地转换为触摸屏。 事实上,除了 touch,你不应该依赖鼠标来显示任何有用的信息,因为它不是键盘可以访问的,并且违反 W3C辅助功能指南。
  • 其次,看看链接播放列表和dj的relative 大小。 这两条信息应该在层次结构中处于同一级别。 但是,链接的大小由文本的大小决定。 这使得dj链接不那么突出,而且更难精确地点击触摸屏。 dj的链接可以是 20像素,by像素,这是无法访问的。
  • 另一个细微的问题,你可以看到,在菜单列表项目,只是文本项本身是超链接。 这里外,如果链接Foo的目标是弹出菜单的整个宽度而不是文本宽度,则触摸用户更好。

这里外,all-in-one设备上的用户可以能在不同的设备配置中使用相同的机器。 为用户提供触摸友好,良好的超链接和导航功能是有好处的。

很多网站都使用触摸友好导航的常见示例,比如移动应用程序,或者用于平板电脑的边栏,如图2 所示。

图 5.Contoso音乐导航菜单的触摸友好重新设计

导航菜单使用触摸。鼠标或者键盘来展开和 collapse 样式子菜单。 所有的链接都是相同的宽度( 子菜单项),对于每个链接,整个 rectangle 是可以点击的,而不仅仅是文本。

site MSN.com. ( 以为单位显示 ) sports sports sports sports MSN.com sports sports site。

在old图1 中,我们将展示新的触摸友好版,目前只提供了 Windows,触摸友好UI将在测试后在整个浏览器中滚动。 注意更宽敞的布局和更大的点击目标。

图 7.MSN.com的新查找

一个站点适合所有

响应式网页设计不仅应该基于用户屏幕大小优雅地调整相同内容的大小。 要在多个屏幕上最好地连接用户,你的网站不仅应该意识到设备特性( 如屏幕大小)。

在本系列的下一篇文章中,我将介绍一些用于响应设计的 echniques。

本文是来自 IE 团队的HTML5技术系列的一部分。 试用本文中的概念,三个月免费 BrowserStack 跨浏览器 测试 @ http://modern.IE

这篇文章是用 Rahul Lalmalani写的。 Rahul是一个前微软工程师,当前是freelances的应用和Web开发。 你可以在 RahulJL.com 在线跟踪他,并联系他 @quasirahul。


WEB  EXP  DES  设计  电话  ADA  
相关文章