在不同屏幕和设备上,创建用户体验设计的8个步骤

从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。


从具有微型屏幕的智能手表到最广泛的电视屏幕,其中所开发的内容,应以便在各种屏幕尺寸之间进行查看和交互。但针对不同设备的设计更多的只是调整在不同的屏幕上显示的内容大小。它涉及到很多复杂性:设计师需要把每个设备中的用户体验最大化,以便用户相信实际上应用程序是为他们的设备设计的,而不是简单地拉伸到适合屏幕。为了创建一个好的用户体验,有必要制定一个针对各种设备和屏幕尺寸的策略。

在不同屏幕和设备上,创建用户体验设计的8个步骤

1. 确定核心用户体验

每个产品都有核心的用户体验,这基本上是它存在的原因。它解决了人们所面临的问题,而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验,就要问自己一个问题:“客户需要完成哪些最常见和最重要的任务?”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如,Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何,此功能都能在每个设备上正常工作实现这一目的。

在不同屏幕和设备上,创建用户体验设计的8个步骤

图片来源: Techcrunch

预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备,但绝对不能定位各个设备,可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是:

  • 移动手机
  • 平板电脑
  • 台式电脑
  • 智能电视
  • 智能手表

在不同屏幕和设备上,创建用户体验设计的8个步骤

不同的设备组在不同的上下文中提供不同的服务:用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如,手机主要用于微任务,并且具有较短的用户会话。平板电脑主要用于内容消费,目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

3. 适应每个上下文使用的体验

确定产品的核心用户体验后,选择一组你希望支持的设备组,你需要调整每个组的体验(对于每个上下文的使用)。上下文的设计在不同设备组设计时尤为重要。

(1)并非所有功能都在所有设备上都有意义

你需要确定你的产品在多个设备组中使用的不同场景,并设计适合每个场景的体验。例如,通常移动用户比电脑用户想要的不同于产品。以 Evernote为例,可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化:

在不同屏幕和设备上,创建用户体验设计的8个步骤

用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的:

在不同屏幕和设备上,创建用户体验设计的8个步骤

Evernote了解移动环境:它利用设备功能,并提供快速保存想法的方式(添加文本笔记,捕获照片或设置提醒)。

(2)不同的屏幕允许不同的输入法

以触摸输入为例。在设计具有触摸输入(移动手机和智能手机)的设备时,设计师会犯的几个常见错误包括:

小的点击目标。点击目标(如CTA按钮)必须具有足够大的尺寸。通常至少7毫米是足够的,但最好使用10mm触摸目标尺寸。

在不同屏幕和设备上,创建用户体验设计的8个步骤

图片来源:UXMag

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距,因为间距有助于分离控件,并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

在不同屏幕和设备上,创建用户体验设计的8个步骤

按钮之间的间距

使用悬停状态。但在触摸屏上,没有“悬停”。

4. 最小屏幕设计

历史上,设计师一直从事大屏幕到小屏幕的设计工作,这意味着第一个也是主要设计是为了完整的电脑桌面视图(它具有最多的功能)。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时,我们通常面临“厨房水槽”问题:许多功能被添加到产品中,特别是当涉及多个利益相关者时。这并不奇怪,,当你有很多不动产时,添加功能是比较容易。实践经验清楚地表明,最好使用移动方法进行设计,并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时,它会强制你决定最重要的。一段时间后,你将采用同样的方法仔细选择产品的其他版本,无论是电脑桌面设备,平板电脑还是电视。

在不同屏幕和设备上,创建用户体验设计的8个步骤

在大多数情况下,手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要,那么你将需要考虑具有更小分辨率的微型屏幕。

 5. 不要忘记大屏幕

想想大屏幕以及小屏幕,给大屏幕和小屏幕提供同样的注意力:

不只是缩小设计,使其适合那些大屏幕。充分利用你可以使用的额外空间。

在不同屏幕和设备上,创建用户体验设计的8个步骤

图片来源:Wikipedia

确保图像不会因为屏幕尺寸的放大而失去质量。

在不同屏幕和设备上,创建用户体验设计的8个步骤

左:低质量图像。右:正确的分辨率。

考虑大屏幕细节。每个设备组都有自己的不同。例如,电视屏幕的设计被称为“设计10英尺体验”,因为从沙发的距离来看,与电脑桌面屏幕相比,屏幕上元素的明显尺寸明显更小。

在不同屏幕和设备上,创建用户体验设计的8个步骤

