适合移动设备的网站设计优先考虑移动浏览体验，而不是将其视为桌面版本的事后考虑。

这种方法在过去十年中变得极其重要。根据Statista 的研究，现在超过一半的网站流量发生在移动设备上，其中包括大约45% 的在线购物。考虑到智能手机才问世十年左右，随着移动网站浏览变得更加根深蒂固，设计更加直观，预计这些数字只会上升。

这就是为什么网站未能做出真诚的、战略性的努力来提供优质的移动体验，有可能大大落后于竞争对手的原因。为了帮助您跟上步伐，我们整理了本指南，介绍设计最适合移动设备的网站的一些最常见提示和技巧。

适合移动设备的网站设计的7种技巧

使用移动优先的方法

随着移动网站浏览量几乎超过桌面版，设计师不得不放弃将桌面版网站视为“主要”版本。这就是为什么移动优先的方法——在桌面版本之前设计移动网站——​​多年来一直是普遍持有的最佳实践。

通过以移动体验为中心的艺术方向，鼓励设计师凭借限制来控制设计决策。不仅有尺寸限制，移动用户经常用一只手进行交互，除了点击和滑动之外，输入往往比在桌面上更麻烦。例如，考虑依赖鼠标输入的悬停动画：如果您的桌面版本过于依赖这种视觉反馈，那么它稍后将成为移动设备的问题。

因此，移动优先设计从一开始就倾向于强调简单性和易用性。请记住，这种方法不会使桌面版本成为极简稀疏性。相反，在简单布局上进行扩展比简化复杂布局更容易。

首先在移动设备上测试您的多媒体也很重要，因为为横向制作的照片或视频可能不适用于纵向。面部表情或背景元素等精细细节在小尺寸时可能难以清晰阅读。此外，一次通常只有一张图片的空间，如果您首先设计了一个大量图片的桌面网站，则在移动设备上滚动浏览每张图片可能会变得多余。 

推荐的移动尺寸

在手持设备上，空间可能比在任何其他设计环境中都更加有限。但是在项目开始时考虑大小限制是避免以后发生冲突的最佳方法。

移动屏幕分辨率因设备而异，但根据statcounter 的研究，目前最常用的是 360×640（纵横比 9:16）。Google Analytics 可以告诉您您的用户喜欢哪些特定设备，并且您应该确保您的网站设计具有足够的响应能力以适应变化。

当涉及到移动设计的字体大小时，建议正文副本至少为 16px。这也可能因使用的字体而异（根据它们的构造，某些字体在 16px 时会比其他字体更难辨认）。

标题字体没有标准大小，但目标是通过大小、粗细和样式的对比来建立清晰的排版层次结构。但如果有疑问，只需在移动设备上为自己测试字体大小。

图像和其他媒体当然可以在设备允许的范围内尽可能宽。让图像的主题决定它应该有多大或多小，以保持清晰度。请记住，您不必适合整个图像，但可以放大主体并裁剪掉多余的背景元素，如上例所示。

最后但并非最不重要的一点是，按钮大小在适合移动设备的网站设计中非常重要，因为触摸屏在接收用户输入方面不如鼠标和键盘可靠。一个研究重点是老年人用户建议最佳可达42和72px之间的触摸屏按钮。

优化纵向

尽管从技术上讲，移动网站可以在设备侧放的情况下以横向模式使用，但纵向模式更为常见。黑莓手机在 2000 年代普及了双手握持，但随着智能手机的兴起，这已经被彻底淘汰，用户更喜欢单手人像模式。

纵向模式的狭窄非常适合单列布局。在这种样式中，站点元素从上到下依次放置。尽管内容的居中对齐往往很常见，但左右对齐的交替可能会产生视觉兴趣和两列布局的错觉。此外，图标和照片等较小的元素可以在网格中呈现，而图像轮播可以通过水平滑动来打破垂直滚动。

除了寻找打破单列布局的创造性方法之外，还有一些方法可以利用它来发挥您的优势。由于社交媒体应用程序已经让移动用户为长时间的滚动做好了准备，因此网站设计人员可以使用空白和填充来传播内容。这使内容保持干净和可读，同时通过持续滚动鼓励参与。

考虑相反的情况：在滚动有限的单个屏幕上聚集的内容如何令人生畏。

分段设计对于将相似信息进行分组也很有用，这样用户无需深入阅读即可了解每个部分的一般用途。当您考虑到大约79% 的页面访问者只浏览网站内容时，这尤其有用。不同的颜色背景有助于区分这些部分，而创意部分的边框会破坏这些部分所提倡的四四方方的感觉。

最小化菜单

导航是另一个可能会迅速变得复杂的领域，具体取决于为用户提供的目的地和选项的数量。虽然桌面网站往往有一个带有多个主菜单和子菜单的完整标题导航栏，但将所有这些都包含在简单、可识别的汉堡包图标中已经成为标准。因此，大多数移动网站标题都倾向于简化为该图标和徽标。

