什么是前端开发中的 mobile first 策略

简介: 在 2010 年的世界移动大会上,谷歌 CEO 埃里克施密特提出,设计师在产品设计中应该遵循“移动优先”的原则。 “移动优先设计”是什么意思? 它为什么如此重要? 如何制作? 我将在下面的部分回答这 3 个问题。

在 2010 年的世界移动大会上,谷歌 CEO 埃里克施密特提出,设计师在产品设计中应该遵循“移动优先”的原则。 “移动优先设计”是什么意思? 它为什么如此重要? 如何制作? 我将在下面的部分回答这 3 个问题。

image.png两个相关联的概念:

1. Responsive Web Design (RWD)

响应式网页设计是一种网页设计方法,它使网页能够自动适应不同设备的屏幕,以人们感觉舒适的方式显示内容。 这大大减少了用户浏览网页时的平移、缩放和滚动等操作。

image.png

2. “Progressive Advancement” & “Graceful Degradation”

这两个概念是在响应式网页设计之前提出的。 为了使网页或应用程序界面在不同设备上合理显示,设计人员提供了针对不同终端的定制版本的产品。

Progressive Advancement 是指我们在设计产品时,首先为相对较低的浏览器(如手机上的浏览器)构建一个版本。 此版本包括最基本的功能和特性。 之后,我们倾向于平板电脑或PC的高级版本,在基本版本的基础上增加交互、更复杂的效果等,以获得更好的用户体验。


而“优雅降级”则相反,从桌面这样的高级端开始产品设计,并在一开始就构建一个功能全面的版本。 然后设计师通过裁剪一些功能或内容,使产品与移动端兼容。


如果 UI/UX 设计师从桌面版本开始产品设计,他们将不可避免地希望利用高级端的大部分优势。例如,光标鼠标支持的悬停效果;高清图像和复杂图表,只有在最近有带宽时才能正常显示。就这样,设计师们努力完成一个令人惊叹的桌面版本,却发现它很难被移动端采用,除非他们放弃很多漂亮的想法。如果是这样,移动端版本将更像是一个事后的想法,一个被淡化的不完整的产品。


但如果我们以移动端产品设计为出发点,在带宽、屏幕尺寸等限制下,设计师自然会抓住产品的关键点,走向功能优先的简洁利落的产品。当平台扩展到平板电脑或个人电脑时,设计人员可以利用这些先进端的独特功能,逐步加强产品。这可能是渐进式进步策略被广泛使用的主要原因。


“移动优先”正是“渐进式推进”的规则。


“移动优先”,顾名思义,就是从限制较多的移动端开始产品设计,然后扩展其功能,打造平板或桌面版本。

image.png

除了上面提到的渐进式进步对抗优雅降级的胜利之外,我们有更多切实的理由相信移动优先原则在产品设计中很重要。 也就是说,这些年来全世界移动使用的爆炸式增长。


image.png

目录
相关文章
|
3月前
|
缓存 前端开发 JavaScript
解密前端性能优化:提升网页加载速度的关键策略
网页加载速度不仅影响用户体验,还对搜索引擎排名有直接影响。本文将深入探讨前端性能优化的多种策略,包括资源压缩与合并、延迟加载、CDN加速等。通过具体的优化方法和实际案例分析,读者将能够掌握提升网页性能的实用技巧,并能够在实际项目中有效地应用这些策略来实现更快的加载速度和更流畅的用户体验。
|
2月前
|
前端开发 JavaScript API
解锁高效应用构建:Vuex与后端交互的前端状态同步策略,让数据流动如行云流水,紧跟前端开发的热点趋势
【8月更文挑战第27天】本文深入探讨了Vue框架下的前端状态管理库Vuex与后端服务交互时的状态同步策略。通过剖析Vuex的核心机制——状态(State)、变异(Mutation)、动作(Action)及模块(Module),文章展示了如何优雅地将后端数据加载并更新至前端状态中。特别地,借助示例代码解释了Action处理API调用、Mutation更新状态的过程,并介绍了如何通过模块化和命名空间提高状态管理的准确性和时效性。此外,还讨论了组件如何利用`mapState`和`mapActions`简化状态访问与操作的方法。遵循这些策略,开发者可以在构建复杂应用时显著提升性能与用户体验。
36 0
|
14天前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
随着互联网技术的发展,用户对网页加载速度和交互体验的要求日益提高,前端性能优化成为提升用户体验和网站竞争力的关键。本文探讨了前端性能优化的重要性和七大关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS和JavaScript执行及第三方脚本优化,并提供了实践案例,帮助开发者构建更快、更高效的网站。
|
7天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
2月前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
|
4天前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
在现代web开发中,前端性能优化至关重要。本文探讨了提升用户体验、转化率及降低服务器负载的关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS/JavaScript执行、优化第三方脚本等,并介绍了Webpack/Rollup模块打包、HTTP/2特性、性能预算及Lighthouse/WebPageTest测试工具的应用。通过这些方法,可显著提高网站性能。
|
2月前
|
缓存 前端开发 JavaScript
前端项目性能优化:使用vite的分包策略
【8月更文挑战第4天】Vite性能优化-分包策略
64 2
前端项目性能优化:使用vite的分包策略
|
2月前
|
缓存 前端开发 数据格式
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
构建前端防腐策略问题之保证组件层的代码不受到接口版本变化的问题如何解决
|
2月前
|
存储 缓存 前端开发
构建前端防腐策略问题之防腐层帮助前端实现稳定性兜底难的问题如何解决
构建前端防腐策略问题之防腐层帮助前端实现稳定性兜底难的问题如何解决
|
2月前
|
前端开发 API 开发者
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
构建前端防腐策略问题之防腐层的核心代码实现以RxJS Observable为中心的的问题如何解决
下一篇
无影云桌面