020-25664441

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 软件开发 >

Web产品设计的适配方法

发表时间:2021-04-26 18:19

文章来源:ahao11

浏览次数:

原标题:网页产品设计的改编方法

编者按:如何为一个产品制定合适的接口规则?随着产品的迭代更新,作为设计师,更需要在了解产品特性的情况下,设计出合理有效的界面布局。本文介绍了网络产品设计改编的选择,并提出了自己的观点。

编者按:如何为一个产品制定合适的接口规则?随着产品的迭代更新,作为设计师,更需要在了解产品特性的情况下,设计出合理有效的界面布局。本文介绍了网络产品设计改编的选择,并提出了自己的观点。

一、开幕

如今,几乎所有的网页都必须以响应性和适应性的方式进行设计,以便产品能够覆盖更多的终端。在接手产品设计初期,制定界面适配规则时,你有没有遇到过以下问题:

宽度单位我是用百分比还是px?还是rem?区别是什么? 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、CSS像素?浏览器窗口大小和设备大小和分辨率大小区是什么区别? 什么是响应式网站,自适应又是什么?两者有何区别和联系? 百分比宽度布局和流式布局和前者的关系是什么? 既然响应式这么流行,为何淘宝、京东等没有去做,而是单独开发了一个移动端版?这里面有那些坑需要避开?

二、历史走廊

早期硬件设备落后,绝对静态布局主要用于网页。绝对固定宽度的布局称为静态布局和固定布局。

展开全文
随着时代的变迁,技术发展了。由于浏览器的增加,开发者忙于兼容各种浏览器。在此期间,出现了各种设备适配的解决方案,但尚未成为主流。这种新的布局方法被称为自适应网页设计(AWD)。

当时大多指宽度自适应布局。

在这种新思路下,有两种具体的解决方案:百分比宽度布局和流体布局。

当时大家都没有响应式布局的概念,但是这个时候出现了一个新词——渐进性增强。在逐渐增强出现之后,又出现了另一个词,优雅的退化。这里只是一个典型的例子:Gmail和QQmail。两者都是百分比宽度布局,属于自适应布局,但又有所不同。

QQmail是CSS黑的完美体现。几乎可以用任何浏览器看到同一个邮箱,为了统一用户体验。

Gmail使用渐进式增强。浏览器越新越强,看到的效果越好,以增强用户体验。后来谷歌发布安卓,移动互联网爆发,html5标准发布。

互联网大战从PC走向手机。手机虽然屏幕更小,但提供的功能更多。随着用户需求的增加,网站更加注重用户体验。

因此,谷歌的逐渐增强得到了广泛认可。结合自适应的思想,2010年伊森·马科特(Ethan Marcotte)提出的响应性网页设计(Responsive Web Design)概念应运而生。

相关案例查看更多