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

跨设备、多屏幕、响应式的产品,无论是APP还是网页,需要产品设计师、用户体验设计 师能够始终将终端用户的体验,牢记在心。


跨设备、多屏幕、响应式的产品,无论是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

本文由 @陈子木 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21580/

(0)
CatherineCatherine
上一篇 2017-04-28 17:50
下一篇 2017-04-28 19:33

相关推荐

  • 【汇总】2015年阿里巴巴交互设计师笔试题目

    经验分享之交互设计面试 从网上各种渠道扒下来有关2015年阿里巴巴交互设计师的笔试题目 按照各方面的信息初步确定一共是四题,基本上都是要码字 要交作品,要交简历(应该是第一题的公共问题) ps:出题应该是一套…

    交互设计 2015-08-19
  • 这个简单粗暴的设计为何是“好设计”?

    作者:UX沐沐(公众号:Liveux)   20世纪著名建筑师史密斯.德罗在总结他成功经验时说“魔鬼藏在细节中”,面对一些习以为常的设计,设计师能否洞察背后的不寻常? 今天想探讨一个我们每天都能见到数十次的“寻常”设计…

    交互专题 2017-08-07
  • 2017新零售用户体验观察

    互动新零售专为互联网人打造的新零售智库。关注过去的2017年被誉为“新零售元年”,从早前颜艳春的《第三次零售革命》到阿里的“五新”战略,再到京东的“新零售革命”等等,一系列关于“新零售”的概念被正式提出。而行动上,无论是互联网电商巨头,还是传统线下零售企业均在紧锣密鼓地展开此次零售变革的布局。此次“新零售”变革概念从中国提出之时,从全球范围来看,和传统零售形态不太一样的商业形态和消费者体验已经在世界各地慢慢的生长起来。这一年中各式各样关...

    2018-02-08
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • # 干货收藏!一张图教你看懂产品的一生!

    这是Laura Klein创作的一个产品思考图表,你可以在它的指引下一步一步去分析你自己的产品。 思考一下你的产品在每个环节的表现如何,找到较为薄弱的部分,然后想想如何去改善它,接下来就乖乖的回去改线框图吧,把…

    2016-03-15
  • 从揽胜星脉身上,能看到哪些车内交互设计趋势?| 车展干货

    在日内瓦车展上,有那么几个品牌的展台格外引人关注,捷豹路虎就是其中之一。不少人是冲着前几天刚刚发布的路虎揽胜星脉来的,作为一辆真正全新的车型,同时又是揽胜家族的第四款产品,它受到关注几乎是必然。大家…

    2017-08-02
  • 用户体验“大不同”,合作伙伴分享会

    2018年3月15日,“用户体验“大不同”,合作伙伴分享会”在福建省科威技术发展有限公司举行。虽然屋外下了很大的雨,但也没能减小屋里同行朋友们的热情。分享会一开始,惠普华南区业务开发经理李浩泉就以十分轻松幽默的氛围,将与会者带入状态。随后介绍了页宽产品的主要特点,并对惠普A3页宽复合机作了产品推介。惠普新一代A3智能复合机页宽产品的主要特点是:最新技术(集激光/喷墨优势于一身)高速(40ppm~80ppm输出速度)经济(购买/使用/维护...

    2018-03-17
  • 破局在即,用户体验将成银行翻盘利器?

    今年,BATJ纷纷与国有四大行牵手,这种破冰式的历史性合作传递了两个信息,一是专注线上的互联网巨头们开始重视线下场景的价值,这也表明在未来的金融行业中,我们将能看到更多线上线下相结合的产品和服务场景;二是在与互联网巨头的磨合中,银行的角色即将产生质的突破,也彰显了银行在当前金融局势下的求变决心。当然,银行们寻求自我突破的决定必然不是空穴来风。众所周知,在互联网+潮流下,以线下为主的银行们失去了对部分年轻用户的影响力,而且银行基因中强大的...

    2018-03-03
  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • 最重要的用户体验设计细节恰恰是被忽视的地方

      编者按 : 本杰明·布兰德尔(Benjamin Brandall)是 Process Street 的内容设计师。 我算不上是一个优秀的设计师,事实上我的设计水平还比较糟糕。不过我对设计的理念很感兴趣。我读过和写过很多关于 客户成…

    2015-11-30