跨屏幕的响应式设计提高用户体验

　　跨屏幕的响应式设计提高用户体验，现在的响应式的设计已经很成熟了，一整套设计方案，小到智能手表的屏幕，大到电视显示屏，还兼顾到更普遍存在的智能手机、平板和电脑屏幕。在很多人看来，跨屏幕的响应式设计，只是一套内容调整大小就可以“适配”了。但实际上，它所牵涉到的因素非常的复杂：设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来。

跨屏幕的响应式设计提高用户体验

　　这种无缝的体验，才是跨屏幕设计的真正难点所在。想要制定一套针对不同设备和屏幕的设计方案，你需要一整套的策略。

, @! ~9 c% c, E4 \2 S

　　1、确定核心的用户体验

: V# N6 g, k& O/ q4 ~8 U; V

　　虽然用户体验是无处不在的，但是对于特定产品，最核心的体验是存在的。产品通常是用来解决用户所面临的特定问题的，它的这一特质让产品变得有意义。关键的内容和关键的功能的组合，通常构成了产品的核心用户体验。如果你并没有想明白这个问题，不妨问问自己：用户需要完成哪些最常见/最重要的任务?找到问题的答案之后，你的产品就应当从各个方面、各个渠道，完整而全面地支撑这些功能，帮助用户完成这些任务。举个例子，Uber 的核心用户体验是随时随地地叫车，无论设备的屏幕大小如何，你进行的设计全部都应该围绕着这个需求和功能来进行。

　　叫车是Uber的核心功能，即使使用Apple Watch 都应该顺利地完成这个任务。

　　2、敲定你的产品所覆盖的设备类型

) K" l2 _) f  S! e

　　现在的移动端设备屏幕尺寸各不相同，单独为某一个设备设计内容无疑是不经济的。根据你的产品覆盖人群、受众分类、使用场景，综合考虑你的内容会优先呈现在哪些设备和平台上，然后有意识地筛选出常见的设备类型：

　　手机   平板   桌面端   智能电视   智能手表……

% b+ F- L8 d! p# ?/ J- ~

　　不同的设备组合通常是基于不同的场景、需求和服务来构成的，用户会针对不同的屏幕进行不同模式的交互，甚至处理的内容也会有差异。比如说，在手机上，用户更加倾向于使用轻量级的任务，并且进行一定量的沟通和交流。在平板上，用户行为更多集中在内容消费上，并且目前平板的使用量被认为在逐步降低。桌面端依然是用户完成较为专业、复杂任务的首选平台，足以应付复杂多样的内容。了解各种设备类型和使用场景是用来构建用户体验的关键。

　　3、针对不同内容来匹配用户体验

+ _3 R7 a, c4 y/ J% a! ]: a

　　搞清楚产品本身的核心用户体验之后，选取你的用户群体所使用的硬件设备，这个时候你应该了解每种不同的设备所使用的场景，设备使用的环境和场景是设计的重要依据。

　　并非所有的内容都符合不同设备的使用场景，比如智能手表就不适合展示大量的文本内容。你的产品所覆盖的设备组当中，每种设备的使用场景不同，应该匹配的用户体验也不一样。移动端用户和桌面端用户的需求就是不同的，场景差异也很大。以Evernote 为例，它可以在多种不同类型的设备之间同步和切换，其桌面端版本就针对用户的内容需求进行了优化：

: ^/ J3 @1 ]2 \" {" q) U3 [2 O: ]+ Y

　　Evernote 的桌面端应用程序针对阅读性的内容和多媒体进行了优化，而移动端的Evernote 则强化了拍摄记录、图片和音频记录的功能：

