1.整理设计

 

 

为了充分利用响应式网站或应用程序设计，您可以做的最好的事情就是整理它。不要将设计包含太多选项或按钮。所有这些只会压倒用户。有几种方法可以有效地做到这一点：

• 简化内容：密切关注用户需要知道与网站或应用程序进行交互的内容。使用一系列屏幕或步骤以逻辑方式呈现此信息。屏幕上的所有内容都会在小屏幕上瘫痪。
• 仅使用对设计功能至关重要的界面元素。为什么包含用户未与之交互的选项按钮？（如果您不确定，请查看分析数据。您应该能够看到某些操作的交互模式和用户流。）

2.使任务可消化

 

 

用户最常见的任务之一是填写表单。因此，我们将以此为例来考虑如何使操作易于理解。想象一下，在网上放入一些东西后，我们会设置一个结账屏幕。那么会发生什么？

是否有一个长屏幕，有大量的字段要填写（其中一些非常小）？或者，交互是从简单的问题开始，您可以在一个屏幕上完成？

我的猜测是你更有可能填写后一种形式。大多数用户也是如此。当表单看起来很容易时，人们更愿意提供信息并点击结账（或其他所需的操作）。

关于数据和表单的另一个提示 - 尽可能使用智能功能。诸如自动完成之类的功能将使用户更有可能实际上将该表单一直转换为完成，因为它很容易。用户实际键入（或点击键入）的内容越少，他们就越有可能继续前进。

另一个例子在上面的Evernote的例子中是清楚的。其中一项主要任务是添加新笔记。绿色+按钮在屏幕底部中央高度可见，使此操作易于查找和完成。

3.创建明显且容易的按钮

 

 

有时，设计师有这种倾向，想要创造新的和令人兴奋的东西并过度暗示明显的：按钮应该看起来像按钮。

不要试图在这里重新发明轮子。不要花哨并设计一种完成动作的新方法。设计按钮看起来像按钮一样。坚持常见的使用模式和功能。

如果用户必须考虑如何与响应式网站或应用程序设计进行过多努力 - 或者根本不考虑 - 可能的情况是他们根本不参与并继续使用其他选项。

4.将键盘与数据匹配

 

 

对于响应式网站或应用程序，有很多小型活动会产生重大影响。正确使用键盘可能是您最大的资产之一。

确保将键盘类型（字母或数字）始终与查询类型相匹配。如果您要求提供某些信息，例如电子邮件地址，请包含@键。这些小细节让用户高兴，让您的网站或应用程序易于使用。而且您只需要花费一点额外的努力。

5.使用简单语言

 

 

您使用的单词也会极大地影响响应式网站或应用程序的可用性。有效的设计包括易于阅读和理解的语言，包括视觉和认知。

不要试图用语言或用户需要理解的元素太可爱。提供简单，清晰和直接的说明。避免使用行话或不清楚的语言。然后再往前走一步。使用干净，清晰的排版来帮助进一步强调和理解文本元素。

理解和可读性有两个部分 - 认知理解（用户确切地知道单词的含义或暗示的行为）和视觉（每个单词在屏幕上清晰易读）。

这意味着你需要以一种可以理解的方式编写，选择一种可读的字体，并在背景和文本之间提供大量的视觉对比，这样所有这些都以一种易于用户理解的方式汇集在一起​​。

6.注意错误

 

 

“任何可能出错的事情都会出错。” - 墨菲定律

事情会出错。如果你已做好准备，这没什么大不了的。

用户将点击奇怪的元素组合，或复制一个奇怪的URL，或丢失他们的互联网连接，或做你不想要的其他事情。当出现问题时尽可能多地提供信息，以便用户可以轻松地回到正轨。

在设计错误消息时，尝试解释出现了什么问题以及为什么 - 例如“没有互联网连接” - 以及如何解决问题。两条信息都可以在一个屏幕上传送，并带有指向修复的链接（适当时）。

7.警惕视频 - 现在

 

 

虽然我们喜欢在响应式网站上使用视频，但它仍然不是移动设备的最佳选择。（在以这种方式播放视频时，许多设备仍然不稳定。即使设备可以处理它，互联网连接也可能没有为负载做好准备。）

这并不是说您必须完全避免使用视频，而是要确保考虑此内容类型并为移动用户提供替代方案。它将带来更好的整体体验。简单的解决方案是始终有一个静止图像代替移动视频，只有在用户特别要求时才播放视频。

8.使用一致的设计

 

 

最后，在创建有效的响应式网站或应用程序时，您可以做的最好的事情是开发一致的设计，在设备上以相同的方式查看和工作。设计中唯一真正的区别应该是设备特定的功能或用户模式。

在视觉上，这意味着您应该使用相同的字体和调色板，图像和号召性用语。大多数情况可能看似常识，但事实上必须说明这意味着有太多的网站和应用程序不遵守这一设计原则。

目标是任何用户都可以在一台设备上使用您的网站或应用程序，并移动到另一台设备而不会发现事情有所不同。如果您同时拥有响应式网站和应用程序，情况也是如此。请注意以上ESPN主页（左）和app home（右）的相似之处。

底线？您设计的大部分内容很可能是针对移动设备制作的。这个今后会成为趋势的。