如今，网站设计原则和最佳实践正变得众所周知。例如：在流程渠道中，进度状态应在其页面上随时可见。我们应该防止发生错误，但是当确实发生错误时，请提供足够的指导以帮助用户解决它们。

　　许多人认为，在针对移动平台进行设计时，适用于网站设计的基本原理和准则仍应适用。毕竟，Web设计已从基于文本的基本HTML页面演变为当今的Web标准。因此，我们可能期望遵循相同准则的移动网站可以轻松地与桌面网站用户实现相同的成功水平。

　　但是，移动网站的设计仍处于起步阶段。正如Jakob Nielsen在2009年对移动可用性所做的研究所指出的那样，使用移动设备访问移动网站时，用户的成功率平均仅为64%，与通过计算机访问网站的用户的平均成功率(80%)相比，这是非常低的。形式上的差异似乎对用户交互的成功率有巨大影响，因此也应影响我们设计移动网站的方式。

　　随着移动站点设计的不断发展，不可避免地会出现新的原则和最佳实践。作为实现这一发展的第一步，我研究了一些成功的移动网站与桌面网站之间的区别。根据对航空公司，电子商务，社交网络和娱乐以及旅游网站等多个垂直行业的分析，我确定了移动网站与台式机网站应该有的十种区别。

　　1.内容优先级

　　桌面网站通常包含广泛的内容，而移动网站通常仅包含最关键的功能和特性，尤其是那些利用时间和位置的功能。

　　与台式机的网站设计(通常为1024 x 768的屏幕分辨率)相比，为屏幕分辨率为320 x 480的智能手机设计网站的最大挑战是如何应对屏幕上的这种巨大差异大小不带牺牲用户体验。

　　桌面网站通常包含各种各样的内容，而移动网站通常仅包含最关键的功能和特性，尤其是那些利用时间和位置的功能，如图1和2所示的Orbitz桌面和移动Web页面示例。移动网站设计应优先考虑用户在使用移动设备查看网站时最可能需要的功能和内容。从内容开发的角度以及网站的体系结构和屏幕布局来看，洞悉客户需求的因素很多。

　　图1 — Orbitz桌面网站上的功能

　　Orbitz桌面网站上的功能

　　图2 — Orbitz移动网站上的功能

　　Orbitz移动网站上的功能

　　2.垂直导航而不是水平导航

　　在我分析的90%以上的移动网站上，垂直导航已取代了水平导航…。

　　如图3所示，Urban Outfitters网站上的水平导航是在桌面Web站点上组织和显示内容的一种广泛接受的方法。用户从左到右扫描导航栏，然后单击链接转到网站的其他部分。UIE博客文章“ 向水平导航的挑战 ”约书亚·波特(Joshua Porter)撰写的文章谈到了在顶部使用水平导航栏而不是将导航放在页面侧面的好处。当导航栏位于页面顶部时，用户通常可以更轻松地专注于页面内容，而不是视觉上将其吸引到侧面的导航栏上。但是，在我分析的90%以上的移动网站上，包括图4所示的Urban Outfitters移动网站，垂直导航已取代了水平导航。

　　图3 — Urban Outfitters桌面网站上的水平导航栏

　　Urban Outfitters桌面网站上的水平导航栏

　　图4 — Urban Outfitters移动网站上的垂直导航

　　Urban Outfitters移动网站上的垂直导航

　　3.条，标签和超文本

　　我们在移动页面上看到的超文本要少得多。…链接以条，选项卡和按钮的形式出现。

　　超文本是Internet和Web的签名组件，如图5所示。但是，我们在移动页面上看到的超文本要少得多。并不是页面不再链接，而是链接以条，选项卡和按钮的形式出现，如图6所示。其原因是针对用户对其移动设备的操作进行了移动设计的优化。手指。

　　当用户在计算机上使用鼠标单击链接时，超文本是理想的选择，但是用手指在触摸屏移动设备上点击链接并不容易。用户可以很容易地激活他们不希望点击的链接，并意外登陆到不需要的页面上。这可能会导致不良的用户体验。菲茨定律告诉我们，获取目标区域所需的时间是到目标的距离和大小的函数。条，选项卡或按钮等较大的对象使用户可以更精确地点击。重要的是要使移动网站上的可操作对象变大并易于注意。

　　图5 —带有链接的Kayak网页

　　带有链接的皮划艇网页

　　图6 —没有链接的皮划艇移动页面

　　皮划艇移动页面无链接

　　4.文字和图形

　　设计师经常从移动网站的设计中删除促销或营销图形。

