网站建设之设计出色的移动网站体验的关键

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

与网页设计领域的几乎所有内容一样，对于我们应该如何处理特别是小屏幕的设计有不同的理念。但是，除了这些差异之外，我们都应该牢记一些响应式设计的原则。

在设计下一个网站时，请在为移动设备自定义时考虑以下事项：

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

每个人都希望他们的设计在每个屏幕上看起来都很美。但是，在移动设备方面，试图有点过于花哨是有危险的。在桌面上看起来令人惊叹的高端布局或功能可能对手机没有意义。

在适当的情况下，需要简化事情。如果事实证明某个特定元素在一个小屏幕上过于笨重 – 删除它或用更有效地完成工作的东西替换它就不会感到羞耻。

在排版方面，尺寸和对比度在手机上同样重要（如果不是更重要的话）。阅读长文章时，盯着高质量的移动屏幕仍然有点乏味。确保文本大小合适，并设置行间距和边距以帮助提高可读性。

需要注意的是，桌面用户的可用性也应该与移动体验相结合。

利用可用的屏幕房地产

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

重点是值得付出额外的努力，看看我们如何最好地使用我们可用的任何屏幕房地产。很多时候，我们滚过这些中间分辨率，而只关注最小和最大视口的解决方案。例如，纵向平板电脑应该被认为与同一视图中的电话不同。

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

一切都不必在同一个精确的位置

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

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

有几个选项，除了只是坚持这些类型的项目不舒服的网站的标题。您可以考虑将这些项目放在按钮中，以便根据用户的要求显示它们。或者，它们可以成为您实施的任何移动导航解决方案的一部分。

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

添加移动专用功能

在考虑响应式设计策略时，您可以考虑添加一些小的触摸，为移动用户带来更高的便利性。这些项目通常不需要额外的努力来实现。然而，他们可以在很大程度上改善可用性。

在支持触摸的设备上浏览可能会带来桌面用户无需处理的一些挑战。首先，为了回到主导航而必须从长页面向上滚动是移动设备的一个主要难点。您可以通过使用在检测到用户向上滚动时自动显示的导航在某种程度上缓解此问题。另一个选择是在每个页面的底部有一个很好的旧“Back to Top”链接。

对于鼓励拨打电话的企业，点击通话按钮可以是一个受欢迎的功能。这可以采用传统按钮的形式，字面意思是“立即打电话”，或通过超链接提及整个网站中的电话号码。

基本上，您可以采取的任何措施来帮助移动用户与您的组织进行互动，这是值得考虑

移动事务

响应式设计是一个非常强大的工具。我们可以使用它在几乎任何设备上为用户提供最佳体验（好吧，也许不是在你父亲的旧翻盖手机上，但我们离题了）。但是作为设计师，我们可以充分利用这些可能性。

首先，它是关于确保移动用户可以轻松浏览和浏览您的网站。从那里开始，就事物的外观和工作方式做出最明智的设计决策。如果你让用户满意，他们将更有可能再次回来（并告诉他们的朋友）。