跨设备的用户体验设计

顾丽丽　张敏言　姬文浩

摘 要：随着互联网的高速发展，开发一个应用程序需要去适配很多的终端设备，手机，平板，电脑，智能电视，智能手表等等，每个终端的特点和设计规范都是有所不同的，在为不同设备做设计时我们需要把握设计之中的异同点，更多地从用户的角度去分析和设计。

关键词：跨设备；用户体验；场景

随着互联网的飞速发展，企业不仅要建设pc网站，还需要做移动端网站，甚至是智能电视端，不同的设备均有各自的特点，在设计同一个应用时我们要强调一致性也要强调差异性。强调一致性：更强的品牌形象，用户在平台间迁移时的认知成本更低；强调特殊性：遵循设备的设计规范，用户在单一设备间的App切换时的认知成本更低，发挥设备的长处，更好地服务于特定场景需求。

1 设备之间的不同点

1.1 用户与界面的操作方式不同

Pc端：以鼠标或者触摸板为媒介，多采用左键点击的操作，也支持鼠标滑过、鼠标右键的操作方式，移动端：直接用手指触控制屏幕，除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势。电视：不同于移动端和web端的点击和触摸的操作方式，我们的操作媒介是遥控器，执行力有限，操作速度很低，交互方式也比较弱。 设计要点：相比鼠标，手指触摸范围更大，较难精准控制点击位置，对此IOS人机交互规范中提到手指最适合的触控区域至少需要44point。所以移動端的点击区域要设置的更大一些，不同点击元素的间隔不能太近。Pc端支持鼠标滑过的效果，一些tips提示通常采用鼠标滑过展开/收起的交互方式，移动端支持丰富的手势操作，比如通过左滑一个条目可以显示需要的快捷操作“取消关注”、“删除”，这类操作方式的特点是快捷高效。我们在合理设计这些快捷操作的同时，还需要支持最通用的点击方式来完成任务的操作路径。移动端以单手操作为主，界面重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。不同于移动端和Web端的点击和触摸的操作方式，在电视端你需要通过遥控器选择不同的内容区块，并且始终有区块是被选中的，你并不能直接控制你的界面和你想要的，而是需要选择某个特定的区块，然后再进行更细致的操作，要露出屏幕外的区块，让用户明白还有更多的内容可以浏览。

1.2 设备尺寸不同

Pc端：不同pc的分辨率不同，浏览器窗口最大化的尺寸也不同，浏览器窗口可缩放。移动端：设备尺寸相对较小，不同设备的分辨率差异化较多，特别是安卓，支持横屏、竖屏调转方向。电视端：尺寸相对较大，不同设备的分辨率差异化也较多。设计点：移动端的尺寸较小，一屏展示的内容有限，更需要明确哪些信息更为重要，有效的组织相关的内容，优先级高的内容突出展示，次要内容适当隐藏，pc端因为浏览器分辨率差异较大，且窗口尺寸可变化，设计时需要确定好不同分辨率的内容展示和布局，也因为这一点，加上webAPP的浏览需求，近几年来响应式设计更为普遍。因设备分辨率、dpi大小不一，所以移动端在布局、图片、文字的显示上，要兼顾不同设备的显示效果，需要设计师与开发共同配合做好适配工作。移动端支持横屏和竖屏，所以在设计移动端时需要考虑用户是否有“换个方向看看的需求”，那些情况下需要切换和如何切换。

1.3 使用环境不同

Pc端：通常坐在某个室内，使用时间较长，移动端：对使用地点和使用时间没有限制，合理地利用了人们的碎片化时间，姿势也没有要求。电视端：一般是家庭环境，固定场所。设计要点：使用pc端时，一般在办公的环境下使用，所以用户更为专注，使用移动端时，用户容易被环境所影响所以我们在设计时需要考虑不同场景下的不同设计需求。碎片化的使用，使得用户没有足够的时间，所以每次浏览的内容有限，类似“稍微阅读”和“收藏”的功能比较实用。移动端产品因为不在固定的场所，在移动场所的过程中容易误操作，需要考虑如何防止误操作、如何从错误中恢复。由于电视距离我们观看较远，适合处理简单任务，所以在设计时让聚焦的地方闪亮，夸张，变大，内容和控件要被清晰阅读和控制，较少文字输入，强调沉浸式体验。

2 卡片式设计

卡片式设计这种设计手法的流行也得益于这种设计形式在跨设备、跨屏幕兼容上有着天然的优势，也更加实用。我们通常所说的卡片式设计中的卡片，是信息的容器，每个卡片都承载着属于自己的内容。卡片能承载着几乎所有类型的内容——多媒体、文本、链接等，而这所有的信息都经由卡片，被收纳到统一的主题之下。这些承载着信息的容器将屏幕填满，这种设计模式被称之为“容器模型”。这样的设计提供了更加清爽、更易于理解的界面，更贴合快速浏览的需求。卡片栅格系统能够随着整个框架的膨胀和收缩，以适配断点和屏幕尺寸。设计师可以轻松而灵活地控制卡片的高宽比，从而创造出不同的响应模式，并且在各种设备平台的设计都能保持高度的一致性。比如，你可有设置宽度固定，高度可变，设定卡片之间的宽度保持一致。从早已投入卡片式设计的Pinterest 到主流社交媒Facebook和Twitter，卡片式设计几乎覆盖了所有了主流领域的网站。电视端win8_Metro风格，也是采用的卡片式导航，单卡片布局，入口灵活，方便操作。

3 设备之间的协作

设备和设备之间具有不同的特征，各具优缺点，他们之间的友好协作能够提升用户使用设备时的用户体验。协作场景包括内容分享，显示扩展，遥控，任务分析，任务续接这五种，设备协调的两种技术形式为云连接，和通过WiFi、BT、NFC等技术近距离连接。设备之间协同操作的原则：从end—to—end的大场景入手思考，而不是从独立的功能点入手；发挥每个设备的长处，关注设备长短处的互补；设备之间的协作要符合用户的心理模型；无缝的续接；尝试利用现实世界中的物理动作。

参考文献：

[1] Alan Cooper.交互设计的精髓[M].电子工业出版社.

[2] Nigel Cross.设计师式认知[M].华中科技大学出版社.