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

举报
汪子熙 发表于 2022/10/02 09:46:24 2022/10/02
【摘要】 在 2010 年的世界移动大会上,谷歌 CEO 埃里克施密特提出,设计师在产品设计中应该遵循“移动优先”的原则。 “移动优先设计”是什么意思? 它为什么如此重要? 如何制作? 我将在下面的部分回答这 3 个问题。两个相关联的概念: 1. Responsive Web Design (RWD)响应式网页设计是一种网页设计方法,它使网页能够自动适应不同设备的屏幕,以人们感觉舒适的方式显示内容。 ...

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

两个相关联的概念:

1. Responsive Web Design (RWD)

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

2. “Progressive Advancement” & “Graceful Degradation”

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

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

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

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

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

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

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

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。