什么是前端开发中的 mobile first 策略
在 2010 年的世界移动大会上，谷歌 CEO 埃里克施密特提出，设计师在产品设计中应该遵循“移动优先”的原则。 “移动优先设计”是什么意思？ 它为什么如此重要？ 如何制作？ 我将在下面的部分回答这 3 个问题。
两个相关联的概念：
1. Responsive Web Design (RWD)
响应式网页设计是一种网页设计方法，它使网页能够自动适应不同设备的屏幕，以人们感觉舒适的方式显示内容。 这大大减少了用户浏览网页时的平移、缩放和滚动等操作。
2. “Progressive Advancement” & “Graceful Degradation”
这两个概念是在响应式网页设计之前提出的。 为了使网页或应用程序界面在不同设备上合理显示，设计人员提供了针对不同终端的定制版本的产品。
Progressive Advancement 是指我们在设计产品时，首先为相对较低的浏览器（如手机上的浏览器）构建一个版本。 此版本包括最基本的功能和特性。 之后，我们倾向于平板电脑或PC的高级版本，在基本版本的基础上增加交互、更复杂的效果等，以获得更好的用户体验。
而“优雅降级”则相反，从桌面这样的高级端开始产品设计，并在一开始就构建一个功能全面的版本。 然后设计师通过裁剪一些功能或内容，使产品与移动端兼容。
如果 UI/UX 设计师从桌面版本开始产品设计，他们将不可避免地希望利用高级端的大部分优势。例如，光标鼠标支持的悬停效果；高清图像和复杂图表，只有在最近有带宽时才能正常显示。就这样，设计师们努力完成一个令人惊叹的桌面版本，却发现它很难被移动端采用，除非他们放弃很多漂亮的想法。如果是这样，移动端版本将更像是一个事后的想法，一个被淡化的不完整的产品。
但如果我们以移动端产品设计为出发点，在带宽、屏幕尺寸等限制下，设计师自然会抓住产品的关键点，走向功能优先的简洁利落的产品。当平台扩展到平板电脑或个人电脑时，设计人员可以利用这些先进端的独特功能，逐步加强产品。这可能是渐进式进步策略被广泛使用的主要原因。
“移动优先”正是“渐进式推进”的规则。
“移动优先”，顾名思义，就是从限制较多的移动端开始产品设计，然后扩展其功能，打造平板或桌面版本。
除了上面提到的渐进式进步对抗优雅降级的胜利之外，我们有更多切实的理由相信移动优先原则在产品设计中很重要。 也就是说，这些年来全世界移动使用的爆炸式增长。
更多Jerry的原创文章，尽在：“汪子熙”:
什么是前端开发中的 mobile first 策略相关推荐
- 前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
- 前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
- java backbone_[Java教程]移动前端开发中的Backbone之一：Backbone中的模型和集合
[Java教程]移动前端开发中的Backbone之一:Backbone中的模型和集合 0 2015-09-24 17:00:04 当我们开发含有大量Javascript的web应用程序时,首先你需要做 ...
- 【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
- 初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
- 熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...
- 前端中什么是中台开发环境_Web前端开发中需要学习什么?会使用到哪些开发工具？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水.下面和千锋广州小编一起来看看吧! 前端工程师的主要职责: 前端工程师在不同的公司有不同的 ...
- 前端开发中的调试技巧
前端开发中的调试技巧 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...
- 前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
最新文章
- 域策略 设置本地管理员
- php加mysql分页_php mysql 分页函数
- php和java融合_JSP、PHP与JAVA融合的开发环境之二
- redis介绍及保持session会话
- Spring boot模板引擎
- 重复制造和离散制造特点
- cad在哪里设置图幅大小_一看就懂！菜鸟也能快速入门CAD，关键掌握这4个诀窍...
- 自然语言处理之词向量模型（三）
- 【Python3】Tensorflow_Fasterrcnn训练自己数据集，Keras_Yolov3_GPU训练自己数据集
- CSS中的层叠性、继承性、优先级、权重
- python在线发音-Python如何实现文本转语音
- 二十年后我发明了保姆机器人作文_小学生作文“二十年后的我”走红，老师看完气愤，让学生站着听课...
- Coder Essential之编程语言学习知识点纲要
- 危险漫步_2006年糖尿病漫步-漫步之日
- 量化基金投资之Alpha策略简介
- QT 小数位有效数显示
- 高仿微信 Windows 端
- Android学习---zygote(上)
- 机械学习基础以及在pynq-Z2上部署Faster-RCNN的项目学习3
- 学习总结-《父与子的编程之旅》chapter 20