专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

移动端手机网站页面制作的25个设计要点

来源:小易整编  作者:小易  发布时间:2022-10-14 03:45
摘要:对于移动用户来说,往往很容易忘记菜单选项,因此,你应该把自己最关键的“行为召唤”内容放置在一个醒目的位置上,这样用户就能轻松看到。所以,你需要让最重要的“行为召唤”内容占据到网站的主体部分上,用户就能...

如今,随着智能手机的普及,手机正迅速的成为人们最常用的上网方式,所以,移动网站也成为广大站长和设计师的首先目标。近日,来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议,他们每天都会让用户访问100个不同的移动网站,这些网站涉及的行业范围非常广泛(比如:零售行业,保险行业,或是新闻行业)。参与测试的用户会把自己的使用感觉实时告诉研究人员。

1-140505152UI02

对于这次的测试研究,谷歌公司的研究人员针对移动网站总结出了25个网页制作设计要点,在此,我也借助的平台跟大家分享一些,希望能对大家有所帮助。

1、“行为召唤”内容要靠前或居中

1-140505141U4603

对于移动用户来说,往往很容易忘记菜单选项,因此,你应该把自己最关键的“行为召唤”内容放置在一个醒目的位置上,这样用户就能轻松看到。所以,你需要让最重要的“行为召唤”内容占据到网站的主体部分上,用户就能够快速完成相关任务,另外,如果要继续执行下一个任务,你可以利用菜单选项标明,也可以把下个任务紧跟在第一个任务完成之后。在移动端,你的行为召唤内容应该和桌面终端不一样,所以你必须要对号入座,因地制宜。

提示:把你最重要的“行为召唤”内容放置在网站最突出的位置上面。

2、让菜单看起来既简洁又亲切

1-140505142050241

一个范围较广的菜单可能非常适用于桌面网站,但是移动用户可能没有足够的耐心来回滑动自己的手机,他们不喜欢在查看一长串菜单选项之后才找到自己想要的东西。那么,你需要想想看,如何在最少的菜单里面放上自己最需要的功能选项呢?举个例子,有一家大型零售商店,他们在自己的移动网站上优化产品类别菜单,和桌面菜单完全不同,让移动终端的菜单选项为用户提供了一个更加简短,更加清晰的产品列表。

提示:一个简短的菜单,搭配上清晰的类别选项,可以让移动访问者更加清晰的进行站点导航,不知道从何下手的博友可查看一下的《策划一个具有高质量度移动站点的方法步骤》相关介绍。

3、要让用户便于回到主页

1-140505142116311

当移动用户在你的网站上面导航浏览时,他们会希望可以快速回到之前的主页上面。在研究中发现,用户往往喜欢点击页面上的公司Logo,因为他们觉得这种方式可以直接回到主页上去,所以你的网站必须也要支持这个功能,否则,如果用户点击了Logo,却毫无反应,他们肯定会觉得非常失望。

提示:把网站上的公司Logo优化成一个导航按键,当用户点击之后可以导航回到主页。

4、别让促销广告抢了你网站的风头

1-140505143101432

促销活动和广告会影响你的网站内容,也会影响用户在网站上的体验。谷歌的研究人员让用户访问一家公司的移动网站,上面有一个巨大的横幅广告,这些用户无一不被这个广告吸引,而无心注意广告下面的导航按键,而这个导航按键反而能够为用户提供更多关于该公司的内容信息。

提示:确保促销广告不会影响网页的导航功能(具体可查看的《如何策划网站才能激发用户的购买欲望》相关介绍),而且要把广告和“行为召唤”内容彻底区分开。

5、保持搜索功能可见

1-14050514312OO

如果用户需要寻找一些特殊信息,那么他们就会使用网站的搜索功能,因此,搜索必须是移动网站上最重要的功能之一,一般而言,用户希望能够在网站页面的顶部使用文本搜索功能,因为页面顶部位置最容易让人发现。

提示:把网站的搜索功能放在主页的顶部,可以用一个文本框显示搜索功能。

6、确保网站搜索结果符合用户预期

1-140505143156352

实际上,用户似乎并不讨厌一页一页的翻阅搜索结果,但是他们更加看重网站返回的搜索结果是否符合他们的预期,因此,你至少需要确保自己搜索结果的第一个显示页面能够精准的满足用户搜索要求。在移动终端上面,因为屏幕非常小,所以你需要提供一些智能搜索功能,比如帮助用户自动拼写,或是修正用户的错误拼写,等等。

提示:确保你的网站搜索功能可以返回有效的结果,另外需要完善智能搜索,提供自动拼写或错误拼写纠正等功能。

7、使用过滤功能提升网站搜索易用性

1-140505143156352

用户会使用搜索过滤功能,这样可以缩小搜索范围,返回的搜索结果也更精准。不过,你需要确保用户使用过滤搜索之后,不会一无所获。网站应该让用户知道一个过滤搜索功能可能会返回多少搜索结果,这样可以帮助用户避免一些问题。

