马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > SEO优化 > 移动端SEO > 移动设备环境如何影响手机网站的设计?

移动设备环境如何影响手机网站的设计?

时间:2017-01-02   文章来源:马海祥博客   访问次数:

随着智能手机普及,大家上网的方式也从电脑端慢慢发展到了移动端,上网的第一选择变成了手机,不过由于移动端屏幕限制,所以做好手机网站的设计也是非常重要的。

用户会在各种环境下使用移动设备,所以任何影响用户交互的因素都非常重要,最好能够知道你的用户是在什么环境中使用移动设备的,不可能对各种环境进行同样的设计,比如添加语音辅助和亮暗变化非常有必要。

移动设备环境如何影响手机网站的设计?-马海祥博客

移动设备存在于我们的生活中,随之而来也为移动端设计带来了一系列新的限制和机遇,今天就让我们来看看移动设备环境如何影响着手机网站的设计?

一、移动端有何不同?

关于移动设计,我们最先需要了解的是它的不同之处,这并不仅仅指尺寸的不同。

移动设备的属性与规格也带来了不同的设计启示和要求。由于移动设备更轻更便携,我们通常觉得它们更便于使用。通过频繁使用移动设备,我们与它们之间建立了独特而富有情感的联系。

1、物理属性和特征

大部分移动设备都是触摸屏,用户依赖于手势——加上简单的界面元素进行交互操作。由于它们尺寸更小,我们有时希望它上面的内容结构更小更简洁(具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍)。

同时,由于有限的带宽和连接速率,移动设备需要设计上充分利用加载时间,从而减少数据请求。

2、何时,何地,做什么?

由于我们不断地接触移动设备,我们倾向于更频繁地使用它们,无论是在公交车上,大街上,或者看电视时。

我们经常一边做事情一边使用它们,这意味着我们可能在困难的阅读环境下,或是各种干扰下使用移动设备。

3、我们的行为和感觉如何?

最终,我们在使用移动设备时产生了不同的态度,行为和优先顺序。“用户体验设计咨询公司Foolproof”在“Going Mobile 2012”的研究中发现,这些设备给予我们一种对于“自由”和“控制”的新感觉。换句话说,一些用户对他们的移动设备产生了非常真实的感情。

经调查发现,63%的人在没有移动设备时感到失落,他们把移动设备看成是“活的”……是他们身体和人格的一种延伸。

由于移动设备已经从根本上改变了人们的预期,对于我们设计师而言,采用“以用户为中心”的设计思路来提供解决方案则显得尤为重要,唯一的问题就是我们的传统最佳实践可能不管用了。

二、移动环境如何影响着设计师们?

移动的不同直接影响着“以用户为中心”设计流程的方方面面:从用户研究到最终的开发测试,影响最大的是我们的分发方式和信息架构。

1、移动分发方式

不像传统网站,移动端有四大著名的分发方法,移动用户可以选择在他们的浏览器上查看内容,这些内容要么是针对移动端设计的网站,要么是响应式的——意味着它会针对移动端重新布局(具体可查看马海祥博客《响应式设计时代该如何进行网站设计》的相关介绍)。

还有一部分用户选择安装App,这些App要么是原生的,要么是混合的(原生+WebView)。原生应用有自我局限性:需要预先定制适配各种屏幕的应用,混合型应用则更灵活,它们从互联网上读取内容(就像在浏览器中看内容那样),但提供给用户“像App那样的”界面。

移动设备环境如何影响手机网站的设计?-马海祥博客

每一种分发方式都有优缺点,可以根据你项目的设计背景进行合适的选择(上面的表格,星星越多越好)。

2、移动信息架构

移动设备也有它自己的信息架构模式。例如,响应式网站架构会遵循更多的“标准”模式,而原生app,经常使用基于“Tab页签”的导航结构。同时,在架构一个移动网站或应用时,没有“正确”的方法。

相对的,让我们看看一些著名的设计模式:层级结构(Hierarchy)、集中和分发(Hub&spoke)、重叠放置(Nested doll)、页签视图(Tabbed view)、便当盒(Bento box)和过滤视图(Filtered view):

(1)、层级结构(Hierarchy)

层级模式是一种标准的网站架构,有一个主页和一系列子页面。如果你正在设计一个响应式网站,你可能会受限于这个模式。但是,引入额外的模式会使你根据移动端的经验进行裁剪。

移动设备环境如何影响手机网站的设计?-马海祥博客

