多样化设备界面设计解决方案：设备体验&响应式设计

原Bagcheck（已被Twitter收购）产品总监、联合创始人，《Mobile First》作者LukeW近日发表了一篇博文《Device Experiences & Responsive Design》，文中给出了优化跨多款设备界面设计的解决方案。CSDN对该文进行了编译，译文如下：

【CSDN编译整理】为多款设备设计Web应用、网站是件令人头疼的事。但有两种技术可以帮助更有效地管理设计过程：按体验对设备进行分类、进行响应式设计和构建。本文将介绍如何结合这两种技术优化跨多款设备的界面设计。

设备使用体验

按使用体验对用户设备进行分类是最简单的方法，你可以为每个分类设计合适的用户界面。设备的使用体验通常由设备的普及程度、技术能力及使用范围来定义。具体请见下：

● 使用/姿势：在沙发上斜靠时使用，放在桌子上使用，抑或在任何地方以任何姿势使用；

● 输入方法：远程/手势输入、鼠标/键盘、触摸/传感器、小键盘/触控板；

● 输出/显示屏：投影设备、桌面设备、平板设备、掌上设备、手腕设备。

每一分类中的不同设备都需要各自的用户界面设计方案。各任务之间的重要程度也会根据使用/姿势的不同而有所不同。同时，表示层与交互设计需要适应不同的输入方法和屏幕尺寸。

希望单一用户界面满足多项使用体验是不可能的，而设计可以覆盖某项设备使用体验的界面通常是一种折中、简单的设计，但它无法利用每个设备所具有的特性（相反，过多的解决方案往往导致加载失败，或只能工作于某些少数的设备上。）

智能电视可以阅读智能手机上的文本列表，阅读体验可能并不太舒服。此外，用桌面浏览器打开平板电脑上的Web应用，页面可能略显简单（在小显示屏的设备上，功能往往被缩减，而功能区却被增大了，以适应触控式交互的需要。）虽然一个界面并非专门针对桌面电脑量身定做（无论桌面环境、输入方法，还是显示尺寸），但它却可以在上面工作。

按设备使用体验进行分类，是某些企业解决针对多样化设备进行设计所采取的手段。比如Netflix，它使用该技术管理400多款SKU上的不同用户界面。他们可以在不同平台上体验到不同的体验。之后，Netflix可以将从每种体验中学到的经验应用到其他的设备中。

Amazon似乎采用了同样的方案。Amazon的网站已经专门针对台式机和笔记本的使用/姿势、输入方法及屏幕尺寸进行了优化。同时该企业也在其他平台上进行了尝试。例如，Amazon的移动应用Flow允许用户通过智能手机上摄像机来鉴定、购买生活中发现的商品。这恰恰利用了移动设备的便携性及特殊输入方法——摄像机。另外，Amazon的WindowShop利用平板电脑稍大的尺寸及触控输入方法，创造了一种身临其境、可视化的购买体验。

虽然该方案在Netflix和Amazon上发挥了作用，但这种针对不同设备体验设计不同的界面，对于其他组织来说，可能太多而难以管理并提供支持。他们需要“一个”解决方案，去适应设备及设备体验间的不同。

响应式设计

每类设备使用体验中又存在着千差万别——尤其是显示屏大小。智能电视、平板电脑、台式机、笔记本、智能手机在屏幕分辨率、密度及宽高比上又是各不相同，当然不必担心，响应式设计可以解决这些问题。 

响应式设计可以利用流体网格（Fluid Grids）、弹性图片（Flexible Images）、Media Queriy技术来弥补不同设备体验间的差异。如果你有一个优秀的平板电脑解决方案，响应式设计可以帮助使它灵活地显示在10英寸和7英寸的屏幕上，比如增加一些行、加宽图片尺寸，诸如此类。  

 

以内容和交互为主的网站，可以在智能电视、平板电脑、台式机/笔记本和TV上使用同样的响应式解决方案，可假设这些设备在使用上没什么差别，且他们能高效地管理媒体资源。而对于复杂的Web应用（例如：基于Web的邮件客户端），响应式地适应所有设备比较困难，这时单独的设计模版可能更合适。在单独的模版中，流体网格、弹性图片、Media Queriy可使表示层更高效地适应不同设备。

针对不同的设备体验设计不同的界面解决方案以及利用响应式设计，Web应用便可为用户提供最佳的使用界面——无论他们使用什么设备。

原文链接：Device Experiences & Responsive Design