提示:为用户提供过滤搜索服务,但是要确保不会返回空结果。

8、指导用户去访问较好的网站搜索结果

1-140505143245492

对于一个网站而言,用户有各种各样的类型,所以,在用户进行搜索的时候,可以先询问几个相关问题,这样可以确保他们的搜索结果与预期一致。举个例子,一家大型鞋子零售商在其移动网站上面提供了搜索服务,但是搜索前会询问用户的性别,以及脚的尺寸等问题。

提示:如果你希望缩小搜索返回结果的范围,那么可以提前询问用户一些相关问题,这样确保用户能看到符合自己预期的搜索结果。

9、不要一上来就让用户在网站上注册

1-140505143310256

如果你的移动网站一上来就让用户注册,那么体验一定非常糟糕。的研究人员发现,最让用户难以接受的就是必须注册之后才能访问网站内容。实际上,用户希望在提交个人信息之前就可以先浏览一下网站内容,至少需要了解一下这个网站能够为自己提供些什么东西。

提示:不要强迫用户注册一个账号,允许任何访问者浏览你的网站

10、让用户能以访客的身份在你的网站上购物

1-1405051433363K

即便用户想在你的零售网站上购买商品,但其实,他们仍然不希望注册一个账户。用户会觉得,如果能够以访客的身份购买商品,那么真的是非常方便,简单,而且快捷。人们不太喜欢在网站购物时强制注册一个账号,而且,许多网站并没有告知用户注册账号对他们来说有什么好处。

提示:你可以在移动网站上面提供一个选项,让用户能以访客的身份进行购物。另外,如果你需要用户在网站上注册一个账号,那么可以明确的告诉他们注册账号会有什么好处。

11、使用已有信息,最大程度为用户提供便利

1-140505143403245

对于那些网站注册用户而言,你需要记住他们的偏好。而对于新用户而言,你可以提供一个他们习惯使用的第三方支付服务。马海祥对一些零售网站进行了调研,他们发现许多网站都提供了第三方支付服务,避免了最后买单时的不便,另外移动网站还可以根据注册用户的已有信息,提供预填物流地址信息功能。

提示:要利用好你手中掌握的信息,尽可能使用第三方支付服务,尽可能为用户提供便利

12、对于复杂任务,使用“点击拨打电话”功能

1-140505143403245

如果用户需要进入一个较为复杂或是较为敏感的任务时,你需要提供一个“点击拨打电话”的服务功能。举个例子,有一家提供金融服务的公司,他们的移动网站上就提供了这项功能,如果用户不想在移动端填写复杂的表格,可以立刻用自己的移动手机拨打电话,由人工坐席受理业务。

提示:当用户需要提供复杂信息时,你可以在网站突出位置上提供一个“点击拨打电话”功能,这样可以避免客户从“漏斗”里掉下,造成客户流失。

13、当用户更换不同的移动设备时,确保能够便捷的完成交易

1-140505143403245

用户可能会在不同的移动设备上访问你的移动网站,因为你需要提供一个简单的方法,让他们在不同设备上分享信息。比如一家招聘网站,当用户完成应聘之后,他们会发生一封电子邮件,这样用户在其他设备上也能访问自己的网站,这个我曾在的《互联网产品PC端转型移动端的六大要点》一文中跟大家做过详细的介绍,有兴趣的朋友可以看下。

提示:移动用户很可能会更换不同的设备,因此你可以通过社交分享,电子邮件,或是“存入购物车”等方法,让用户能够继续自己在网站上的体验。

14、信息输入时做到流线作业

1-14050514352I52

如果网站能够预先判断出一些信息,用户体验就会非常棒。比如预先判断出用户所在的邮政编码,或是出生日期等等。在输入一些信息时,如果能够做到自动输入,那么体验将会更加流畅。相比而言,如果网站要求用户在小表格框内反复输入一些信息,让他们在手机键盘上频繁切换数字/字母模式,体验就会非常糟糕。

提示:如果你的网站需要输入数字时,可以为用户提供一个专门的数字键盘,当用户点击输入框时,自动弹出这个数字键盘。

15、为每一个任务选择最简单的输入方法

1-140505143551593

如果用户需要在有限的选择项内做选择时,最简单的方式就是点击选择,而不是使用文本输入,或是在下拉框内选择。如果要在许多选项中选择一个项目,传统的下拉框是最直接的。无论什么任务,你需要选择最简单的输入方法。

提示:如果需要在移动网站的表格上进行输入操作,那么可以选择下拉框和切换功能,在任何时候都要确保操作便于点击。

16、在需要选择日期的时候,提供一个可视化日历

1-140505143614Y1