Luke Wroblewski的“移动优先”策略帮助我们优先关注首要对象:功能和用户操作路径将会帮助我们打造良好的用户体验。

适合:对于需要依据桌面网站架构进行设计而言,能够很好的组织复杂的网站结构。

当心:导航。当用户使用小屏幕时,多层导航架构会引起问题。

(2)、集中和分发(Hub&spoke)

集中和分发模式会在导航时给予你一个中心索引,这是苹果iPhone的默认导航模式,用户不能在不同子栏目中进行跳转,必须回到索引页面。

移动设备环境如何影响手机网站的设计?-马海祥博客

这种模式在工作流程受限的桌面软件上使用很久了(主要由于技术限制,像表单或者购买流程),但是,由于用户在移动场景上会关注于一个任务(除了设备的组成元件之外),这种设计正变得更加普及,而全局导航在这种情况下会很难用。

适合:多功能工具,每个功能有一个独立的内部导航和目标。

当心:用户想要多任务时。

(3)、重叠放置(Nested doll)

重叠放置模式让用户以线性方式查看详细内容,当用户迷路时,这种设计能快速和方便地为用户导航,它也给用户一种强烈的感觉,通过向前和向后的操作,告诉他们处于整个内容结构中的位置。

移动设备环境如何影响手机网站的设计?-马海祥博客

适合:有着单一的,或者相关话题的App或者网站。也能用于其他父级模式中的的子模式,如标准层次机构模式或集中&分发模式。

不适合:无法快速在不同模块中切换的用户,此类用户希望这样做来判断是否某一模块适合他们,而不是把模块作为浏览内容的障碍存在。

(4)、页签视图(Tabbed view)

这种模式对于常规app的用户而言十分熟悉,它通过一个工具条菜单将一组区块组合在一起,从而允许用户在首次使用时快速浏览和了解app的全部功能。

移动设备环境如何影响手机网站的设计?-马海祥博客

适合:基于工具的app,多任务,且主题相似。

当心:复杂的。这种模式适合简单内容结构的应用。

(5)、便当盒(Bento box)

便当盒,或仪表盘模式,通过使用组件展示相关工具或内容的一部分,直接在首屏就能够带来更详细的内容呈现。由于它的复杂性,相比手机端,这种模式更适合于平板。

移动设备环境如何影响手机网站的设计?-马海祥博客

由于允许用户对关键信息一目了然,这种模式显得很强大。但是,其也严重依赖于设计良好,信息呈现清晰的界面。

适合:多功能工具,以及基于内容,具有相似主题的平板app。

当心:平板屏幕给予你更多的空间利用这个模式,但是,了解用户如何在不同页面之间进行交互使用,来确认app的易用性、有效性和娱乐性,是件非常重要的事。

(6)、过滤视图(Filtered view)

过滤视图最终允许用户通过选择过滤条件创造不同视图,来在一系列数据之间进行导航。过滤,和使用“面搜索”一样,从允许用户浏览适合自己的内容而言,是一种很好的方法。

移动设备环境如何影响手机网站的设计?-马海祥博客

适合:拥有大量内容的App或者网站,例如文章、图片和视频。对于杂志类型的app或网站,或者作为其他导航模式的子模式而言,是个好选择。

当心:移动。由于其复杂性,过滤器和面搜索在小屏幕上的展示会很困难。

不要停止在已有的设计上,要有不断变化的交互,这样整个设计的感觉都会不一样。总之,移动设备的使用正在疯长,要意识到移动端已经不是桌面电脑的辅助了,因此需要完全不同的设计思路,不是简单的缩小尺寸而已。

马海祥博客点评:

移动体验其实是各种微互动的整合,而且用户需要在很分心的状态下快速的完成各项任务,所以好的移动设计都要简单而明显,让用户的操作尽量的直觉化。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1749.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 网站设计   手机网站   移动设备  

上一篇:PC站建立移动端网站的三大方法模式
下一篇:移动端制作手机版专题页面的优化要点

