为什么要做移动站设计?
2018-03-24 11:29

今天的文章,我们将从用户需求和体验的角度来探讨,如何设计一个移动端网页。

优秀的移动端页面是怎样的

最近谷歌的研究发现,那些针对移动端优化过的网站更容易赢得回头客。这意味着网站针对移动端优化之后有着现实可见的好处。那么我们常说的“对移动端友好”到底是怎么样的概念呢?实际上,这个概念包含了一系列关键的特性,当你在进行移动端网页设计的时候应当将它们纳入考虑的范畴:
 
如果你希望自己的网站能够轻松的在移动端设备上访问,然后,您应该消除所有移动终端上可用性的可能性,并且有12个改进移动端网页设计的建议,确保通过可用性测试页面,并提供良好的用户体验。

1、针对移动端进行全面优化

桌面端网页在移动端设备上首要的障碍就是导航的使用。看看下面的Domino披萨,它的桌面和移动网页对比鲜明,优化后移动端页面的体验是完全不同的。总之,优化后的移动端页面更干净,有着更容易导航的CTA按钮
 
下面是优化移动端页面的几个实用技巧:
·仅使用垂直滚动。不要使用水平滚动,允许用户只通过滚动一个方向浏览主要内容。尽量通过CSS来控制页面宽度、位置和图片的缩放。
·将你的内容置于首位,避免其他的元素让用户分心。
·控制分栏的数目,尽量使用一栏单列式的布局。
 
·不要将移动端页面和桌面端页面混用。

2、让行为召唤按钮在移动端上友好易用

用户经常会忽略移动端页面上的一些元素,因此,尝试使用CTA按钮,以确保用户不会错过他们。它不同于桌面终端,你需要把CTA按钮放在最显眼的位置,以确保它们很容易找到,容易点击触发。
 
CTA按钮应该易于点击,并且不会同页面中其他的元素形成干扰或者干涉。

3、让菜单简短且易用

详细而全面的菜单设计在桌面端上能够良好运行,但是当它出现在移动端时,菜单太长了,很难找到你想要的东西。所以,你需要考虑使用流线型菜单,只保留最重要的必需品。根据以往的经验,尽量不要让菜单超过7个条目。
 
同时你还要保持你的菜单目录足够的易用:
·它应当基于根据重要性和价值来进行排序
·它不应当包含用户不理解的术语,菜单要使用通俗易懂的表述方式。

4、让搜索框显眼

如果在你的网站中,搜索是主要功能,当你进行移动端页面优化时,你应该突出显示这个功能,因为它是一个高转换的函数,所以必须确保它是显而易见的。当用户想要得到特定的功能时,它倾向于使用搜索功能,因此搜索应该是用户一打开页面就能看到的控件。搜索框通常应该放在页面的顶部,并以文本输入框的形式存在。
 

5、让网站正好合适,无需缩放

桌面端网页出现在移动端设备上,最令人沮丧的是它需要被放大。不要放大页面,不仅难以阅读,用户很容易忽略重要细节,放大浏览,需要来回拖放。但是在移动端优化之后页面没有问题。页面的图片、字体和宽度都是正确的,用户可以完全获得信息,确保最基本的可用性和易用性。
 

6、使用高素质的素材

你的网站中所有的图片、视频和UI元素都是你的产品的一部分,当您为移动端优化页面时,它们是页面的重要部分,它们素质的优劣直接影响到用户的观感。
 

7、设计便于触摸交互的页面

 
如果你的页面是针对移动端设计的,然后,网络中按钮的大小应该与手指的大小相匹配。麻省理工学院触觉实验室发现,的手指触摸的大小的平均尺寸为10-14mm,和指尖的平均尺寸为8-10mm,也就是说,对10mmx10mm控制尺寸的大小是一个比较合理的尺寸。
另一个要考虑的是一个可控制的指尖之间的距离。如果两个按钮比较近,然后用户容易在移动端出现故障。如果你想解决这个问题,根据实际情况调整大小与按钮之间的距离,以满足用户手指交互的需要。下面是推荐的尺寸设定。
 

8、让用户在决定之前先行探索

让用户在对你的网站毫无了解的情况下就要求他们去注册,事实上,这是违反互利互惠原则的。有数据显示,超过85%的用户选择放弃和离开,是因为用户的早期注册。
 
Netflix已经给用户一个月的免费试用期,但是用户需要注册才能使用这个好处。
一般而言,在提供个人资料登记前,用户会浏览网站内容,了解什么类型的网站,提供什么样的服务,并作出决定,对于从未听过的品牌尤其是如此。想要打破转化率的壁垒,你在设计网站的时候应该做到下面几点:
·提供无需登录就能完成的体验流程
·让用户可以作为访客进行购买
·只有当需要用户提供相关信息的时候才要求注册,并且尽可能少的让用户提供数据

9、告知用户选择更合理的屏幕方向

不同的屏幕方向下,用户的浏览体验将完全不同。用户习惯于同一方向完成操作,因此提醒他们切换方向可以提高用户浏览网页的体验。所以,当你的网站在展示,使用水平屏幕时,体验会更好,不妨使用行为召唤设计来提示用户。
 

10、让产品图片可以放大扩展

当用户在网上购物的时候,我总是希望看到产品的高清晰度(尤其是衣服),如果你不能扩大视野,用户的挫折感将直接影响产品的销售。因此,我们应该提供高质量的产品地图,并添加放大的功能,让用户足以看清细节。
 

11、方便设备之间的切换


并非所有的用户都习惯于在移动端上浏览、购买,有些用户仅仅是习惯于在移动端上搜索信息。所以,你应该提供一个简单的方法来保存信息,让它们能够跨设备使用,当用户离开移动端设备的时候,同样可以在桌面端上浏览、查看、购买。
 
·确保用户能够通过分享或者发送电子邮件/社交媒体,来保存信息。
·同步Wishlist,以收藏的形式保存条目。

12、让用户在一个浏览器窗口中完成操作

智能手机的窗口间切换终归比桌面端麻烦,用户找不到原来的页面的风险是现实存在的。尽量让用户在一个窗口中完成全部的浏览和操作,简化流程和复杂的交互,让用户一直待在一个地方。

结语

其实移动端的网页设计并不只是这么简单,这十二个技巧也相当的基础,但是它们提供了一个不错的入门指引。每一个网站都有其独特的地方,具体问题具体对待。但是无论如何,要记住,你的受众不是设计师,而是用户,你的设计应当承载用户的期待,实现它们的目标,而非成为负担。
原文地址:uxplanet
原文作者:Nick Babich
优设译文:@陈子木