响应式设计模式

发布：2022-02-08 12:38:45 浏览：2433

随着响应式设计不断完善，我们面临的挑战也随着升级:如何为尺寸、环境各异的终端打造既美观又实用的用户界面?如何优化深达4级的导航栏?如何处理行列众多的表格?如何实现轮播图片效果? 令人鼓舞的是，从业人员在不断创新:另辟蹊径进行响应式页面布局、调整现有设计规范使之适应多样化的终端、创造全新的交互模式。对于一名网络设计师而言，多终端时代既充满机遇也遍布挑战。模块化、设计模式和风格指南运行环境不同、屏幕尺寸各异、用户设置不.....用Photoshop制作出全终端的设计图已经成了不可能完成的任务。所以，我们的当务之急是将设计重心由页面转向系统。世间万物都由分子组成，分子又由原子构成，同理，网页也由很多元素构成，因而可以把系统化的设计拆分成模块，再进一步细化为易于完成的组件。在这种设计模式下，需要定义网页中的设计元素，明确各元素在响应式环境中的分工，然后再把各元素组装成完整的系统。
前端风格指南指项目中设计元素的集合，可以帮助我们从传统网页设计模式顺利过渡到模块化设计。Anna Debenham在“前端风格指南”-文中列举了指南的诸多优点:测试更便捷、工作流程更优化、团队成员可共享词汇表和可供参考。
随着响应式网页设计的普及，风格指南也变得前所未有地重要。还有什么测试方法比直接在终端中显示设计元素更便捷呢?众人拾柴火焰高，响应式设计风格指南愈加充实:星巴克慷慨地分享了对网站进行响应式改造的资料库; Samantha Warren建立了Style Tiles，可以抓取项目的字体、颜色和界面元素的设计辅助网站; Dan Cederholm打造了Pears,开发个人资料库的开源框架;我也创立了一个响应式设计模式的开源资料库。

1. 条分缕析

我们要从更加模块化的角度看待网页设计。一起来试试看吧，把网页拆解开来，对新兴的响应式设计模式加以研究。我们会接触到页面布局、导航栏和交互元素的传统处理方法。仔细研究新模式和现有的处理方法，我们可以将二者结合起来推陈出新。
在大中型屏幕上显示效果大致相同，在小屏幕上变化较大。主体自适应模式受许多响应式网站青睐，原因在于它与下文将提到的复杂模式相比，只需维护两种主要设计视图。

2. 板块下移式

许多三栏式网站倾向于选择板块下移作为响应式处理方法。如果窗口尺寸不足以横向容纳三个板块，其中一个侧边栏就会下移到另两栏下方。在小屏幕终端上，三个栏目会纵向堆叠。这种方法适用于内容无关联的三栏网站，如果内容有关联，在板块移动过程中很难保证内容层级不发生变化。

3. 布局转换式

这种模式相对复杂，要为不同断点设置不同的页面布局。正如L uke在文中所说: “这种方法本质上就比前两种复杂，需要投入更多精力，所以普及度相对要差一些。”
媒介查询是个很有趣的功能，但也不能为了响应式而响应式，设计出过于复杂的页面布局。如果你要更新主要断点的响应式设计，那就相当于为一个页面布局创造出适合不同终端的重排方式，复杂程度不容小觑。要将响应式设计的目标铭记于心:为用户在各终端上提供可读性、观赏性与功能性兼备的浏览体验。有时候要用到200次媒介查询，有时候只需要2次。

4. 微调式

顾名思义，微调模式颇具极简风格，尤其适用于单栏布局的文章或者网站。窗口尺寸变化时，微调模式会保持页面基本结构不变，只对字号、图片和某些其他元素做细微调整。

5. 精简式

Luke提出了前几种模式都存在的根本问题: 前几种响应式设计模式有共同特征，小屏幕显示时倾向于将内容纵向堆叠，最后把一个包含各种元素的长页面呈现给用户。
    内容纵向堆叠不一定是坏事儿，但手机用户习惯于滚动浏览只包含一种内容纵向堆叠不一定是坏事儿，但手机用户习惯于滚动浏览只包含一种多种页面内容类型会给用户增加负担，获取所需信息变成了寻宝游戏，当用户无意撞见这些新增的无关内容时，可能会感到失望或困惑。怎么办呢?精简式布局设计是个明智的选择，把页面元素精简掉，需要时可通过侧滑栏显示。Facebook移 动版的侧滑导航栏推广了这种模式，把屏幕可视区留给核心内容，附加内容放到容易展开的侧边栏里。Jason Weavers和L uke Wroblewski做了很棒的效果展示。