对于实际菜单的样式，一种常见的方法是滑出侧边栏，它用导航选项覆盖屏幕的一部分。这允许菜单在与页面内容的其余部分不同的维度上操作，同时为用户留出空间来点击菜单并返回上一屏幕。

根据菜单的复杂程度，每个菜单选项可能包含更多嵌套选项或子菜单。当用户单击这些子菜单之一时，最好让新的选项列表替换现有菜单，以保持列表简短。

不要忘记将导航栏固定到屏幕上，这样用户就不必一直滚动回到顶部。移动设备的常见做法是在用户向下滚动时隐藏固定导航，为内容提供应有的关注，并在用户开始向上滚动时显示导航。

有替代的导航方式可以代替标准菜单或作为标准菜单的补充。标签允许用户轻松地浏览其他内容部分，而无需加载全新的页面。

如今，许多 UX 设计师也在探索除基于点击的输入之外的导航解决方案——水平和/或垂直滑动是最常见的。当所有其他方法都失败时，方便的搜索图标在移动设备上很常见，可让用户找到他们正在寻找的特定内容。

折叠次要内容

桌面网站通常有足够的空间容纳深入的正文、产品规格和其他内容。但由于移动网站要求信息直截了当，设计者必须消除或缩短所有非必要的内容。这是可折叠/可扩展部分派上用场的地方。

折叠内容涉及使用图标（例如三角形或加号）来展开或显示隐藏的内容，从而使解释性信息成为可选。虽然隐藏您的内容可能听起来是件坏事，但有说服力的标题所支持的简化浏览的收益远远超过了丢失信息的可能性。切换的微交互也是用户与页面交互而不是被动阅读的另一个邀请。

设计人员应为标题下方的较低层副本保留折叠内容。重复的内容可以合并以重叠相同的空间而不是堆叠在彼此的顶部。在Artyom Ost的设计图中，桌面版本的标题下方有三个客户引述，而在移动版本中，设计师将它们折叠成一个旋转木马。

在适合移动设备的网站设计中，您应该完全避免的无关内容是插页式广告和弹出式广告。虽然这些可以通过在单独的窗口中覆盖内容来节省空间，但充满侵入性弹出窗口的网站不仅令人沮丧，而且还会受到谷歌的惩罚。

限制表单域和文本输入

文本输入必须是移动可访问性的最大障碍之一。虽然一个字在这里并没有什么大不了的，但当一个移动网站需要一个电子邮件地址时，谁没有抱怨过——迫使你用一只手在字母、大写、标点符号和符号菜单中循环？出于这个原因，您应该尽可能地减少表单字段。

自动填充机会，例如从邮政编码中预测大部分地址或为常见电子邮件后缀提供预填充选择，可以消除其中一些交互的痛苦。通过与其他基于个人资料的软件（如 Apple、Google 或 Facebook）的集成，用户的个人和登录信息同样可以简化为几次点击。

与支付提供商（如 PayPal）的第三方集成也可以在购物网站的购买页面上派上用场，即使在桌面上查找信用卡详细信息也很麻烦。如果此选项不可用，您还可以允许用户以客人身份快速结账，并将他们的送货信息重复到他们的账单信息中。

移动友好意味着拇指友好

根据Josh Clark 所著《Designing for Touch》中的研究，用户在所有移动交互中至少有 75% 是用拇指进行交互。这包括所有滚动、点击、滑动和文本输入，其余手指忙于支撑手机背面。还要考虑到，在许多情况下，用户在做其他事情时用不那么惯用的手浏览手机。所以很明显，设计师必须优先考虑所有移动交互的拇指接触。

拇指是最大的数字，这使得它不精确。在创建按钮时，设计人员应该为重要的交互使用最大的尺寸（请参阅上一节关于尺寸的部分），因为如果拇指的部分落在按钮之外，触摸屏将不会记录输入。

同样重要的是页面上交互元素的位置。通常，从下端握住移动设备，拇指放在中间。为了到达顶部的交互元素，用户必须重新定位他们的整个手或使用他们的第二只手的手指。研究表明，理想的交互区域（较大的手机会缩小）位于中下部区域。

近年来，许多 UX 设计师率先将导航栏定位在屏幕底部而不是顶部。虽然这使拇指访问更容易，但打破用户习惯的设计惯例也可能导致较差的体验。时间会告诉我们哪个位置是最理想的，但与此同时，为您自己的用户群解决这个问题的最佳方法是测试两者。

拥抱适合移动设备的网站设计

从其全球流量持续增长的方式来看，移动网站浏览显然是未来的发展方向。但是，当您考虑到与桌面网站相比设计必须面临的所有限制（缺乏空间和用户外围设备）时，它似乎更像是一种负担而不是机会。这些挑战并非不可克服，但也不能掉以轻心。

作者：Jamahl Johnson