电视的用户界面元素应大于电脑桌面。图片来源:Samsung

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何,一致的用户体验是成功的全通道用户体验的关键组成部分之一:

对未来与产品的交互设定期望,并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面,而不是将设计定制到越来越多的屏幕和设备中。例如,Google搜索应用在所有设备上提供相同的搜索体验。

在不同屏幕和设备上,创建用户体验设计的8个步骤

当设计和功能一致时,用户可以在他们选择的设备上更快更有效地完成任务。

 7.  创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动,完成任务,或当他们从设备转移到另一设备时,他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备,环境的变化或上下文的变化,并且可以依赖于设备良好的功能性和独立于设备的易用性。

在不同屏幕和设备上,创建用户体验设计的8个步骤

图片来源:Intercom

大多数人如何走过他们的一天,他们访问的主要屏幕。

根据使用情况,你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例:你可以在Mac上设置播放列表,并在iPhone上即时播放,也可以开始听iPhone上的歌曲,当你转到电脑桌面时,你将被拍摄回到你在iPhone上。

在不同屏幕和设备上,创建用户体验设计的8个步骤

Apple Music可以很好地处理多个设备的同步。

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试,你可以在发布之前发现用户体验的问题并解决它。

结论

在设计多个屏幕和设备时,最好的策略是保持最终的用户体验。作为用户体验设计师,你必须评估产品的使用时间,位置和方式,以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕,用户都希望在各种设备之间获得流畅的体验。

 

原文地址:https://blogs.adobe.com/creativecloud/designing-for-different-screens-and-devices-7-steps-to-creating-a-great-ux/

原文作者:Nick Babich

译者:SKYUI

本文由 @SKYUI 翻译发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-04-29 05:43
下一篇 2017-04-29 07:37

相关推荐

  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • Sketch的一些常用技巧

    谈不上译文,汇总了一些文章当中介绍的tips,包括常用快捷键和一些小技巧。最后一条还蛮亮的,很实用,我怎么没想到这样做。

    2017-05-19
  • 猎豹资深交互设计师分享:如何利用数据来支撑设计?

    作者:可风 我最早的时候认为设计就是如何去做出各种新奇的图形、质感和界面,追逐潮流和创意。可是后来发现设计最难的是平衡各方面的因素,在条条框框的限制中找到方案还要推进下去,并被人看到价值。前者很容易满…

    2015-11-15
  • 一个案例告诉你如何用尼尔森10原则分析产品

    本文仅代表作者个人观点,仅供学习交流使用。

    2017-06-01
  • 有效地运用UI动效的4种方法

    约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。设计不仅是外形和感觉,设计关乎如何运作。

    2017-08-04
  • 产品体验分析之7步走(附PPT下载)

    我最近一直在做新产品的策划,方案一个又一个的被毙掉,方向一次又一次的调整,PPT一遍又一遍的改,交互一稿又一稿的画,所以我还在继续努力中,也深深的感受到产品「从0到1」的不容易。产品经理在日常生活中将发现的问题记录下来后经过分析转化为可落地的产品方案,这个过程很复杂,也很容易出错,原因就是思维的过程是不可控的,也就是没有一个相对的衡量「标准」,导致一个现象是想法人人都有,却不一定人人都对,所以产品策划「从0到1」的整个过程十分考究产品经理的功力。

    2017-05-31
  • APP设计:那些打动人心的设计点(4)

    你好,这是2017年的第12篇文章。自从写了这个系列,每天除了吃饭睡觉工作,其余的时间都在用各种APP,观察各种产品。在同质化越来越严重的今天,这些产品的微交互,是用户喜欢或讨厌一个产品的重要原因,不容被忽视。

    2017-05-04
  • 尼尔森十大交互设计原则的实际应用解析

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法。Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联...

    2018-02-16
  • 交互设计如何备考?二战学姐带你领略考研那些事

    姜嘉琪本科南京大学,信息管理与信息系统专业清华大学美术学院公布拟录取名单一周之后,心里那种不真实感终于平复下来。这是我第二年参加考试,至此也算是最好的结果了。为什么考研我本科的专业其实也算是个“交叉学科”,范围广必然深度不足,所以我一度非常迷茫,不知道未来究竟想做什么。后来上了一门《人机交互》的选修课,第一次了解到设计上的微妙差别给使用者带来的不同体验,经过反复思考,我觉得产品交互设计这个领域可以算是我个人兴趣、能力、期望最佳的结合点,...

    2018-04-20
  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08