当用户在移动网站上预定航班时,很难确定“下周的某一天”是几月几号,所以你需要提供一个可视化日历供用户勾选日期。这样用户就不需要离开你的网站,然后在打开手机上的日历App应用了。在选择开始和结束日期时,可以提供一个清晰的标签,以免用户把日期搞混淆。

提示:当需要选择输入日期时,你需要提供一个可视化日历,而且要有一个清晰的日期结构,这样可以保证用户不会中断使用体验。

17、通过标签和实时确认,第一时间解决输入错误

1-1405051436353U

在你的表格框内,要有提示标签功能,而且在用户实际输入时,可以看见必要且准确的提示信息。马海祥就遇到过这样一个例子,用户曾经在一个电子邮件地址栏里面输入了自己的家庭住址,因为当时这一栏内的提示信息并不明确,只有一个“地址”标签。把提示信息放在输入框内也会存在问题,因为当用户点击准备输入时,提示信息就会消失掉,因此需要利用标签做提示。另外,如果用户在输入过程中,需要做到实时确认,否则一旦出错,就会反复提交,引起用户反感。

提示:使用清晰可见的标签,让用户知道自己的需要,实时验证输入错误,在最后正式提交信息之前帮助用户纠正。

18、设计高效的表格

1-140505143AJ02

你要确保自己设计的表格不会出现重复操作,只提供必输信息即可,另外你还需要利用自动填写功能。当用户在填写表格的时候,最好在屏幕顶部显示一个进度条,这样人们就可以知道自己的进展。如果表格过于复杂则会让人反感,相对而言,一个简单直接的表格会让人觉得很舒服。如果能搭配上自动填写功能,比如预输入用户的姓名和邮政编码,效果则会更好。



本文地址:营销网站建设频道 https://www.hkm168.com/web-yxwz/699094.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们处理,谢谢!


营销网站建设
小编:小易整编
相关文章相关阅读
  • 如何使用Vue技术进行移动端开发

    如何使用Vue技术进行移动端开发

    如何使用Vue技术进行移动端开发随着移动互联网的迅猛发展,移动端应用的开发变得越来越重要。Vue.js作为一款轻量级、高性能的前端框架,被广泛应用于移动端开发中。本文将介绍如何使用Vue技术进行移动端开发,并给出具体的代码示例。一、准备工作...

  • 什么是结构化程序设计

    什么是结构化程序设计

    结构化程序设计是一种使程序更加清晰、易于理解和维护的编程方法论。通过将程序划分为不同的模块,并使用控制结构来组织这些模块,结构化程序设计使程序的开发和维护更加高效和可靠,无论是初学者还是有经验的开发者,都应该掌握结构化程序设计的基本原理和技...

  • javascript中的设计模式有哪些

    javascript中的设计模式有哪些

    javascript中的设计模式有:单例模式、策略模式、代理模式、迭代器模式、“发布-订阅”模式、命令模式、组合模式、模板方法模式、享元模式、职责链模式、中介者模式、装饰者模式、状态模式、适配器模式、外观模式等。本教程操作环境:window...

  • pc端和移动端什么意思?

    pc端和移动端什么意思?

    pc端的意思是指个人计算机或者个人电脑,pc是一个具有广泛含义的词语,也是电脑的统称;移动端的意思是指通过无线网络技术上网接入互联网的终端设备,其主要功能就是移动上网,因此其十分依赖各种网络。pc端和移动端的意思:PC端:PC的英文全称是:...

  • 在线投票系统的设计与实现

    在线投票系统的设计与实现

    在线投票系统的设计与实现随着互联网的不断发展,在线投票系统成为了一种非常方便和高效的方式来进行民意调查和选举。本文将介绍在线投票系统的设计和实现,并附带一些代码示例。一、系统设计功能需求分析在线投票系统主要具备以下功能:用户注册与登录:用户...

  • UI设计主要学什么?

    UI设计主要学什么?

    ui设计是指对软件的人机交互、操作逻辑、界面美观的整体设计;ui设计中文名字叫:用户界面设计。ui设计作为时下热门高薪职业之一,其发展前景不言而喻,应用领域非常广泛,那么ui设计都需要学习什么呢?下面本篇文章就来给大家介绍一下,希望对你们有...

  • ux设计是什么

    ux设计是什么

    ux,指的是用户体验。一般而言国内ux设计师也称为交互设计师或ue设计师。ux设计师是设计人与信息产品的流程和关系,归根结底都要研究人、事、物的联系,它是一个囊括计算机工程、心理学、设计的交叉学科。本教程操作环境:windows7系统、De...

  • Java 中的架构模式和领域驱动设计技术

    Java 中的架构模式和领域驱动设计技术

    java是当前使用最广泛的编程语言之一,它不仅具有面向对象的特性,同时也提供了许多强大的架构模式和设计技术,其中领域驱动设计(domain-drivendesign,ddd)是一个非常流行的技术,并且在实际开发中有广泛的应用。本文将...

  • 周排行
  • 月排行
  • 年排行