移动端的多用户往往拥有着更加明确的目的性,通常他们希望能够明确、轻松地从移动端页面获得他们想要的资讯和内容。无论是浏览新闻,网上购物,还是订阅资讯,移动端网页应当为他们提供尽可能无缝的多用户体验。
优秀的移动端页面是怎样的
近谷歌的研究发现,那些针对移动端优化过的网站更容易赢得回头客。这意味着网站针对移动端优化之后有着现实可见的好处。那么我们常说的 “对移动端友好” 到底是怎么样的概念呢?实际上,这个概念包含了一系列关键的特性,当您在进行移动端网页设计的时候应当将它们纳入考虑的范畴:
如果您希望自己的网站能够轻松的在移动端装置上访问,那么应当消除所有移动端上可能存在的可用性的问题,下面有 12 条提升移动端网页设计的建议,确保您的页面能够通过可用性测试,并提供良好的多用户体验。
1 、针对移动端进行全面优化
桌面端网页在移动端装置上要的障碍就是导航的使用。看看下面 Domino 批萨的案例,它的桌面端和移动端网页的对比就相当明显,移动端页面经过优化之后的体验就完全不同。简单说来,优化后的移动端页面更加干净,有着更容易导航的 CTA 按钮。
下面是优化移动端页面的几个实用技巧:
·仅使用垂直滚动。不要使用水平滚动,让多用户只需单方向滚动就能浏览主要的内容。尽量通过 CSS 来控制页面宽度、位置和图片的缩放。
·将您的内容置于位,避免其他的元素让多用户分心。
·控制分栏的数目,尽量使用一栏单列式的布局。
·不要将移动端页面和桌面端页面混用。
2 、让行为召唤按钮在移动端上友好易用
多用户经常会忽略移动端页面上的一些元素,所以尽量使用 CTA 按钮,确保多用户不会错过它们。和桌面端的情况不同,您需要将 CTA 按钮置于主要、显眼的位置,确保他们容易发现,容易点选触发。
CTA 按钮应该易于点选,并且不会同页面中其他的元素形成干扰或者干涉。
3 、让选单简短且易用
详细而全面的选单设计在桌面端上能够良好执行,但是当它出现在移动端上的时候,选单就显得过长了,要在其中找到想要的内容就相当难了。所以,您需要考虑使用精简的选单,仅保留重要的、必须的条目。根据以往的经验,尽量不要让选单超过 7 个条目。
同时您还要保持您的选单目录足够的易用:
·它应当基于根据重要性和价值来进行排序
·它不应当包含多用户不理解的术语,选单要使用通俗易懂的表述方式。
4 、让搜索框显眼
如果在您的网站中,搜索是主要的功能,那么您在做移动端页面优化的时候应该突出这一功能,因为它是高转化率的功能,确保它足够显眼是很有必要的。当多用户想要获取特定功能的时候,倾向于使用搜索功能来实现,所以,搜索应当是多用户一开启页面就能看到的控制组件。通常应当让搜索框置于页面顶部,以文字输入框的形式存在。
5 、让网站正好合适,无需缩放
桌面端网页出现在移动端装置上,令人沮丧的地方就是它需要缩放。不放大页面,不仅难于阅读,而且多用户容易错过重要的细节,而放大来浏览,需要来回拖放。而针对移动端优化后的页面则不存在这个问题。图片、字型和页面宽度都正好合适,多用户能够完整地获取资讯,确保了基本的可用性和易用性。
6 、使用高素质的素材
您的网站中所有的图片、视讯和 UI 元素都是您的产品的一部分,当您针对移动端优化页面的时候,它们都是重要的组成部分,它们素质的优劣直接影响到多用户的观感。
7 、设计便于触控互动的页面
如果您的页面是针对移动端设计的,那么网页中按钮的尺寸应当和手指的大小相匹配。 MIT 的 TouchLab 通过研究发现,指面的触控尺寸平均大小为 10-14mm,而指尖的平均尺寸是 8-10mm,也就是说 10mmx10mm 的控制组件尺寸设计是比较合理的大小。
另外一个需要考虑的是就是可触控控制组件指尖的距离。如果两个按钮比较靠近,那么多用户在移动端上就很容易出现误触的情况了。如果想要解决这个问题,就需要根据实际情况重新调整尺寸和按钮之间的距离,以适应多用户手指互动的需求。下面是推荐的尺寸设定。
8 、让多用户在决定之前先行探索
让多用户在对您的网站毫无了解的情况下就要求他们去注册,其实是违反互惠互利原则的。曾有资料表明,让多用户过早注册导致超过 85% 的多用户选择了放弃和离开。
NetFlix 曾经给予多用户一个月的免费试用,不过多用户需要注册之后才能使用这一福利。
一般说来,多用户在提供个人资讯注册之前,会浏览一下网站内容,了解这个网站是什么样的型别、提供什么样的服务,再做决策,对于从未听过的品牌尤其是如此。想要打破转化率的壁垒,您在设计网站的时候应该做到下面几点:
·提供无需登入就能完成的体验流程
·让多用户可以作为访客进行购买
·只有当需要多用户提供相关资讯的时候才要求注册,并且尽可能少的让多用户提供资料
9 、告知多用户选择更合理的萤幕方向
不同的萤幕方向下,多用户的浏览体验会完全不同的。多用户惯于在同一萤幕方向下完成全部的操作,所以提醒他们切换方向可以提升网站浏览的多用户体验。所以,当您的网站偏向展示性,并且使用横屏时浏览体验更佳的话,不妨使用行为召唤设计来提示多用户。
10 、让产品图片可以放大扩充套件
当多用户在网上购物的时候,总希望能看到产品的高清无码大图 (尤其是服装),如果无法放大检视,多用户的沮丧会直接影响产品销量。所以,应当提供高素质的产品图,并新增放大的功能,让多用户足以看清细节。
11 、方便装置之间的切换
并非所有的多用户都习惯于在移动端上浏览、购买,有些多用户仅仅是习惯于在移动端上搜索资讯。所以,您应该提供一个简单的方法来储存资讯,让它们能够跨装置使用,当多用户离开移动端装置的时候,同样可以在桌面端上浏览、检视、购买。
·确保多用户能够通过分享或者传送电子邮件/社交媒体,来储存资讯。
·同步 Wishlist,以收藏的形式储存条目。
12 、让多用户在一个浏览器视窗中完成操作
智慧手机的视窗间切换终归比桌面端麻烦,多用户找不到原来的页面的风险是现实存在的。尽量让多用户在一个视窗中完成全部的浏览和操作,简化流程和复杂的互动,让多用户一直待在一个地方。