一种适合移动设备的网站设计是一种优先考虑移动浏览体验的设计，而不是PC版那样对待它。

在过去的十年中，这种方法变得非常重要。根据Statista的研究，现在网站访问量的一半以上都发生在移动设备上，大约占所有在线购物的45％。考虑到智能手机才问世近十年，随着移动网站浏览变得更加根深蒂固，设计更加直观，这些数字预计只会上升。

出色的移动友好型网站不会将移动设计视为PC版本的事后考虑。由OrangeCrush设计

这就是为什么未能做出真诚的战略性努力以提供优质移动体验的网站可能会大大落后于竞争对手的风险。为了帮助您掌握最新信息，我们整理了本指南，介绍了一些最常见的提示和技巧，以设计最友好的移动友好型网站。

使用移动优先的方法

随着移动网站浏览几乎已超过 PC浏览器，设计人员不得不放弃将桌面网站视为“主要”版本。这就是为什么移动优先方法（在台式机版本之前设计移动网站）一直是多年来普遍采用的最佳做法。

通过围绕移动体验集中艺术指导，鼓励设计师凭借自身的局限性来主导设计决策。不仅存在尺寸限制，移动用户还经常用一只手进行交互，并且除了轻按和滑动以外，输入比在台式机上更笨重。例如，考虑依赖于鼠标输入的悬停动画：如果您的桌面版本过于依赖这种视觉反馈，那么以后的移动将成为一个问题。

结果，移动优先设计从一开始就倾向于强调简单性和易用性。请记住，这种方法不会将桌面版本注定要达到最低限度的稀疏性。相反，在简单的布局上进行扩展比简化复杂的布局要容易。

同样重要的是，首先在移动设备上测试多媒体，因为针对横向拍摄的照片或视频可能无法很好地用于人像拍摄。精细的细节（例如面部表情或背景元素）在小尺寸的情况下可能更难以阅读。此外，通常一次只能容纳一个图像，如果您首先设计一个图像大量的桌面网站，则在移动设备上滚动浏览每个图像可能会变得多余。

为手机使用建议的尺寸尺寸

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

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

当涉及到移动设计的字体大小时，建议正文复制至少为16px。这也可以根据所使用的字体而有所不同（根据其字体结构，某些字体在16px处的清晰度会比其他字体低）。

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

图像和其他媒体当然可以在设备允许的范围内。让图像的主题指示图像的大小，以保持清晰度。请记住，您不必适应整个图像，但可以像上面的示例一样放大被摄对象并裁剪出多余的背景元素。

最后但并非最不重要的一点是，由于触摸屏在拾取用户输入方面的可靠性远不如鼠标和键盘，因此按钮大小在适合移动设备的网站设计中极为重要。一项针对老年人的研究建议，触摸屏按钮应介于42像素至72像素之间，以实现最佳的可访问性。

针对纵向进行优化

尽管从技术上讲，移动网站可以在设备侧翻的情况下以横向模式使用，但肖像模式却更为普遍。黑莓手机在2000年代普及了双手手机支架，但是随着智能手机的兴起，这种方式已经完全被淘汰，用户喜欢单手肖像模式。

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

除了寻找打破单列布局的创造性方法之外，还有多种方法可以利用它来发挥自己的优势。由于社交媒体应用已使移动用户开始长时间滚动浏览，因此网站设计师可以使用空格和填充内容来分发内容。这样可以保持内容的干净和可读性，同时通过继续滚动鼓励参与。

请考虑相反的情况：在滚动受限的情况下在单个屏幕上聚集的内容如何难以阅读。

此设计使用倾斜的图形边框和多列，以使中心对齐感觉不那么重复。由boorykin设计

在各节中进行设计对于将相似信息进行分组也很有用，从而使用户无需深入阅读即可了解每个节的一般目的。当您考虑到大约79％的页面访问者仅浏览网站内容时，这特别有用。各种颜色背景有助于区分这些部分，而创意部分的边框则破坏了这些部分所促进的方形感。

最小化菜单

