一个对手机友好的网站设计应该优先考虑手机浏览体验,而不是把它当作桌面版本的事后考虑。

这种方法在过去十年中变得非常重要。根据统计数据研究在美国,目前所有网站流量的一半以上是通过移动设备进行的,这还包括大致的流量45%的在线购物。考虑到智能手机只出现了近十年,随着手机网站浏览变得更加根深蒂固,设计更加直观,这些数字预计只会上升。

有不同的人的例证使用移动网站的积极经验
优秀的手机友好型网站不会把手机设计当作桌面版的事后考虑。由...设计OrangeCrush

这就是为什么网站如果没有做出真诚的、战略性的努力来提供高质量的移动体验,就有可能远远落后于竞争对手。为了帮助你跟上潮流,我们整理了这个指南,介绍了一些最常见的技巧和技巧,来设计最友好的手机网站。

7大手机友好型网站设计技巧
-

  1. 使用移动式第一方法
  2. 使用推荐尺寸的移动
  3. 优化竖屏模式
  4. 最小化的菜单
  5. 折叠二次内容
  6. 限制表单字段和文本输入
  7. 移动意味着thumb-friendly

技巧1:使用手机优先的方法
-

随着移动网站浏览已经超过了桌面网站,设计师不得不放弃将桌面网站作为“主要”版本的想法。这就是为什么移动优先的方法——在桌面版本之前设计移动网站——已经成为多年来公认的最佳实践。

通过将艺术方向归属于移动体验,鼓励设计师凭借限制统治设计决策。不仅有规模约束,移动用户通常经常与单手交互,并输入超出攻击和滑动往往比在桌面上更麻烦。考虑例如依赖鼠标输入的悬停动画:如果您的桌面版本依赖于这种视觉反馈,它将成为移动后的问题。

移动和桌面网站设计的电子品牌图片并排
“移动优先”的设计意味着,与简化复杂的布局相比,提前规划较小的屏幕更容易。由...设计Naveeß

因此,手机优先设计倾向于从一开始就强调简单易用。请记住,这种方法并不意味着桌面版本注定要极其稀少。相反,在一个简单的布局上扩展比简化一个复杂的布局更容易。

首先在手机上测试多媒体也是很重要的,因为横向拍摄的照片或视频可能不适用于纵向拍摄。在小尺寸下,面部表情或背景元素等细节可能更难理解。此外,通常一次只有一个图片的空间,如果你首先设计一个图片较多的桌面网站,在移动设备上滚动浏览每个图片可能会变得多余。

提示2:使用推荐尺寸的移动
-

在手持设备上,空间可能比任何其他设计上下文更有限。但在项目开始时考虑尺寸约束是避免后来冲突的最佳方式。

手机屏幕的分辨率因设备而异,但目前最常用的是360×640(纵横比9:16)由statcounter进行的研究。分析可以告诉你你的用户喜欢哪种设备,你应该确保你的网站设计是响应性的足以容纳变化。

蓝色和橙色的汽车报告服务手机网站设计
这种移动设计保持了清晰的排版层次结构和大按钮和表单字段。由...设计玛丽安Voicu

涉及到移动设计的字体大小,建议至少16px用于身体副本。这也可以根据使用的字体(根据其施工,某些字体比其他字体比其他字体更少易读)。

标题字体没有标准大小,但目标是建立一个清晰的印刷层次结构通过尺寸,重量和风格的对比。但是,当有疑问时,只需为自己测试移动设备上的字体大小。

移动网站设计的女佣清洁服务与绿色口音
在这个设计中,为移动版裁剪了一个宽大的英雄形象。由...设计akorn.creative.

图像和其他媒体当然可以在设备允许的范围内。为了保持清晰度,让图片的主题来决定图片的大小。请记住,你不必适应整个图像,但可以放大主题,裁掉多余的背景元素,就像上面的例子。

最后但并非最不重要的是,在移动友好的网站设计中,按钮的大小非常重要,因为触屏在识别用户输入方面远不如鼠标和键盘可靠。一个研究专注于老年人用户推荐42到72像素之间的触摸屏按钮,以获得最佳的易用性。

技巧3:优化纵向方向
-

虽然手机网站在技术上可以使用横屏模式,但竖屏模式更为常见。21世纪初,黑莓普及了双手握拍手机,但随着智能手机的兴起,这一功能已被彻底淘汰,用户更青睐单手肖像模式。

一个极简主义,热带主题的摄影手机网页
尽管移动网站上存在较少的水平空间,但设计人员可以使用空格和填充,以便强调,更大的文本和促进滚动。由...设计Newwen

肖像模式的狭窄是完美的单一列布局。在这种风格中,站点元素从上到下按顺序排列。虽然内容居中对齐是常见的,但左右交替对齐可以产生视觉上的兴趣和两列布局的错觉。此外,像图标和照片这样的小元素可以在网格中显示,而图像旋转木马可以用水平滑动打破垂直滚动。

除了找到打破单列布局的创造性方法,还有一些方法可以利用它为你的优势。因为社交媒体应用让移动用户有了长时间滚动的习惯,网站设计师可以用空白和填充来扩展内容。这样可以保持内容的整洁和可读性,同时通过持续滚动来鼓励用户参与。

相反地,如果内容集中在一个屏幕上,滚动条有限,那么阅读起来会很吃力。

DarkMode Mobile网站设计墨西哥手链品牌
该设计使用倾斜的图形边框和多个列来使中央对齐感觉不那么重复。由...设计boorykin

