平面设计师论坛
室内设计师论坛
UI设计师论坛
工业设计师论坛
时尚设计师论坛
建筑设计师论坛
游戏设计师论坛
插画师论坛
动画设计师论坛
摄影师论坛
影视设计师论坛
包装设计师论坛
字体设计师论坛
品牌设计师论坛
平面
插画
UI
网页
摄影
三维
影视
空间
工业/产品
动漫
纯艺术
手工艺
服装
平面广告素材
视频音频素材
家居模型素材
PPT办公文档
游戏图片素材
网盘素材资源
设计软件下载
设计字体下载
设计插件/其它
群组圈子
问答求助
求职招聘
邀请奖励
海量精选作品 每日更新 (近期新增233个作品)
平面广告
海报
展板/展架
名片/卡证
画册/装帧
DM/宣传单
手抄报/小报
相册/影楼
装饰文化墙
海量精选作品 每日更新 (近期新增168个作品)
设计元素
插画绘画
海量精选作品 每日更新 (近期新增150个作品)
背景图片
摄影图库
海量精选作品 每日更新 (近期新增124个作品)
电商类别
行业分类
海量精选作品 每日更新
PPT模板
Word文档
Excel表格
简历模板
海量精选作品 每日更新 (近期新增63个作品)
视频
配乐
音效
海量精选作品 每日更新 (近期新增140个作品)
2D游戏素材
CG影视游戏模型
海量精选作品 每日更新 (近期新增221个作品)
网页UI
新媒体用图
海量精选作品 每日更新 (近期新增10个作品)
3Dmax整体模型
3Dmax单体模型
SketchUp整体模型
SketchUp单体模型
海量精选作品 每日更新 (近期新增101个作品)
3D材质贴图
vary材质
3D光域网
海量精选文章 每日更新 (近期新增35篇文章)
CAD施工图纸
2020-07-31 12:26 发布
响应式网页设计 (Responsive web design) 虽然早已被提出,不过因为国内开发习惯和APP设计优先,日常工作使用这种布局方式的机会不多。
国外网站使用这种布局方式较多,经过调研,结合尝试后,本文梳理了响应式设计的方法流程,记录问题与思考,帮助以后类似的项目开展更快。
响应式布局常常和自适应布局搞混。其实通过下面的动图我们很容易能理解两者的区别。
调研中我们发现,国外几个内容网站,YouTube、Spotify、Netflix 和Behance,都使用了「内容墙」的设计方式,以突出内容的丰富度。
由于这种设计通常会保持容器之间的间距不变,这就需要容器大小变化以适应窗口大小变化了。响应式的布局思路,很好地帮助完成内容墙的设计。
在以往的开发合作中,设计提供切图和尺寸标注给开发就行了。
而响应式页面中的容器大小是动态的,我们可以提供一个表格,告诉开发在不同的页面宽度区间,对应的布局应该是怎么样的。这些区间的临界点,就是「断点」。
我们以容器多,情况比较复杂的视频首页模拟一次确定断点的流程。
首先,断点是反映页面发生突变的情况的,如边距开始发生变化、容器数量开始发生变化等。本例中,我们固定了侧边栏a、边距b、间距d。据下图公式,容易得知容器数量和容器宽度有着明确的数量关系。因此,寻找断点,需要我们先确定容器宽度(c)。
容器宽度和容器内容相关。本例中,我们规定正常情况下容器宽度最小300px,以保证封面图和标题文字还能被看清。当容器宽度被压到300px时,容器数量减少一个。
有了容器的最小尺寸,那么我们可以输出给开发的「页面宽度-容器数量对应表」。从下表可以读出,浏览器宽度在1284-1595px之间时,侧边栏展开为288px,放3个容器,浏览器会自动把容器宽度算出来。
从上面的案例我们知道,确定断点和容器数量、容器大小有关。那么,断点的选择其实是体现了,设计师对页面信息呈现方式的理解。
1. YouTube的小心机
调研的过程中,我们发现YouTube 选择 1143-1966px 作为4个容器的前后断点。这个页面宽度区间很大,达到了824px(远超5个容器的跨度335px)。
我们猜想:
2. 关注高分屏的实际效果
需要特别注意的是,横向分辨率达到3840px 的PC高分屏中,主流浏览器会按照2倍图展示内容。此外,Windows系统下有系统缩放,推荐的是1.25倍,导致3840px的屏幕宽度,浏览器认为只有1536px (3840px÷2÷1.25)。所以有时候会出现在分辨率很高的屏幕下,响应式页面展示的内容反而更少了的情况。
响应式的布局方法能很好地支持越来越流行的「内容墙」的设计。找好断点,设定好不同屏幕分辨率的布局策略,是响应式设计的关键。