　　如图7所示，在Web页面上，我们可以将图形用于许多不同的目的，如促销，营销或导航，但是设计人员通常会从移动网站的设计中删除促销或营销图形。在图8中。公司徽标保留用于导航目的。用户可以点击它以转到主页。从许多图形过渡到很少的图形有多种原因。原因之一是某些移动设备不支持我们传统上用于桌面网站设计的软件。其他原因包括移动设备的屏幕尺寸小和显示内容的可用屏幕空间有限，以及移动设备上的下载速度较慢。

　　图7 —带有图形的Dell网页

　　带有图形的戴尔网页

　　图8 —图形最少的戴尔移动页面

　　戴尔移动页面图形最少

　　5.上下文和全局导航

　　虽然全局导航在移动站点上很常见，但上下文导航却不常见。

　　桌面网站通常使用各种形式的导航，如图9所示的“百思买”网站。其中一些是全局的，在整个网站上保持一致，而另一些则是上下文关联的，并根据用户在网站上的位置而变化。但是，尽管全局导航在移动站点上很常见，但上下文导航却不常见。图10所示的Best Buy移动网站提供了典型的移动网站导航示例。

　　减少移动站点上的全局和上下文导航的主要原因是移动设备上的屏幕空间有限。但是，缺少全局和上下文导航可能会导致用户在茫茫荒野中发现自己，却不知道自己在哪里。因此，在组织移动网站上的内容时，降低层次结构至关重要，这样用户就不必为了进行工作而深入研究。他们应该能够在迷路之前实现自己想要实现的目标。

　　图9 —百思买网站上的多种类型的上下文导航

　　百思买网站上的多种类型的上下文导航

　　图10 —百思买移动网站上没有上下文导航

　　百思买移动网站上没有上下文导航

　　6.页脚

　　移动网站使用页脚，可以访问用户经常在主页上查找的内容，从而将其链接保持在最低限度，但它们不使用包含快速链接的页脚。

　　桌面网站上通常使用两种类型的页脚。一种类型的页脚提供了指向用户可能希望在网站主页上看到的内容的链接，但其优先级低于主页上的主要内容，例如Careers或Sitemap。另一种类型的页脚提供了快速链接，这些链接通常指向用户通常需要查看的内容。如图11所示，这些快速链接通常被分组在页脚的列表中，因此用户可以在整个站点上对其进行访问。移动站点使用页脚，该页脚提供对用户经常在主页上查找的内容的访问，从而将其链接保持在最小限度，如图12所示，但它们不使用包含快速链接的页脚。

　　图11 — Dell网站上的页脚

　　Dell网站上的页脚

　　图12 — Dell移动站点上的最小页脚

　　戴尔移动网站上的页脚最小

　　7.面包屑

　　面包屑很少出现在移动网站上，因此通常没有必要。

　　在桌面Web站点上，面包屑是一种使用户放心的正确方法，使他们位于正确的页面上，并允许他们在导航路径上回溯，如图13所示。它们对于大型的层次结构Web站点有意义，这些站点上有许多不同的内容层次结构中的多个级别。但是，面包屑很少出现在移动网站上，因此通常没有必要。空间有限是面包屑在移动网站上不常见的原因之一。但是主要因素是，移动网站的设计避免了用户不得不深入层次结构来查找他们想要的内容。同样，用户应该能够在开始迷失方向之前在网站上实现他们想要的目标。

　　图13 —亚马逊网站上的面包屑

　　亚马逊网站上的面包屑

　　8.进度指示器

　　当用户必须完成多个步骤才能完成一个过程时……通常在页面顶部会有一个进度指示器，以指导用户完成该过程。此类进度指示器不会显示在移动网站上。

　　在桌面网站上，当用户必须逐步完成多个步骤以完成一个流程时(无论是购买商品，如图14所示，还是填写一份很长的注册表格)，页面顶部通常都有一个进度指示器在整个过程中引导用户。此类进度指示器不会显示在移动网站上。同样，空间有限是主要原因。

　　使用替代方法使用户无需进度指示器即可了解其进度。例如，不要使用带有隐式操作的按钮(例如Next或Continue)，而是使用带有显式标签的按钮来明确告知用户下一步是什么，例如，继续进行结帐或指定Shipping&Payment。用户仍然会收到有关他们在流程中的位置以及下一步的期望的信息。

　　图14 — Amazon网站上的进度指示器

　　Amazon网站上的进度指示器

　　9.与电话功能集成

　　尽管移动平台在设计和内容上有很多限制，但它们也为传统网站无法提供的新机遇提供了机会。

