由于是手机用户,用户浏览网页的时间是零碎的,不可能耐心点击很多的页面,因此,要想做好一个移动端网站的优化,就需要尽可能在制作移动端手机网站的过程中精简移动网站设计,并要合理的做好移动端网站的SEO优化。

一、移动端网站的页面设计

网页设计要尽可能的设计简单,手机端可视区域小,布局上不同于传统网页,需要充分利用有限的空间去展示信息。

1、页面适配手机屏幕

随着手机屏幕的不断的增大,同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小,当然也存着在一些不规则的屏幕分辨率心寸大小,对于很多的UI来说,不同的手机屏幕很多时候得出多套的图才能保证手机客户端在不同的屏幕上实现匹配。

2、页面专门针对手机屏幕设计

(1)、页面随屏幕宽度变化,无横向滚动条。

(2)、不放大时,能清晰浏览内容,文字大小不低于12像素。

(3)、不放大时,按钮、链接等点击方便(具体可查看马海祥博客《如何通过修改CSS样式来增强平板电脑的用户体验》的相关介绍),按钮尺寸不能过大或过小。

3、使用最多三级的页面结构

减少移动站的页面层级,降低用户认知难度,一个标准的移动站应该包含首页、列表页和详情页三种类型,以满足广告主的推广需求和用户的认知需要。

对于页面类型及层级,马海祥建议不超过3个,保证简单、高效的用户体验,据马海祥博客的分析,使用尽量浅的页间结构,减少用户点击次数,提升浏览体验。

(1)、首页

整站内容索引,内容预览(使用“更多”“详情”等链接),首页作为用户分流前到达的页面,要求能够汇集整个网站的大部分模块和功能,以保证不同需求的用户在着陆后都能寻找到自己想要的信息。

移动站一般首页又可以分为导航式和内容式,导航式因其风格简洁,一般又可用作品牌宣传,起到快速传达品牌形象的作用,内容式因其丰富的内容,常用来快速传达广告主想传递的信息。

(2)、列表页

频道内容、分类、列表为主,列表页一般用于展现结构简单,并且重复度较高的内容,最常见于商家的产品/服务,形式也一般相对简单,用于满足展现多产品/服务的需求,根据商家产品/服务信息不同一般分为纯文字和图文两种基本形式。

(3)、内容页

推荐以结构化形式展现内容,详情页一般用作展示首页和列表页未显示完全的信息,以满足用户了解详情的需求,从而辅助用户进行决策。

4、使用清晰的导航组件

全站导航:快速到达各个频道(具体可查看马海祥博客《如何规划并架构网站的导航信息结构》的相关介绍);

局部导航:在单个频道的首页、列表、详情页面间移动;

相关链接:相关频道之间的链接。

5、页面单列布局,重要内容显示在首屏

页面内容模块从上到下,单列布局,重要内容展现在首屏。

6、保证良好的可用性

(1)、页面内容无缺失,交互功能正常使用。

(2)、不使用flash

(3)、使用html5来实现动画。

7、优秀交互方式,简化操作流程,提升使用体验

(1)、优秀的交互方式能很有效地提升用户体验,一方面能够简化操作流程提升操作效率,另外,马海祥觉得这对于产品功能易用性的提升也是较大的。

(2)、滑动切换图片相比于自动切换和点击切换,滑动切换增强了用户操作的主动性、同时提升了切换的便捷性。

(3)、滑动切换页面用户可以通过滑动进行页面之间的切换,节省用户寻址时间。

(4)、点击放大图片点击缩略图放大图片,减少了操作流程,一定程度上减少了因页面跳转带来的用户流失。

(5)、页面区域点击区域点击能较大提升用户点击的效率,减少用户因定位点击区域造成的效率损失。

(6)、点击加载更多一方面减少单张页面的非必要信息,让页面变得简洁,同时能减少页面间的跳转,降低因网速等原因造成的用户流失。

8、保证广泛的兼容性

在主流操作系统、浏览器中均可正常展现,比如:操作系统:Android,iOS;浏览器:UC、QQ、iOS Safari、Android。