导航是另一个区域，根据目的地的数量和用户的选择，导航可能很快变得复杂。尽管桌面网站往往具有带有多个主菜单和子菜单的完整标题导航栏，但已将所有这些内容包含在简单，可识别的汉堡包图标中已成为标准做法。结果，大多数移动网站标题都被简化为该图标和徽标。

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

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

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

该移动站点的导航菜单还使用选项卡来分解选项列表。前梦想家设计

替代标准菜单或除了标准菜单之外，还有其他导航方法也很有用。选项卡使用户可以轻松地在其他内容部分中进行混洗，而不必加载全新的页面。

如今，许多UX设计人员还在探索基于轻击输入的导航解决方案，其中最常见的是水平和/或垂直滑动。当所有其他方法均失败时，方便的搜索图标在移动设备上很常见，以使用户可以找到他们要查找的特定内容。

收合次要内容

桌面网站通常留有深入的正文，产品规格和其他内容的空间。但是，由于移动网站要求信息要点，设计人员必须消除或缩短所有不必要的内容。这是可折叠/展开部分派上用场的地方。

折叠内容包括使说明信息成为可选图标，例如带有三角形或加号的图标，以扩展或显示隐藏的内容。虽然隐藏您的内容听起来可能是一件坏事，但具有说服力的头条新闻所带来的简化浏览的好处远远超过了丢失信息的可能性。与被动阅读相反，切换的微交互也是用户与页面交互的又一个邀请。

该设计使用轮播将客户推荐区分组。由Artyom Ost设计

设计人员应保留折叠的内容，以供标题下的较低层副本使用。重复的内容可以合并为重叠相同的空间，而不是堆叠在一起。在上图所示的Artyom Ost的设计中，台式机版标头下方有三个客户报价，在移动版中，设计师将它们折叠成一个圆盘传送带。

限制表单字段和文本输入

文本输入必须是移动可访问性的最大障碍之一。尽管这里一个词没什么大不了的，但是当移动站点需要一个电子邮件地址时，谁还没有吟过—迫使您用一只手在字母，大写字母，标点符号和符号菜单之间循环？因此，您应尽可能减少表单字段。

此设计使用各种下拉菜单和单选选项代替打开的文本表单。由CreativeMalia设计

自动填写的机会（例如从邮政编码中区分大部分地址或为常见的电子邮件后缀提供预先填写的选择）可以减轻其中某些交互的麻烦。通过与其他基于配置文件的软件（如Apple，Google或Facebook）集成，可以将用户的个人信息和登录信息简化为几次单击。

与支付提供商（例如PayPal）的第三方集成也可以在购物网站的购买页面上派上用场，在这些页面上，即使在台式机上，信用卡信息的查询也很繁琐。如果此选项不可用，您还可以允许用户以访客身份快速结帐，并将其运送信息重复到他们的账单信息中。

移动友好意味着拇指友好

根据乔什·克拉克（Josh Clark）的《Designing for Touch》一书中的研究，用户至少用拇指进行所有移动互动的75％进行互动。这包括所有滚动，单击，滑动和输入文本，其余的手指忙于支撑手机的背面。还应考虑到，在许多情况下，用户在做其他事情时会用不太惯用的手来浏览手机。因此很明显，设计人员必须优先考虑所有移动交互的拇指触及。

这种设计将大多数交互式元素保留在屏幕中间或底部。杰克·金斯兰（Jack Kingslain）设计

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

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

近年来，许多用户体验设计师在将导航栏定位在屏幕底部而不是顶部上负责。尽管这使拇指访问更容易，但用户习惯于违反设计约定也可能导致较差的体验。时间会告诉您哪个职位最理想，但与此同时，针对您自己的用户群解决此问题的最佳方法是同时进行测试。

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

从其全球流量持续增长的方式来看，移动网站浏览显然是未来的方式。但是，当您考虑到与台式机网站相比，设计必须面对的所有限制时，即缺少空间和用户外围设备，这似乎比负担多于负担，而不是机会。这些挑战并非无法克服，但也不应掉以轻心。

尽管本文中的提示将为您提供针对移动设备友好的网站设计挑战的实用解决方案的基线，但需要大量的精力和实践才能掌握这些挑战。为了获得对您的用户有帮助而不是阻碍的移动网站，请考虑与有才华的网站设计师联系。

作者：Jamahl Johnson