响应式设计方案

Web设计面向的目标设备正在由单一发展为多元，这也许是最近一两年里最令人激动，同时又是最令人焦虑的事情了。这不再是关于样式能否在不同浏览器中保持兼容的问题，我们在新局面下面对的是各种方面的因素：不同的设备、不同的屏幕尺寸、不同的使用环境、不同的系统平台所具有的UI风格等。

虽然响应式设计(什么是响应式Web设计?)或是针对指定设备进行设计的思路都可以在一定程度上帮助我们面向不同的环境调整外观形式及体验方式，但不是所有的UI元素或模块都可以被赋予弹性，我们仍然需要在很多地方使用“固定”的全局化设计方案。这时，“好脾气”的思路就可以帮上忙了。具体的实践原则很简单明了：为了让设计方案在一系列不同类型的设备中都能产生最好的用户体验，我们需要对界面中一些关键性的UI元素做出不同程度的折中调整，使整个页面对于环境的适应能力更强。

触控优先

最近，越来越多的桌面版本网站当中开始出现具有触屏设备UI风格的界面元素，这种做法很好地体现出了“好脾气”的设计思路。在触屏移动设备当中，我们需要通过手指对界面当中的交互对象进行直接操作。比起传统的鼠标指针，手指触控方式需要的目标作用区域更大。考虑到这一点，我们应该适度地增大页面当中一些重要交互元素的尺寸;同时，为了保持视觉上的平衡，我们还需要对相关元素之间的间距及它们各自的内边距进行调整。

举个简单的例子，Google在其新版UI当中明显地增大了“写邮件”按钮这类重要交互元素的尺寸;同时，诸如导航菜单、工具栏、邮件列表等界面元素，在间距留白等方面也有做相应的调整。相比于过去，新版设计方案显著地提升了Google的这些主线产品对于触屏操作的友好性。

从某种程度上讲，iPad在触屏移动设备与传统桌面设备之间架起了一座桥梁，它的普及提升了触屏设备UI风格在桌面设备当中的影响力。看看Gmail和Twitter这类主流产品在最近的改版，或是花时间到那些CSS网页设计案例集当中浏览一下最新的优秀作品，你会发现当前的Web设计风格看上去确实和以前不大一样了，它们看上去似乎更加的...丰满。留白更多，按钮更大，一切看上去都又大又平。不过我们也必须承认，这种现象与桌面显示器不断增大的尺寸也有一定的关联。

在这类设计方案当中，界面元素所占据的空间对于鼠标指针来说显得有些许浪费了，但对于手指触控的方式却恰到好处。这也正是“好脾气”的设计思路的核心思想，即为了使界面能够适用于更多的平台环境，而对“标准化”的设计方案进行微调，最终达到一种折中的状态。

而且在很多时候，这种权衡的结果对于键鼠交互方式来说也并不坏。容易被手指触摸的按钮同样易于鼠标的控制，整个UI在传统设备上下文环境当中的用户体验也许反而有所提升。

响应式设计方案

市面上有很多关于这个话题的讨论，不过它们大多是围绕着各种相关的开发技术来进行的。其实，“响应化”本身不是目的，我们真正需要的是一种机制，它能够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化，从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式。

响应式方案离不开全局化的用户体验设计。正像我们在前文当中提到的，这类方案固然可以在一定程度上帮助我们面向不同的环境调整设计方案，但不是所有的UI元素或模块都可以被赋予弹性，我们仍然需要在很多地方通过“好脾气”的设计思路权衡出一种最优的全局化解决之道。