论响应式设计在智能终端界面中的应用

孔莉莉

摘 要：随着IT技术的发展，智能终端作为信息传达的主流媒介，已经涉及现代人生活的方方面面。当前智能终端设备名目繁多，从个人台式计算机到智能手机再到平板电脑，都有着各自的界面格局，即使同一种类的终端也因型号、系统的林林总总，各不相同。在智能终端界面设计中，以往是由不同开发团队，针对不同终端的特性，作有针对性的设计。然而，随着技术的发展和IT商业领域的竞争日趋激烈，硬件的更新换代速度也在不断地提高，这种传统的一对一的设计研发模式，已经明显跟不上产品与服务更新换代的速度要求。智能终端界面设计领域需要一种新型的更智能，更弹性的生成模式。本文从阐述响应式智能终端界面设计的概念及其生成模式入手，通过对国内外优秀界面设计作品的分析，梳理了响应式智能终端界面设计构建方式和营造手段。归纳了响应式智能终端界面设计的优势并提出可能存在的问题，进而对未来发展的方向作了展望。旨在抛砖引玉，以期引起更多中国界面设计师们对响应式设计理念及设计手段的探索与思考。

关键词：响应式;智能终端;界面设计

1 响应式设计和界面的概念

1.1 界面的概念

在信息技术领域，界面是两个或多个不同物象之间的分界，是两种或多种信息源的交汇之处，是人与智能终端互动的媒介，是信息传输、接收、共享的虚拟平台。美国哲学家迈克尔·海姆在其著作《从界面到网络空间——虚拟实在的形而上学》中提出了命题：“在虚拟现实中，我们能将自己沉浸于感官模拟，不仅对现实世界，也对假想世界。当我们开始在真实世界与虚拟世界之间转换时，我们对实在的感觉如何改变？”在信息时代，界面将受众与智能终端相联系，每款界面都构成了一个通往网络世界的门户。网络世界是一种由计算机生成的维度，从某种意义上表示一种人造或再现的世界，一个由计算机系统所产生的信息和用户反馈到系统中的信息所构成的虚拟世界。

1.2 什么是响应式界面设计

响应式设计的概念较早出现在建筑设计领域，在《互动建筑》一书写道：“在交互建筑中，建筑师迈克尔·福克斯与麦尔·坎普把我们带入一个激进的新领域，这个领域的设计先锋们正在忙于创造那些不仅能促进人们之间互动的，并且其自身能参与互动的环境。这些空间可以重新配置，它们自身在響应人类的因素，并灵活地改变空间，解决不断发展的个人、社会、和环境的需要。换言之，现在是停止问什么架构，而开始问它能做什么的时候了。”例如一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;也可使用运动传感器配合气候控制系统，调整室内的温度及环境光。

2 在智能终端界面中实现响应式设计的主要手段

2.1 可变视窗（Viewport Meta）

目前智能终端屏幕分辨率变化范围极大，小至320像素，大到2560像素，甚至更高。用户除了使用传统的台式计算机，越来越多地通过智能手机、上网本、平板设备来浏览界面。这种情况下，固定宽度的设计方案将会显得愈发不合理，因此，界面需要有更好的适应性。

使用智能手机浏览个人电脑端界面时，一般会自动缩放到合适的宽度使屏幕能够显示整个界面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置Meta标签的Viewport属性来设定加载界面时以原始的显示比例呈现界面。响应式智能终端界面设计的尺寸概念并非基于设备的真实分辨率（dpi），而是直接通过设定界面的分辨率来实现可视区域的尺寸，在物理面积和浏览器之间重设匹配的分辨率，和设备自身的分辨率无直接关系。不同物理尺寸与分辨率的智能终端屏幕，通过响应式设计的自适应功能可实现可视区域（Viewport）的自动缩放，使这些终端设备以相同的分辨率显示加载于同一款浏览器的界面。

2.2 媒体查询（Media Query）

媒体类型（Media Type）是CSS（Cascading Style Sheet，层叠样式表单）中一个信息项。媒体查询功能作为CSS的重要内容之一，是对Media Type的增强探测功能。随着移动互联网的发展和响应式设计的推广，媒体查询的作用开始得到界面设计师的重视。通过媒体查询功能对媒体类型信息的提取，对应不同终端的界面特点和设计要求，可为不同终端设备制定特定的样式和设置合时的参数提供依据，以实现更丰富而适用的界面，在不同的分辨率下都能给用户带来良好的用户体验。通过CSS3中的media query功能可做到对设备像素比的判断，使响应式界面根据浏览器的高宽与设备的像素比等信息选用不同的CSS。

2.3 流体网格（Fluid Grid）

传统网格式布局的界面设计通常以固定宽度版式为基础，当终端显示区域宽度小于界面实际宽度时，则以滚动条的方式提供显示界外内容的操作。流体网格布局时，显示宽度变窄时，后面的元素会向下方移动。流体网格的宽度使用百分比方式以便于参数设定，从而准确实现宽度自适应。目前可通过The Grid、Gridpak等所见即所得的工具用于快速、直观、灵活地开发响应式界面的流体网格结构布局。也可使用Fluid Grids的流体网格计算器等参数化的工具建立、控制流体网格系统。

2.4 弹性图片（Flexible Images）

