设计优秀移动网站体验的关键



随着设备数量和屏幕尺寸的增加,响应式设计已成为标准协议。我们为网站进行设计和测试,以确保用户能够导航并轻松访问内容,这一点至关重要,无论他们如何访问内容。

正如网页设计领域的一切一样,对于如何进行小屏幕设计,我们有不同的理念。但是,撇开这些差异不谈,我们都应该牢记响应式设计的一些原则。

在设计下一个网站时,请在为移动设备进行自定义时考虑以下事项:

可读性和可用性是第一位的

每个人都希望自己的设计在每个屏幕上都看起来漂亮。但在手机方面,过于花哨是有危险的。高端布局或功能在桌面上看起来很炫目,这对手机来说可能没有意义。

在适当的情况下,事情需要简化。如果某个特定元素在小屏幕上显得太笨重,那么删除它或用更有效的东西替换它是不丢脸的。

说到排版,尺寸和对比度在手机上同样重要(如果不是更重要的话)。阅读长篇文章时,即使是高质量的手机屏幕也可能有点乏味。确保文本大小合适,并设置行距和边距以帮助提高可读性。

值得注意的是,桌面用户在可用性方面所做的同样努力也应该致力于使移动体验变得更好。

Man looking at a mobile screen.

利用可用的屏幕房地产

多列布局无处不在,但文本密集的列通常不适合最小的屏幕。在这种情况下,只需将多个列转换为单个列就有意义。但当我们谈论平板电脑,甚至是横向手持的手机时,专栏仍然非常有效。

重点是,值得付出额外的努力,看看我们如何最好地利用我们现有的任何屏幕房地产。很多时候,我们在分辨率之间直接跳过这些,而只关注最小和最大视口的解决方案。例如,纵向平板电脑应该与同一视图中的手机有所不同。

实现这种策略的一种更简单的方法是使用CSS Flexbox。如果配置得当,它通常非常擅长为当前视口自动提供最佳布局。您可能需要通过媒体查询进行一些轻微的调整,但结果值得额外调整。

Tablet in portrait mode.

一切都不一定要在同一个地方

对于移动和桌面视口,很容易落入将每个设计元素放置在同一相对位置的陷阱。而且,虽然对一致性的渴望值得称赞,但这种方法有时在较小的屏幕上真的会适得其反。

例如,许多网站在其标题中放置搜索表单或社交媒体图标等项目。这在更大的屏幕上效果很好,但往往会妨碍手机上的主要内容。尤其是在辅助页面上,用户可能真的只想阅读页面的文本,而不必担心所有无关的垃圾。

除了不舒服地将这些类型的项目粘贴到站点标题之外,还有几种选择。您可以考虑将这些项目塞进一个按钮中,根据用户的请求显示它们。或者,它们可以成为您实施的任何移动导航解决方案的一部分。

同样的事情也可能适用于边栏等功能。其他元素可能完全隐藏。同样,媒体查询(可能还有一些条件代码)可以将这些项目放置在移动设备上更合适的位置。用你最好的判断应该去哪里。

Website as shown on a desktop, tablet and phone.

添加特定于手机的功能

在考虑您的响应式设计策略时,您可能会考虑添加一些小功能,为移动用户带来更高程度的便利。这些项目通常不需要太多额外的努力来实现。然而,它们可以在很大程度上提高可用性。

在触控设备上浏览会带来一些桌面用户不必面对的挑战。首先,必须从一个长页面向上滚动才能返回主导航是移动设备上的一个主要痛点。您可以通过使用在检测到用户向上滚动时自动显示的导航,在一定程度上缓解这种情况。另一个选择是在每个页面的底部有一个很好的“返回顶部”链接。

对于鼓励打电话的企业来说,点击通话按钮是一个受欢迎的功能。这可以采取传统按钮的形式,字面意思是“立即致电”,或者通过超链接在整个网站上提及的任何电话号码。

从本质上讲,任何可以帮助移动用户与组织互动的事情都值得考虑。

Browsing a mobile-optimized website.

移动事务

响应式设计是一种功能强大的工具。我们可以用它在几乎任何设备上为用户提供最好的体验(好吧,也许不是在你爸爸的旧翻盖手机上,但我们离题了)。但作为设计师,我们应该充分利用这些可能性。

首先也是最重要的一点,它是关于确保移动用户可以轻松浏览和导航您的网站。在此基础上,就事物的外观和工作方式做出最明智的设计决策。如果你让用户高兴,他们很可能会再次回来(并告诉他们的朋友)。

来源:https://speckyboy.com/designing-great-mobile-website-experience/

0