生图提示词手册
首页 交互设计 什么是Responsive Web Design

什么是Responsive Web Design

Responsive Web Design 这个概念,最知名的文章当然是 A List Apart 的这篇。还找不到什麽很好的中译,大致上的意思是「适应性网页设计」,也应该可以说成…

Responsive Web Design 这个概念,最知名的文章当然是 A List Apart 的这篇。还找不到什麽很好的中译,大致上的意思是「适应性网页设计」,也应该可以说成「弹性调适型的设计」,还有些人译成「自适应网页设计」,这个到底哪个最适合呢?我想也没必要具体讲述,自己了解就好,另外上次分享的《15个Responsive WordPress主题》就是采用适应性网页设计。

绝对重要的原因是近年来行动载体的风行,当然就是 iPhone 与 iPad 分别带来的智慧型手机与平板电脑,除了萤幕较小,也必须以手指触控操作,所以改变了很多东西。这似乎又可分成两种趋势,一种是 RWD,另一种就是 Mobile Design,类似以 jQTouch 或 jQuery Mobile 这些框架特别製作专属的版本。

由于 RWD 实际上更改的是外观,也就是 CSS 所控制的佈景主题,使用者实际上载入的还是同样的一张网页,所以有人认为这对于行动载体,尤其是手机来说,还是容易造成载入网页时间过久的问题。调製行动 专属网站,就是连送出的资料都经过筛选或处理,效能可能更好。当然这两种差别,在以应用程式(Web App)为主的网站会比较明显,以内容网站来说,RWD 还算是一种有效且便利的做法。

实际上,网页设计本来是「原生 Responsive 的」,我们本来就是为了适应电脑萤幕的尺寸,刻意做成某些范围内的尺寸,也是因为比较好製作的缘故吧。我的原意并非深入研究网页设计,而是偏向电子书与数位内容的呈现,所以更觉得这是件有趣的事。

例如 EPUB 被认为具备「ReFlow」的能力,事实上却只是网页天生的特性罢了。但是为了要让版面更好看、更易读,结果还是得针对不同大小的萤幕特别去调整 CSS,RWD 实际上就是「多种萤幕设计版本」的意思。这也跟目前 iPad 上的数位杂志很类似,即使是直横两种,其实还是很接近两个独立的版面。

完全流动、自动适应、甚至自动找到最适排版的方法,老实说我觉得是不存在的,至少不会是百分百。

一本电子书如果递送到读者手上,你不知道读者会在怎样的设备、多大的宽度萤幕上阅读,目前这些事通通交给阅读系统去完成,阅读系统如果预设值设定得 不错(例如 iBooks),阅读体验或许不差;如果套用得很糟糕,作者、出版社却也无计可施。由于单独的数位内容并非一个独立的应用程式,所以不能用 Mobile Edition 概念去处理,剩下来的解决方法,其实就是 Responsive Design。

Adobe Folio Digital Magazine 实际上就是这样,你必须选择至少直横任一种排版基础,或是两种都做。至于拿到七吋的 Android Tablet 上怎麽办?当然是再做一种排版(不对,是直横各一种…)。

单纯的 Media Queries 对应不同 CSS 样式表,提供最基本的逻辑,你可以完全独立思考、甚至让两组人分别发挥创意,但成本很高。加入类似 CSS Grid 的概念,是在不同之中整理出一些共同之处,试着让一部份工作由系统能力处理,设计者要将焦点摆在「差异点」上。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

交互设计:如何做到品质?

如何做到品质,即交互设计的高品质。 一、怎样算是品质? 首先,探讨这个问题,意义何在? 笔者认为,有两点意义:首先,作为...

从产品的角度看交互设计原则

对于一名产品经理,交互设计是原型设计里的重要环节,交互设计的好坏,直接影响产品是否能够吸引和留住用户,因此了解交互设计的...

从入门到精通,了解智能交互设计专业

随着科技的飞速发展,智能交互设计专业逐渐成为热门领域。这个专业涵盖了人机交互、人工智能、设计思维等多个方面,为从业者提供...

交互设计的基本原则探究

随着科技的不断发展,交互设计已经成为产品设计中不可或缺的一环。在设计用户界面时,遵循一些基本的交互设计原则是确保用户体验...

AR智能眼镜交互设计研究

AR眼镜交互形式分为外接设备和自然交互,我们将一一分析这些交互形式特点和应用场景。预测未来AR眼镜交互形式将会往哪个方向...

发表回复

返回顶部