　　智能手机是通信设备，因此打电话是最基本的功能。尽管移动平台在设计和内容上有很多限制，但它们也为传统网站无法提供的新机遇提供了机会。例如，与电话功能(如直接呼叫和短信)的集成度更高，这使移动站点可以方便地通过电话订购产品(如图15所示)或发送促销短信。通常，移动网站允许用户选择一个电话号码，然后致电或发短信给该号码-无需键入该号码。

　　图15 —在Best Buy移动网站上通过电话购物

　　在Best Buy移动网站上通过电话购物

　　10.本地化和个性化搜索

　　移动站点独有的另一个机会领域是地理位置服务或支持的使用。尽管这项技术已经使用了一段时间，但仅在最近五年中它才在消费者市场上获得关注。现在，移动应用程序和网站通过将其集成到诸如移动搜索之类的增值服务中来利用此功能已变得司空见惯。

　　许多移动设备可以自动检测用户的位置并为他们提供本地搜索结果，例如在Best Buy上的商店位置搜索，Yelp上的餐馆搜索以及Kayak上的机场建议，如图16所示。此功能为企业提供了强大的机会根据某人与他们的营业地点的距离和他们的直接意图来推广他们的产品或服务。

　　图16 —自动检测地理位置以建议皮划艇上的一个机场

　　自动检测地理位置，建议在皮划艇上建一个机场

　　综上所述

　　根据我公司的研究，该研究考察了来自各个行业的许多移动网站，我发现了移动网站与桌面网站不同的10种方式：

　　与通常包含大量内容和信息的桌面网站相比，移动网站通常仅包含最关键的和特定于时间和位置的功能。

　　在桌面网站上，页面顶部的水平导航是一种广泛接受的结构化和呈现网站内容的方法。但是，在我们分析的90%以上的移动网站上，垂直导航取代了水平导航。

　　超文本是Internet和Web的签名组件。但是，在移动网站上，页面上很少或没有超文本。

　　在桌面网站上，设计人员将图形用于许多不同目的，包括促进，营销和导航。移动网站避免使用促销和营销图形，并使用最少的图形进行导航。

　　桌面网站上提供了各种类型的导航。有些是全球性的，因此在整个站点上是一致的，而另一些是上下文的，并且根据用户在站点上的位置而变化。相反，尽管大多数移动站点都具有全局导航，但是上下文导航在移动站点上很少见。

　　在桌面网站上，页脚通常提供指向用户可能希望在网站主页上看到的内容的链接，或者提供整个网站上可用的快速链接，以提供对用户经常需要的内容的访问。移动站点采用最小形式的第一类页脚，但不使用包含快速链接的页脚。

　　在桌面网站上，面包屑使用户确信他们在正确的页面上，并让他们在导航路径上回溯。面包屑在移动网站上很少见，由于移动网站的结构相对平坦，因此实际上并不是必需的。

　　桌面网站上的流程渠道经常使用每页顶部的进度指示器来指导用户完成流程。此类进度指示器不会显示在移动网站上。

　　移动网站可以更好地与电话功能集成，并提供营销机会，例如通过电话促进直接订购或发送促销短信。

　　移动网站可以利用自动检测用户要在哪里显示本地搜索结果的技术。当用户设置他们的首选项或个人资料时，个性化的搜索结果对他们来说变得更加相关和有价值。

延伸阅读

• 小程序名字修改的技巧规则

  我们都知道名字的意义，名称作为陌生人最先的认知，在物质喧嚣的时代，如何从众多名称中脱颖而出给陌人生留下一个良好且深刻的印象，这至关重要。随着小程序开发越来越多，运营者在给小程序...

• 小程序商城怎么运营？

  小程序商城在当今电商领域日益受到瞩目，成功运营这样一个平台对于每个经营者而言都至关重要。那么，我们该如何着手呢?一、确立品牌方向首先，我们要清晰地定义自己的品牌在市场中的位置。...

• 自建商城运营秘籍，吸引顾客有妙招！

  新建网站的运营与维护之道一、明确核心产品的市场定位要让新建的商城网站在竞争激烈的市场中脱颖而出，关键在于精准地定位核心产品。选择具有市场潜力的热销产品，并突出其独特之处，是吸引...

• 小程序商城推广完全指南

  随着小程序商城的日益兴起，如何在竞争激烈的市场中脱颖而出成为了关键。小程序商城的推广方式多种多样，以下是一些有效的策略：1.公众号与小程序的结合：商家可以将小程序与公众号绑定，...

• 推广引流方法有哪些，裂变营销什么意思

  推广引流方法有哪些，裂变营销什么意思除了各公域平台，另一个比较重要的引流场景，就是在微信中。一方面做信社交性强，对于身边用友的链接更紧密，微信上也会以群、公众号的形式聚集一群有...