《移动优先与响应式Web设计》一2.3 时与地

简介:

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第2章,第2.3节,作者: 【美】Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 时与地

移动优先与响应式Web设计
简单而言,某事物的周边环境,就是“执行环境”最基本的定义。例如,台式计算机多数放在桌上(在家或办公室),坐着使用,长期连接电源和网络,相对较私隐,诸如此类。当然,有人会长时间坐着使用移动设备,但更有可能在很多不同地方使用,因为移动设备是便携式的。

由于人们经常随身携带移动设备,因此时与地决定了用户如何使用。执行环境对设计影响深远。设计移动体验时,其实就是设计全天候体验。

2.3.1 地点 

很多人一想到设计移动体验,就会想到街上匆忙的商人。这个画面当然存在,可是移动设备的使用地点还有很多。最近有项调查,探讨所有智能手机用户的使用地点。

  • 84%在家用。
  • 80%休息时用。
  • 74%排队时用。
  • 69%购物时用。
  • 64%工作时用。
  • 62%看电视时用(另一个研究为84%)。
  • 47%随时用。
  • 84%的用户都在家用移动设备,这数字颇为令人惊讶。比起街上的商人,似乎在家里使用移动设备收邮件更加符合现实。以上两个情况也有一个共通点:移动设备很难令人全神贯注。

每次我思考使用移动设备的用户习惯时,都会想象用户是“单眼单拇指”。他们只有一只拇指,因为他们单手拿着手机,用一只拇指控制;他们只有一只眼睛,因为多数情况下,他们都不会全神贯注地使用设备。

排队时看一看体育比赛战况;单手抱着孩子,单手用手机;坐地铁上班时用;又或者躺在沙发上,边看电视边用。考虑到“单眼单拇指”,就会着手简化移动体验,使其变得更简洁明了,能在以上情况下使用。

就算环境许可,用户能够专心使用,简洁明了的移动体验始终会令人用得更舒服、更轻松。

2.3.2 时间 

技术上,人们可以随时使用计算机,但毕竟每天的不同时段,多数用户会用不同的设备。以作详述,图2.5展示了计算机用户于不同时段阅读储存文章的数量。很明显,用户在早上至中午读得最多,然后越来越少,但下班后又再次回升(晚6:00~9:00)。

图2.6展示了iPhone用户的阅读习惯。共有4个高峰:上午6:00(早餐)、上午9:00(乘车并开始上班)、下午5:00~6:00(下班和乘车)、 晚上8:00~10:00(沙发时间、黄金时间、睡觉时间)。


2_5_6

很明显,计算机使用时间有别于移动设备使用时间,亦有别于平板设备使用时间。为了进一步解释不同设备用户有什么不同的使用习惯,我们参考iPad用户每天阅读所花的时间(见图2.7)。早上只有一个小高峰,下午也没有太多人使用,晚上的情况却截然不同。我发誓,我只是在读网页设计文章。

不同时间,人们会用不同的设备。有时人们只会考虑方便与否。哪台设备离我最近并且能够满足我的需求呢?但大多数时候,用不同设备是因为其各有长处。如果把计算机和移动设备的图表并在一起看(见图2.8),情况显而易见。

这些图表的解释很清晰,人们多数用移动设备来打发闲暇,因此高峰较尖。诺基亚的瑞秋·欣曼用了很好的比喻来对比计算机和移动平台的用户习惯:用计算机就像深潜,用移动设备则像浮潜。


2_7_8

有很多网页程序都比较精简快捷,为用户提供最快、最新、最有用的信息。这些程序像野草一样迅速增长。Facebook移动网页版的使用量年增长率为112%。Twitter年增长率则为347%。两者提供了完美的浮潜之所,看看朋友在做什么。

请注意,无论浮潜还是深潜,都是为了看水中的鱼。即使不同人会在不同时间和地点用移动设备互动,但网页的核心价值始终如一。因此,不要认为移动设备不需要社交内容和功能。

相关文章
|
10天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
15天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
16 0
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
1月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox的力量
【2月更文挑战第22天】 在当今多变的互联网景观中,创建一个能够适应不同屏幕尺寸和设备类型的响应式Web界面已成为前端开发者的核心任务。本文将深入探讨Flexbox——一个强大的CSS布局模式,它为构建灵活且易于管理的响应式设计提供了坚实的基础。通过详细解读Flexbox的关键特性及其在实际项目中的应用,我们将揭示如何有效地使用这一工具来提升用户界面的质量和性能。
|
1月前
|
Web App开发 编解码 前端开发
构建响应式Web界面:现代前端开发的实用指南
【2月更文挑战第22天】 随着移动互联网的兴起,响应式网页设计已成为前端开发者必须掌握的核心技能之一。本文将深入探讨如何通过灵活运用HTML5、CSS3和JavaScript等技术,构建出能够适应不同屏幕尺寸和设备的Web界面。文章不仅涉及理论概念,还包含具体实践案例,旨在帮助读者理解并应用响应式设计的核心原则,从而提升网站的用户体验和访问效率。

热门文章

最新文章