7步打造优秀UX：搞定各种屏幕尺寸

2017-07-28 本文已影响90人设计新手村

本文首发于公众号：设计新手村

文章译自：Adobe Creative Cloud

原文标题：Designing for Different Screens and Devices: 7 Steps to Creating A Great UX

原文作者：Nick Babich

文章翻译：村长道哥

从屏幕微小的智能手表到屏幕最宽的电视，显示的内容应该可以在不同大小的屏幕内呈现和互动。但针对不同设备的设计更多的是调整内容的大小。这涉及到很多复杂的问题：设计师需要最大化每个设备的用户体验，让用户相信这款应用确实是为他们的设备专门设计的，而不是简简单单地拉伸，然后充满整个屏幕。

为了创造一个良好的用户体验，必须找到一种有效的策略来解决不同的设备和屏幕尺寸的问题。

#1 识别核心用户体验

每个产品都有一个核心的用户体验，这基本上就是产品存在的原因。产品解决了人们的一个需求，所以变得有意义，并为用户提供了价值。主要内容和功能的结合反映了核心的用户体验。要找到你产品的核心用户体验，问自己一个问题：“对于客户来说最常见和最重要的任务是哪些？”在产品使用的每个途径上对这些核心任务给予支持是至关重要的。例如，Uber 的核心用户体验是在任何时候都可以轻松地叫车。无论屏幕大小是怎样的，这个功能都应该适用于为这个目的而设计的每个设备。

把产品的设备分组

尽管市面上有各种各样的设备，屏幕大小不一，而且完全不可能针对单个设备去做设计，但可以根据用户关注的功能去为产品划分设备组别。最常见的设备分组是：

移动电话

平板电脑

台式电脑

智能电视

智能手表

不同的设备分组在不同的环境中可以提供不同的服务：用户可以根据屏幕类型来进行不同的交互。例如，移动电话主要用于处理小任务，时长通常很短。平板电脑主要用于内容消费，在大多数眼里目前还不能被认为生产力工具。理解各种设备类型的定位对于构建良好的用户体验是很重要的。

#2 对每个场景的用户体验进行调整

在确定产品的核心用户体验并选择一组想要支持的设备之后，需要为每个组（针对每个使用场景）进行用户体验的调整。为不同的设备组设计时，使用场景是非常重要的。

首先，并非每一个功能在所有的设备上都有意义。你需要确定不同的场景，在这些场景中产品将在不同的设备组中使用，并设计适合每种场景的用户体验。例如，很多移动用户都希望从产品中获得与桌面电脑不同的东西。以 Evernote 为例，做为一款流行的笔记产品，可以在多种设备上使用。Evernote 的桌面版针对内容消费进行了优化：桌面版 Evernote 优化了文本阅读和媒体文件的浏览。

而移动版则是针对笔记、照片和捕捉音频进行优化的。

其次，不同的屏幕采用不同的输入法。以触摸输入为例，设计师在设计触摸输入设备（手机和智能手表）时一些常见的错误包括：

过小的点击目标。点击目标（如CTA按钮）必须有足够的大小才行。最小限度的7毫米通常来说就可以了，但是最好使用10毫米的触摸目标大小。

把元素都紧紧地堆在一起。你应该考虑一下点击目标的大小，以及它们之间的间距，因为间距可以帮助分隔控件，并给用户界面提供呼吸的空间。为了防止输入错误建议最小的间距为23pt。

使用悬停状态。在触摸屏上，没有“悬浮”这个东西。

#3 优先为最小的屏幕设计

从历史上看，设计师工作的顺序总是从最大的屏幕到最小的——这意味着第一个也是最主要的设计是为了完整的桌面版（拥有最多的功能）。只有在桌面版设计完成之后，它才会被移植到移动设备和其他设备组。然而，在为桌面版设计时，我们通常会遇到“厨房洗涤槽”问题：产品中添加了许多特性，尤其是涉及到多个利益相关者的时候。这并不奇怪，因为当拥有大量的空间时，添加功能相对来说总是比较容易的。然而实践表明，移动为先的设计会更好，用最小的屏幕创建应用程序，因为这与你的用户是息息相关的。

当你首先为最小尺寸的屏幕做设计时，你不得不去思考什么是最重要的。过了一段时间后，无论是在桌面、平板电脑还是电视上，你会对产品的其他版本应用这样的方法，仔细认真的选择要添加的功能。