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

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

什么是前端开发中的 mobile first 策略_第1张图片

两个相关联的概念:

1. Responsive Web Design (RWD)

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

什么是前端开发中的 mobile first 策略_第2张图片

2. “Progressive Advancement” & “Graceful Degradation”

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

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

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

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

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

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

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

什么是前端开发中的 mobile first 策略_第3张图片

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

更多Jerry的原创文章,尽在:"汪子熙":
什么是前端开发中的 mobile first 策略_第4张图片

你可能感兴趣的:(什么是前端开发中的 mobile first 策略)