《移动优先与响应式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%。两者提供了完美的浮潜之所,看看朋友在做什么。

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

相关文章
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
189 3
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
289 0
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
306 5
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
297 9
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
174 7
|
Web App开发 编解码 前端开发
构建响应式Web应用的最佳实践
构建响应式Web应用的最佳实践
208 0
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
127 0