您可能还会对以下这些文章感兴趣!

  • 移动搜索未来发展的趋势及优化要点

    无论百度是否有对移动端搜索结果进行调整,互联网的另一个中心“移动化”也已是大势所趋,企业重视移动端的网站建设也将是必然的结果。此外,人们使用移动设备浏览网络的方式将变得非常不同,这变化对互联网营销商来说,不但意味着巨大的威胁,还有随之而来的机会,只有……【查看全文

    阅读:1214关键词: 移动搜索   移动搜索优化   搜索要点   日期:2014-08-19
  • 移动端手机站做站内优化的要点

    随着移动流量的与日俱增,移动搜索引擎的功能越来越丰富,意味着更多移动特性可以施展,同时也意味着对HTML5网站的要求更趋规范和严格,这对于负责移动站点优化的负责人来说是个极大的挑战,我一般将站内优化的生命周期概括为三个词,实验、评估、调整,因此我的站内优……【查看全文

    阅读:1825关键词: 移动端   手机站   站内优化   日期:2015-11-10
  • 制作移动端手机网站过程中的SEO优化方法技巧

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

    阅读:2229关键词: 移动端   手机网站   seo优化   seo方法   seo技巧   日期:2015-04-17
  • 移动端网站优化推广的注意事项

    随着互联网的发展,移动互联网的概念已经越来越火,大街上、公交车上,人人抱着手机看已经成为一个很普遍的现象了,伴随着火爆的移动互联网而来的就是移动搜索的日益普及,百度都已经说自己移动搜索量超过PC端的搜索量了,这就相当于告诉各位站长朋友,不做移动端的网站……【查看全文

    阅读:723关键词: 移动端   网站优化   网站推广   日期:2016-03-27
  • 移动设备环境如何影响手机网站的设计?

    随着智能手机普及,大家上网的方式也从电脑端慢慢发展到了移动端,上网的第一选择变成了手机,不过由于移动端屏幕限制,所以做好手机网站的设计也是非常重要的。用户会在各种环境下使用移动设备,所以任何影响用户交互的因素都非常重要,最好能够知道你的用户是在什么环……【查看全文

    阅读:312关键词: 移动设备   手机网站   网站设计   日期:2017-01-02
  • 如何优化移动页面中的head标签代码更利于搜索引擎识别

    对于手机网站的首页或者频道首页的网页代码中的keywords、description最好加上与PC端有所区别的meta标签和关键词,在每个页面的关键字及描述像做传统PC端网站一样,做好针对性的填写工作,对搜索结果的展现(摘要)以及优化工作大有帮助,另外确保在手机网站或者PC端网站……【查看全文

    阅读:1287关键词: 页面优化   搜索引擎   日期:2015-08-08
  • 手机网站制作的常用方法及优化技巧

    手机网站是指用WML(无线标记语言)编写的专门用于手机浏览的网站,通常以文字信息和简单的图片信息为主。实际上,随着向手机智能化方向发展,安装了操作系统和浏览器的手机的功能和电脑是很相似,使用这种手机可以通过GPRS上网可浏览几乎所有的www网站,无论网站是不是专……【查看全文

    阅读:4227关键词: 手机网站   网站制作   优化方法   优化技巧   日期:2014-10-04
  • 搜索引擎喜欢什么样的移动页面优化方式?

    智能手机和平板电脑的普及,产生了越来越多的移动端客户流量,尽管基于手机和平板电脑的网络浏览器种类繁多,功能也都越来越完善,但限于较小的终端屏幕以及网络流量的问题,移动设备并不适合直接浏览各种基于桌面电脑登陆的网站,因此,做为网站站长来说,有必要为自己……【查看全文

    阅读:457关键词: 搜索引擎   页面优化   日期:2016-11-02
  • 百度转码后的手机网站页面是否有利于SEO优化

    互联网上融合了WEB和WAP两类网页资源,WEB网页资源占比远多于WAP网页,但目前绝大多数移动终端的浏览器都不能直接浏览WEB网页,因此,为确保WAP可用性,必须对WAP搜索结果中的WEB网页进行格式转换,转换为WAP网页,使其能在移动终端浏览器被浏览,由于大部分PC网页在中低端手……【查看全文

    阅读:4876关键词: 百度转码   手机网站   网站页面   seo优化   手机页面   seo   日期:2014-12-25
  • 移动端页面开发过程中经常碰到的一些问题

    对于前端开发者来说移动端存在着很多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题,那么今天我为大家分享移动端页面开发过程中的一些问题和解决问题的方法技巧。现在的前端开发者基本都要同时着手PC端页面和手机页面的开发工作,就目前的状况来看,手机页……【查看全文

    阅读:16379关键词: 移动端   日期:2016-05-20
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

如何利用极客精神优化网站的网络组件和代码 一个完整的企业网站首页应该具备什么因素?