全国服务热线

0791-86810858

8个创建有效响应式网站或应用程序的规则

点击数:发布时间:2018-11-28

从实际的数据来看,比起PC端的使用,用户花费更多的时间在移动设备上的网站进行交互,并且这个数据每天都在增长。 根据eMarketer的说法,美国成年人在手机上平均花费3小时35分钟浏览网站,预计这些设备的使用时间明年将超过电视的收视数据。

这对所有网页设计师和开发者都有重大影响。 你必须创建有效的响应式网站或应用程序才能满足此需求。 今天,我们将探索八项规则,以确保你在设计响应式体验(无论是网站设计还是应用程序)时都能遵循这些规则,并获得最高效的结果。

  1. 整理设计

radiopublic.jpg

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

· 简化内容:密切关注用户需要知道或想要与网站或应用程序进行交互的内容。 使用一系列屏幕或步骤以逻辑方式呈现此信息。 不然,屏幕上的所有内容都会在小屏幕上变得很棘手。

· 仅使用对设计功能至关重要的界面元素。 为什么要包含用户重来不会与之交互的选项按钮呢(如果你不确定,可以通过查看和分析数据。你应该能够看到某些操作的交互模式和用户流)?

2.让任务可消化

evernoteapp.jpg

用户最常见的任务之一是填写表单。 因此,我们将以此为例来考虑如何使操作易于理解。

是否需要规划一个长屏幕,有大量的字段来填写? 又或者,你可以从简单的交互问题开始,一步一步引导用户在同一个界面中完成所有的信息收集?

我猜你更有可能会选择后一种形式。 大多数用户也是如此,当表单看起来很容易并能够很轻松的被理解的时候,人们更愿意提供信息并点击提交(或其他所需的操作)。

关于数据和表单的另一个提示——尽可能使用智能功能。 诸如自动完成转换的功能将使用户一些可以简略处理的事项精简化,因为它更加容易。 用户实际键入(或点击键入)的内容越少,他们就越有可能继续前进。

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

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

ebatesapp.jpg

有时,设计师会有这种倾向,想要创造新的和令人兴奋的东西并过度暗示,实际上,你只需要做到一点:按钮应该看起来像按钮。

不要试图在这里重新定义一个已经被大众习以为常的习惯。 不要设计一种过于花哨的新方法,按钮的设计看起来需要像按钮一样。 坚持常见的使用模式和功能。

如果用户必须考虑如何与响应式网页设计或应用程序设计进行交互,可能的情况是他们根本不想再参与并继续使用其他选项了。

4.将键盘与数据匹配

rwapp.jpg

对于响应式网站或应用程序,有很多细节上的完善会产生重大影响。 正确利用键盘可能是你最大的考虑之一。

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

5.使用简单语言

weatherapp.jpg

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

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

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

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

6.注意错误

spotifyapp.jpg

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

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

在设计错误消息时,尝试解释出现了什么问题以及为什么——例如“失去互联网连接”的提示并提供如何解决问题的途径。 两条信息都可以在一个屏幕上展示,并带有指向修复的链接(适当时)。

7.小心处理视频——目前

purdueapp.jpg

虽然我们很喜欢在响应式网站上使用视频,但它仍然不是移动设备的最佳选择(在以这种方式播放视频时,许多设备仍然不稳定。即使设备可以处理它,互联网连接和移动数据流量也可能没有做好相关的准备)。

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

8.使用一致的设计

espnapp.jpg

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

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

我们的最终目标是任何用户都可以在一台设备上使用你的网站或应用程序,并移动到另一台设备而不会发现事情有所不同。 如果你同时拥有响应式网站和应用程序,情况也是如此。 


上一篇:让每一个像素都清晰可辨
向后已无文章