关于响应式

作者:黄玄链接:https://www.zhihu.com/question/25836425/answer/31564174来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。根据你的产品特点,进行两种不同的设计,****根据你的设计需求,选择合适的技术方案
A与B不是硬币的正反面,它们为了解决同一个问题而生,它们是同一种思想的延伸。
移动和桌面设计的差别远不止是布局问题。只要有足够的编程量,这些差别是可以通过响应式设计来解决的。事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。但是,如果确实想要处理好平台间的所有差异,我们就回到了原点:进行两种不同的设计。——《Mobile Usability》(《贴心设计 打造高可用性的移动产品》)
其实无论是什么解决方案,我们先来看看我们想要解决的问题:
“屏幕尺寸越来越多,不同设备的交互特质也有着巨大的差别,我们希望我们的网站能够在移动手机、平板、桌面电脑,在键鼠、触摸、无障碍设备上都有优秀的用户体验。所以,我们需要网站的用户界面在不同的平台上有所不同。”
那怎么做呢,一个解决方案应运而生:
响应式设计 (Responsive Web design)

狭义上,我们把主要依靠前端 CSS (包括 Media Query 媒体查询,百分比流式布局,网格与Typography系统……)来对各种屏幕尺寸进行响应的做法,称之为响应式布局,又称作自适应网页设计,或者弹性设计。
这种主要依靠CSS的方案有很多优点,比如:设计元素很容易被复用,设计成本低
前端只需要维护一套CSS代码,维护成本
桌面端与移动端的设计十分接近,令用户感到“熟悉”
不需要任何服务器端的支持
与业务耦合程度低,复用程度高( 以至于 Bootstrap、Foundation 等一干框架都跟进了这个解决方案 )

但问题也很明显,比如:设计需求复杂时,前端的开发成本没有任何减轻
无论是针对桌面还是移动的CSS代码(甚至图片资源文件)都会被同等的下载到客户端(没有考虑移动端的网络优化
如果JS不写两套,桌面端的交互和移动端的交互很难针对平台作出差异

如果你的****移动用户对网站所有的功能和内容有着与桌面用户同等的需求,比如 新闻、报纸(媒体类)网站,或者活动、专题页等 偏重信息传达而轻交互 的网站,那么这个解决方案其实恰到好处:触摸屏优化(胖手指)、减少次要信息…… 这些通过 CSS 解决就够了。
但是,如果我想要做更多的 「移动化设计」,比如 减少信息层级、增强手势操作、让网页更接近一个Native App ?
好吧,为了更复杂的需求,为了我们的网站能更牛逼的 「响应」 各个平台,又有了这些解决方案:
服务器端(后端):
RESS (Responsive Web Design with Server Side Components)通过服务器端组件的响应式网页设计

提倡 RESS 的人认为:基于前端 CSS 的响应式方案只是一种妥协:“ UI 只是在很被动的进行「调整」,而不能真正达到各个平台的最优。好的设计应该达到「这个设备该有的体验」(Device Experiences)。 ”****Device Experiences :A device experience is defined by how a device is most commonly used and the technical capabilities or limitations it possesses.
RESS 的本质还是服务器端动态的生成,返回 HTML、JS、CSS、图像等资源文件,但是只使用同一个 URL 就可以提供给移动端定制化更强的网页,同时还大大节省了网络资源。
前端(主要是JS),比如:
在 JavaScript 中实现两套逻辑,分别兼容键鼠、触摸设备
通过 UA、特性检测 在前端做设备判断,对资源进行异步加载,渲染不同模版
通过 特性检测 在前端做设备判断,使用不同的业务逻辑
前端的模块化也可以帮助解决这个问题,比如针对不同的平台加载不同的模块
……

这下,我们的网站可以更牛逼的 “响应” 各个平台了。(对,我还是称之为响应:这的确还是在“响应”啊 ,不是吗?)
但是等下……后端开发成本上去了,前端开发成本也上去了,配合着估计产品、设计资源也都上去了,那我们为什么不干脆把 移动设备网站 和 桌面设备网站 分开呢!?
是啊,如果你的需求真的都到这一步了,你的移动网站也应该可以被称作 WebApp 了。这种时候,把移动设备网站彻底分开或许真的是更好的选择。
开发资源如此充足,你还可以让专门的团队来维护移动端的网站。(嗯,BAT 就是这么干的)
于是又一个概念来了:
独立的移动版网站 (按题主的话来说:手机和PC端分开来写)

不过,它有那么独立么?我们知道,我们访问网站是通过 URL 来访问的。将移动网站 和 桌面网站 分开,如果不使用 RESS 技术,往往也就意味着要维护两个URL(不同的二级域名)难道我们要让所有桌面用户自觉访问 http://taobao.com** ,所有 移动用户 都自觉访问 http://m.taobao.com**
不可能吧 = =。
于是,我们还是得依靠前端或服务器端的一次 “响应”(设备检测),做 URL 重定向,才能将不同设备的用户带到那个为他们准备的网站。
所以其实在我看来,手机和PC端分开来写,只是 狭义响应式设计 的一种发展和延伸罢了。他们的界限没有,也并不需要那么清晰。
就如开题所引用的:事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。
“而无论是用什么解决方案。” —— 这句是我补的。
故我的结论是:
这不是一个二选一的问题,而是选择一个合适的度(你的桌面版本代码与移动版本代码分离、耦合的程度)
而这个度,则是由你的设计需求决定的。而我们的需求原点其实也很简单:
根据你的产品特点,进行两种不同的设计”。
以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容