跨屏幕的响应式设计｜八方面来设计好用户体验

跨装备、多屏幕、响应式的产物，不管是APP仍是网页，需要产物设计师、用户体验设计师可以或许始终将终端用户的体验，服膺在心。

此刻的响应式的设计已很成熟了，一整套设计方案，小到智妙手表的屏幕，年夜到电视显示屏，还统筹到更遍及存在的智妙手机、平板和电脑屏幕。在良多人看来，跨屏幕的响应式设计，只是一套内容调剂巨细便可以“适配”了，但现实上，它所牵扯到的身分很是的复杂：设计师需要经由过程设计让内容在分歧的平台上体验最年夜化，确保让用户在任何一个屏幕上看到内容的时辰，会感觉这些内容就是为这个平台而设计的，而不是纯真的缩放而来。

这类无缝的体验，才是跨屏幕设计的真正难点地点。想要制订一套针对分歧装备和屏幕的设计方案，你需要一整套的策略。

1、肯定焦点的用户体验

固然用户体验是无处不在的，可是对特定产物，最焦点的体验是存在的。产物凡是是用来解决用户所面对的特定问题的，它的这一特质让产物变得成心义。要害的内容和要害的功能的组合，凡是组成了产物的焦点用户体验。假如你并没有想大白这个问题，无妨问问本身：用户需要完成哪些最多见/最主要的使命？找到问题的谜底以后，你的产物就该当从各个方面、各个渠道，完全而周全地支持这些功能，帮忙用户完成这些使命。举个例子，Uber 的焦点用户体验是随时随地地叫车，不管装备的屏幕巨细若何，你进行的设计全数都应当环绕着这个需乞降功能来进行。

叫车是Uber的焦点功能，即便利用Apple Watch 都应当顺遂地完成这个使命。

2、敲定你的产物所笼盖的装备类型

此刻的移动端装备屏幕尺寸各不不异，零丁为某一个装备设计内容无疑是不经济的。按照你的产物笼盖人群、受众分类、利用场景，综合斟酌你的内容会优先显现在哪些装备和平台上，然后成心识地挑选出常见的装备类型：

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

分歧的装备组合凡是是基于分歧的场景、需乞降办事来组成的，用户会针对分歧的屏幕进行分歧模式的交互，乃至处置的内容也会有差别。好比说，在手机上，用户加倍偏向于利用轻量级的使命，而且进行必然量的沟通和交换。在平板上，用户行动更多集中在内容消费上，而且今朝平板的利用量被认为在慢慢下降。桌面端仍然是用户完成较为专业、复杂使命的首选平台，足以应付复杂多样的内容。领会各类装备类型和利用场景是用来构建用户体验的要害。

3、针对分歧内容来匹配用户体验

弄清晰产物自己的焦点用户体验以后，拔取你的用户群体所利用的硬件装备，这个时辰你应当领会每种分歧的装备所利用的场景，装备利用的情况和场景是设计的主要根据。

并不是所有的内容都合适分歧装备的利用场景，好比智妙手表就不合适展现年夜量的文本内容。你的产物所笼盖的装备组傍边，每种装备的利用场景分歧，应当匹配的用户体验也纷歧样。移动端用户和桌面端用户的需求就是分歧的，场景差别也很年夜。以Evernote 为例，它可以在多种分歧类型的装备之间同步和切换，其桌面端版本就针对用户的内容需求进行了优化：

Evernote 的桌面端利用法式针对浏览性的内容和多媒体进行了优化，而移动真个Evernote 则强化了拍摄记实、图片和音频记实的功能：

Evernote 的开辟团队无疑是细心斟酌过移动真个利用场景，所以充实操纵了移动端装备功能，让用户采取最快速有用的方式来保留设法（文本笔记，摄影，设置提示）。

其次，分歧的装备屏幕具有分歧的输入体例。以触摸屏为例，设计师假如疏忽输入体例上的怪异性，经常会在设计的时辰呈现下面的问题：

（1）太小的点击触发区域

按钮和可点击的元素（好比CTA按钮）必需有足够年夜的尺寸，一般说来，直径跨越7mm的按钮就具有可用性，可是最好节制在10mm以上。

（2）将元素放得太接近