固定图片与文本框不同，对于不同分辨率或尺寸的各种终端设备而言，固定尺寸与分辨率的图片显然无法适应如此众多智能终端界面各不相同的需求，更无法适应用户在各种终端下自定义的浏览器显示比例，因此出现溢出或不饱满的显示结果也在意料之中。而相应式设计中的弹性图片功能，可通过重新定义图片尺寸，以适应不同界面显示大小与比例的同时也适合所在的文本框。也可按照不同终端浏览器的高宽与设备的像素比可控制图片文件的大小及优先显示区域，达到在各种智能终端界面的最佳图片显示方案。

3 响应式界面设计在智能终端界面中运用的优势和局限性

3.1 响应式设计在界面中运用的优势

（1）多款终端兼容优势。在当今科技迅速发展的电子时代，各种显示规格的界面移动终端设备不断涌现，界面能否在不同的终端设备中流畅地被浏览，已成为当代智能终端界面设计中的重要研究课题之一。通常过去单一的智能终端界面结构兼容性较差，只适用于特定终端规格的设备而不能兼容多个不同规格的终端设备。响应式界面设计的理念正迎合了当代智能终端界面设计的新要求。响应式界面的优势就在于能适用于主流的大多数移动设备终端。根据不同的移动设备做出自适应的兼容，能保证用户在不同的界面终端设备中流畅的浏览界面。其广泛的兼容性为用户提供了多元的选择，同时也留住了更多的用户。因此，响应式设计对于大多数主流移动设备终端而言其优势是不言而喻的。

著名美食界面Food Sense，采用了新型的响应式设计。下图演示了同一款智能终端界面设计如何响应不同终端设备。在不同终端设备界面显示时会适时改变导航菜单图标的大小与内容。随着不同终端设备界面面积的缩小，其界面显示面积与信息量也不断变小，从详细的双列布局侧边栏变为了单列布局最后甚至消失，各种显示方式都达到了良好的构图效果。

（2）用户操作体验优势。随着上网方式的多样化，更多用户选择上网的工具不再仅是传统的个人台式电脑，而是更轻便的智能手机或者平板电脑。随之而来的问题是如何让界面适应不同分辨率，这给前端工程师们带来了新的挑战，其中重要的一点是如何让智能终端界面能在不同的分辨率下都能给用户带来良好的用户体验。响应式界面的兼容性也带来了较强的可操作性。

同样以Food Sense界面作为案例，在设计该界面的响应式线框模型的时候，要考虑到不同的终端设备的界面尺寸，做到符合大多数终端设备的界面分辨率。保证界面浏览用户亲和流畅的浏览体验。可以简单地通过单击界面改变界面的大小。

（3）易于后期维护优势。具体的响应式智能終端界面只有一款，但可针对不同的终端设备环境进行不同界面布局的系列设计，因此在开发、运营和维护上，相对开发多个版本的智能终端界面，能精简时间和人力成本的投入。

响应式设计是针对智能终端界面的布局设计，可以只对必要的界面或局部进行改动，其他界面部分不受影响。响应式界面能对于不同的智能终端设备进行自适应的调节，可省去为不同的网络终端设备开发不同界面的人工投入。由于响应式界面只有一个线框模型布局，且可工作在所有被定义类型的设备上，可大幅减少界面设计师的工作量，响应式界面开发成功后，维护的成本也相对较小。反之，若某一非响应式界面需要后期的维护，网络设计师要根据所有可能的不同智能设备进行修复，势必会花费更多的时间和精力。

3.2 响应式设计在智能终端界面中运用的难点

（1）开发难度相对较高。响应式设计并非完美无缺，响应式界面相比传统的界面而言，虽然后续的维护成本会比较低，但这并不代表响应式界面设计的前期开发容易实现。界面设计师在设计智能终端界面时要考虑其可适应不同移动终端设备环境、不同分辨率下的兼容性，最重要的是能保证设计的智能终端界面都能较为流畅的在终端设备中稳定呈现，才能确保良好的用户体验。这要求界面设计师具备专业的界面设计知识和良好的团队合作能力。所以，响应式的智能终端界面在整体开发难度上相对较高。

（2）前期开发周期相对较长。开发响应式界面首先要做好用户调研与相关智能终端设备环境评估。通过用户调研，发开设计团队可了解到用户群所使用设备类型的种类，评估出几种较为典型的智能终端设备规格，用以规划设计不同的界面呈现方式。为以最合理的样式规格和布局方式呈现逻辑分层及功能复杂的界面设计工程，需针对不同的设备类型进行功能和内容的规划，便于在开发设计阶段定义不同的CSS响应规则。

响应式界面设计师还需投入大量时间精力做测试和质量认证，以确保响应式界面在不同的网络终端设备中都能被流畅地显示。综上所叙述，响应式界面相对于传统界面的前期开发周期较长。

4 关于响应式设计在智能终端界面中应用的结论

响应式设计不仅是一种开放式的设计手段，更是一种人性化的设计理念。智能终端界面作为主流新媒体中信息传达最普及的媒介，已经涉及现代人生活的方方面面。响应式设计是信息技术时代的新兴产物，以智能、更弹性的智能终端界面生成模式，给用户带来更便捷与流畅的交互体验。虽然开发时间长于独立终端界面的开发，但是它良好的兼容性几乎可以兼容大部分的主流移动终端，这些优势使响应式设计在智能终端界面中的作用不容小觑，无疑是信息时代界面设计师研究的重要领域。

参考文献：

[1] 王永强.响应式Web设计：HTML5和CSS3实战[M].人民邮电出版社，2013.

[2] Tim Kadlec .响应式Web设计实践[M].侯鸿儒，译.人民邮电出版社，2013.

[3] 顾群业.界面艺术设计[M].山东美术出版社，2002.