$ R( p/ P  k+ I" @8 k' O: t( u

　　Evernote 的开发团队无疑是仔细考虑过移动端的使用场景，所以充分利用了移动端设备功能，让用户采用最快速有效的方法来保存想法(文本笔记，拍照，设置提醒)。

　　其次，不同的设备屏幕具备不同的输入方式。以触摸屏为例，设计师如果忽略输入方式上的独特性，常常会在设计的时候出现下面的问题：

" m0 j. [: z# A. \$ f- W8 D! S- y

　　·过小的点击触发区域。按钮和可点击的元素(比如CTA按钮)必须有足够大的尺寸，一般说来，直径超过7mm的按钮就具备可用性，但是最好控制在10mm以上。

  p. V. Y* j7 v6 \& I- Q) `/ \

　　·将元素放得太靠近。考虑到不同元素的大小尺寸和用户的实际使用状况，应该留够空间和间隙，才能确保界面的呼吸感和可用性。为了防止点击和输入错误，这个间距至少为23pt。

$ J1 W  _: E5 g) P$ [

　　“移动端上没有光标悬停(Hover)这一状态。”

  {4 t( i) W; a9 R* f

　　4、优先为最小的屏幕做设计

1 d2 ^/ V% ?" b' U' s0 Y' F

　　一直以来，设计师都习惯从最大的屏幕着手设计，最后考虑最小的屏幕上的显示效果，这意味着绝大多数的设计都是从桌面端开始设计的，通常桌面端的内容和功能更全面。当桌面端的整体设计完成之后，再推进到其他设备端的设计。然而，在进行桌面端设计的时候，我们常常会遭遇“厨房水槽”困境：由于产品通常会牵涉到多个利益相关方，许多多余的功能会被加入进来。而实践经验表明，移动端优先的设计往往能够更好的专注于核心功能，更适合作为产品设计的起点。

　　当你优先设计最小屏幕所需要的界面的时候，这种局面会强制你从最关键最重要的地方开始设计。这也是之前设计圈和产品开发领域一直所强调的“移动端优先”的策略的由来。在此之后，再进行平板、桌面和电视端的设计，就是一个自然的做加法的过程了。

　　在绝大多数的案例当中，最小屏幕通常是手机屏幕。

　　5、不要忘记大屏幕

1 l9 y' m; }) G7 f: t: g

　　大屏幕设备和小屏幕设备是同样重要：

* Y- Z3 Y, i) P' l* s

　　·不要仅仅只是将内容放大来简单适应大屏幕，而是要有针对性地、充分利用大屏幕的额外空间。

　　·确保图片不会因为放大而失去应有的质量。大屏幕上的图片应该更清晰。

　　·考虑大屏幕上展示内容的独有情况。每种设备不仅屏幕尺寸有差距，而且使用场景也会造成各种区别。比如电视屏幕虽然比桌面端显示器更大，但是因为客厅的使用场景，电视屏幕给用户带来的是“10英寸屏幕的视觉体验”，所以它的实际显示效果，是比桌面端尺寸更小的。

　　6、提供一致的用户体验

' ]: E9 \8 q! u9 Z7 w' i% x( x# Z

　　虽然你的产品内容在不同平台上有差异，但是体验应该是相似的。一致的体验是产品跨屏幕统一性的体现：

- X+ t4 X$ G5 H$ I( h

　　·一致的体验能够让用户对产品的其他版本有所预期，并且建立用户后续使用的信心

' @' M" L1 C  d) ?+ a; n$ I6 W6 Q

　　·一致的用户体验让用户与其他版本的同系产品更轻松地互动

, v, s2 }8 E8 R

　　相比于在不同的屏幕不同的设备上“定制”不同的体验，不如尽可能将不同屏幕上的交互和体验纳入到一套体系当中来。Google 就将所有平台上的搜索都设计成几乎完全一样的体验。

　　当产品的设计和功能在各个地方都保持一致的时候，用户能够更快地完成任务。

　　7、创造无缝的用户体验

5 Q% W7 v4 s, e

　　跨设备的用户体验是接下来许多产品都力图做到的事情。在手机上保存的Evernote 笔记，能够在电脑上打开浏览，这只是很基础的工作，相比之下，人们在手机、电脑、电视和智能手表这样的设备上同步数据，切换场景，同系列APP之间互相操控，这样的需求更加复杂，场景、交互和体验所需要的设计要求更高。从一个设备到另外一个设备，用户是期望同系列产品能够提供完全无缝的体验，产品设计师需要对于环境、用户流程有着极深刻的洞悉和精准的判断，也对产品功能和易用性设计提出了更高的要求。

　　根据实际使用情况，你可能会希望设备和设备之间同步尽可能少地消耗流量。以Apple Music 为例，你在Mac 上设置播放列表，就可以立刻在iPhone上播放;当你再切换为Mac的时候，你可以沿着iPhone 播放的进度继续听，这就是无缝的播放体验。

　　8、测试你的设计

　　产品的测试环境并不一定都得是在现实世界找那个，但是在尽可能让真实的用户来做可用性测试，并且在产品发布之前解决所有的用户体验上的问题。

- ]5 `& q7 J3 {& o' `

　　跨设备、多屏幕、响应式的产品，无论是APP还是网页，需要产品设计师、用户体验设计师能够始终将终端用户的体验，牢记在心。无论用户所面对的屏幕是怎样的，设计师要能够让用户时刻感受到产品最核心的功能与体验，并且无缝地切换。

更多的免费友情链接交换，流量交换尽在：2898站长资源平台

跨屏幕的响应式设计提高用户体验

每次都这么轻松的抢到沙发也是一种无奈

分析得很透彻，很多细节都说到点子上了～

刚好遇到类似问题，看完这个帖子心里有底了

完全赞同，我也是这么认为的，英雄所见略同～