斟酌到分歧元素的巨细尺寸和用户的现实利用状态，应当留够空间和间隙，才能确保界面的呼吸感和可用性。为了避免点击和输入毛病，这个间距最少为23pt。

“移动端上没有光标悬停（Hover）这一状况。”

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

一向以来，设计师都习惯从最年夜的屏幕着手设计，最后斟酌最小的屏幕上的显示结果，这意味着绝年夜大都的设计都是从桌面端最先设计的，凡是桌面真个内容和功能更周全。当桌面真个整体设计完成以后，再推动到其他装备真个设计。但是，在进行桌面端设计的时辰，我们经常会遭受“厨房水槽”窘境：因为产物凡是会牵扯到多个好处相干方，很多过剩的功能会被插手进来。而实践经验注解，移动端优先的设计常常可以或许更好的专注于焦点功能，更合适作为产物设计的出发点。

当你优先设计最小屏幕所需要的界面的时辰，这类场合排场会强迫你从最要害最主要的处所最先设计。这也是之前设计圈和产物开辟范畴一向所强调的“移动端优先”的策略的由来。在此以后，再进行平板、桌面和电视真个设计，就是一个天然的做加法的进程了。

在绝年夜大都的案例傍边，最小屏幕凡是是手机屏幕。

5、不要健忘年夜屏幕

年夜屏幕装备和小屏幕装备是一样主要：

不要仅仅只是将内容放年夜来简单顺应年夜屏幕，而是要有针对性地、充实操纵年夜屏幕的额外空间。

确保图片不会由于放年夜而掉去应有的质量。年夜屏幕上的图片应当更清楚。

斟酌年夜屏幕上展现内容的独有环境。每种装备不但屏幕尺寸有差距，并且利用场景也会造成各类区分。好比电视屏幕固然比桌面端显示器更年夜，可是由于客堂的利用场景，电视屏幕给用户带来的是“10英寸屏幕的视觉体验”，所以它的现实显示结果，是比桌面端尺寸更小的。

6、供给一致的用户体验

固然你的产物内容在分歧平台上有差别，可是体验应当是类似的。一致的体验是产物跨屏幕同一性的表现：

一致的体验可以或许让用户对产物的其他版本有所预期，而且成立用户后续利用的决定信念一致的用户体验让用户与其他版本的同系产物更轻松地互动

比拟于在分歧的屏幕分歧的装备上“定制”分歧的体验，不如尽量将分歧屏幕上的交互和体验纳入到一套系统傍边来。Google 就将所有平台上的搜刮都设计成几近完全一样的体验。

当产物的设计和功能在各个处所都连结一致的时辰，用户可以或许更快地完成使命。

7、缔造无缝的用户体验

跨装备的用户体验是接下来很多产物都力求做到的工作。在手机上保留的Evernote 笔记，可以或许在电脑上打开阅读，这只是很根本的工作，比拟之下，人们在手机、电脑、电视和智妙手表如许的装备上同步数据，切换场景，同系列APP之间相互操控，如许的需求加倍复杂，场景、交互和体验所需要的设计要求更高。从一个装备到别的一个装备，用户是期望同系列产物可以或许供给完全无缝的体验，产物设计师需要对情况、用户流程有着极深入的洞悉和精准的判定，也对产物功能和易用性设计提出了更高的要求。

按照现实利用环境，你可能会但愿装备和装备之间同步尽量少地耗损流量。以Apple Music 为例，你在Mac 上设置播放列表，便可以马上在iPhone上播放；当你再切换为Mac的时辰，你可以沿着iPhone 播放的进度继续听，这就是无缝的播放体验。

8、测试你的设计

产物的测试情况其实不必然都得是在实际世界找阿谁，可是在尽量让真实的用户来做可用性测试，而且在产物发布之前解决所有的用户体验上的问题。

结语

跨装备、多屏幕、响应式的产物，不管是APP仍是网页，需要产物设计师、用户体验设计师可以或许始终将终端用户的体验，服膺在心。不管用户所面临的屏幕是如何的，设计师要可以或许让用户时刻感触感染到产物最焦点的功能与体验，而且无缝地切换。

原文地址：medium

原文作者：Nick Babich

译者：@陈子木

译文地址：http://www.uisdc.com/designing-for-devices-8-steps

文章作者系 @陈子木 授权发布于人人都是产物司理，未经作者许可，制止转载。