分段设计对于类似信息的分组也很有用,这样用户无需深入阅读就能理解每个分段的一般目的。当你粗略地考虑这个问题时,这是特别有用的79%的页面访问者只浏览网站内容。不同的彩色背景有助于区分这些部分,创意部分边框扰乱了这些部分促进的框感。

提示4:最小化菜单
-

根据目的地的数量和用户所提供的选项,导航是另一个快速变得复杂的领域。虽然桌面网站倾向于有一个带有多个主菜单和子菜单的完整标题导航条,但将所有这些包含在简单的、可识别的汉堡包图标中已经成为标准。因此,大多数移动网站的标题趋向于减少图标和标志。

旅行博客的移动网站设计和导航菜单
这个设计中的汉堡包图标显示了导航菜单三分之二的覆盖层。由...设计veshi

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

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

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

一个健身品牌的移动网站设计和导航菜单
此移动站点的导航菜单还使用标签来分解选项列表。由...设计Ex-Dreamer

除了标准菜单之外,还有其他导航方式可以替代。选项卡允许用户轻松地浏览其他内容部分,而不必加载一个全新的页面。

如今,许多UX设计师也在探索基于点击的输入之外的导航解决方案——水平和/或垂直滑动是最常见的。当所有这些都失败时,方便的搜索图标在手机上很常见,让用户找到他们想要的特定东西。

技巧5:折叠次要内容
-

桌面网站通常有深度的正文拷贝、产品规格和其他内容的空间。但由于手机网站要求信息必须切中要害,设计师必须删除或缩短所有不必要的内容。这就是可折叠/可扩展部分派上用场的地方。

折叠内容涉及使用一个图标(如三角形或加号)使解释性信息成为可选的,这些图标可以展开或揭示隐藏的内容。虽然隐藏你的内容可能听起来像是一件坏事,但有说服力的标题支持的简化浏览的好处远远超过了潜在的遗漏信息。的微互动切换也是另一个邀请用户与页面互动,而不是被动阅读。

为人力资源部门设计浅蓝色主题手机网站
本设计使用旋转木马对客户推荐部分进行分组。由...设计Artyom Ost

设计人员应该将折叠的内容保留在标题下面的较低层复制。重复内容可以合并在同一个空间中,而不是堆叠在彼此之上。在Artyom Ost在这里的设计如图所示,桌面版本上有三个客户报价,并且在移动版本中,设计师已将它们折叠在旋转木马中。

移动网站设计为钢琴购买和租赁服务
在英雄部分下方,这种设计允许用户崩溃并展开详细的内容。由...设计boryszbn

多余的内容,你应该避免在手机友好的网站设计是口腔和弹出窗口。虽然这些可以通过在单独的窗口中叠加内容来节省空间,但是与侵入式弹出窗口中的网站不仅令人沮丧,而且令人沮丧,它们也是如此谷歌受到惩罚

技巧6:限制表单字段和文本输入
-

文本输入必须是移动可访问性最大的障碍之一。虽然这里有一个单词和没有大的交易,当移动网站需要一个电子邮件地址时,谁没有呻吟 - 迫使你通过一只手通过字母,首都,标点符号和符号菜单来循环循环?因此,您应该尽可能最小化表单字段。

移动网站设计与蓝色主题的票务服务
这种设计使用各种下拉菜单和单选选项来代替打开的文本表单。由...设计CreativeMalia

自动填写的机会,比如从邮政编码中推测大部分地址,或者为常见的电子邮件后缀提供预先填写的选择,可以减轻这些交互的痛苦。用户的个人信息和登录信息也可以通过与其他基于个人资料的软件(如苹果、谷歌或Facebook)的集成,简化为几次点击。

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

提示7:移动友好意味着拇指友好
-

根据Josh Clark Book中包含的研究设计联系在美国,用户至少有75%的移动交互是用拇指进行的。这包括所有的滚动,点击,滑动和文本输入,其余的手指忙着支持手机的背面。还要考虑到,在很多情况下,用户在做其他事情时,会用不太常用的那只手浏览手机。所以很明显,设计师必须优先考虑所有手机互动。

一个时尚品牌的手机网站设计
这种设计在屏幕中间或朝底部保持最多的交互元素。由...设计杰克Kingslain

拇指是最大的数字,这使它不精确。创建按钮时,设计人员应该使用最大的尺寸进行重要的交互(请参阅上一节关于大小的尺寸),因为如果拇指的一部分落在按钮外部,则触摸屏将不会注册输入。

同样重要的是页面上互动元素的位置。通常,移动设备从下端拿起,拇指放在中间。为了达到顶部的互动元素,用户将不得不重新放置他们的整个手或使用他们的第二只手的手指。研究表明,理想的互动区域(手机越大,互动区域就越小)是在中间较低的区域。

图形显示拇指可轻松访问的触摸屏电话的区域
对拇指友好的区域因设备而不同,但大多数情况下,屏幕中间的下半部是最容易交互的。图形通过一个列表

近年来,许多UX设计师将导航栏定位在屏幕的底部而不是顶部。虽然这使得拇指访问更容易,但打破用户习惯的设计惯例也会导致较差的体验。时间会告诉我们哪个位置是最理想的,但与此同时,解决这一问题的最佳方法便是针对你的用户群体进行测试。

拥抱移动友好的网站设计
-

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

虽然本文中的技巧将为您提供一个可行的解决移动友好型网站设计挑战的基线,但要掌握它们需要大量的注意和实践。为了让手机网站对你的用户是一种帮助而不是阻碍,考虑联系一个有才华的网站设计师。

需要为你的企业设计一个移动友好型网站?
我们的全球专业设计师社区可以做到这一点。