在过去的12个月里，全球智能手机用户预计将达到35亿。这是一个显著的9.3%的增长。
在一个每个人都与自己的移动设备不断连接的世界里，网页开发者和设计师需要考虑如何创造吸引人的体验的新规则是有道理的。毕竟，我们大多数人发现每天用智能手机浏览网页要比坐在笔记本电脑前方便得多。
如果运气好的话，你已经在采取行动优化你的手机网站，但标准一直在变化。为了确保你的网站达到标准，以下是你的指南，让你的网站优先考虑移动设备，为新的一年做好准备。
理解尝试设计
更新网页设计和开发原则的第一步是理解“移动优先设计”的概念，以及它是如何变化的。
有了响应式网站，你可以根据任何设备的屏幕大小进行调整;对于移动优先网站，你首先要关注的是人们在移动设备上获得的用户体验，以此为起点，然后从那里开始构建。你应该先考虑移动设备，而不是在建立台式机网站时再考虑移动设备。
甚至谷歌最近也通过移动优先索引算法强调了这一过程的需求。如果你不能为移动优先而设计，那么你的客户可能无法在搜索引擎排名中上升。
那么，如何开始呢?
1. 从正确的工具开始
Web开发人员和设计人员如果没有一个很棒的工具包就什么都不是。
好消息是，有一些解决方案可以帮助你掌握适合移动用户体验的技能。例如，Skeleton非常适合需要流动网格和最小编译的小型项目。
另外，Bootstrap可以为移动设备的前端开发提供一个通用的解决方案。有一个默认的网格系统，大量的组件和JavaScript插件可以使用。
有了正确的工具，您可以将对您的网站项目最有价值的内容最小化并按优先级排序。当涉及到内容和图像时，这对于最大化网站速度和创造清晰度是至关重要的。
例如，看看ESPN的网站;它被分成非常容易理解的内容类别，非常适合在智能手机上滚动。这些网格状的视频让你感觉你在使用一个像YouTube这样的工具。
2. 优先考虑尝试元素
一旦你有了合适的工具来帮助你，是时候开始从头开始构建你的移动优先网站了。与其直接考虑最新的设计趋势，还不如从基础入手。
例如，移动页面中的导航通常隐藏在汉堡按钮下面。不过，您也可以将这个概念提升到下一个层次。例如，Shojin手机网站只在导航栏中展示了最重要的网站选项，以避免让用户不知所措。
这里的关键是让事情尽可能的简单，当你的用户访问你的网站时，不要限制他们可以做什么。尽管您希望保持站点上的交互元素数量较少，但您还需要确保这些元素易于发现和使用。
所有的按钮和cta应该是清晰的和可点击的。字体必须足够大，可以从任何屏幕上读取，导航系统必须100%简单，不会减慢速度。
我们建议所有可点击元素的平均高度至少为48像素。
3.使用响应图像和svg
图片是任何网站的重要组成部分。它们为你的设计增加了背景和吸引力。然而，如果你不小心的话，它们也会严重降低你的网站速度。
记住，当涉及到意象时，不同的手段有不同的要求。一个桌面页面可能需要1200px宽的图像，而一个移动的页面最多需要400px宽的图像。让你的图像工作的老方法是加载一个大分辨率的图像，然后在每个平台上使用相同的文件。不幸的是，这大大降低了下载时间。
相反，最好为移动和桌面解决方案提供至少两个相同图像的不同版本。您也可以考虑SVG。
svg具有难以置信的可伸缩性——比位图更强。使用SVG，您可以确保任何图标或图形在所有设备上都保持清晰和可点击。因为这些文件通常更小，你的网站加载也更快!Hubspot非常擅长使用svg。
复杂的插图是HubSpot品牌的重要组成部分。如果这些图像被保存为png或其他替代文件，那么加载它们将花费很长时间。因为他们都是svg，所以你可以在桌面和移动设备上享受相同的体验。
4. 排版要正确
当提到移动优先设计时，不仅仅是大的图形和图像对你的网站有很大的影响。你还需要考虑你的网站在所有设备和平台上的易读性和清晰度。如果人们不能读懂你为之设计的公司的价值主张，你就会遇到大问题。
尽量让你的内容更容易阅读。看看在各种设备上看起来最具吸引力的字体。
记住要平衡正文和标题字体的大小。你需要确保用户滚动每一页时的体验是一致和流畅的。以IMPACT网站的手机版为例。
标题不像桌面版本的网站那么大，而且它们显示在特色图片的下面，而不是上面。然而，这有助于为移动用户提供更吸引眼球和结构化的体验。
甚至还有一个方便的“搜索引擎优化”标签，如果用户想找到更多相关文章，可以点击它。
说到排版，请记住，重要的不只是大小和清晰度，还有网站的结构。你的类型应该自然地引导你的访问者沿着页面。
5. 掌握可用的设备特性
最后，在智能手机上，你可以完成一系列在台式设备上无法完成的令人惊叹的事情。你的用户可以在他们的移动浏览器中打电话、打开应用程序、发送消息等等。他们还可以在房间里移动智能手机，利用AR和VR等概念。
利用智能手机设计可以提供的独特功能，让你有机会获得独特的用户体验。
充分利用手机体验比你想象的要简单得多。例如，在桌面网站上，您可以在联系页面上列出您的电话号码。在手机网站上，点击该号码就可以开始呼叫。你也可以用同样的方法处理电子邮件地址和社交媒体图标。
根据你的实验性程度，你还有很多机会超越手机功能。你可能决定创建一个网站的移动应用程序版本，你的客户可以下载到他们的手机上。
另外，你也可以研究AR技术。这可以让你的用户练习如何将他们可能正在考虑从网上零售商购买的家具放置到他们的房子里，这样他们就可以看到他们如何与其他室内设计选择工作。
充分利用移动优先设计
最终，在现代世界，拥有一个可在移动和桌面设备上运行的响应式网站是必须的。然而，超越移动优先设计是超越游戏的好方法。
如果你能够专注于创建一个将移动用户体验放在首位的网站，那么你就能够创造出更有可能吸引用户注意力并传递令人惊讶的体验的内容。
如果没有其他的东西，向你的客户展示你有能力为手机设计，这是确保你能获得尽可能多的新项目机会的好方法。
上一篇：3基本设计趋势，2021年1月
下一篇：如何正确设计黑暗模式
